hackcentercontrol/nodeartnet/index.html

235 lines
9.8 KiB
HTML
Raw Normal View History

2012-12-28 22:17:47 +00:00
<!DOCTYPE html>
<html>
<head>
2012-12-29 02:15:05 +00:00
<title>hackcenter light control</title>
2012-12-28 22:17:47 +00:00
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
2012-12-28 23:04:06 +00:00
<link href="css/style.css" rel="stylesheet" media="screen">
2012-12-28 23:31:07 +00:00
<script src="js/jquery-1.8.3.min.js"></script>
2012-12-28 22:17:47 +00:00
</head>
<body>
2012-12-28 23:04:06 +00:00
<div class="container left">
2012-12-29 02:15:05 +00:00
<h3>hackcenter light control</h3>
2012-12-28 23:04:06 +00:00
<div class="row">
<div class="span3">
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-1-1-red" data-channel="/1/wabe1/1/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-1-1-green" data-channel="/1/wabe1/2/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-1-1-blue" data-channel="/1/wabe1/1/2">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
</div>
<div class="span3 spansmall">
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-2-1-red" data-channel="/1/lamp1/white">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
</div>
<div class="span3">
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-3-1-red" data-channel="/1/wabe2/1/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-3-1-green" data-channel="/1/wabe2/2/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-3-1-blue" data-channel="/1/wabe2/1/2">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
</div>
<div class="span3">
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-4-1-red" data-channel="/1/wabe3/1/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-4-1-green" data-channel="/1/wabe3/2/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-4-1-blue" data-channel="/1/wabe3/1/2">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
</div>
</div>
2012-12-28 22:17:47 +00:00
<div class="row">
2012-12-28 23:04:06 +00:00
<div class="span3">
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-5-1-red" data-channel="/1/wabe4/1/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-5-1-green" data-channel="/1/wabe4/2/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-5-1-blue" data-channel="/1/wabe4/1/2">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
</div>
<div class="span3 spansmall">
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-6-1-red" data-channel="/1/lamp2/white">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2012-12-28 22:17:47 +00:00
</div>
2012-12-28 23:04:06 +00:00
<div class="span3">
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-7-1-red" data-channel="/1/wabe5/1/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-7-1-green" data-channel="/1/wabe5/2/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-7-1-blue" data-channel="/1/wabe5/1/2">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2012-12-28 22:17:47 +00:00
</div>
2012-12-28 23:04:06 +00:00
<div class="span3">
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-8-1-red" data-channel="/1/wabe6/1/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-8-1-green" data-channel="/1/wabe6/2/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-8-1-blue" data-channel="/1/wabe6/1/2">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2012-12-28 22:17:47 +00:00
</div>
</div>
2012-12-28 23:04:06 +00:00
<div class="row">
<div class="span3">
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-9-1-red" data-channel="/1/wabe7/1/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-9-1-green" data-channel="/1/wabe7/2/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-9-1-blue" data-channel="/1/wabe7/1/2">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
</div>
<div class="span3 spansmall">
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-10-1-red" data-channel="/1/lamp3/white">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
</div>
<div class="span3">
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-11-1-red" data-channel="/1/wabe8/1/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-11-1-green" data-channel="/1/wabe8/2/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-11-1-blue" data-channel="/1/wabe8/1/2">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
</div>
<div class="span3">
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-12-1-red" data-channel="/1/wabe9/1/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-12-1-green" data-channel="/1/wabe9/2/1">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
2013-01-10 01:18:25 +00:00
<div class="btn-group wabe-12-1-blue" data-channel="/1/wabe9/1/2">
2012-12-28 23:04:06 +00:00
<button class="btn btn-success">on</button>
<button class="btn btn-danger">off</button>
</div>
</div>
</div>
</div>
2012-12-28 23:27:36 +00:00
<!--
2012-12-28 23:04:06 +00:00
<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>
2012-12-28 23:27:36 +00:00
-->
2012-12-28 23:04:06 +00:00
2012-12-29 02:15:05 +00:00
<br style="clear: both" />
<!--
<div class="container bottom">
<input type="range" name="bottom-slider" id="bottom-slider" min="0" max="100" value="0" />
</div> -->
2012-12-28 23:04:06 +00:00
2012-12-29 02:15:05 +00:00
<div class="footer">
from top to bottom: red/green/blue
</div>
2012-12-28 22:17:47 +00:00
<script src="/socket.io/socket.io.js"></script>
<script>
2012-12-28 23:04:06 +00:00
var socket = io.connect('http://' + window.location.hostname + ":" + window.location.port);
2012-12-28 22:17:47 +00:00
socket.on('news', function (data) {
console.log(data);
//
//handleDMXData(data);
});
$(document).ready(function(evnt) {
2012-12-28 23:04:06 +00:00
$(document).delegate('.btn-success', 'click', function(event) {
var channel = $(this).parent().data('channel');
2012-12-28 22:17:47 +00:00
if(channel != null) {
2012-12-28 23:04:06 +00:00
socket.emit('oscmessage', { chan: channel, val: 1 });
2012-12-28 22:17:47 +00:00
}
2012-12-28 23:04:06 +00:00
});
2012-12-28 22:17:47 +00:00
2012-12-28 23:04:06 +00:00
$(document).delegate('.btn-danger', 'click', function(event) {
var channel = $(this).parent().data('channel');
if(channel != null) {
socket.emit('oscmessage', { chan: channel, val: 0 });
}
2012-12-28 22:17:47 +00:00
});
2012-12-28 23:27:36 +00:00
/*
$(document).delegate('#bottom-slider', 'change', function(event) {
socket.emit('oscmessage', { chan: '/1/fader1', val: })
}); */
2012-12-28 22:17:47 +00:00
});
</script>
<script src="js/bootstrap.min.js"></script>
2012-12-28 23:27:36 +00:00
<script src="js/html5slider.js"></script>
2012-12-28 22:17:47 +00:00
</body>
</html>