Museum Assistant Kiosk at the 2012 Indiana State Fair

I am pleased to announce that Museum Assistant: Design an Exhibit will be featured at the 2012 Indiana State Fair. Our project will be on display in a kiosk at the Ball State Backyard area in the Ball State Ag/Hort Building.

Special thanks go out to two Root Beer Float Studio members who volunteered their time to making this happen. Ryan implemented a "kiosk mode" feature into the game, so that after a minute of inactivity, the game returns to the main menu. Ashley designed a beautiful handout, a great piece that visitors can pick up and take home. They'll be printed  four-up on 8-/12x11" paper, and here's a raster version of the design.

Handout Front

Handout Back

My task in all this was to make the game work on the laptop that will power the kiosk. As regular readers will know, the game is free to play online, but our kiosk will be offline, and we want it to feature just the game, not the whole site. My first attempt involved using Javascript to try to implement kiosk mode, but it turns out that all the mouse events were intercepted by the Unity Web Player, so this approach was doomed to failure. We also could not use a standalone Windows executable because the assumption of a fixed 1024x600 resolution is embedded deep in the implementation; when running the game in fullscreen mode (for which 1024x600 is not an option), many of the widgets are misplaced, so the game had to be embedded in a browser.


Knowing that Ryan was adding the kiosk feature directly to the game, I focused on making an interface that would be most useful to the player. At first, I hoped to just be able to run the game in a fullscreen browser window, but all browsers I could find have a "feature" in which moving the mouse to the edge of the screen pops up a prompt to get you out of fullscreen mode.

Fullscreen Chrome browser with the mouse having been pushed to the top edge

The player will only have a mouse and no keyboard, as the laptop is actually enclosed and protected within the kiosk. This makes it imperative to prevent the player from exiting fullscreen mode and poking around, as then someone else would have to manually go in and restore the settings before the next attendee walks by.


After a bit of surfing, I discovered that Chrome has a kiosk flag that does exactly what I need. I created a batch file that starts Chrome with the "--kiosk" flag, followed by the location of the WebPlayer html file, and it works like a charm. I put a shortcut to this batch file into the Startup directory, and now booting the machine takes you right into the game. So, in the case of failure, a volunteer at the Backyard area need only reboot the machine, and we should be fine.

Incidentally, it was easy to customize the WebPlayer HTML file with a bit o' CSS to get the look above. I'll share it here in case it's useful in the future (to me or to you).

<script type="text/css">
body {
 background: #5d337b;
}
#unityPlayer {
 position: absolute;
 top: 50%;
 height: 600px;
 margin-top: -300px;
 left: 50%;
 width: 1024px;
 margin-left: -512px;
 border-style: solid;
 border-width: 4px;
 border-color: #262263;
}

I'm using a little CSS magic to center the fixed-sized unityPlayer div in the screen. This will work fine as long as the kiosk display is at least 1024x600 resolution, and if it's not, we have even bigger problems. The small purple border around the game makes it pop against the background when playing the game.

Chrome in Kiosk Mode

We also want to prevent the user from right-clicking and fiddling with the browser or the Unity Web Player settings, and so we used the KillRightClick trick explained at lifehacker. Linking the script to the startup menu ensures that the kiosk starts in a stable and hopefully tamper-proof state.

A brief note about the value of reflective blogging. When I started this post, I had an inelegant, resolution-dependent hack for vertically centering the game in the browser window, and I had failed to consider complications of context menus (right-clicks). As I was copying my CSS over to FormatMySourceCode, I thought that there must be a better way; a few jumps around the Web led me to the absolute positioning, fixed-size div trick. As I was generating the screenshots for this post, I realized the vulnerability introduced by the right mouse button, and again, a bit of trial and error led me to the current approach.

Finally, I would be remiss if I did not thank Al Rent for inviting Root Beer Float Studio to showcase our game in the Ball State Backyard.

See you at the fair!