2012-02-25 15:55:47 +00:00
|
|
|
<%@page contentType="text/html" pageEncoding="UTF-8"%>
|
|
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
|
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
|
<title>WebSockets</title>
|
|
|
|
|
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
|
|
|
|
|
<link type="text/css" href="css/screen.css" rel="stylesheet" />
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="app.js"></script>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var ws;
|
2012-02-25 23:41:47 +00:00
|
|
|
var dmxData;
|
2012-02-25 15:55:47 +00:00
|
|
|
|
|
|
|
|
$(document).ready(
|
|
|
|
|
function() {
|
2012-02-26 00:47:08 +00:00
|
|
|
var Socket = "MozWebSocket" in window ? MozWebSocket : WebSocket;
|
2012-02-26 00:52:24 +00:00
|
|
|
ws = new Socket("ws://" + window.location.hostname + ":" + window.location.port + "/bunti_server/bunti");
|
2012-02-25 15:55:47 +00:00
|
|
|
|
|
|
|
|
ws.onmessage = function (message) {
|
2012-02-25 23:41:47 +00:00
|
|
|
//$("#messages").append("<p>" + message.data + "</p>");
|
|
|
|
|
|
|
|
|
|
var obj = jQuery.parseJSON(message.data);
|
|
|
|
|
|
|
|
|
|
if( obj.dmx512values != null) {
|
|
|
|
|
dmxData = obj.dmx512values;
|
|
|
|
|
|
|
|
|
|
// das direkt zu machen ist evtl etwas unklug, da das sliden des sliders im
|
|
|
|
|
// gleichen browser dann hier zu ner aenderung fuehrt und der slider dann
|
|
|
|
|
// ruckelt. Aber es tut :D
|
|
|
|
|
$("#slider1").slider("value", dmxData[1]);
|
|
|
|
|
$("#slider2").slider("value", dmxData[2]);
|
|
|
|
|
$("#slider3").slider("value", dmxData[3]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2012-02-25 15:55:47 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
ws.onopen = function () {
|
|
|
|
|
$("#messages").append("<p>WS opened</p>");
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
ws.onclose = function () {
|
|
|
|
|
$("#messages").append("<p>WS closed</p>");
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>Hello World!</h1>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
$(function() {
|
2012-02-25 23:41:47 +00:00
|
|
|
$("#slider1").slider({ min: 0, max: 255, slide: function(event, ui) {
|
2012-02-25 15:55:47 +00:00
|
|
|
ws.send("channel:2=" + ui.value);
|
2012-02-25 23:41:47 +00:00
|
|
|
ws.send("channel:7=" + ui.value);
|
|
|
|
|
ws.send("channel:12=" + ui.value);
|
|
|
|
|
ws.send("channel:17=" + ui.value);
|
|
|
|
|
} });
|
|
|
|
|
});
|
|
|
|
|
$(function() {
|
|
|
|
|
$("#slider2").slider({ min: 0, max: 255, slide: function(event, ui) {
|
|
|
|
|
ws.send("channel:3=" + ui.value);
|
|
|
|
|
ws.send("channel:8=" + ui.value);
|
|
|
|
|
ws.send("channel:13=" + ui.value);
|
|
|
|
|
ws.send("channel:18=" + ui.value);
|
|
|
|
|
} });
|
|
|
|
|
});
|
|
|
|
|
$(function() {
|
|
|
|
|
$("#slider3").slider({ min: 0, max: 255, slide: function(event, ui) {
|
|
|
|
|
ws.send("channel:4=" + ui.value);
|
|
|
|
|
ws.send("channel:9=" + ui.value);
|
|
|
|
|
ws.send("channel:14=" + ui.value);
|
|
|
|
|
ws.send("channel:19=" + ui.value);
|
2012-02-25 15:55:47 +00:00
|
|
|
} });
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<div class="demo">
|
2012-02-25 23:41:47 +00:00
|
|
|
<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>
|
2012-02-25 15:55:47 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="messages"></div>
|
2012-02-25 23:41:47 +00:00
|
|
|
<input type="button" onclick="javascript:alert(dmx512values);" value="Bla" />
|
2012-02-25 15:55:47 +00:00
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
