Open Source Bridge Touchscreen Presentation
Total Page:16
File Type:pdf, Size:1020Kb
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 <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: [email protected] blog: http://staff.osuosl.org/kreneskyp Rob McGuire - Dale twitter: @robatron email: [email protected].