230 lines
9.9 KiB
HTML
230 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Hackcenter Light Control</title>
|
|
<!-- Bootstrap -->
|
|
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
|
|
<link href="css/style.css" rel="stylesheet" media="screen">
|
|
<script src="js/jquery-1.8.3.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container left">
|
|
<div class="row">
|
|
<div class="span3">
|
|
<div class="btn-group wabe-1-1-red" data-channel="/2/multitoggle/1/1">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-1-1-green" data-channel="/2/multitoggle/2/1">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-1-1-blue" data-channel="/2/multitoggle/1/2">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
</div>
|
|
<div class="span3 spansmall">
|
|
<div class="btn-group wabe-2-1-red" data-channel="/2/multitoggle/1/16">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
</div>
|
|
<div class="span3">
|
|
<div class="btn-group wabe-3-1-red" data-channel="/2/multitoggle/3/1">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-3-1-green" data-channel="/2/multitoggle/4/1">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-3-1-blue" data-channel="/2/multitoggle/3/2">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
</div>
|
|
<div class="span3">
|
|
<div class="btn-group wabe-4-1-red" data-channel="/2/multitoggle/5/1">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-4-1-green" data-channel="/2/multitoggle/6/1">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-4-1-blue" data-channel="/2/multitoggle/5/2">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="span3">
|
|
<div class="btn-group wabe-5-1-red" data-channel="/2/multitoggle/1/3">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-5-1-green" data-channel="/2/multitoggle/2/3">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-5-1-blue" data-channel="/2/multitoggle/1/4">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
</div>
|
|
<div class="span3 spansmall">
|
|
<div class="btn-group wabe-6-1-red" data-channel="/2/multitoggle/2/16">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
</div>
|
|
<div class="span3">
|
|
<div class="btn-group wabe-7-1-red" data-channel="/2/multitoggle/3/3">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-7-1-green" data-channel="/2/multitoggle/4/3">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-7-1-blue" data-channel="/2/multitoggle/3/4">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
</div>
|
|
<div class="span3">
|
|
<div class="btn-group wabe-8-1-red" data-channel="/2/multitoggle/5/3">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-8-1-green" data-channel="/2/multitoggle/6/3">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-8-1-blue" data-channel="/2/multitoggle/5/4">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="span3">
|
|
<div class="btn-group wabe-9-1-red" data-channel="/2/multitoggle/1/5">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-9-1-green" data-channel="/2/multitoggle/2/5">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-9-1-blue" data-channel="/2/multitoggle/1/6">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
</div>
|
|
<div class="span3 spansmall">
|
|
<div class="btn-group wabe-10-1-red" data-channel="/2/multitoggle/3/16">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
</div>
|
|
<div class="span3">
|
|
<div class="btn-group wabe-11-1-red" data-channel="/2/multitoggle/3/5">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-11-1-green" data-channel="/2/multitoggle/4/5">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-11-1-blue" data-channel="/2/multitoggle/3/6">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
</div>
|
|
<div class="span3">
|
|
<div class="btn-group wabe-12-1-red" data-channel="/2/multitoggle/5/5">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-12-1-green" data-channel="/2/multitoggle/6/5">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
<div class="btn-group wabe-12-1-blue" data-channel="/2/multitoggle/5/6">
|
|
<button class="btn btn-success">on</button>
|
|
<button class="btn btn-danger">off</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!--
|
|
<div class="container right">
|
|
<div class="span2">
|
|
LED
|
|
</div>
|
|
</div>
|
|
<div class="container right">
|
|
<div class="span2">
|
|
<input type="range" name="right-slider" id="right-slider" min="0" max="100" value="0" />
|
|
</div>
|
|
</div>
|
|
|
|
-->
|
|
<!--
|
|
<br style="clear: both" />
|
|
|
|
<div class="container bottom">
|
|
<input type="range" name="bottom-slider" id="bottom-slider" min="0" max="100" value="0" />
|
|
</div> -->
|
|
|
|
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script>
|
|
|
|
|
|
var socket = io.connect('http://' + window.location.hostname + ":" + window.location.port);
|
|
socket.on('news', function (data) {
|
|
console.log(data);
|
|
//
|
|
//handleDMXData(data);
|
|
});
|
|
|
|
$(document).ready(function(evnt) {
|
|
|
|
$(document).delegate('.btn-success', 'click', function(event) {
|
|
var channel = $(this).parent().data('channel');
|
|
if(channel != null) {
|
|
socket.emit('oscmessage', { chan: channel, val: 1 });
|
|
|
|
}
|
|
});
|
|
|
|
$(document).delegate('.btn-danger', 'click', function(event) {
|
|
var channel = $(this).parent().data('channel');
|
|
if(channel != null) {
|
|
socket.emit('oscmessage', { chan: channel, val: 0 });
|
|
|
|
}
|
|
});
|
|
|
|
/*
|
|
$(document).delegate('#bottom-slider', 'change', function(event) {
|
|
|
|
socket.emit('oscmessage', { chan: '/1/fader1', val: })
|
|
|
|
}); */
|
|
|
|
});
|
|
</script>
|
|
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<script src="js/html5slider.js"></script>
|
|
</body>
|
|
</html>
|