forked from lbsadmin/nodeMessageBoard
First poc
This commit is contained in:
parent
67d82d49b2
commit
e1d0eac6a5
114
board.html
114
board.html
|
|
@ -1,4 +1,5 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
|
||||
|
|
@ -29,21 +30,10 @@
|
|||
text-align:center;
|
||||
}
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
|
||||
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
|
||||
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script>
|
||||
// canvas request for all browsers
|
||||
window.requestAnimFrame = (function(callback) {
|
||||
return window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function(callback) {
|
||||
window.setTimeout(callback, 1000 / 30); // 30 frames per second
|
||||
};
|
||||
})();
|
||||
|
||||
var iosocket;
|
||||
var pollOneH = 0;
|
||||
|
|
@ -54,115 +44,65 @@
|
|||
//var onOff = false;
|
||||
var toggleVal = 0;
|
||||
|
||||
function animation(poll1,text)
|
||||
{
|
||||
var canvas = document.getElementById("myCanvas");
|
||||
var content = canvas.getContext("2d");
|
||||
|
||||
// clear canvas
|
||||
content.clearRect(0, 0, 460, 540);
|
||||
|
||||
content.fillStyle = 'black';
|
||||
content.textAlign = 'center';
|
||||
content.font = '20pt Calibri';
|
||||
|
||||
// make the wobbely values stop
|
||||
if(pollOneH*2 > prevPotValue+2 || pollOneH*2 < prevPotValue-2){
|
||||
prevPotValue = potValue;
|
||||
potValue = pollOneH*2;
|
||||
}
|
||||
|
||||
content.fillText('Potmeter value: ' + potValue, text.x, text.y);
|
||||
|
||||
// render graph
|
||||
content.fillStyle = 'orange';
|
||||
content.fillRect(poll1.x,(poll1.y-poll1.h),poll1.w,poll1.h);
|
||||
|
||||
content.fill();
|
||||
|
||||
// request new frame
|
||||
requestAnimFrame(function() {
|
||||
|
||||
if(poll1.h < pollOneH){
|
||||
poll1.h += (pollOneH - poll1.h)*.15;
|
||||
}
|
||||
else if(poll1.h > pollOneH){
|
||||
poll1.h -= (poll1.h - pollOneH)*.15;
|
||||
}
|
||||
text.y = (poll1.y - poll1.h) - 5;
|
||||
animation(poll1,text);
|
||||
});
|
||||
}
|
||||
|
||||
function initSocketIO()
|
||||
{
|
||||
iosocket = io.connect();
|
||||
iosocket.on('onconnection', function(value) {
|
||||
pollOneH = value.pollOneValue/2; // recieve start poll value from server
|
||||
initPoll();
|
||||
initButton();
|
||||
initSlider();
|
||||
|
||||
// recieve changed values by other client from server
|
||||
iosocket.on('updateData', function (recievedData) {
|
||||
iosocket.on('updateData', function(recievedData) {
|
||||
pollOneH = recievedData.pollOneValue/2; // recieve start poll value from server
|
||||
});
|
||||
|
||||
iosocket.on('newMessage', function(message) {
|
||||
var date = new Date();
|
||||
|
||||
var mainTable = document.getElementById("mainTable");
|
||||
var newRow = mainTable.insertRow(mainTable.rows.length);
|
||||
|
||||
var dateCell = newRow.insertCell(0);
|
||||
var textCell = newRow.insertCell(1);
|
||||
dateCell.innerHTML = date.toLocaleString();
|
||||
textCell.innerHTML = message;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initPoll()
|
||||
{
|
||||
poll1 = {
|
||||
x: 10,
|
||||
y: 540,
|
||||
w: 440,
|
||||
h: 0
|
||||
}
|
||||
text = {
|
||||
x:poll1.w/2,
|
||||
y:100
|
||||
}
|
||||
potValue = pollOneH*2;
|
||||
prevPotValue = potValue;
|
||||
animation(poll1,text);
|
||||
}
|
||||
|
||||
function initButton()
|
||||
{
|
||||
$( "#check" ).button();
|
||||
}
|
||||
|
||||
function initSlider()
|
||||
{
|
||||
$( "#slider" ).slider({
|
||||
min:0,
|
||||
max:255,
|
||||
change: function(event,ui) {
|
||||
iosocket.emit('sliderval',ui.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
initSocketIO();
|
||||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
$(document).ready(function() {
|
||||
$('#check').click(function() {
|
||||
toggleVal += 1;
|
||||
toggleVal %= 2;
|
||||
iosocket.emit('buttonval',toggleVal);
|
||||
iosocket.emit('sendAT',toggleVal);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="rData">
|
||||
<h2>Data from Arduino</h2>
|
||||
<canvas id="myCanvas" width="460" height="540"></canvas>
|
||||
<h2>Data from Sim900</h2>
|
||||
|
||||
<table id="mainTable" border="1">
|
||||
<tr>
|
||||
<td>Uhrzeit</td><td>Nachricht</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<div id="sData">
|
||||
<h2>Data to Arduino</h2>
|
||||
<h2>Debug functions</h2>
|
||||
<div id="btnHolder">
|
||||
<input type="checkbox" id="check" value="toggle"/><label for="check">Toggle LED</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ server = require('./server');
|
|||
function sendInterface(response) {
|
||||
console.log("Request handler 'interface' was called.");
|
||||
response.writeHead(200, {"Content-Type": "text/html"});
|
||||
var html = fs.readFileSync(__dirname + "board.html")
|
||||
var html = fs.readFileSync(__dirname + "/board.html")
|
||||
response.end(html);
|
||||
}
|
||||
|
||||
|
|
|
|||
17
server.js
17
server.js
|
|
@ -44,15 +44,11 @@ function initSocketIO(httpServer,debug)
|
|||
socketServer.on('update', function(data) {
|
||||
socket.emit('updateData',{pollOneValue:data});
|
||||
});
|
||||
socket.on('buttonval', function(data) {
|
||||
socket.on('sendAT', function(data) {
|
||||
serialPort.write('AT\r');
|
||||
console.log('sending:..');
|
||||
console.log('sending AT...');
|
||||
});
|
||||
socket.on('sliderval', function(data) {
|
||||
serialPort.write(data + 'P');
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Listen to serial port
|
||||
|
|
@ -71,12 +67,15 @@ function serialListener(debug)
|
|||
serialPort.on('data', function(data) {
|
||||
//receivedData += data.toString();
|
||||
//if (receivedData .indexOf('E') >= 0 && receivedData .indexOf('B') >= 0) {
|
||||
sendData = '50'; //.substring(receivedData .indexOf('B') + 1, receivedData .indexOf('E'));
|
||||
sendData = data; //.substring(receivedData .indexOf('B') + 1, receivedData .indexOf('E'));
|
||||
receivedData = '';
|
||||
console.log('server event happening..' + data + '.\r');
|
||||
//}
|
||||
// send the incoming data to browser with websockets.
|
||||
socketServer.emit('update', sendData);
|
||||
//socketServer.emit('update', sendData);
|
||||
|
||||
//if is message and is parsed
|
||||
socketServer.emit('newMessage', sendData);
|
||||
});
|
||||
//setTimeout(sendPin,500);
|
||||
serialPort.write('AT+CPIN=3797\r');
|
||||
|
|
|
|||
Loading…
Reference in New Issue