canvas.ui is a HTML5 Canvas UI Framework with Multitouch support.
canvas.ui is a light library for
- hiding different event models: apple touch, firefox touch or stock mouse events.
- delegating touch events to the right widget in a widget tree.
- drawing ui widgets on the html5 canvas element.
- managing layout for child widgets.
Following simple example assumes a canvas element in a html document:
<html> <head> <script src="/canvas.ui/mootools.js" type="text/javascript"></script> <script src="/canvas.ui/touch-tracker.js" type="text/javascript"></script> <script src="/canvas.ui/widget.js" type="text/javascript"></script> <script src="/canvas.ui/slider.js" type="text/javascript"></script> <script src="/app.js" type="text/javascript"></script> </head> <body onLoad="onLoad()" style="background:#000;margin:0"> <canvas id="canvas" width="800" height="600"></canvas> </body> </html>
Let's just create a root widget and add a slider with the label 'Pitch'.
The slider fires the change event, so we can pass an event handler to the constructor.
function onLoad() { var widget = new Widget({ canvas: document.getElementById('canvas'), layout: 'vertical', width: 800, height: 600 }); var slider = widget.add({ type: Slider, label: 'Pitch', on: { change: function(value) { console.log("value changed to: " + value); } } }); }