Creating an Interactive Kiosk Application for Museum Displays

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 easily build an interactive application. We settled on a software tool called Hype from Tumult Inc. Hype is an HTML5 builder which 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; that is, 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. In order 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 and having it fully locked down. This requires some manual configuration steps, documented below. 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 which 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.

Creating a Windows-based kiosk application using a Chrome browser requires a number of manual steps, which we have detailed below. 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, this procedure may not apply.

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.

Note that these are notes we captured while getting our setup to work correctly - your mileage may vary.

1. Connect to the target tablet via WiFi using Chrome Remote Desktop

2. Download and install Google Chrome on the tablet and set it as the default browser

3. Go to right-hand menu in Google Chrome Remote Desktop on your PC

4. Select CNTRL ALT DELETE

5. Open Task Manager on tablet

6. Kill Chrome if it is running

7. Set display properties to zoom to 150 or 175% for readability

8. Copy the zipped Hype application files stored on Box (or other network resource) to the tablet

9. Unzip the file and copy the main HTML file and the Hype resource folder to the tablet "desktop"

10. Open the HTML file - Hype application should open in Chrome and run, although not full screen

11. Copy the link [CONTRL-C] to the local file in the browser address window

12. Open a new tab in Chrome

13. Click on person (profile settings)

14. Add new profile

15. Click "without sign-in"

16. Add a new profile (e.g."Mascot RC5" or some easy to identify name)

17. Make sure "add a shortcut to desktop" is checked

18. Click done

19. New profile page opens

20. Click on setting (upper right) - select settings

21. Click on settings on left

22. Go to Chrome startup

23. Select Open a Specific Page

24. Select add new page

25. Paste in the shortcut link - click Add

26. Check that new shortcut is on desktop with new profile

27. Open properties for shortcut

28. Edit target

29. Add "{spacebar}-kiosk" to the end of the line, and click apply (make sure kiosk is spelled correctly)

    1. Note: {spacebar} means simply add a space before the "-" dash. Do not literally type {spacbar}.

30. Check that shortcut opens the application (double click it)

31. Go to start menu

32. Type run

33. Enter shell:startup and hit return

34. Delete anything already in startup

35. Copy the new shortcut

36. Paste Shortcut into Startup

37. Test that shortcut in Startup works

38. Reset display settings to 100%

39. Reboot the tablet and check that app starts up in Chrome automatically after it boots

TODO: describe how to disable right-click (long press on tablets) and swipe in Chrome. This needs to be done in order to prevent users' escaping from Chrome and provides further lock-down security.