Interactive tenant directory, featured articles and additional useful information available on a multiple screen built in touch display array. Project by SRM Marketing and Architecture, completed and deployed in late 2016. Graphic design, mock-ups and front-end polish by the talented Adam Volkman, portfolio presentation.

Additional add-ons:

After initial development several additional features where requested and implemented.

In the summer of 2017 a very rare solar eclipse was visible across much of the United States and WTC management wanted something to highlight special events of interest. I created an overlay component that displays specified content over the normal Kiosk display between specified dates and times. The overlay is tied into the idle time-out to be showing when there is no interaction with the display. The content of the overlay can be entered like any other page or load remote content in an iframe, for example the embeddable video stream from NASA TV.

I created a custom CSS driven animation depicting the eclipse, bit of an astronomy nerd myself.

In the fall of 2017 the customer requested a more comprehensive display tracking alternate transportation options beyond the TriMet side-bar in the initial design. The transportation options overlay provides detailed data for TriMet bus and commuter train service, Uber and Lyft ride sharing and Social Bikes automated bicycle rentals. The back-end component collates the most resent data from the remote servers locally so the cached data loads without any delays.

Technologies:

The project was implemented using technologies typically used on complex web sites, Google Chrome running in full screen mode, the Drupal 8 CMS providing data management services, and jQuery with additional support libraries driving the front end display.

Drupal 8 in Headless mode and additional modules:

• REST UI: Manage Headless mode APIs.
• SuperFish menus for creating easy administrative menus for content managers.
• Google Material Theme for an esthetically pleasing experience on the administrative interface.

jQuery and additional support modules:

• Cycle 2 for slide-show functionality.
• Idle time-out for resetting display on inactivity.
• On-screen keyboard.
• Custom functions for centered scrolling and optimized content packing.
• Web Bus framework to manage on-page components and component interactions.

Hardware:

The displays are hosted in a built in installation in the lobby of WTC Portland Building One. A plate-glass panel is the external surface of the installation and the screens are about ¼ inch behind the glass. The glass has in inductive touch sensor film applied to the back surface to allow public interaction with the displays. The touch film technology is from Touchfoil.

Drupal 8:

The latest version of the sophisticated Drupal content management system features the ability to make all content and information filtering functionality available as a REST/JSON based web service. As a sophisticated content management platform Drupal provides an excellent interface for Trade Center staff to manage the tenant directory, articles and other information presented through the kiosk. All standard web site building tools can be used in the administrative interface so custom theming and menus are provided to make the customer’s experience managing the system as user friendly as possible.

Implementation details:

Earliest prototypes of the Kiosk front-end where static HTML files. Once the basic framework was functional it was integrated into a Drupal module. Drupal provides dynamic searching of the content via Views configured to deliver results in JSON format and the content documents have the option to return JSON formatted data enabled.

After setting up the Configuration Development Module was enabled to export all the Content Type, Field, Taxonomy and View definitions to YAML files that are bundled in the Kiosk module to recreate the constructs the Kiosk depends on when the module is enabled.

jQuery and Web Bus:

jQuery was selected for the primary support library primarily because of the plug-ins that where to be leveraged for front end effects. The “Idle” plug-in provides a screen-saver like timeout on inactivity to force the display back to defaults when no one is interacting with it. “Cycle 2” provides feature rich support for rotating displays used through out the Kiosk. For full textual searching of the directory an on-screen keyboard plug-in.

Each section of the display is managed by a modular controller script initialized and orchestrated via the Web Bus framework I have developed. This event managing system allows for additional functional modules to automatically coordinate with existing via appropriate event listeners. For example the “Accessibility” button sends an event that the various sections of the display are listening for to swap layout classes to present the accessibility optimized interface. Likewise the sections with Cycle 2 slide-shows are listening for view change events and pause the slide-shows when they are hidden from view.

Summary:

This is one of the most impressive and dare I say fun projects I have completed in my web software development career. I continue to work with the designers and other creatives who contributed to the project. All the coding techniques I used are modular and can be easily reconfigured into new projects. I am available to construct similar displays to enhance any professional space. Contact me to discuss!