-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
90 lines (88 loc) · 4.05 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
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<script src="/jsgpio-client.js"></script>
<script>
var Example = new JSGPIOClient({
SocketIo: {
// Change 192.168.0.104 to the IP address of your Raspberry PI.
URL: "http://192.168.0.104"
},
GPIO: {
// 'Wrote' event handler.
wroteEventHandler: function(data) {
var currentDate = new Date();
// Write some debug text.
document.getElementById('messages').innerHTML =
'<br/>[' +
currentDate.getHours() +
':' +
currentDate.getMinutes() +
':' +
currentDate.getSeconds() +
'] ' +
'Pin: ' + data.pin +
' Value: ' + data.value +
'<br/>' +
document.getElementById('messages').innerHTML
},
// Err event handler.
errEventHandler: function(data) {
var currentDate = new Date();
// Write some debug text.
document.getElementById('messages').innerHTML =
'<br/>[' +
currentDate.getHours() +
':' +
currentDate.getMinutes() +
':' +
currentDate.getSeconds() +
'] ' +
'Pin: ' + data.pin +
' Value: ' + data.value +
' Error: ' + data.message +
'<br/>' +
document.getElementById('messages').innerHTML
}
}
});
/**
* Example Function used for emitting write events.
* @param value
* @param pin
*/
function writeToGPIO(value, pin) {
// Ensure values are _always_ numbers.
value = parseInt(value, 10);
pin = typeof pin !== "undefined" ? pin : parseInt(document.getElementById('pin').value, 10);
Example.write(pin, value);
}
</script>
</head>
<body>
<table>
<tr><td colspan="2">Enter a pin number and set it on or off.</td></tr>
<tr>
<td>Pin:</td>
<td><input type="text" value="" name="pin" id="pin"/></td>
</tr>
<tr>
<td> </td>
<td>
<input value="On" type="button" onclick="writeToGPIO(1);"/>
<input value="Off" type="button" onclick="writeToGPIO(0);"/>
</td>
</tr>
</table>
<br/>
<div>Hover in and out of one of the boxes, and pins 5 (yellow) and 3 (red) will turn on or off.</div>
<table style="text-align: center;">
<tr>
<td><div onmouseout="writeToGPIO(0, 5);" onmouseover="writeToGPIO(1, 5);" style="width: 50px; height: 50px; background-color: yellow;"> </div></td>
<td><div onmouseout="writeToGPIO(0, 3);" onmouseover="writeToGPIO(1, 3);" style="width: 50px; height: 50px; background-color: red;"> </div></td>
</tr>
</table>
<div>Message history, reverse order (last first).</div>
<div name="messages" id="messages"> </div>
</body>
</html>