<!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" /> <style> body { margin: 0px; padding: 0px; } #rData{ float:left; margin-left:100px; margin-right:auto; width:470px; } #sData{ float: left; margin-left:100px; margin-right:auto; width:470px; } h2{ text-align:center; } #myCanvas { border: 2px dashed grey; } #btnHolder, #sliderTxt{ text-align:center; } </style> <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> const toDisplay = 5; //define the number of messages to show var iosocket; var currentMessageCount = 0; //var onOff = false; var toggleVal = 0; function initSocketIO() { iosocket = io.connect(); iosocket.on('onconnection', function() { initButton(); iosocket.on('debugMessage', function(message) { alert(message); }); iosocket.on('newMessage', function(time,number,message) { var mainTable = document.getElementById("mainTable"); var newRow = mainTable.insertRow(mainTable.rows.length); var dateCell = newRow.insertCell(0); var numberCell = newRow.insertCell(1); var textCell = newRow.insertCell(2); dateCell.innerHTML = time; numberCell.innerHTML = number; textCell.innerHTML = message; currentMessageCount++; if(currentMessageCount > toDisplay) { //Remove the top row mainTable.deleteRow(1); currentMessageCount--; } }); }); } function initButton() { $("#check").button(); } window.onload = function() { initSocketIO(); iosocket.emit('getLastMessages',toDisplay); }; $(document).ready(function() { //request last messages from server $('#check').click(function() { toggleVal += 1; toggleVal %= 2; iosocket.emit('sendAT',toggleVal); }); }); </script> </head> <body> <div style="text-align:center;"> <h2>Data from Sim900</h2> <table id="mainTable" border="1" align="center"> <tr> <td>Uhrzeit</td><td>Nummer</td><td>Nachricht</td> </tr> </table> <br> <br> <h2>Debug functions</h2> <div id="btnHolder"> <input type="checkbox" id="check" value="toggle"/><label for="check">Send AT</label> </div> </body> </html>