134 lines
4.7 KiB
Plaintext
134 lines
4.7 KiB
Plaintext
<?xml version="1.0" encoding="ISO-8859-1" ?>
|
||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||
pageEncoding="ISO-8859-1"%>
|
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
|
||
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<title>WebSockets</title>
|
||
|
||
<link type="text/css" href="<c:url value="/resources/css/screen.css"/>" rel="stylesheet" />
|
||
<link type="text/css" href="<c:url value="/resources/css/dark-hive/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-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">
|
||
$(document).ready(
|
||
function() {
|
||
var dataChanged = false;
|
||
var par56eins = $.parseJSON('{"deviceId":1, "options": {"red":0,"blue":0,"green":0} }');
|
||
var volumes = $.parseJSON('{"room1":0,"room2":0,"room3":0,"room4":0}');
|
||
|
||
function sendData(data) {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: "/control/devices/1",
|
||
contentType: "application/json",
|
||
dataType: "json",
|
||
data: JSON.stringify(data)
|
||
});
|
||
}
|
||
|
||
var senden = function sendOutAllDevices() {
|
||
if(dataChanged) {
|
||
dataChanged = false;
|
||
sendData(par56eins);
|
||
}
|
||
};
|
||
|
||
// vielleicht baut man lieber was mit setTimeout und setzt das jeweils neu wenn man daten <20>ndert
|
||
// das k<>nnte den Browser entlasten, sofern den das 200ms Aufrufen <20>berhaupt st<73>rt :D
|
||
window.setInterval(senden, 200);
|
||
|
||
$("#slider1").slider({ min: 0, max: 100, slide: function(event, ui) {
|
||
volumes.room1 = ui.value;
|
||
dataChanged = true;
|
||
} });
|
||
|
||
$("#slider2").slider({ min: 0, max: 100, slide: function(event, ui) {
|
||
volumes.room2 = ui.value;
|
||
dataChanged = true;
|
||
} });
|
||
|
||
$("#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;
|
||
} });
|
||
|
||
$("#slider_room_track").slider({ min: 0, max: 100, slide: function(event, ui) {
|
||
volumes.room4 = ui.value;
|
||
dataChanged = true;
|
||
} });
|
||
|
||
$("#buttonLampe1").click(function() {
|
||
|
||
$.getJSON('/control/devices/1', function(data) {
|
||
|
||
$("#messages").append("type: " + data.type + " name=" + data.deviceName + "<br/>" );
|
||
});
|
||
});
|
||
|
||
$( "#tabs" ).tabs({ cookie: { expires: 1 } });
|
||
|
||
}
|
||
);
|
||
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<h1>Bunti Steuerung</h1>
|
||
|
||
|
||
|
||
<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">
|
||
|
||
|
||
<label for="slider1">Lautst<73>rke Raum 1:</label><div id="slider1" class="slider"></div>
|
||
<label for="slider2">Lautst<73>rke Raum 2:</label><div id="slider2" class="slider"></div>
|
||
<label for="slider3">Lautst<73>rke Raum 3:</label><div id="slider3" class="slider"></div>
|
||
<label for="slider4">Lautst<73>rke Raum 4:</label><div id="slider4" class="slider"></div>
|
||
|
||
</div>
|
||
<div id="tabs-2">
|
||
|
||
<div id="slider_room_track" class="slider"></div>
|
||
|
||
|
||
</div>
|
||
<div id="tabs-3">
|
||
|
||
</div>
|
||
|
||
<div id="tabs-4">
|
||
|
||
</div>
|
||
|
||
<div id="tabs-5">
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<input type="button" value="Get Device 1" id="buttonLampe1" />
|
||
|
||
<div id="messages"></div>
|
||
|
||
|
||
</body>
|
||
</html> |