Vývoj interaktivního kiosku s mapou obchodního centra

Jde o aplikaci pro full-hd dotykový kiosk, který je nainstalován v Brněnském obchodním centru Campus. Zákazník si vybral offline verzi, což komplikuje případný support, ale snad nebude potřeba. Aplikace umožňuje dotykově filtrovat seznam obchodů, po výběru obchodu zobrazit umístění na mapě a zároveň zobrazit detaily o obchodu s fotkami, otevírací dobou atd. Aplikace má administrační rozhraní, kde se po připojení klávesnice umožňuje upravovat informace o obchodech včetně nahrávání fotek.

Kiosk v Campus Brno

Video softwaru

Použité technologie

Denip Kiosk Master s Windows 7
http://www.denipkiosk.cz/informacni-kiosky/master/

MicroApache distribuce s PHP a SQLite - distribuce má komplet kolem 3MB, vzhledem k offline použití dostačuje
http://microapache.kerys.co.uk/

Open Kiosk browser
https://www.mozdevgroup.com/products/openkioskdistro.html

JQuery
http://jquery.com/

JQuery Easing plugin pro animace objektů
http://gsgd.co.uk/sandbox/jquery/easing/

JQuery Quicksand plugin pro efektní animaci filtrování položek
http://razorjack.net/quicksand/

JQuery SVG plugin pro manipulaci s mapou
http://keith-wood.name/svg.html

JQuery Jeditable plugin pro jednoduchou administraci
http://www.appelsiini.net/projects/jeditable

Řešení

Jak z výčtu vyplývá, použil jsem PHP skript pro generování základní kostry HTML stránky a pro komunikaci s databází. Open Kiosk browser postavený na jádře Mozilly pak splňuje všechna specifika nutná pro použití v takovémto případě.

Pro mapu byl použit SVG formát, se kterým se perfektně pracuje. SVG je vlastně XML definice grafických (i logických - grupy) objektů, se kterýma můžeme libovolně zacházet díky JQuery SVG pluginem (případně jinýma - známý Raphael atp). Lze tedy jednoduše měnit velikost, pozici, rotaci, barvy a zřejmě i další věci, které jsem nepotřeboval. Navíc vše podporuje Easing animace, takže všechny zmíněné změny lze "morfovat" i dle složitějších parametrů, než jen rychlost.

Většina operací se provádí v rámci Javascriptu, PHP víceméně natáhne velkou část dat o obchodech při prvotním spuštění a dokud nedojde k refreshi stránky, vše se děje v rámci Javascriptu. Záležitosti, jako zobrazování informací o obchodech apod, se načítají pomocí Ajaxu, stejne tak operace v administraci.

Browser refreshuje stránku automaticky po nastavitelném intervalu nečinnosti, zároveň umožňuje zúžit uživateli mantinely - lze použit filtr URL, lze omezit přístup jen na daný web, lze dokonce skrýt jakékoliv ovládací prvky včetně panelu s adresou. Stará se o fulscreenové zobrazení bez minimalizačního a zavíracího tlačítka a blokuje nevhodné kombinace kláves jako Alt+Tab apod.

Některé zajímavosti, které se hodily nebo zaujaly:

Přehled easingových animací, po kliku se předvedou
http://jqueryui.com/demos/effect/easing.html

Čistě CSS animovaný modální dialog
http://www.paulrhayes.com/2011-03/css-modal/

Generátor čistě CSS šipky
http://cssarrowplease.com/