123 lines
3.4 KiB
HTML
123 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Tutorial: Hello Dojo!</title>
|
|
|
|
<link rel="stylesheet" href="libs/dijit/themes/claro/claro.css" media="screen">
|
|
<link rel="stylesheet" href="test04.css" media="screen">
|
|
|
|
<!-- configure Dojo -->
|
|
<script>
|
|
var dojoConfig = {
|
|
async: true,
|
|
parseOnLoad: true,
|
|
isDebug: true,
|
|
deps: [
|
|
"dojo/parser"
|
|
],
|
|
hos: {
|
|
deviceRepoUrl: "/hos/api/devices/"
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<!-- load Dojo -->
|
|
<script src="libs/dojo/dojo.js"
|
|
data-dojo-config="async: true"></script>
|
|
|
|
</head>
|
|
<body class="claro">
|
|
<h1 id="greeting">Switches</h1>
|
|
<li id="devicelist"></li>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var devices;
|
|
var widgets = {};
|
|
|
|
require([
|
|
"hos/DeviceRepo",
|
|
"dojo/dom-construct",
|
|
"dojo/dom",
|
|
"dojo/on",
|
|
"dijit/form/ToggleButton",
|
|
"dijit/form/HorizontalSlider",
|
|
"dojo/domReady!"
|
|
], function(DeviceRepo, domConstruct, dom, on, ToggleButton, HorizontalSlider){
|
|
|
|
var self = this;
|
|
|
|
devices = DeviceRepo.query();
|
|
devices.then(function(data){
|
|
console.log("Data: ", data);
|
|
for (var i = 0; i < data.length; i++) {
|
|
console.log("Device " + i + ": ", data[i]);
|
|
if (data[i].type == "core/devices/switch") {
|
|
var node = domConstruct.toDom("<ul><button id=\"" + data[i].id + "\"></button></ul>");
|
|
domConstruct.place(node, "devicelist");
|
|
var b = new ToggleButton({
|
|
showLabel: true,
|
|
checked: false,
|
|
label: data[i].id,
|
|
iconClass: 'dijitCheckBoxIcon'
|
|
}, data[i].id);
|
|
b.startup();
|
|
function addListener(id, b) {
|
|
on(b, "click", function(e){
|
|
DeviceRepo.sendCommand(id, {switch:{set:b.get("checked")}});
|
|
});
|
|
};
|
|
addListener(data[i].id, b);
|
|
b.set('checked', data[i].current_state.switch.value);
|
|
widgets[data[i].id] = b;
|
|
} else if (data[i].type == "core/devices/dimmer") {
|
|
var node = domConstruct.toDom("<ul><div id=\"" + data[i].id + "\"></div></ul>");
|
|
domConstruct.place(node, "devicelist");
|
|
var s = new HorizontalSlider({
|
|
name: data[i].id,
|
|
value: 0,
|
|
minimum: 0,
|
|
maximum: 1,
|
|
intermediateChanges: true,
|
|
style: "width:300px;"
|
|
}, data[i].id);
|
|
s.startup();
|
|
function addListener(id, s) {
|
|
on(s, "click", function(e){
|
|
DeviceRepo.sendCommand(id, {dimmer:{set:s.get("value")}});
|
|
});
|
|
};
|
|
addListener(data[i].id, s);
|
|
s.set('value', data[i].current_state.dimmer.value);
|
|
widgets[data[i].id] = s;
|
|
}
|
|
}
|
|
}, function(err){
|
|
console.log("Error: ", err);
|
|
}, function(update){
|
|
console.log("Update: ", update);
|
|
}
|
|
);
|
|
devices.observe(function(device, removedFrom, insertedInto){
|
|
// this will be called any time a market is added, removed, or updated
|
|
console.log("Observe triggered: ", device, ', ', removedFrom, ', ', insertedInto);
|
|
if (removedFrom == insertedInto) {
|
|
if (device.type == "core/devices/switch") {
|
|
var b = widgets[device.id];
|
|
b.set('checked', device.current_state.switch.value);
|
|
} else if (device.type == "core/devices/dimmer") {
|
|
var s = widgets[device.id];
|
|
s.set('value', device.current_state.dimmer.value);
|
|
}
|
|
}
|
|
}, true); // we can indicate to be notified of object updates as well
|
|
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|