147 lines
3.5 KiB
PHP
147 lines
3.5 KiB
PHP
<!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">
|
|
<?php
|
|
|
|
// start-channel?
|
|
if ( !isset($_GET['start']) || $_GET['start'] < 1 || $_GET['start'] > 512 )
|
|
$_GET['start'] = 1;
|
|
|
|
// end-channel?
|
|
if ( !isset($_GET['end']) || $_GET['end'] < 1 || $_GET['end'] > 512 )
|
|
$_GET['end'] = 12;
|
|
|
|
// zahlendreher?
|
|
if ( $_GET['start'] > $_GET['end'] )
|
|
{
|
|
$end = $_GET['end'];
|
|
$_GET['end'] = $_GET['start'];
|
|
$_GET['start'] = $end;
|
|
unset($end);
|
|
}
|
|
|
|
// erstmal slider bauen
|
|
for (
|
|
$i = $_GET['start'];
|
|
$i <= $_GET['end'];
|
|
$i++
|
|
)
|
|
{
|
|
echo'
|
|
<div class="faderblock">
|
|
<b>Ch '. str_pad($i, 3, 0, STR_PAD_LEFT) .'</b>
|
|
<input type="text" id="amount_'.$i.'" readonly style="border:0; color:#000; font-weight:bold;" value="0">
|
|
<div id="slider_'.$i.'" class="slider"></div>
|
|
</div>
|
|
';
|
|
};
|
|
?>
|
|
</div>
|
|
|
|
<button>Manual</button>
|
|
|
|
|
|
<script src="external/jquery/jquery.js"></script>
|
|
<script src="jquery-ui.min.js"></script>
|
|
|
|
|
|
<script>
|
|
// create websocket connection
|
|
var wbsckt = new WebSocket("ws://<?php echo $_SERVER['SERVER_ADDR']; ?>:6789/");
|
|
|
|
// einmal alle Werte abfragen
|
|
|
|
|
|
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 >= <?php echo $_GET['start']; ?> && key <= <?php echo $_GET['end']; ?>)
|
|
{
|
|
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
|
|
<?php
|
|
for (
|
|
$i = $_GET['start'];
|
|
$i <= $_GET['end'];
|
|
$i++
|
|
)
|
|
{
|
|
echo'
|
|
$( "#slider_'.$i.'" ).slider({
|
|
orientation: "vertical",
|
|
min: 0,
|
|
max: 255,
|
|
//create: function() {
|
|
// $( "#amount_'.$i.'" ).text( "0" );
|
|
//},
|
|
slide: function( event, ui ) {
|
|
//$( "#amount_'.$i.'" ).val( ui.value ); // WS will set value of amount
|
|
wbsckt.send("'.$i.'=" + ui.value);
|
|
console.log("Try to set '.$i.'=" + ui.value);
|
|
}
|
|
});
|
|
|
|
//$( "#amount_'.$i.'" ).val( $( "#slider_'.$i.'" ).slider( "value" ) );
|
|
|
|
';
|
|
};
|
|
?>
|
|
|
|
$( "button" ).click( function( event ) {
|
|
wbsckt.send("manual=1");
|
|
} );
|
|
} );
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|