iot-board
An HTML5 ui framework to build web based IOT user interface.
demo
features
- build your own iot interface with minimum code.
- pluggable widgets.
- can implement your our models to provide data sources for widgets.
- automatic event binding and dom manipulation.
- can define custom widgets.
usage
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IOT Board</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- add iotboard common css and js in the first place -->
<link rel="stylesheet" href="iotboard.min.css" media="screen" type="text/css" />
<script src="iotboard.min.js"></script>
<!-- add widgets css and js files here -->
<link rel="stylesheet" href="widgets/text/text.widget.min.css" media="screen" type="text/css" />
<script src="widgets/text/text.widget.min.js"></script>
<link rel="stylesheet" href="widgets/switch/switch.widget.min.css" media="screen" type="text/css" />
<script src="widgets/switch/switch.widget.min.js"></script>
<link rel="stylesheet" href="widgets/led/led.widget.min.css" media="screen" type="text/css" />
<script src="widgets/led/led.widget.min.js"></script>
<!-- -->
<!-- model to use here -->
<script src="models/dummy.model.min.js"></script>
<!-- -->
</head>
<body>
<!-- add a widget to board -->
<div class="widget" iotb-widget="text" data-label="text1" data-title="随意"></div>
<div class="widget" iotb-widget="text" data-label="text2" data-title="hell"></div>
<!-- add a widget to board -->
<div class="widget" iotb-widget="switch" data-label="switch1" data-title="开关1"></div>
<div class="widget" iotb-widget="switch" data-label="switch2" data-title="开关2"></div>
<!-- add a widget to board -->
<div class="widget" iotb-widget="led" data-label="led" data-title="灯泡"></div>
</body>
</html>simply add a div to html file to add a widget to board. like bellow:
<div class="widget" iotb-widget="switch" data-label="switch2" data-title="开关2"></div>requirements:
- div must have "widget" class
- must have a iotb-widget attribute which specify the widget to add
- must have a data-label attribute to distinguish the widget
- can have a data-title attribute to give the widget a title(optional)
define your own model
model is a data source providor to perform data read & write for widget. You can define your own model and include the model js file in the html file to set the board's data providor.
<!-- model to use here -->
<script src="models/dummy.model.min.js"></script>
<!-- -->example model:
!function(){
if (!window.iotboard){
console.log("iotboard not initialized!");
return;
}
var model = {};
/**
* called when widget's status is changed by user interaction.
* @param {String} widget [the widget name]
* @param {String} label [the widget label to distinguish different widget of same type/name]
* @param {Object} status [the new status of widget]
* @return {None}
*/
model.onWidgetStatusChanged = function(widget, label, status){
switch(widget){
case "text":
console.log(status.text);
break;
case "switch":
console.log("switch status changed:" + label);
console.log(JSON.stringify(status));
break;
case "led":
console.log("led status changed:" + label);
console.log(JSON.stringify(status));
break;
default:
console.log("widget {" + widget + "}" + " handler not found!");
break;
}
}
/**
* get widget current status from data providor.
* @param {String} widget [the widget name]
* @param {String} label [the widget label to distinguish different widget of same type/name]
* @param {callback} callback [the result status will be passed through callback(status)]
* @return {None}
*/
model.getCurrentStatus = function(widget, label, callback) {
switch(widget){
case "text":
callback({
text: "status changed:" + (new Date())
})
break;
case "switch":
callback({
on: Math.floor(Math.random()*100)%2 == 0? true: false
});
break;
case "led":
callback({
red: Math.floor(Math.random()*256),
green: Math.floor(Math.random()*256),
blue: Math.floor(Math.random()*256),
freq: Math.round(Math.random()*1000),
white: Math.floor(Math.random()*256),
});
break;
default:
console.log("widget {" + widget + "}" + " handler not found!");
break;
}
}
// set the board's model
window.iotboard.setModel(model);
}();define a new widget
you can define your custom widget too.
window.iotboard.defineWidget("your_widget_name", widget_config);available widget_config option keys:
- status: required. status is a js object to declare the actual data of widget.
status: {
red: 255,
green: 255,
blue: 255,
freq: 100,
white: 100
}- render: required. a function returns a html string for dom rending. the widget container's dataset is passed to the render function.
render: function(dataset){
return '<div class="title">' + dataset.title + '</div>'
+ '<div class="text">' + this.status.text + '</div>';
}- listeners: optional. automaic event listener for user interaction.
listeners: [
{
selector: ".text", // jquery style selector in widget dom
event: "click", // event to fire
behavior: "set" // tell model to update data
},
{
selector: ".title", //
event: "click", //
behavior: "get" // refresh ui from data source
}
]- parseStatus: required. a helper function to read status from widget's dom element.
parseStatus: function(dom){
return {
text: dom.find(".text").html()
}
}- onRendered: optional. a function to call when widget dom has been rendered.
onRendered: function(dom){
console.log("on widget rendered.");
dom.find('.freqCtrl').change(function(){
$(this).closest(".controls").find(".freqVal").text($(this).val());
});
dom.find('.wCtrl').change(function(){
$(this).closest(".controls").find(".wVal").text($(this).val());
});
});