273 lines
7.2 KiB
HTML
273 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>WebSocket demo</title>
|
|
<link href="_style.css" rel="stylesheet">
|
|
<link href="jquery-ui.min.css" rel="stylesheet">
|
|
<meta charset="utf-8">
|
|
</head>
|
|
<body>
|
|
|
|
<div id="pagestart">
|
|
<p><span class="users">?</span> online</p>
|
|
<h1>Raspberry Pi als DMX Webserver</h1>
|
|
<i>Ein Laborprojekt für Netzwerk- und Bustechnik von Ida und Jens</i>
|
|
</div>
|
|
|
|
<div id="remote">
|
|
|
|
<div class="faderblock">
|
|
<b>Ch 001</b>
|
|
<input type="text" id="amount_1" readonly style="border:0; color:#000; font-weight:bold;" value="?">
|
|
<div id="slider_1" class="slider"></div>
|
|
</div>
|
|
<div class="faderblock">
|
|
<b>Ch 002</b>
|
|
<input type="text" id="amount_2" readonly style="border:0; color:#000; font-weight:bold;" value="?">
|
|
<div id="slider_2" class="slider"></div>
|
|
</div>
|
|
<div class="faderblock">
|
|
<b>Ch 003</b>
|
|
<input type="text" id="amount_3" readonly style="border:0; color:#000; font-weight:bold;" value="?">
|
|
<div id="slider_3" class="slider"></div>
|
|
</div>
|
|
<div class="faderblock">
|
|
<b>Ch 004</b>
|
|
<input type="text" id="amount_4" readonly style="border:0; color:#000; font-weight:bold;" value="?">
|
|
<div id="slider_4" class="slider"></div>
|
|
</div>
|
|
<div class="faderblock">
|
|
<b>Ch 005</b>
|
|
<input type="text" id="amount_5" readonly style="border:0; color:#000; font-weight:bold;" value="?">
|
|
<div id="slider_5" class="slider"></div>
|
|
</div>
|
|
<div class="faderblock">
|
|
<b>Ch 006</b>
|
|
<input type="text" id="amount_6" readonly style="border:0; color:#000; font-weight:bold;" value="?">
|
|
<div id="slider_6" class="slider"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<script src="external/jquery/jquery.js"></script>
|
|
<script src="jquery-ui.min.js"></script>
|
|
|
|
|
|
<script>
|
|
// create websocket connection
|
|
var wbsckt = new WebSocket("ws://127.0.0.1:6789/");
|
|
|
|
|
|
|
|
wbsckt.onmessage = function (event) {
|
|
console.log("Socket Input: " + event.data);
|
|
daten = event.data.split(";");
|
|
|
|
daten.forEach( function( teil )
|
|
{
|
|
teil = teil.split("=");
|
|
|
|
// teil0 ist keine Zahl?
|
|
key = Number(teil[0]);
|
|
|
|
if ( isNaN(key) )
|
|
{
|
|
switch(teil[0])
|
|
{
|
|
case 'users':
|
|
// Anzahl Benutzer ausgeben
|
|
document.querySelector('.users').textContent = (
|
|
teil[1].toString() + " user" + (teil[1] == 1 ? "" : "s")
|
|
);
|
|
|
|
|
|
document.querySelector('#remote').style.display = 'block';
|
|
|
|
console.log("Now online: " + teil[1] );
|
|
break;
|
|
}
|
|
}
|
|
else if ( key >= 1 && key <= 6 )
|
|
{
|
|
console.log("DMX value for channel " + teil[0] + " is now at " + teil[1]);
|
|
$( function() {
|
|
$( "#amount_" + teil[0] ).val( teil[1].toString() );
|
|
$( "#slider_" + teil[0] ).slider( "value", teil[1] );
|
|
});
|
|
}
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$( function() {
|
|
// slider mit Funktion belegen
|
|
|
|
$( "#slider_1" ).slider({
|
|
orientation: "vertical",
|
|
min: 0,
|
|
max: 255,
|
|
//create: function() {
|
|
// $( "#amount_1" ).text( "0" );
|
|
//},
|
|
slide: function( event, ui ) {
|
|
//$( "#amount_1" ).val( ui.value ); // not set amount, amount is set by ws return
|
|
wbsckt.send("1=" + ui.value);
|
|
console.log("Try to set 1=" + ui.value);
|
|
}
|
|
});
|
|
|
|
//$( "#amount_1" ).val( $( "#slider_1" ).slider( "value" ) );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$( "#slider_2" ).slider({
|
|
orientation: "vertical",
|
|
min: 0,
|
|
max: 255,
|
|
create: function() {
|
|
$( "#amount_2" ).text( "0" );
|
|
},
|
|
slide: function( event, ui ) {
|
|
//$( "#amount_2" ).val( ui.value ); // not set amount, amount is set by ws return
|
|
wbsckt.send("2=" + ui.value);
|
|
console.log("Try to set 2=" + ui.value);
|
|
}
|
|
});
|
|
|
|
//$( "#amount_2" ).val( $( "#slider_2" ).slider( "value" ) );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$( "#slider_3" ).slider({
|
|
orientation: "vertical",
|
|
min: 0,
|
|
max: 255,
|
|
create: function() {
|
|
$( "#amount_3" ).text( "0" );
|
|
},
|
|
slide: function( event, ui ) {
|
|
//$( "#amount_3" ).val( ui.value ); // not set amount, amount is set by ws return
|
|
wbsckt.send("3=" + ui.value);
|
|
console.log("Try to set 3=" + ui.value);
|
|
}
|
|
});
|
|
|
|
//$( "#amount_3" ).val( $( "#slider_3" ).slider( "value" ) );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$( "#slider_4" ).slider({
|
|
orientation: "vertical",
|
|
min: 0,
|
|
max: 255,
|
|
create: function() {
|
|
$( "#amount_4" ).text( "0" );
|
|
},
|
|
slide: function( event, ui ) {
|
|
//$( "#amount_4" ).val( ui.value ); // not set amount, amount is set by ws return
|
|
wbsckt.send("4=" + ui.value);
|
|
console.log("Try to set 4=" + ui.value);
|
|
}
|
|
});
|
|
|
|
//$( "#amount_4" ).val( $( "#slider_4" ).slider( "value" ) );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$( "#slider_5" ).slider({
|
|
orientation: "vertical",
|
|
min: 0,
|
|
max: 255,
|
|
create: function() {
|
|
$( "#amount_5" ).text( "0" );
|
|
},
|
|
slide: function( event, ui ) {
|
|
//$( "#amount_5" ).val( ui.value ); // not set amount, amount is set by ws return
|
|
wbsckt.send("5=" + ui.value);
|
|
console.log("Try to set 5=" + ui.value);
|
|
}
|
|
});
|
|
|
|
//$( "#amount_5" ).val( $( "#slider_5" ).slider( "value" ) );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$( "#slider_6" ).slider({
|
|
orientation: "vertical",
|
|
min: 0,
|
|
max: 255,
|
|
create: function() {
|
|
$( "#amount_6" ).text( "0" );
|
|
},
|
|
slide: function( event, ui ) {
|
|
//$( "#amount_6" ).val( ui.value ); // not set amount, amount is set by ws return
|
|
wbsckt.send("6=" + ui.value);
|
|
console.log("Try to set 6=" + ui.value);
|
|
}
|
|
});
|
|
|
|
//$( "#amount_6" ).val( $( "#slider_6" ).slider( "value" ) );
|
|
|
|
|
|
} );
|
|
</script>
|
|
|
|
<!--
|
|
<script>
|
|
var minus = document.querySelector('.minus'),
|
|
plus = document.querySelector('.plus'),
|
|
value = document.querySelector('.value'),
|
|
users = document.querySelector('.users'),
|
|
websocket = new WebSocket("ws://<?php echo $_SERVER['SERVER_ADDR']; ?>:6789/");
|
|
minus.onclick = function (event) {
|
|
websocket.send(JSON.stringify({action: 'minus'}));
|
|
}
|
|
plus.onclick = function (event) {
|
|
websocket.send(JSON.stringify({action: 'plus'}));
|
|
}
|
|
websocket.onmessage = function (event) {
|
|
data = JSON.parse(event.data);
|
|
switch (data.type) {
|
|
case 'state':
|
|
value.textContent = data.value;
|
|
break;
|
|
case 'users':
|
|
users.textContent = (
|
|
data.count.toString() + " user" +
|
|
(data.count == 1 ? "" : "s"));
|
|
break;
|
|
default:
|
|
console.error(
|
|
"unsupported event", data);
|
|
}
|
|
};
|
|
</script>-->
|
|
</body>
|
|
</html> |