The most interesting things on the web! (hah!)

I finally have something really cool to show from my job. We have a client who wanted a “Kiosk” in their rental office that guests could browse through the various units they have available. It did not need to do anything that different than our normal web work….choose arrival date, number of nights, number of guests, etc. The challenge was how to do it all with JUST a touch screen for input. The “kiosk” was going to be one of the new “all-in-one” MSI Wind Top PC’s with a 20″ touch screen.

Index Page.... simple, no nonsense. Also -- Boring

I had some idea of what was going on since I built a small .mobi site for this company last year geared toward the iPhone/iPod Touch. It turned out OK, but was nothing I really felt stood out. It works, but I honestly don’t think it gets much attention. I’d like to revisit it sometime and make some improvements with what I’ve learned on this project.

Date and Nights Selection

The site will not be available outside of this office, but I’ve got some screenshots AND A VIDEO showing off the functionality. I’m not much of a designer, so it’s not as pretty as it could be probably, but it works I think. I’ll post a couple of the fun jQuery stuff I found/did as well. I think the most instructional and entertaining part was modifying the jQuery quicksearch plugin from www.rikrikrik.com to be able to use an on-screen keyboard.

And somehow I don’t have a screenshot of that…will update later

Rather than creating a separate keyboard and try to tie it into the event handling for quicksearch, I ended up extending the plugin, adding new functionality through the options passed during the .quicksearch() call so the keyboard was fully integrated. It took some trial and error, and it likely could be done “better”, but it works, and functions great.

$('table#cabin_names tbody tr').quicksearch({
				position:'after',
				attached:'#uber_wrap',
				labelText:'',
				inputClass:'sel wide',
				watchElement:'li.alpha_btns',
				keyboard: true,
				keyboardId: 'alpha_btns'
			});

The ‘watchElement’ option is the elements that should trigger the qs() function in quicksearch. ‘keyboard’ defaults to false, but when set to true, it renders the html to insert the keyboard and bind the events to do the proper stuff. ‘keyboardId’ just lets you define the element Id so you can style at will. This extension of the plugin likely has no real use beyond sites designed for touch screens, but it was still educational, and was an interesting introduction to plugins in jQuery. I’ve never written my own, but if I find some functionality I need in the future, maybe I can break into that field too.

# of Guests

Anyhow, there’s not much else to say. This site was designed specifically for this screen, specifically to run in Firefox, specifically in Fullscreen mode. If I had more time I think it could be made to be a bit more flexible, but I suck at CSS, and I just didn’t know how to make a few things flow fluidly on different sized screens. Enjoy!

kiosk_demo

List of cabins available for selected dates and # of guests

One of the other really fun things to write/integrate was the scrolling buttons. I realized after the initial design that having regular scrollbars just wouldn’t be usable with a touch screen interface. Theoretically I could have altered the Firefox userContent.css to enlarge the scroll bars to the point they would have been usable, but that just didn’t feel right. Once again, though, jQuery plugins to the rescue! I found a nice little scrolling plugin that allowed me to bind relative scroll positions with easing to click events on the fixed-position nav-box on the right side. Not sure I’m thrilled with how it looks right now, but at least it’s functionally complete. Can always tweak it down the road.

Fun screen to write. "Buttons" are actually labels for hidden checkboxes. jQuery styling changes make it look fancy

Individual cabin page...small photos are clickable to rotate through pictures