forked from adcomp/piface-python-websocket-server
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (118 loc) · 5.93 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
<!DOCTYPE html>
<html>
<head>
<title>PiFace Remote WebSocket</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="author" content="David Art [aka] adcomp" >
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { text-align: center; }
header { font-family: sans-serif, monospace; vertical-align: middle; background: #000; background: linear-gradient(#222, #000) repeat scroll 0% 0% transparent; border-bottom: 4px solid #bd1143; padding: 8px; margin-bottom: 16px; }
header h1 { color: white; font-size: 32px; margin: 0; }
header h2 { font-size: 18px; color: #444; }
.piface { margin-bottom: 42px; }
#pi_logo { vertical-align: middle;}
#input, #output { display: none; padding: 4px; }
.input_bt, .output_bt { display: inline-block; width: 64px; height: 64px; border: 3px solid black; border-radius: 4px; background: #333; color: #999; font-family: sans-serif, monospace; font-size: 12px; margin: 4px;}
.input_bt div, .output_bt div { font-size: 26px; margin-top: 6px; }
#host { background: #bd1143; border: 3px solid black; border-radius: 4px; padding: 4px; color: white; font-size: 18px; font-family: monospace; }
.footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 0 16px;; height: 30px; line-height: 2em; color: #ccc; background: #000; background: linear-gradient(#222, #000) repeat scroll 0% 0% transparent; border-top: 2px solid #262626; text-align: right; font-size: 0.8em; z-index: 100; }
a { color: #999; text-decoration: none; border: 0px none; }
a:hover { text-decoration: underline; }
@media only screen and (max-width: 640px) {
.input_bt, .output_bt { width: 48px; height: 48px; border: 1px solid black; border-radius: 4px; background: #333; color: #999; font-family: sans-serif, monospace; font-size: 12px; }
}
@media only screen and (max-width: 320px) {
.input_bt, .output_bt { width: 64px; height: 64px; border: 1px solid black; border-radius: 4px; background: #333; color: #999; font-family: sans-serif, monospace; font-size: 12px; }
}
@media only screen and (min-width: 900px) {
.input_bt, .output_bt { width: 92px; height: 92px; border: 4px solid black; border-radius: 4px; background: #333; color: #999; font-family: sans-serif, monospace; font-size: 12px; }
}
</style>
</head>
<body>
<header>
<h1>PiFace</h1>
<h2>I/O Interface for Raspberry Pi</h2>
</header>
<div id="con_div">
<label for="host">Host :</label>
<input type="text" id="host" value="192.168.0.3" />
<input type="button" id="connect" value="connect" onclick='connect()' />
</div>
<div class="piface">
<div id="input">
<h2>Input</h2>
<div id="in_0" class="input_bt">0<div id="in_0_state">--</div></div>
<div id="in_1" class="input_bt">1<div id="in_1_state">--</div></div>
<div id="in_2" class="input_bt">2<div id="in_2_state">--</div></div>
<div id="in_3" class="input_bt">3<div id="in_3_state">--</div></div>
<div id="in_4" class="input_bt">4<div id="in_4_state">--</div></div>
<div id="in_5" class="input_bt">5<div id="in_5_state">--</div></div>
<div id="in_6" class="input_bt">6<div id="in_6_state">--</div></div>
<div id="in_7" class="input_bt">7<div id="in_7_state">--</div></div>
</div>
<div id="output">
<h2>Output</h2>
<div id="out_0" class="output_bt" onclick="ws.send('0')">0<div id="out_0_state">--</div></div>
<div id="out_1" class="output_bt" onclick="ws.send('1')">1<div id="out_1_state">--</div></div>
<div id="out_2" class="output_bt" onclick="ws.send('2')">2<div id="out_2_state">--</div></div>
<div id="out_3" class="output_bt" onclick="ws.send('3')">3<div id="out_3_state">--</div></div>
<div id="out_4" class="output_bt" onclick="ws.send('4')">4<div id="out_4_state">--</div></div>
<div id="out_5" class="output_bt" onclick="ws.send('5')">5<div id="out_5_state">--</div></div>
<div id="out_6" class="output_bt" onclick="ws.send('6')">6<div id="out_6_state">--</div></div>
<div id="out_7" class="output_bt" onclick="ws.send('7')">7<div id="out_7_state">--</div></div>
</div>
</div><!-- piface -->
<footer class="footer"><a href="#">adcomp</a></footer>
<script>
var ws = null;
function connect() {
var host = document.getElementById('host').value;
ws = new WebSocket("ws://" + host + ":8888/piface");
ws.onmessage = function(evt) {
// console.log(evt.data);
var piface = JSON.parse(evt.data);
update(piface);
};
ws.onclose = function(evt) {
console.log("Connection close ..");
document.getElementById('host').style["background"] = "#bd1143";
document.getElementById('input').style["display"] = 'none';
document.getElementById('output').style["display"] = 'none';
document.getElementById("connect").style.visibility = "visible";
};
ws.onopen = function(evt) {
console.log("WebSocket open ..")
document.getElementById('host').style["background"] = "#7eb52b";
document.getElementById("connect").style.visibility = "hidden";
document.getElementById('input').style["display"] = 'block';
document.getElementById('output').style["display"] = 'block';
};
}
function update(piface) {
for (var i=0; i<8; i++) {
// input
if (piface['in'][i] == '0') {
document.getElementById('in_' + i).style["background"] = "#333";
document.getElementById('in_' + i+ '_state').innerHTML = "Off";
}
else {
document.getElementById('in_' + i).style["background"] = "#159";
document.getElementById('in_' + i+ '_state').innerHTML = "On";
}
// output
if (piface['out'][i] == '0') {
document.getElementById('out_' + i).style["background"] = "#333";
document.getElementById('out_' + i+ '_state').innerHTML = "Off";
}
else {
document.getElementById('out_' + i).style["background"] = "#bd1143";
document.getElementById('out_' + i+ '_state').innerHTML = "On";
}
}
}
</script>
</body>
</html>