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 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)
Pros Touchscreen 1.0 Fast Javascript support Could parse XML feeds
Cons Niche language poor HTML integration OpenLaszlo has annoying syntax
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
Template file: the HTML
{{screen.exampleSetting}}
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 - 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("
// 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]