Interactive kiosk display framework Peter Krenesky - - PowerPoint PPT Presentation

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

Interactive kiosk display framework

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?

Touchscreen 1.0

Original Touchscreen (v1.0) was OpenLaszlo (compiles to Flash) 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'

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

Template file: general structure

<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 javascript

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

Template file: the HTML

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

Template file: the optional CSS

plugins.py: bit.ly/plugins_py template file: bit.ly/template_html

Simple example plugin demo

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> <user id="1"> <label>Or</label> <lat>44</lat> <lon>-120</lon> </user> <user id="1"> <label>Or</label> <lat>44</lat> <lon>-120</lon> </user> </feed>

// load xml xml = $(text);

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