2012-03-20 22:14:18 +00:00
|
|
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
2012-03-21 00:03:17 +00:00
|
|
|
<!DOCTYPE html>
|
2012-03-09 22:37:26 +00:00
|
|
|
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
|
|
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
2012-03-21 00:03:17 +00:00
|
|
|
<html>
|
2012-03-09 22:37:26 +00:00
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
|
<title>WebSockets</title>
|
|
|
|
|
|
2012-03-15 00:03:45 +00:00
|
|
|
<link type="text/css" href="<c:url value="/resources/css/screen.css"/>" rel="stylesheet" />
|
2012-03-20 23:45:40 +00:00
|
|
|
<link type="text/css" href="<c:url value="/resources/css/styles.css"/>" rel="stylesheet" />
|
2012-03-21 21:06:16 +00:00
|
|
|
<link type="text/css" href="<c:url value="/resources/css/smoothness/jquery-ui-1.8.18.custom.css"/>" rel="stylesheet" />
|
2012-03-09 22:37:26 +00:00
|
|
|
<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>
|
2012-03-15 00:03:45 +00:00
|
|
|
<script type="text/javascript" src="<c:url value="/resources/js/jquery.cookie.js" />"></script>
|
2012-03-20 23:45:40 +00:00
|
|
|
<script type="text/javascript" src="<c:url value="/resources/js/backbone-min.js" />"></script>
|
2012-03-21 03:19:34 +00:00
|
|
|
<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>
|
2012-03-09 22:37:26 +00:00
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
$(document).ready(
|
2012-03-13 23:57:00 +00:00
|
|
|
function() {
|
|
|
|
|
var dataChanged = false;
|
|
|
|
|
var par56eins = $.parseJSON('{"deviceId":1, "options": {"red":0,"blue":0,"green":0} }');
|
2012-03-21 21:06:16 +00:00
|
|
|
var par56null = $.parseJSON('{"deviceId":0, "options": {"red":0,"blue":0,"green":0} }');
|
2012-03-15 00:03:45 +00:00
|
|
|
var volumes = $.parseJSON('{"room1":0,"room2":0,"room3":0,"room4":0}');
|
2012-03-13 23:57:00 +00:00
|
|
|
|
|
|
|
|
function sendData(data) {
|
|
|
|
|
$.ajax({
|
|
|
|
|
type: 'POST',
|
2012-03-21 21:06:16 +00:00
|
|
|
url: "/control/devices/0",
|
2012-03-13 23:57:00 +00:00
|
|
|
contentType: "application/json",
|
|
|
|
|
dataType: "json",
|
|
|
|
|
data: JSON.stringify(data)
|
|
|
|
|
});
|
|
|
|
|
}
|
2012-03-09 22:37:26 +00:00
|
|
|
|
2012-03-13 23:57:00 +00:00
|
|
|
var senden = function sendOutAllDevices() {
|
|
|
|
|
if(dataChanged) {
|
|
|
|
|
dataChanged = false;
|
2012-03-21 21:06:16 +00:00
|
|
|
sendData(par56null);
|
|
|
|
|
console.log("send data");
|
2012-03-13 23:57:00 +00:00
|
|
|
}
|
2012-03-21 21:06:16 +00:00
|
|
|
console.log("set new interval for sending");
|
|
|
|
|
window.setTimeout(senden, 200);
|
2012-03-13 23:57:00 +00:00
|
|
|
};
|
2012-03-12 00:17:52 +00:00
|
|
|
|
2012-03-20 22:14:18 +00:00
|
|
|
// 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
|
2012-03-21 21:06:16 +00:00
|
|
|
senden();
|
2012-03-09 22:37:26 +00:00
|
|
|
|
2012-03-15 00:03:45 +00:00
|
|
|
$("#slider1").slider({ min: 0, max: 100, slide: function(event, ui) {
|
|
|
|
|
volumes.room1 = ui.value;
|
2012-03-13 23:57:00 +00:00
|
|
|
dataChanged = true;
|
|
|
|
|
} });
|
2012-03-12 00:17:52 +00:00
|
|
|
|
2012-03-15 00:03:45 +00:00
|
|
|
$("#slider2").slider({ min: 0, max: 100, slide: function(event, ui) {
|
|
|
|
|
volumes.room2 = ui.value;
|
2012-03-13 23:57:00 +00:00
|
|
|
dataChanged = true;
|
|
|
|
|
} });
|
2012-03-09 22:37:26 +00:00
|
|
|
|
2012-03-15 00:03:45 +00:00
|
|
|
$("#slider3").slider({ min: 0, max: 100, slide: function(event, ui) {
|
|
|
|
|
volumes.room3 = ui.value;
|
|
|
|
|
dataChanged = true;
|
|
|
|
|
} });
|
|
|
|
|
|
|
|
|
|
$("#slider4").slider({ min: 0, max: 100, slide: function(event, ui) {
|
|
|
|
|
volumes.room4 = ui.value;
|
|
|
|
|
dataChanged = true;
|
|
|
|
|
} });
|
|
|
|
|
|
2012-03-13 23:57:00 +00:00
|
|
|
$("#buttonLampe1").click(function() {
|
2012-03-09 22:37:26 +00:00
|
|
|
|
2012-03-13 23:57:00 +00:00
|
|
|
$.getJSON('/control/devices/1', function(data) {
|
2012-03-09 22:37:26 +00:00
|
|
|
|
2012-03-13 23:57:00 +00:00
|
|
|
$("#messages").append("type: " + data.type + " name=" + data.deviceName + "<br/>" );
|
2012-03-09 22:37:26 +00:00
|
|
|
});
|
2012-03-20 22:25:23 +00:00
|
|
|
|
2012-03-09 22:37:26 +00:00
|
|
|
});
|
2012-03-21 01:54:33 +00:00
|
|
|
$(document).ready(function() {
|
|
|
|
|
$("#tabs").tabs();
|
|
|
|
|
$("#v-tabs").tabs().addClass('ui-tabs-vertical');
|
2012-03-21 02:22:28 +00:00
|
|
|
$(".lampel .circle").click(function() {
|
|
|
|
|
if($(this).hasClass('black')){
|
|
|
|
|
$(this).removeClass('black');
|
|
|
|
|
} else {
|
|
|
|
|
$(this).addClass('black');
|
|
|
|
|
}
|
|
|
|
|
});
|
2012-03-21 03:19:34 +00:00
|
|
|
var colorpicker_raum1 = new jQuery.ColorPicker('#colorpicker-raum1', {
|
2012-03-21 21:06:16 +00:00
|
|
|
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;
|
|
|
|
|
|
|
|
|
|
}
|
2012-03-21 03:19:34 +00:00
|
|
|
});
|
2012-03-21 01:54:33 +00:00
|
|
|
});
|
2012-03-13 23:57:00 +00:00
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
2012-03-09 22:37:26 +00:00
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2012-03-21 02:02:31 +00:00
|
|
|
<h1>CTDO Raumsteuerung</h1>
|
2012-03-09 22:37:26 +00:00
|
|
|
|
2012-03-15 00:03:45 +00:00
|
|
|
<div id="tabs">
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="#tabs-1">Global</a></li>
|
|
|
|
|
<li><a href="#tabs-2">Raum 1</a></li>
|
|
|
|
|
<li><a href="#tabs-3">Raum 2</a></li>
|
|
|
|
|
<li><a href="#tabs-4">Raum 3</a></li>
|
|
|
|
|
<li><a href="#tabs-5">Raum 4</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div id="tabs-1">
|
2012-03-21 03:19:34 +00:00
|
|
|
|
|
|
|
|
<div class="buzzer">
|
|
|
|
|
<span class="circle red">Zu</span>
|
|
|
|
|
<button>Buzzern</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="buzzer">
|
|
|
|
|
<span class="circle green">Auf</span>
|
|
|
|
|
<button>Buzzern</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="tabs-2">
|
2012-03-21 01:54:33 +00:00
|
|
|
<div id="v-tabs" class="inner-tabs-container">
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="#v-tabs-1">Licht</a></li>
|
|
|
|
|
<li><a href="#v-tabs-2">Musik</a></li>
|
2012-03-21 02:22:28 +00:00
|
|
|
<li><a href="#v-tabs-3">Lampel</a></li>
|
2012-03-21 01:54:33 +00:00
|
|
|
</ul>
|
|
|
|
|
<div id="v-tabs-1">
|
2012-03-21 03:19:34 +00:00
|
|
|
<div id="colorpicker-raum1"></div>
|
|
|
|
|
<select multiple="multiple">
|
|
|
|
|
<option>Par 56 Lampe 1</option>
|
|
|
|
|
<option>Par 56 Lampe 2</option>
|
|
|
|
|
<option>Par 56 Lampe 3</option>
|
|
|
|
|
<option>Par 56 Lampe 4</option>
|
|
|
|
|
<option>Par 56 Lampe 5</option>
|
|
|
|
|
<option>Par 56 Lampe 6</option>
|
|
|
|
|
<option>Par 56 Lampe 7</option>
|
|
|
|
|
|
|
|
|
|
</select>
|
2012-03-21 01:54:33 +00:00
|
|
|
</div>
|
|
|
|
|
<div id="v-tabs-2">
|
2012-03-21 03:19:34 +00:00
|
|
|
<label for="slider1">Lautstärke Raum 1:</label><div id="slider1" class="slider"></div>
|
2012-03-21 01:54:33 +00:00
|
|
|
</div>
|
2012-03-21 02:22:28 +00:00
|
|
|
<div id="v-tabs-3">
|
|
|
|
|
<div class="lampel">
|
2012-03-21 02:48:44 +00:00
|
|
|
<span class="circle red" title="click to toggle"></span>
|
|
|
|
|
<span class="circle yellow" title="click to toggle"></span>
|
|
|
|
|
<span class="circle green" title="click to toggle"></span>
|
2012-03-21 02:22:28 +00:00
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
2012-03-21 01:54:33 +00:00
|
|
|
</div>
|
2012-03-15 00:03:45 +00:00
|
|
|
|
2012-03-21 03:19:34 +00:00
|
|
|
<div class="switch">
|
|
|
|
|
Raumlicht:<br />
|
|
|
|
|
<input type="radio" name="raum-1-licht">An <input type="radio" name="raum-1-licht" checked="checked">Aus
|
|
|
|
|
</div>
|
2012-03-15 00:03:45 +00:00
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div id="tabs-3">
|
|
|
|
|
|
2012-03-20 23:45:40 +00:00
|
|
|
<label for="slider2">Lautstärke Raum 2:</label><div id="slider2" class="slider"></div>
|
2012-03-15 00:03:45 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="tabs-4">
|
2012-03-20 23:45:40 +00:00
|
|
|
|
|
|
|
|
<label for="slider3">Lautstärke Raum 3:</label><div id="slider3" class="slider"></div>
|
2012-03-15 00:03:45 +00:00
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="tabs-5">
|
|
|
|
|
|
2012-03-20 23:45:40 +00:00
|
|
|
<label for="slider4">Lautstärke Raum 4:</label><div id="slider4" class="slider"></div>
|
|
|
|
|
|
2012-03-15 00:03:45 +00:00
|
|
|
</div>
|
2012-03-13 23:57:00 +00:00
|
|
|
</div>
|
2012-03-09 22:37:26 +00:00
|
|
|
|
2012-03-15 00:03:45 +00:00
|
|
|
|
2012-03-13 23:57:00 +00:00
|
|
|
<input type="button" value="Get Device 1" id="buttonLampe1" />
|
2012-03-09 22:37:26 +00:00
|
|
|
|
2012-03-15 00:03:45 +00:00
|
|
|
<div id="messages"></div>
|
2012-03-13 23:57:00 +00:00
|
|
|
|
2012-03-09 22:37:26 +00:00
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
