forked from chrylarson/OpenHMI
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (139 loc) · 4.31 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<head><title>SCADA Valve Control Example</title>
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<link type="text/css" rel="stylesheet" href="/app.css" media="all">
</head>
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
var socket = io.connect('127.0.0.1:8080'); //set this to the ip address of your node.js server
// on connection to server, ask for user's name with an anonymous callback
socket.on('connect', function(){
// call the server-side function 'adduser' and send one parameter (value of prompt)
socket.emit('adduser', prompt("What's your name?"));
});
// listener, whenever the server emits 'updatechat', this updates the chat body
socket.on('updatechat', function (username, data) {
$('#conversation').append('<b>'+username + ':</b> ' + data + '<br>');
});
// listener, whenever the server emits 'updateusers', this updates the username list
socket.on('updateusers', function(data) {
$('#users').empty();
$.each(data, function(key, value) {
$('#users').append('<div>' + key + '</div>');
});
});
// listener, whenever the server emits 'updateusers', this updates the username list
socket.on('updatevalve', function(data) {
$('#users').empty();
$.each(data, function(key, value) {
$('#users').append('<div>' + key + '</div>');
});
});
// listener, whenever the server emits 'openvalve', this updates the username list
socket.on('openvalve', function(username, data) {
$('#' + data + ' > div.feedback > div.circle.status').removeClass('red').addClass('green');
});
socket.on('opencmd', function(username, data) {
$('#' + data + ' > div.feedback > div.circle.status > div.circle.command').removeClass('red').addClass('green');
});
// listener, whenever the server emits 'openvalve', this updates the username list
socket.on('closevalve', function(username, data) {
$('#' + data + ' > div.feedback > div.circle.status').removeClass('green').addClass('red');
});
socket.on('closecmd', function(username, data) {
$('#' + data + ' > div.feedback > div.circle.status > div.circle.command').removeClass('green').addClass('red');
});
// on load of page
$(function(){
// when the client clicks SEND
$('#datasend').click( function() {
var message = $('#data').val();
$('#data').val('');
// tell server to execute 'sendchat' and send along one parameter
socket.emit('sendchat', message);
});
// when the client hits ENTER on their keyboard
$('#data').keypress(function(e) {
if(e.which == 13) {
$(this).blur();
$('#datasend').focus().click();
}
});
// when the client clicks OPEN
$('.open').click( function() {
var id = $(this).parent().attr("id");;
//console.log(id);
socket.emit('opencmd', id);
});
// when the client clicks CLOSE
$('.close').click( function() {
var id = $(this).parent().attr("id");;
//console.log(id);
socket.emit('closecmd', id);
});
});
</script>
<body>
<p>
<div id="userlist">
<b>USERS</b>
<div id="users"></div>
</div>
<div id="messages">
<input id="data"/>
<input type="button" id="datasend" class="send" value="send" />
<div id="conversation"></div>
</div>
<div class="clear"></div>
<div id="valve1001" class="valve">
<h3>VALVE 1001</h3>
<div class="open">OPEN</div>
<div class="close">CLOSE</div>
<div class="clear"></div>
<div class="feedback">
<div class="circle status green">
<div class="circle command red"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div id="valve1002" class="valve">
<h3>VALVE 1002</h3>
<div class="open">OPEN</div>
<div class="close">CLOSE</div>
<div class="clear"></div>
<div class="feedback">
<div class="circle status green">
<div class="circle command red"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div id="valve1003" class="valve">
<h3>VALVE 1003</h3>
<div class="open">OPEN</div>
<div class="close">CLOSE</div>
<div class="clear"></div>
<div class="feedback">
<div class="circle status green">
<div class="circle command red"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div id="valve1004" class="valve">
<h3>VALVE 1004</h3>
<div class="open">OPEN</div>
<div class="close">CLOSE</div>
<div class="clear"></div>
<div class="feedback">
<div class="circle status green">
<div class="circle command red"></div>
</div>
</div>
<div class="clear"></div>
</div>
</body>