bunti/src/main/webapp/WEB-INF/jsp/index.jsp

87 lines
3.2 KiB
Plaintext
Raw Normal View History

<?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/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-ui-1.8.18.custom.min.js" />"></script>
<script type="text/javascript">
$(document).ready(
function() {
var dataChanged = false;
var par56eins = $.parseJSON('{"deviceId":1, "options": {"red":0,"blue":0,"green":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: 255, slide: function(event, ui) {
par56eins.options.red = ui.value;
dataChanged = true;
} });
$("#slider2").slider({ min: 0, max: 255, slide: function(event, ui) {
par56eins.options.green = ui.value;
dataChanged = true;
} });
$("#slider3").slider({ min: 0, max: 255, slide: function(event, ui) {
par56eins.options.blue = ui.value;
dataChanged = true;
} });
$("#buttonLampe1").click(function() {
$.getJSON('/control/devices/1', function(data) {
$("#messages").append("type: " + data.type + " name=" + data.deviceName + "<br/>" );
});
});
}
);
</script>
</head>
<body>
<h1>Bunti Steuerung</h1>
<div class="demo">
<div id="slider1" style="width: 300px"></div>
<div id="slider2" style="width: 300px; margin-top: 10px"></div>
<div id="slider3" style="width: 300px; margin-top: 10px"></div>
</div>
<input type="button" value="Get Device 1" id="buttonLampe1" />
<div id="messages"></div>
</body>
</html>