Interactive kiosk display framework Peter Krenesky - PowerPoint PPT Presentation

Interactive kiosk display framework Peter Krenesky (peter@osuosl.org) Rob McGuire-Dale (rob@osuosl.org) http://trac.osuosl.org/touchscreen

What is Touchscreen? Interactive kiosk display framework that is: Portable Plugin-based Simple and flexible API Open-source

How can Touchscreen be used? Interactive information kiosks

How can Touchscreen be used? Public information displays

Touchscreen demonstration How we use Touchscreen at the Open Source Lab

Technologies in Touchscreen How Touchscreen is built

Languages in Touchscreen HTML & CSS JavaScript jQuery (sexy JavaScript library) Raphael (JavaScript SVG graphics library) Python Django (server-side web framework) Twisted (python networking engine)

Why not Flash or OpenLaszlo? Original Touchscreen (v1.0) was OpenLaszlo (compiles to Flash) Touchscreen 1.0 Pros Fast Javascript support Could parse XML feeds Cons Niche language poor HTML integration

OpenLaszlo has annoying syntax <include href="lib/lzx/screen.lzx" /> <!-- FTP User Map --> <dataset type="http" name="dset_ftpUserMap" src="http://ftp-osl.osuosl.org:8000/"> </dataset> <datapointer xpath="dset_ftpUserMap:/rss/channel" rerunxpath="true"> <method event="ondata"> var label = this.xpathQuery('item[1]/title/text()'); var lat = this.xpathQuery('item[2]/title/text()'); var lon = this.xpathQuery('item[3]/title/text()'); screen_osl_ftpusersmap.createPoint(lat,lon, label); label = null; lat = null; lon = null; </method> </datapointer> <include href="lib/lzx/circle.lzx"/> <resource name="ftpusermap" src="screens/ftpmap/map_1360nolabel.png"/> <include href="screens/ftpmap/ftpusersmap.lzx"/>

Why SVG and not canvas? SVG objects can: can be styled with css be manipulated with jQuery receive javascript events Speed Differences SVG better for large objects Canvas better for many smaller objects Conclusion SVG for interactivity Canvas for many animated objects

Raphaël: a javascript SVG library provides easy API on top of SVG. works in IE using VML Includes a charting api (gRaphael) Includes mapping api (cartographerJS) http://raphaeljs.com/

How Touchscreen Works Tying it all together

Major components Display(s) & Controller (Django) Essentially web pages Message server (Twisted Python) Used for communication between display(s) and controller Plugin system (Muddle) Manages plugins and their settings

Plugin System (Muddle)

Message server supports multiple screens

Screen Plugins Creating display screens

Screen plugin directory structure

plugins.py: configuration class displayPluginExampleSettings(forms.Form): exampleSetting = forms.CharField( label = 'An example setting', help_text = 'Write something here', initial = 'O hai!', max_length = 128 ) (The Muddle configuration interface)

plugins.py: required settings class displayPluginExample(Screen): description = 'Example plugin made osbridge' template = 'displayPluginExample.html' config_form = (displayPluginExampleSettings, ScreenGeneralSettings) show = 'slide' hide = 'slide'

Template file: general structure <style> /* Optional CSS styles */ </style> <script type="text/javascript"> {{screen.hash}} = new function() { //javascript } </script> <!-- Other HTML --> <div>foo</div>

Template file: the javascript <script type="text/javascript"> {{screen.hash}} = new function() { // hooks this.init = function(){} this.start = function(){} this.stop = function(){} this.resize = function(){} // whatever you want function foo(){} } </script>

Template file: the HTML <div id="{{screen.hash}}_tile" class="display_tile"> <h1>{{screen.exampleSetting}}</h1> <img src='static/screens/examplePlugin/examplePic.png'> </div>

Template file: the optional CSS <style> #{{screen.hash}}_tile{ width: 400px; } .{{screen.hash}}_content{ font-size: 24pt; margin: 20px; text-align: center; } </style>

Simple example plugin demo plugins.py: bit.ly/ plugins_py template file: bit.ly/ template_html

Content Sources Dynamic content is exciting!

Content Sources - Cross Site Browsers restrict cross-site AJAX requests include HttpResponse Header Access-Control-Allow-Origin: <origin> | * simple proxy included with touchscreen http://localhost/proxy /url="http://foo.com"

Content Sources - jquery ajax // ajax call with jquery url = "http://foo.com" $.get(url, {key:"value"}, process); // process data function process(data) { do_something(); } // alternate more flexible call $.ajax(...)

Content Sources - JSON Fast - Native Parser in browser Secure - parsers strip out executable code Easy to work with - json == Javascript Support in nearly every language (json.org) $.getJSON(url, {key:value}, function) $.post(url, {key:value}, function, "json");

url = "http://search.twitter.com/search.json?q=#osb10 " $.getJSON('/proxy/', {url:url}, process); function process(data) { // first tweet tweet = data ["results"][0]; // get important data from = tweet["from_user"]; text = tweet["text"]; // update page $("#tweets").append("<div>"+text+"</div>"); }

Content Sources - XML <feed> // load xml <user id="1"> xml = $(text); <label>Or</label> <lat>44</lat> <lon>-120</lon> </user> <user id="1"> <label>Or</label> <lat>44</lat> <lon>-120</lon> </user> </feed>

Content Sources - XML // select groups users = xml.find("user"); // retrieve attributes user = users[0]; id = user.attr("id"); // retrieve text label =user.children("label").text(); lat = user.children("lat").text(); lon =user.children("lon").text();

Content Source - HTML HTML Strings can also be parsed, searched, and manipulated by jQuery.

Content Source - HTML $.get("http://digg.com", {}, process); function process(data){ // grab just the topten list html html = $(data); topten = $html.find("#toptenlist"); // add to screen $("#foo").append(topten); }

Touchscreen: http://trac.osuosl.org/touchscreen Slides & Files: http://bit.ly/cXhwwt Peter Krenesky: twitter: @kreneskyp email: peter@osuosl.org blog: http://staff.osuosl.org/kreneskyp Rob McGuire - Dale twitter: @robatron email: rob@osuosl.org