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);
}
}
});
}