78 lines
3.0 KiB
Plaintext
78 lines
3.0 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
|
<!DOCTYPE html>
|
|
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
<html>
|
|
<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/styles.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/main.js" />"></script>
|
|
<script type="text/javascript">
|
|
|
|
function sendData(data) {
|
|
var time = Math.round(new Date().getTime() / 1000);
|
|
data = {"timeStamp":time, "updates":data};
|
|
$.ajax({
|
|
type:'POST',
|
|
url:"/control/devices",
|
|
contentType:"application/json",
|
|
dataType:"json",
|
|
data:JSON.stringify(data)
|
|
});
|
|
console.log(data);
|
|
console.log(JSON.stringify(data));
|
|
}
|
|
$('#par56 .pink').click(function () {
|
|
data = [
|
|
{"deviceId":0, "options":{"red":255, "green":0, "blue":40}},
|
|
{"deviceId":1, "options":{"red":255, "green":0, "blue":40}},
|
|
{"deviceId":2, "options":{"red":255, "green":0, "blue":40}},
|
|
{"deviceId":3, "options":{"red":255, "green":0, "blue":40}}
|
|
];
|
|
sendData(data);
|
|
});
|
|
$('#par56 .gruen').click(function () {
|
|
data = [
|
|
{"deviceId":0, "options":{"red":0, "green":255, "blue":0}},
|
|
{"deviceId":1, "options":{"red":0, "green":255, "blue":0}},
|
|
{"deviceId":2, "options":{"red":0, "green":255, "blue":0}},
|
|
{"deviceId":3, "options":{"red":0, "green":255, "blue":0}}
|
|
];
|
|
sendData(data);
|
|
});
|
|
$('#par56 .rot').click(function () {
|
|
data = [
|
|
{"deviceId":0, "options":{"red":255, "green":0, "blue":0}},
|
|
{"deviceId":1, "options":{"red":255, "green":0, "blue":0}},
|
|
{"deviceId":2, "options":{"red":255, "green":0, "blue":0}},
|
|
{"deviceId":3, "options":{"red":255, "green":0, "blue":0}}
|
|
];
|
|
sendData(data);
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<h1>CTDO Raumsteuerung</h1>
|
|
|
|
<p id="par56">Par56: <br>
|
|
<button class="pink">Pink</button>
|
|
<button class="gruen">Grün</button>
|
|
<button class="rot">Rot</button>
|
|
</p>
|
|
<p id="lampel">Lampel:<br>
|
|
<button class="rota">Rot (an)</button>
|
|
<button class="gelba">Gelb (an)</button>
|
|
<button class="gruena">Grün (an)</button>
|
|
<button class="roto">Rot (aus)</button>
|
|
<button class="gelbo">Gelb (aus)</button>
|
|
<button class="grueno">Grün (aus)</button>
|
|
</p>
|
|
</body>
|
|
</html>
|
|
|