/touchomatic

Lightweight HTML5 touchscreen interactive kiosk for Exhibits

Primary LanguageJavaScript

Touch-o-matic!

By David Hwang and Ryan Peters
(Media elements created by Emily Ward, Greg Mercer, and Sasha Samochina)

Touch-o-matic is a super lightweight, simple implementation of basic HTML5 & CSS with some jQuery thrown in to create a workable, easy-to-deploy touchscreen interactive for the Field Museum’s upcoming Abbott Hall of Conservation: Restoring Earth™.

Requirements

Although this software is designed to be cross-platform compatible, as it is intended for use in kiosk-style installations the following assumptions are made:

  • A Modern Browser (in this case, Chrome or Safari), running in Kiosk Mode.
  • The CSS requires a screen larger than 1800×1000
  • The browser/OS in which this runs must support Ogg Theora playback, as the videos are currently embedded as .ogv sources inside an HTML5 video element. There is no current plan to add fallbacks to h264, Flash or otherwise.

Deployment

On a computer with git installed, clone the repository. Copy the video files into the videos/ directory. Adjust the URLs in index.htm and respective player[x].htm files to the appropriate movie files (viz. thumbnail vids in index, full screen vids in the players). Open a browser and point it to the directory in which you cloned the repo, et voila!

Deployment Notes:

  • Make sure the production computer’s browser is set to run in Kiosk mode. Chrome Kiosk Mode instructions
  • Suppress the display of all screensavers
  • Videos are by design not stored in this repo. Be sure to copy your media to the videos directory before launching.

License

All HTML, CSS and Javascript code in this project is licensed under the GNU GPLv3 license.

All included video, sound, art and imagery is Copyright ©The Field Museum and may not be used, copied, redistributed, sold or lent without express written consent from the The Field Museum. All rights reserved.