Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Virtual Memorial

Search Image

Table of Contents


The Virtual Memorial is an online memorial meant to complement the physical location located in at The Avenue of Flags in Hermitage, Pennsylvania. It serves as a way for the community to share the memorial with the surrounding region & country. Also, family and friends are able to share stories with the community about the men and women who have served and names are on the memorial.

Viewer start on the intro page where a brief history about the memorial is displayed. From there users have access to all of the main option of the application. Tour will enable once the WebGL assets are ready. Info & stories will become available with the viewers first search. To start, select the "Search" option from the top menu.

Tour Image


Viewers can search by last, first, or both names. The application expects the last name first when combining the two. Expanded search functionality will allow for more flexibility later. When search results are provided, three options below are provided.

Search Image


Selecting "Info" in the search results across from the name will provide their service information. At any point a viewer can go back to the search result using the main menu. The Info button in the main menu is also enabled now, allowing viewers to return to the last viewed veterans service information.

Search Image


Users can also view or submit text stories submitted by the community. As with the service information, simply click on the "Stories" button in the search results. All of the available stories for the veteran will then be displayed. At any point viewers can use the "Search" button in the main menu to view stories of other veterans. Also, the "Stories" button has now become enabled allowing the viewer to return to the stories of the last viewed veteran.

Search Image


The Tour button & Search/Memorial buttons become enabled once all WebGL assets have bee loaded in the background. Plans to put in place a loading bar to help inform the viewer of the progress are planned.

The tour supports two main features. First is a tour of the memorial grounds. The viewer is navigated across the location via a camera fly-through. At any point the viewer can play/pause, skip forward or backwards, or toggle the camera to another camera which is focused on the memorial and is also used for viewing veteran names on the memorial. Future plans will allow users to pause the video and then click & drag to rotate the camera from its current paused position, then resume the tour when ready.

Search Image

Selecting the "Memorial" button from the veteran search window will move the application back to the WebGL tour. All of the names that are displayed with the selected veteran are displayed on the panel across the panel. Also, the selected veterans name is highlighted to help the viewers quickly find the veteran they searched for. Hitting the camera toggle button will switch the view between the tour animation and the current panel being displayed in the scene. At any point viewers can return to search to view a new name on the memorial.

Search Image



The front-end is built using current web standards for HTML, CSS3, And Javascript ES5. Future version will take advantage of WebGL 1/2.0. Allowing for dynamic viewing of the memorial and searching for name on the 3d representation of the memorial.

User can also create stories to share with the community. This is currently limited to text but future plans aim to bring picture, audio, and video support.


The back-end is built using Node and Express.js, with the application deployed using the Heroku service.


The WebGL portion of this application will occur after the initial release of version 1.0. The goal is to use either 1/2.0 to permit users to view names on the memorial in 3d which also matches the location on site. Along with name searching a virtual tour animation will be created and allow for limited user navigation of the tour.


  • Play controls are (visually) enabled when selecting to view a name on the memorial.



  • 3D/WebGL: Cleaned up logic from yesterdays webgl/ui revision.


  • 3D/WebGL: Height is now based off container width / ratio.
  • UI/Main: JS toggles container dimensions for Tour vs rest of application.


  • UI/Main: Tour btn disabled till all WebGL tour assets are loaded.
  • UI/Main: Removed "Coming Soon" & used Story assets. App now focuses purely on text stories.
  • UI/Search: View on memorial added.
  • UI/Search: Disabled viewing of memorial or tour till WebGL assets are ready
  • UI/Search: Button faded till mouse-over to help with "busy" UI
  • Logic/Search: Logic to move lowercase lettering to match with MongoDB/search.
  • 3D/WebGL: Tour added.
  • 3D/WebGL: Tour controls for play/pause, forward, backward, & toggle camera added.
  • 3D/WebGL:Name viewing name shows all names on panel & highlights the selected veterans name.
  • Misc: Updated readme text and graphics.


  • Search: Backend feature to auto-cap name entered to match with the Mongo keys.
  • Design: #dynamic-container border-radius set to 3pv. - Match WOT Main page theme.
  • UI/Main: Layout width locked in at 1K. - Match WOT Main page theme.
  • UI/Main: Banner set left. - Match WOT Main page theme.
  • UI/Main: Static menu set inline with banner. - Match WOT Main page theme.
  • UI/Main: Red background removed. - Match WOT Main page theme.
  • UI/Intro: Scrolls for "Intro" screen to allow for full text.
  • UI/Main: Decreased static menu buttons & text.
  • UI/Main: Increased app height.
  • UI/Search: Search field fixed at top.
  • UI/Stories: Adjust stories menu padding & margin.
  • UI/Stories: Add Story & Login are now fixed at the top of their box.
  • UI/Login: Adjust width of input & button elements to match in width.
  • UI/Login: Adjusted login screen to fix clipping
  • UI/RWD: Series of breakpoints adjusted for mobile screens.
  • 3D/WebGL: Test scene along with texture atlas are in place with limited mobile testing. Will replace video solution in near future.


  • UI/Intro: Added intro screen to provide info on the memorial & "how-to".
  • UI/Search: Simplified search info "how-to".
  • UI/Search: Adjusted "Information" text offset to icon.
  • UI/Stories: Adjusted padding for story text.
  • UI/Stories: Adjusted line height for story text.
  • UI/Stories: Simplified coming soon page for stories section and reduced font size.
  • UI/Stories: Updated stories artwork.


  • UI: Added margin-top for app container.
  • UI: Reduced button scaling transition to prevent clipping.
  • Vid: Added "?rel=0", disabling video suggestions.
  • Vid: Added "loop=1", enabling video to loop.


  • Release Candidate
You can’t perform that action at this time.