ctdo
/
bunti
16
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

colorpicker working for one predefined lamp

This commit is contained in:
Hendrik Fellerhoff 2012-03-21 22:06:16 +01:00
parent 620796248b
commit 7d2fe8fd04
1 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/main/webapp/WEB-INF/jsp/index.jsp
View File

@ -9,7 +9,7 @@
<link type="text/css" href="<c:url value="/resources/css/screen.css"/>" rel="stylesheet" /> <link type="text/css" href="<c:url value="/resources/css/screen.css"/>" rel="stylesheet" />
<link type="text/css" href="<c:url value="/resources/css/styles.css"/>" rel="stylesheet" /> <link type="text/css" href="<c:url value="/resources/css/styles.css"/>" rel="stylesheet" />
<link type="text/css" href="<c:url value="/resources/css/dark-hive/jquery-ui-1.8.18.custom.css"/>" rel="stylesheet" /> <link type="text/css" href="<c:url value="/resources/css/smoothness/jquery-ui-1.8.18.custom.css"/>" rel="stylesheet" />
<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.7.1.min.js" />"></script> <script type="text/javascript" src="<c:url value="/resources/js/jquery-1.7.1.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/jquery-ui-1.8.18.custom.min.js" />"></script> <script type="text/javascript" src="<c:url value="/resources/js/jquery-ui-1.8.18.custom.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/jquery.cookie.js" />"></script> <script type="text/javascript" src="<c:url value="/resources/js/jquery.cookie.js" />"></script>
@ -22,12 +22,13 @@
function() { function() {
var dataChanged = false; var dataChanged = false;
var par56eins = $.parseJSON('{"deviceId":1, "options": {"red":0,"blue":0,"green":0} }'); var par56eins = $.parseJSON('{"deviceId":1, "options": {"red":0,"blue":0,"green":0} }');
var par56null = $.parseJSON('{"deviceId":0, "options": {"red":0,"blue":0,"green":0} }');
var volumes = $.parseJSON('{"room1":0,"room2":0,"room3":0,"room4":0}'); var volumes = $.parseJSON('{"room1":0,"room2":0,"room3":0,"room4":0}');
function sendData(data) { function sendData(data) {
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
url: "/control/devices/1", url: "/control/devices/0",
contentType: "application/json", contentType: "application/json",
dataType: "json", dataType: "json",
data: JSON.stringify(data) data: JSON.stringify(data)
@ -37,13 +38,16 @@
var senden = function sendOutAllDevices() { var senden = function sendOutAllDevices() {
if(dataChanged) { if(dataChanged) {
dataChanged = false; dataChanged = false;
sendData(par56eins); sendData(par56null);
console.log("send data");
} }
console.log("set new interval for sending");
window.setTimeout(senden, 200);
}; };
// vielleicht baut man lieber was mit setTimeout und setzt das jeweils neu wenn man daten ändert // vielleicht baut man lieber was mit setTimeout und setzt das jeweils neu wenn man daten ändert
// das könnte den Browser entlasten, sofern den das 200ms Aufrufen überhaupt stört :D // das könnte den Browser entlasten, sofern den das 200ms Aufrufen überhaupt stört :D
window.setInterval(senden, 200); senden();
$("#slider1").slider({ min: 0, max: 100, slide: function(event, ui) { $("#slider1").slider({ min: 0, max: 100, slide: function(event, ui) {
volumes.room1 = ui.value; volumes.room1 = ui.value;
@ -84,7 +88,18 @@
} }
}); });
var colorpicker_raum1 = new jQuery.ColorPicker('#colorpicker-raum1', { var colorpicker_raum1 = new jQuery.ColorPicker('#colorpicker-raum1', {
imagepath: '/resources/images/colorpicker/' imagepath: '/resources/images/colorpicker/',
change: function(hexcolor) {
red = hexcolor.substr(1,2);
green = hexcolor.substr(3,2);
blue = hexcolor.substr(5,2);
par56null.options.red = parseInt(red, 16);
par56null.options.blue = parseInt(blue, 16);
par56null.options.green = parseInt(green, 16);
console.log("data changed");
dataChanged = true;
}
}); });
}); });
} }