mirror of
https://gitlab.silvrtree.co.uk/martind2000/SODashServer.git
synced 2025-01-11 12:45:08 +00:00
221 lines
6.4 KiB
HTML
221 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Console</title>
|
|
<link rel="stylesheet" type="text/css" href="css/mui.css">
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.4/zepto.min.js"></script>
|
|
<style>
|
|
#lightR, #projR {color:red !important;}
|
|
#lightG, #projG {color:green !important;}
|
|
#lightB, #projB {color:blue !important;}
|
|
#lightW, #projW {background-color: #aabbcc;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="mui-container">
|
|
<div class="mui-panel" data-bind="with: viewLights">
|
|
<div class="mui-row">
|
|
<button id="frontLightOn">Front Light On</button>
|
|
<button id="frontLightOff">Front Light Off</button>
|
|
</div>
|
|
<div class="mui-row">
|
|
<button id="middleLightOn">Middle Light On</button>
|
|
<button id="middleLightOff">Middle Light Off</button>
|
|
</div>
|
|
<div class="mui-row">
|
|
<button id="backLightOn">Back Light On</button>
|
|
<button id="backLightOff">Back Light Off</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="mui-panel" data-bind="with: viewHeat">
|
|
<div class="mui-row">
|
|
<button id="heatingOn">Heating On</button>
|
|
<button id="heatingOff">Heating Off</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mui-panel" data-bind="with: viewProjector">
|
|
<div class="mui-row">
|
|
<button id="projectorOn">Projector On</button>
|
|
<button id="projectorOff">Projector Off</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="mui-panel">
|
|
<div class="mui-row">
|
|
<div class="mui-col-md-3"><span id="lightR">---</span></div>
|
|
<div class="mui-col-md-3"><span id="lightG">---</span></div>
|
|
<div class="mui-col-md-3"><span id="lightB">---</span></div>
|
|
<div class="mui-col-md-3"><span id="lightW">---</span></div>
|
|
|
|
</div>
|
|
<div class="mui-row">
|
|
<div class="mui-col-md-3"><span id="projR">---</span></div>
|
|
<div class="mui-col-md-3"><span id="projG">---</span></div>
|
|
<div class="mui-col-md-3"><span id="projB">---</span></div>
|
|
<div class="mui-col-md-3"><span id="projW">---</span></div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
function turnOnLights(id) {
|
|
console.log('turn on the lights');
|
|
$.post('api/v1/lighting/on', {light: id}, function (repsonse) {
|
|
console.log(repsonse);
|
|
});
|
|
}
|
|
|
|
function turnOffLights(id) {
|
|
console.log('turn off the lights');
|
|
$.post('api/v1/lighting/off', {light: id}, function (repsonse) {
|
|
console.log(repsonse);
|
|
});
|
|
}
|
|
|
|
function turnOnHeating() {
|
|
console.log('turn on the heating');
|
|
$.post('api/v1/heating/on', {}, function (repsonse) {
|
|
console.log(repsonse);
|
|
});
|
|
}
|
|
|
|
function turnOffHeating() {
|
|
console.log('turn off the heating');
|
|
$.post('api/v1/heating/off', {}, function (repsonse) {
|
|
console.log(repsonse);
|
|
});
|
|
}
|
|
|
|
function turnOnProjector() {
|
|
console.log('turn on the heating');
|
|
$.post('api/v1/projector/on', {}, function (repsonse) {
|
|
console.log(repsonse);
|
|
});
|
|
}
|
|
|
|
function turnOffProjector() {
|
|
console.log('turn off the heating');
|
|
$.post('api/v1/projector/off', {}, function (repsonse) {
|
|
console.log(repsonse);
|
|
});
|
|
}
|
|
|
|
$('#projectorOn').on('click', function () {
|
|
turnOnProjector();
|
|
});
|
|
|
|
$('#projectorOff').on('click', function () {
|
|
turnOffProjector();
|
|
});
|
|
|
|
$('#heatingOn').on('click', function () {
|
|
turnOnHeating();
|
|
});
|
|
|
|
$('#heatingOff').on('click', function () {
|
|
turnOffHeating();
|
|
});
|
|
|
|
$('#frontLightOn').on('click', function () {
|
|
turnOnLights(1);
|
|
});
|
|
|
|
$('#middleLightOn').on('click', function () {
|
|
turnOnLights(2);
|
|
});
|
|
|
|
$('#backLightOn').on('click', function () {
|
|
turnOnLights(3);
|
|
});
|
|
|
|
$('#frontLightOff').on('click', function () {
|
|
turnOffLights('a');
|
|
});
|
|
|
|
$('#middleLightOff').on('click', function () {
|
|
turnOffLights('b');
|
|
});
|
|
|
|
$('#backLightOff').on('click', function () {
|
|
turnOffLights('c');
|
|
});
|
|
|
|
(function () {
|
|
console.log('Starting socket?');
|
|
var url = "ws://localhost:8080";
|
|
|
|
var wsCtor = window['MozWebSocket'] ? MozWebSocket : WebSocket;
|
|
this.socket = new wsCtor(url, 'stream');
|
|
|
|
this.updateLighting = function(obj) {
|
|
//console.log(obj);
|
|
$('#lightR').text(obj.Red);
|
|
$('#lightG').text(obj.Green);
|
|
$('#lightB').text(obj.Blue);
|
|
|
|
var w = '#'+('0'+parseInt(obj.Red).toString(16)).substr(-2,2)+ ('0'+parseInt(obj.Green).toString(16)).substr(-2,2) + ('0'+parseInt(obj.Blue).toString(16)).substr(-2,2);
|
|
|
|
$('#lightW').text(w);
|
|
$('#lightW').css('background-color', w);
|
|
};
|
|
|
|
this.updateProj = function(obj) {
|
|
//console.log(obj);
|
|
$('#projR').text(obj.Red);
|
|
$('#projG').text(obj.Green);
|
|
$('#projB').text(obj.Blue);
|
|
|
|
var w = '#'+('0'+parseInt(obj.Red).toString(16)).substr(-2,2)+ ('0'+parseInt(obj.Green).toString(16)).substr(-2,2) + ('0'+parseInt(obj.Blue).toString(16)).substr(-2,2);
|
|
|
|
$('#projW').text(w);
|
|
$('#projW').css('background-color', w);
|
|
};
|
|
|
|
this.handleData = function(d) {
|
|
switch(d.id) {
|
|
case 'LightingDataReceived':
|
|
this.updateLighting(d.sensorData.d);
|
|
break;
|
|
case 'ProjectorDataReceived':
|
|
this.updateProj(d.sensorData.d);
|
|
break;
|
|
case 'HeatingDataReceived':
|
|
break;
|
|
default:
|
|
}
|
|
};
|
|
|
|
|
|
this.handleWebsocketMessage = function (message) {
|
|
try {
|
|
var command = JSON.parse(message.data);
|
|
}
|
|
catch (e) { /* do nothing */
|
|
}
|
|
|
|
if (command) {
|
|
//this.dispatchCommand(command);
|
|
this.handleData(command);
|
|
}
|
|
};
|
|
|
|
this.handleWebsocketClose = function () {
|
|
alert("WebSocket Connection Closed.");
|
|
};
|
|
|
|
this.socket.onmessage = this.handleWebsocketMessage.bind(this);
|
|
this.socket.onclose = this.handleWebsocketClose.bind(this);
|
|
})();
|
|
|
|
</script>
|
|
</body>
|
|
</html> |