Interactive kiosk display framework

Peter Krenesky ([email protected]) Rob McGuire-Dale ([email protected])

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 ) Raphael (JavaScript SVG graphics library)

Python (server-side ) Twisted (python networking engine) Why not Flash or OpenLaszlo?

Original Touchscreen (v1.0) was OpenLaszlo (compiles to Flash)

Pros Touchscreen 1.0 Fast Javascript support Could parse XML feeds

Cons Niche language poor HTML integration OpenLaszlo has annoying syntax

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; Why SVG and not canvas?

SVG objects can: can be styled with css be manipulated with jQuery receive 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.' config_form = (displayPluginExampleSettings, ScreenGeneralSettings) show = 'slide' hide = 'slide' Template file: general structure

foo
Template file: the javascript

Template file: the HTML

{{screen.exampleSetting}}

Template file: the optional CSS

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: | *

simple proxy included with touchscreen http://localhost/proxy/url="http://foo.com" Content Sources - 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("

"+text+"
"); } Content Sources - XML

// load xml = $(text); 44 -120 44 -120 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: [email protected] blog: http://staff.osuosl.org/kreneskyp

Rob McGuire - Dale twitter: @robatron email: [email protected]