Building Boca Center’s Directory Kiosk Software with HTML5 and Javascript
Front View of the Directory
Earlier this year, The Shops of Boca Center contacted Rosstamicah about developing custom software for a large outdoor touchscreen directory kiosk. The directory that was part of an overhaul of the shopping center’s courtyard area. The kiosk software would be displayed on a 47” touchscreen built into a custom outdoor kiosk enclosure located at the front of Boca Center’s entrance, facing Military Trail. The purpose of the software is to provide visitors of all ages with information about the shops and restaurants located at Boca Center, a directory of the businesses in Boca Center’s three office buildings, as well as updates about upcoming events, deals and specials.
Having previously worked on a similar kiosk project, this was an opportunity to develop web software that would ultimately not end up on the web itself. The project was approached and built as any web app is with the exception of its final location being on a single standalone computer in the enclosure rather than running off a server on the web. While the kiosk is publicly available for anyone to walk up and touch/use, it exists only at that one specific location which is not the typical destination for kiosks, and surely not for most web apps.
Back in 2005 while working as New Media Manager for single family home builder RJM Homes, I developed a touchscreen kiosk that was used in at multiple model home locations throughout South Florida. The software was called Virtual Architect program and was setup on desktop computers with a touchscreens in each model homes. RJM’s Virtual Architect allowed potential clients to view floor plans, amenities, photos and add-on options in an interactive and engaging way. It was developed using Macromedia’s Director software, prior to Macromedia being acquired by Adobe, and was so helpful to the sales team that the company chose to print and distribute the software on CD-ROMs that were sent out with brochure sales packages. The Virtual Architect kiosk software is still in use today at the RJM model home in Port St Lucie, FL.
Back View of the Directory with Fabricated Lettering by Baron Sign
The experience of working on a similar kiosk project surely helped with the planning, design and implementation of the Boca Center software. Since the software would be located outdoors in a public place, the decision was made to have the software run locally on the kiosk machine and not off the internet so that the directory software would work regardless of any connection issues. Most importantly, this allows the software run in a closed, more secure environment by not running directly off of the web.
The Virtual Architect Software in use at RJM Homes in Port St. Lucie, FL
Development Options: Director, Flex, HTML5 & More
Many of today’s kiosk software development solutions are hosted on the web and provide specialized locked down browsers that prevent users from leaving the kiosk software. This is essentially a locked down website and means that an internet connection would be required for the software to run, all the time. After looking into software development packages such as Adobe’s Director 11 and Flex software, mobile app development tools such as Sencha and JQuery Mobile, it was decided that many of these solutions were overkill for what needed to be done. The software would be built as a valid HTML5 web app running locally on the kiosk machine. Being a completely self contained unit, this software would have no browser compatibility or mobile device issues so the it could be built to a specific screen resolution and even built to be used on a specific browser which in this case would be Google’s Chrome or Mozilla’s Firefox due to their built in kiosk modes.
Software Design: Interface Elements, UX & Layout
Mockup and Final Shop Page for Kiosk Software
The kiosk interface design is a simple, easy to use layout with the same dark background/light text as the BocaCenter website and is simple enough for non-tech savvy people to use too. This meant using large fonts and buttons and not having extraneous design elements. The main navigation consists of four large buttons (Shops, Offices, Map and Events) placed in the upper right hand quadrant of the layout. Initial wireframes for the kiosk software were built using InVision’s online wireframe & UI protyping tool. This allowed Boca Center management to view a rough layout of the interface and see how each section of the software would be laid out. Once the mockups were approved, the main pages were built as valid HTML5 web pages.
With the exception of a flourish in the footer of some pages, the final product met all of the project’s initial design goals. The app also needed to be built in portrait mode, as the final software would run on a 47” screen in portrait mode. With the initial build of the software ready as static HTML5 pages, a 22″ Planar PX2230MW Touchscreen LCD Monitor was used to test the basic functionality. This let the directory’s user interface and the user experience to be tested in the same orientation and resolution as it would on the final enclosure, just at a much smaller size.
Software Development: Adding Custom Functionality
With the static HTML5 pages working and successfully tested, the software needed some additional functionality built in to meet the project specifications.
The following additions to the software were added once the initial design was completed:
- Angular.js was used to create a timeout script so that the kiosk would automatically default back to the Events pages after 90 seconds of inactivity, kind of like a screensaver. This initially defaulted back to the software’s main/intro page but was changed to the Events page as per Boca Center management’s request
- The setup of the shop and office pages was changed so that each individual page was pulled in as partials using Anglar’s ngInclude directive. This allowed for faster loading of each page, and prevented the browser from having to reload any images or content.
- Twitter Bootstrap was implemented in order to utilize it’s modal animations for Maps and Specials on each shop page. Each shop page has a modal button for directions from the kiosk’s location, and some shop pages have an additonal specials button that displays the latest special for that store or restaurant.
- SwinxyZoom was used to handle touch zooming on the directory map on Map page.
- Cufon was used for font replacement to match Boca Center’s branding.
Mockup and Final Images of the Main Directory Page of the Kiosk Software
Running the software with Kiosk Mode in Firefox/Chrome
Both Google’s Chrome and Mozilla’s Firefox browsers have kiosk modes allowing a website or app to run in fullscreen mode with no toolbars and only closing with a specific keystroke. These are called by adding command line flags to Chrome or Firefox’s shortcut target properties. Adding -kiosk to the command line for Chrome or Firefox will open the browser in kiosk mode, bypassing all keyboard functions and shortcuts and can only exit when a specific keystroke (Alt+F4) is pressed.
The partial files for the shop and office pages required another solution, on Chrome a command line flag (–allow-file-access-from-files) is needed order to pull in local content. On Firefox the security.fileuri.strict_origin_policy parameter needs to be set to false in about:config in order to open up local file access.
The software was originally tested in Chrome, although some issues that arose after installation required Firefox to be used. As the functionality of both Chrome and Firefox’s kiosk mode progresses, the best choice to run the kiosk software will be re-evaluated and can easily be changed if need be.
Screens showing Bootstrap’s Modal Window and the Map page
Hardware: Enclosure, Screen, Industrial PC, IceQube
The software is only one part of a project like this. Many different vendors were needed in order to put the unit together. Special care was taken throughout the entire process to be sure that the system would be self contained and also be able to withstand the elements in a location such as South Florida. The kiosk enclosure itself was initially put together in California and included the following hardware: Acrosser AR-V6100FL Fanless Industrial PC, DynaScan DS47LT3 47” Fanless LCD, IceQube Electronic Enclosure Thermal Management System, Zytronic Zytouch Touchscreen Technology. This unit was then shipped to Baron Sign of Riviera Beach FL, who fabricated the custom enclosure housing for the unit. The kiosk software was installed on the unit and tested at Baron Sign’s facility the week prior to being installed onsite at Boca Center.
Interior of the kiosk enclosure
In-Progress and Final Pics of the Enclosure’s Fabrication by Baron Signs
Remote Updating Process: Dropbox, Site44, Logmein
The process of updating the software is as follows: A working copy of the software is hosted online using Site44 (Site44 is a Dropbox app that turns any Dropbox folder into a working website, utilizing Dropbox’s always syncing functionality). Any content updates (an upcoming event or special deal) are made to a copy of the software running off of a Dropbox folder that is automatically synced on the kiosk machine linked to the that same Dropbox folder. Once the changes to the software have been checked using the Site44 location, LogMeIn’s remote software is used to gain remote access to the kiosk machine where the updated files are simply copied over from the Dropbox to the local folder where the kiosk software is actually running from (C:/kiosk). Then, the browser is turned back on and the software has been updated, and left to run on it’s own. By making a few manual file changes issues that could arise by using an entirely web based remote updating system are bypassed, and we are able to securely edit content on the directory without any issue.
Developing the software for this kiosk was just one part of a complex project that involved many vendors. Thanks to: Tom Gullo of TG TechSigns, Tony Hallett at 2s2, Elliott Picard at Baron Sign & Manufacturing, Greg Westbury from Itasca Construction, Chris Davies of Davies, Inc, Tracy Adamsky from Above & Beyond Advertising and Candace Goldstein from CBRE/Boca Center Management for their participation in seeing this project come to fruition.
While this was a unique solution to solve a unique problem, Rosstamicah Design has the ability to design and handle projects expanding beyond the typical web site. We are actively seeking out work on more kiosk design and development projects. Please Contact us with any questions or input about how we can help you, or leave a comment below.
The kiosk enclosure makes for a great photo op, too!