An Interactive Museum Display Kiosk 

At the Revs Institute, we have a display case with automobile "mascots" which were historically used as decorative radiator caps up until the late 1930's. These are rare artifacts and were created by sculptors and artisans, often as one-offs for wealthy car owners. 

We had a pair of iPad tablets mounted in front of the case which allowed visitors to select an individual mascot by its number in the case and view information about the mascot. The users' view included videos of the artifacts rotating through 360 degrees. Unfortunately, the custom application which had been created for the Institute was failing and the original vendor wanted a significant amount of money to redo the application. 

We looked at ways of recreating the user experience and possibly improving it by simplifying the interface. We decided to take a "DIY" approach which would result in minimal cost outlay for the museum and put maintenance of the app under our control. 

We set out to find a software tool that would allow us to build an interactive application easily. We settled on a software tool called Hype from Tumult Inc. Hype is an HTML5 builder that allows the creation of interactive, animated browser-based applications. These can run on any device with an HTML5-capable browser, including portable devices. It can also be used to create interactive web pages if hosted on a server. 

Currently, the creation of content with Hype can only be done on Apple macOS devices. If your institution is a Windows-only shop, we would recommend purchasing a used MacBook or Mac Mini for this application if cost is an issue. Hype licenses are reasonable and very cost-effective - see their website for pricing. Also, they offer discounts for non-profits if requested. 

A detailed explanation of using Hype is out of scope here, but the basic idea is that each web page view is referred to as a "scene". You can create navigation controls that allow users to interact with your app and display almost any kind of content. In our case, this was a mix of videos and descriptive text. You can drag and drop content onto a scene, which makes adding videos very simple. In addition, Hype has the concept of timelines, which you can use to control animations and the timing of events. We used only a fraction of Hype's capabilities for our application and suggest viewing their gallery for more ideas. 

We decided to make our application completely self-contained, not relying on an external resource such as a server or a network connection. This results in improved reliability. Of course, we do have the tablets connected via WiFi for maintenance purposes, but the application does not require it since the files are accessed locally from onboard storage. 

A Hype project results in a single master HTML file and a folder of resources, including all your content and a javascript file which is automatically generated by Hype. It is not necessary to understand HTML or JavaScript to use Hype, but you can customize the files if you wish. To deploy the application to the tablets, the main HTML file, and the associated resource directory were copied over the network via WiFi. The Chrome browser was then configured to always load the main HTML file upon startup. In addition, we configured Chrome to open the app in full-screen kiosk mode without any menu bars or controls and with right-click (long touch) and swipe gestures disabled. 

The tablet chosen was the 10" Microsoft Surface Go 2 running Windows 10 since they were inexpensive and easier to lock down in kiosk mode than iPads. Also, Apple does not support the display of local HTML files stored on an iPad. The display resolution of the target device can be set in Hype. For full-screen display, we used the native resolution of the 10" Surface tablet, 1280x1920 pixels. This gives a nice crisp display. 

While there are many commercial kiosk applications available for this sort of work (involving license and/or subscription fees), we found that there are methods of using Google Chrome as a browser in kiosk mode enabling it to be fully locked down. This requires some manual configuration steps and the use of Chrome profiles, along with the special Chrome kiosk command. The tablet is held in place by a secure mounting frame. Power is supplied by a right-angle magnetic plug (specific to Surface tablets) at the bottom of the tablet, also secured by the frame. A U-shaped metal bracket was fabricated in our shop to prevent the tablets from being bumped.

The screenshots below represent the initial index page and an example of one of the scenes that appear when a user selects a number button. We added buttons on each scene to allow forward and reverse navigation, as well as a return to the home screen button. The actual image display is a video of the mascot rotating 360 degrees. Our videos are about 10-20 Mb in size. The elapsed time for the video to rotate is about 10 seconds and repeats continuously, until a delay of about 4 minutes expires, at which time the display reverts to the index page. This delay is configured in Hype as a timeline.

The button images and background were created by a graphic artist on the Revs team using Adobe Photoshop. The elements were then dragged into Hype and placed using Hype's guidelines and snapping tools. Each button has an action associated with it, which is easily set up in Hype. The Prev and Next buttons cause a scene transition to occur. Hype allows the selection of different types of transition effects. We chose a sliding transition effect. 

We did encounter a problem with transitions. We discovered that if a user rapidly tapped the Next or Prev buttons, the browser could crash. (This was uncovered by observing some of our younger visitors tapping on the tablets as if they were playing a video game). This is probably a bug in either Windows or Chrome, but we created a workaround. The Hype support folks provided an auxiliary JavaScript file which we included in our project. The file caused the current video to be unloaded from memory prior to beginning the scene transition, reducing the stress on the browser. You can view this file in the Hype support forum at this link. We found the Hype support people very helpful, which is another reason to recommend the software. 

The next problem we had to solve was the need for a screensaver. We noticed that the Surface tablets exhibited screen burn, so a screensaver was needed. We wanted a scrolling marquee text across a dark screen to prompt the user to tap the screen to begin. We could have created screen saver functionality in Hype (and we had a prototype of this) but for expediency, we decided to use a Windows screensaver. Unfortunately, Microsoft has removed customizable text screen savers in Windows 10, so we had to use a third-party screen saver. The one we chose was a free download, available from this link. It can be added and configured in the Windows screen saver control panel. 

We went through several iterations of the app before settling on a final version. We kept track of each version by storing them in our Box.com repository.

As mentioned, creating a Windows-based kiosk application using a Chrome browser requires several manual steps. Note that Chrome kiosk settings rely on Chrome Profiles to run correctly. We do not manage the devices using Chrome Administrator or other centralized Windows management software. If your organization uses centralized device management software, your mileage will differ. 

We do use Google Chrome Remote Desktop to access the tablets from another computer since the tablets have neither keyboards nor mice attached. You could probably accomplish the same results using Remote Desktop or other remote control software. Alternatively, temporarily connecting a keyboard and a mouse may be helpful.