<html>
<head>
<title>Autobahn Serial2Ws</title>
<script src="http://autobahn.s3.amazonaws.com/js/autobahn.min.js"></script>
<script src="smoothie.js"></script>
<script>
var sess = null;
var wsuri = "ws://" + window.location.hostname + ":9000";
var retryCount = 0;
var retryDelay = 2;
var analog0 = null;
var analog1 = null;
var analog0_last = null;
var analog1_last = null;
var line0 = new TimeSeries();
var line1 = new TimeSeries();
var eventCnt = 0;
var eventCntUpdateInterval = 2;
function onAnalogValue(topicUri, event) {
eventCnt += 1;
event.value = event.value / 400 * 100;
event.value = event.value.toFixed(2);
switch (event.id) {
case 0:
analog0.innerHTML = event.value;
if (analog0_last !== null) {
line0.append(new Date().getTime(), analog0_last);
}
analog0_last = event.value;
line0.append(new Date().getTime(), event.value);
break;
case 1:
analog1.innerHTML = event.value;
if (analog1_last !== null) {
line1.append(new Date().getTime(), analog1_last);
}
analog1_last = event.value;
line1.append(new Date().getTime(), event.value);
break;
default:
break;
}
}
function controlLed(status) {
sess.call("rpc:control-led", status).always(ab.log);
}
function updateEventCnt() {
document.getElementById("event-cnt").innerHTML = Math.round(eventCnt/eventCntUpdateInterval) + " events/s";
eventCnt = 0;
}
function connect() {
statusline = document.getElementById('statusline');
sess = new ab.Session(wsuri,
function() {
statusline.innerHTML = "Connected to " + wsuri;
retryCount = 0;
sess.prefix("event", "http://example.com/mcu#");
sess.subscribe("event:analog-value", onAnalogValue);
sess.prefix("rpc", "http://example.com/mcu-control#");
eventCnt = 0;
window.setInterval(updateEventCnt, eventCntUpdateInterval * 1000);
},
function() {
console.log(retryCount);
retryCount = retryCount + 1;
statusline.innerHTML = "Connection lost. Reconnecting (" + retryCount + ") in " + retryDelay + " secs ..";
window.setTimeout(connect, retryDelay * 1000);
}
);
}
window.onload = function ()
{
analog0 = document.getElementById('analog0');
analog1 = document.getElementById('analog1');
var smoothie = new SmoothieChart({grid: {strokeStyle: 'rgb(125, 0, 0)',
fillStyle: 'rgb(60, 0, 0)',
lineWidth: 1,
millisPerLine: 250,
verticalSections: 6},
minValue: 0,
maxValue: 100,
resetBounds: false,
//interpolation: "line"
});
smoothie.addTimeSeries(line0, { strokeStyle: 'rgb(0, 255, 0)', fillStyle: 'rgba(0, 255, 0, 0.4)', lineWidth: 3 });
smoothie.addTimeSeries(line1, { strokeStyle: 'rgb(255, 0, 255)', fillStyle: 'rgba(255, 0, 255, 0.3)', lineWidth: 3 });
smoothie.streamTo(document.getElementById("mycanvas"));
connect();
};
</script>
</head>
<body>
<h1>Autobahn WebSockets: MCU to WS Gateway Demo</h1>
<h2>Control LED</h2>
<button onclick="controlLed(false)">LED Off</button>
<button onclick="controlLed(true)">LED On</button>
<h2>Analog Values</h2>
<p>Analog 0 : <span id="analog0">-</span></p>
<p>Analog 1 : <span id="analog1">-</span></p>
<div id="event-cnt" style="color: #f60; font-weight: 700; font-size: 24px;">-</div>
<canvas id="mycanvas" width="800" height="400"></canvas>
<h2>Status</h2>
<div id="statusline"></div>
</body>
</html>