first two templates added, javascript now in a seperate file
This commit is contained in:
Hendrik Fellerhoff
parent
c0782344e7
commit
51005c7f7b
|
|
@ -14,124 +14,10 @@
|
||||||
<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>
|
||||||
<script type="text/javascript" src="<c:url value="/resources/js/backbone-min.js" />"></script>
|
<script type="text/javascript" src="<c:url value="/resources/js/backbone-min.js" />"></script>
|
||||||
|
<script type="text/javascript" src="<c:url value="/resources/js/handlebars.js" />"></script>
|
||||||
<script type="text/javascript" src="<c:url value="/resources/js/jquery.colorpicker.js" />"></script>
|
<script type="text/javascript" src="<c:url value="/resources/js/jquery.colorpicker.js" />"></script>
|
||||||
<script type="text/javascript" src="<c:url value="/resources/js/jquery.mousewheel.js" />"></script>
|
<script type="text/javascript" src="<c:url value="/resources/js/jquery.mousewheel.js" />"></script>
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
var rooms = [
|
|
||||||
{"roomId": 0, "roomName": "Raum 1"},
|
|
||||||
{"roomId": 1, "roomName": "Raum 2"},
|
|
||||||
{"roomId": 2, "roomName": "Raum 3"},
|
|
||||||
{"roomId": 3, "roomName": "Raum 4"}
|
|
||||||
];
|
|
||||||
var volumes = {"room1":0,"room2":0,"room3":0,"room4":0};
|
|
||||||
var devices;
|
|
||||||
$(document).ready(
|
|
||||||
function() {
|
|
||||||
|
|
||||||
|
|
||||||
function sendData(data) {
|
|
||||||
$.ajax({
|
|
||||||
type: 'POST',
|
|
||||||
url: "/control/devices",
|
|
||||||
contentType: "application/json",
|
|
||||||
dataType: "json",
|
|
||||||
data: JSON.stringify(data)
|
|
||||||
});
|
|
||||||
console.log(data);
|
|
||||||
console.log(JSON.stringify(data));
|
|
||||||
}
|
|
||||||
|
|
||||||
var senden = function sendOutAllDevices() {
|
|
||||||
var changedDevs = new Array();
|
|
||||||
for(var i=0;i<devices.length;i++) {
|
|
||||||
if(devices[i].type=="Par56Spot" && devices[i].dirty) {
|
|
||||||
delete devices[i].dirty;
|
|
||||||
var dev = {"deviceId": i, "options":{"red":devices[i].red, "green":devices[i].green, "blue":devices[i].blue}};
|
|
||||||
changedDevs.push(dev);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (changedDevs.length > 0) {
|
|
||||||
sendData({"timeStamp": Math.round(new Date().getTime()/1000), "updates": changedDevs});
|
|
||||||
}
|
|
||||||
console.log("set new interval for sending");
|
|
||||||
|
|
||||||
};
|
|
||||||
window.setInterval(senden, 100);
|
|
||||||
|
|
||||||
$("#slider1").slider({ min: 0, max: 100, slide: function(event, ui) {
|
|
||||||
volumes.room1 = ui.value;
|
|
||||||
dataChanged = true;
|
|
||||||
} });
|
|
||||||
$("#tabs").tabs();
|
|
||||||
$("#v-tabs").tabs().addClass('ui-tabs-vertical');
|
|
||||||
$(".lampel .circle").click(function() {
|
|
||||||
if($(this).hasClass('black')){
|
|
||||||
$(this).removeClass('black');
|
|
||||||
} else {
|
|
||||||
$(this).addClass('black');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var colorpicker_raum1 = new jQuery.ColorPicker('#colorpicker-raum1', {
|
|
||||||
imagepath: '/resources/images/colorpicker/',
|
|
||||||
change: function(hexcolor) {
|
|
||||||
var red = hexcolor.substr(1,2);
|
|
||||||
var green = hexcolor.substr(3,2);
|
|
||||||
var blue = hexcolor.substr(5,2);
|
|
||||||
$('#par56select option:selected').each(function() {
|
|
||||||
devices[$(this).attr('name')].red = parseInt(red, 16);
|
|
||||||
devices[$(this).attr('name')].green = parseInt(green, 16);
|
|
||||||
devices[$(this).attr('name')].blue = parseInt(blue, 16);
|
|
||||||
devices[$(this).attr('name')].dirty = true;
|
|
||||||
});
|
|
||||||
console.log("data changed" + hexcolor);
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$.getJSON('/control/devices', function(data) {
|
|
||||||
devices = data;
|
|
||||||
for(var i=0;i<devices.length;i++) {
|
|
||||||
if (devices[i].type == "Par56Spot") {
|
|
||||||
$('#par56select').append("<option name=" + devices[i].deviceId + ">" + devices[i].deviceName + "</option>");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
$('.buzzer button').click(function() {
|
|
||||||
var span = $(this).parent().find('span');
|
|
||||||
span
|
|
||||||
.toggleClass('red')
|
|
||||||
.toggleClass('green');
|
|
||||||
if(span.text() == "Auf") {
|
|
||||||
span.text("Zu");
|
|
||||||
} else {
|
|
||||||
span.text("Auf");
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
$('#par56select').change(function() {
|
|
||||||
$('#par56select option:selected').each(function() {
|
|
||||||
var red = devices[$(this).attr('name')].red.toString(16);
|
|
||||||
var green = devices[$(this).attr('name')].green.toString(16);
|
|
||||||
var blue = devices[$(this).attr('name')].blue.toString(16);
|
|
||||||
if(red.length == 1) {
|
|
||||||
red += red;
|
|
||||||
}
|
|
||||||
if(green.length == 1) {
|
|
||||||
green += green;
|
|
||||||
}
|
|
||||||
if(blue.length == 1) {
|
|
||||||
blue += blue;
|
|
||||||
}
|
|
||||||
var hexstring = '#' + red + green + blue;
|
|
||||||
console.log("lampe:" + hexstring);
|
|
||||||
colorpicker_raum1.hex(hexstring);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>CTDO Raumsteuerung</h1>
|
<h1>CTDO Raumsteuerung</h1>
|
||||||
|
|
@ -182,5 +68,25 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<script type="text/x-handlebars-template" id="room-tabs-template">
|
||||||
|
<ul>
|
||||||
|
{{#list rooms}}
|
||||||
|
<li><a href="#room-tabs-{{roomId}}">{{roomName}}</a></li>
|
||||||
|
{{/list}}
|
||||||
|
</ul>
|
||||||
|
{{#list rooms}}
|
||||||
|
<div id="room-tabs-{{roomId}">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{{/list}}
|
||||||
|
</script>
|
||||||
|
<script type="text/x-handlebars-template">
|
||||||
|
{{#list devices}}
|
||||||
|
<option name="{{deviceId}}">{{deviceName}}</option>
|
||||||
|
{{/list}}
|
||||||
|
</script>
|
||||||
|
<script type="text/x-handlebars-template">
|
||||||
|
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -0,0 +1,114 @@
|
||||||
|
/**
|
||||||
|
* Created by IntelliJ IDEA.
|
||||||
|
* User: henne
|
||||||
|
* Date: 23.03.12
|
||||||
|
* Time: 00:51
|
||||||
|
* Main Javascript file
|
||||||
|
*/
|
||||||
|
var rooms;
|
||||||
|
var volumes = {"room1":0,"room2":0,"room3":0,"room4":0};
|
||||||
|
var devices;
|
||||||
|
$(document).ready(
|
||||||
|
function() {
|
||||||
|
|
||||||
|
|
||||||
|
function sendData(data) {
|
||||||
|
$.ajax({
|
||||||
|
type: 'POST',
|
||||||
|
url: "/control/devices",
|
||||||
|
contentType: "application/json",
|
||||||
|
dataType: "json",
|
||||||
|
data: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
console.log(data);
|
||||||
|
console.log(JSON.stringify(data));
|
||||||
|
}
|
||||||
|
|
||||||
|
var senden = function sendOutAllDevices() {
|
||||||
|
var changedDevs = new Array();
|
||||||
|
for(var i=0;i<devices.length;i++) {
|
||||||
|
if(devices[i].type=="Par56Spot" && devices[i].dirty) {
|
||||||
|
delete devices[i].dirty;
|
||||||
|
var dev = {"deviceId": i, "options":{"red":devices[i].red, "green":devices[i].green, "blue":devices[i].blue}};
|
||||||
|
changedDevs.push(dev);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (changedDevs.length > 0) {
|
||||||
|
sendData({"timeStamp": Math.round(new Date().getTime()/1000), "updates": changedDevs});
|
||||||
|
}
|
||||||
|
console.log("set new interval for sending");
|
||||||
|
|
||||||
|
};
|
||||||
|
window.setInterval(senden, 100);
|
||||||
|
|
||||||
|
$("#slider1").slider({ min: 0, max: 100, slide: function(event, ui) {
|
||||||
|
volumes.room1 = ui.value;
|
||||||
|
dataChanged = true;
|
||||||
|
} });
|
||||||
|
$("#tabs").tabs();
|
||||||
|
$("#v-tabs").tabs().addClass('ui-tabs-vertical');
|
||||||
|
$(".lampel .circle").click(function() {
|
||||||
|
if($(this).hasClass('black')){
|
||||||
|
$(this).removeClass('black');
|
||||||
|
} else {
|
||||||
|
$(this).addClass('black');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
var colorpicker_raum1 = new jQuery.ColorPicker('#colorpicker-raum1', {
|
||||||
|
imagepath: '/resources/images/colorpicker/',
|
||||||
|
change: function(hexcolor) {
|
||||||
|
var red = hexcolor.substr(1,2);
|
||||||
|
var green = hexcolor.substr(3,2);
|
||||||
|
var blue = hexcolor.substr(5,2);
|
||||||
|
$('#par56select option:selected').each(function() {
|
||||||
|
devices[$(this).attr('name')].red = parseInt(red, 16);
|
||||||
|
devices[$(this).attr('name')].green = parseInt(green, 16);
|
||||||
|
devices[$(this).attr('name')].blue = parseInt(blue, 16);
|
||||||
|
devices[$(this).attr('name')].dirty = true;
|
||||||
|
});
|
||||||
|
console.log("data changed" + hexcolor);
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$.getJSON('/control/devices', function(data) {
|
||||||
|
devices = data;
|
||||||
|
for(var i=0;i<devices.length;i++) {
|
||||||
|
if (devices[i].type == "Par56Spot") {
|
||||||
|
$('#par56select').append("<option name=" + devices[i].deviceId + ">" + devices[i].deviceName + "</option>");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
$('.buzzer button').click(function() {
|
||||||
|
var span = $(this).parent().find('span');
|
||||||
|
span
|
||||||
|
.toggleClass('red')
|
||||||
|
.toggleClass('green');
|
||||||
|
if(span.text() == "Auf") {
|
||||||
|
span.text("Zu");
|
||||||
|
} else {
|
||||||
|
span.text("Auf");
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
$('#par56select').change(function() {
|
||||||
|
$('#par56select option:selected').each(function() {
|
||||||
|
var red = devices[$(this).attr('name')].red.toString(16);
|
||||||
|
var green = devices[$(this).attr('name')].green.toString(16);
|
||||||
|
var blue = devices[$(this).attr('name')].blue.toString(16);
|
||||||
|
if(red.length == 1) {
|
||||||
|
red += red;
|
||||||
|
}
|
||||||
|
if(green.length == 1) {
|
||||||
|
green += green;
|
||||||
|
}
|
||||||
|
if(blue.length == 1) {
|
||||||
|
blue += blue;
|
||||||
|
}
|
||||||
|
var hexstring = '#' + red + green + blue;
|
||||||
|
console.log("lampe:" + hexstring);
|
||||||
|
colorpicker_raum1.hex(hexstring);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
[
|
{
|
||||||
|
"rooms" : [
|
||||||
{"roomId": 0, "roomName": "Global"},
|
{"roomId": 0, "roomName": "Global"},
|
||||||
{"roomId": 1, "roomName": "Raum 1"},
|
{"roomId": 1, "roomName": "Raum 1"},
|
||||||
{"roomId": 2, "roomName": "Raum 2"},
|
{"roomId": 2, "roomName": "Raum 2"},
|
||||||
{"roomId": 3, "roomName": "Raum 3"},
|
{"roomId": 3, "roomName": "Raum 3"},
|
||||||
{"roomId": 4, "roomName": "Raum 4"},
|
{"roomId": 4, "roomName": "Raum 4"},
|
||||||
]
|
]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue