 |
| Screen Capture of WSAdam1_0.html |
Let's simplify the HTML code.
Create
ws = new WebSocket('ws://192.168.219.16:80/');
Method
ws.send("DI"); // sends message
ws.close(); // Not used this time
Event
ws.onopen = function() { status('Connected...'); }
ws.onclose = function() { status('Closed...'); }
ws.onerror = function(evt) { status('Error ' + evt.data); }
ws.onmessage = function(evt) { // function that receives message
Reference: http://www.tutorialspoint.com/html5/html5_websocket.htm
<!DOCTYPE html>
<html>
<head>
<title>ADAM-4050 1.0</title>
<!--It seemed to be a waste to download it everytime,
so I included the file.-->
<script type="text/javascript" src="jquery.js"></script>
<script>
var ws;
var InLamp = new Array();
for (var i = 1; i < 8; i++)
InLamp[i] = '#DI' + (7 - i) + '_c';
// This is the code that browser calls when done
// loading HTML/JS code.
$(document).ready(function() {
var i = 0;
var html = 'ON <br />';
// This is the code for making ON buttons in HTML.
// The same code is repeated.
for (i = 0; i < 8; i++)
html += '<button type="button" onclick="DO_On(' + i + ')">DO ' + i + '</button>';
$('#OutONbutton').append(html);
// This is the code for making OFF buttons in
// HTML.
html = 'OFF<br/>';
for (i = 0; i < 8; i++)
html += '<button type="button" onclick="DO_Off(' + i + ')">DO ' + i + '</button>';
$('#OutOFFbutton').append(html);
// This is the code for drawing Input circles in
// HTML.
html = '<table><tr align="center">';
for (i = 0; i < 7; i++)
html += '<td><svg height="50" width="50"><circle id="DI' + i + '_c" cx="25" cy="25" r="20" stroke="black" fill="white"/></svg></td>';
html += '</tr><tr align="center"><td>DI 0</td> <td>DI 1</td> <td>DI 2</td> <td>DI 3</td> <td>DI 4</td> <td>DI 5</td> <td>DI 6</td></tr></table>';
$('#InputLamp').append(html);
// Now connect the WebSocket.
WebSocketConnect();
});
function WebSocketConnect() {
try {
ws = new WebSocket('ws://192.168.219.16:80/');
ws.onopen = function() {
status('Connected...');
}
ws.onclose = function() {
status('Closed...');
}
ws.onerror = function(evt) {
status('Error ' + evt.data);
}
ws.onmessage = function(evt) {
for (var i = 1; i < 8; i++) {
if (evt.data[i] == '0')
$(InLamp[i]).css("fill", "white");
else
$(InLamp[i]).css("fill", "red");
}
};
}
catch (exception) {
status('Exception ' + exception);
}
}
function DO_On(chn) { ws.send('DO' + chn + '_ON'); }
function DO_Off(chn) { ws.send('DO' + chn + '_OFF'); }
function DI() { ws.send("DI"); }
function status(str) { $("#status").append(str); }
</script>
</head>
<body>
<p id="status">Connection Status: </p>
<p id="OutONbutton"></p>
<p id="OutOFFbutton"></p>
<p id="InputLamp"></p>
<button type="button" onclick="DI()">IN Refresh</button>
</body>
</html>
Full codes can be found in following links
- WSAdam1_0.html:
https://github.com/michelleseo/Arduino_Web/blob/master/WSAdam/WSAdam1_0.html - jQuery.js:
https://github.com/michelleseo/Arduino_Web/blob/master/WSAdam/jquery.js
No comments:
Post a Comment