Portland WTC Kiosk

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

Additional add-ons

Several additional features were requested and implemented post-deployment.

In the summer of 2017, a very rare solar eclipse was visible across much of the United States. WTC management wanted something to highlight special events of interest. I created an overlay component that displays specified content over the standard Kiosk display between specified dates and times. The overlay is tied into the idle timeout to be showing when there is no interaction with the displays. The overlay content 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 sidebar 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 recent data from the remote servers locally, so the cached data loads without delays.

Technologies

The project was implemented using technologies typically used on complex websites, 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 timeout 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 structures external surface, and the screens are about ¼ inch behind the glass. The glass has an inductive touch sensor film applied to the back surface to allow public interaction with the displays. The touch film technology is from Touchfoil.

Raspberry PI Retrofit

Retrofit of a legacy kiosk for the first floor and parking entrance. The previous solution could not integrate with the new Web technology-based solution. Our solution was to swap out the legacy Windows PC with a Raspberry IP configured to run Chrome in full-screen mode.

Drupal

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. Standard website building tools are used in the administrative interface. Custom theming and menus are provided to make the customer’s experience managing the system as user-friendly as possible.

Implementation details

The prototypes of the Kiosk front-end were static HTML files. Once the basic framework was functional, it was integrated into a Drupal module. Drupal provides dynamic content searching via Views configured to deliver results in JSON format, and the content documents can return JSON formatted data enabled. A necessary configuration exists in the module for easy reinstallation.

jQuery and Web Bus

jQuery was selected for the primary support library primarily because of the plug-ins 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 throughout the Kiosk. For full textual searching of the directory, an on-screen keyboard plug-in.

Each display section 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 coordinate with existing via appropriate event listeners automatically. For example, the “Accessibility” button sends an event that the various display sections are listening for to swap layout classes to present the accessibility-optimized interface. Likewise, the areas with Cycle 2 slide-shows are listening for view change events and pause the slide-shows when they are hidden from view.