Skip to content

Commit 446d718

Browse files
ZodiusInfuserGadgetoid
ZodiusInfuser
authored and
Gadgetoid
committed
Automation 2040W Mini: Add dedicated HTML page.
1 parent 0616a06 commit 446d718

File tree

2 files changed

+341
-15
lines changed

2 files changed

+341
-15
lines changed

‎micropython/examples/automation2040w/web_io_interface/index_mini.html‎

Lines changed: 323 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,323 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<!-- HTML Codes by Quackit.com -->
5+
6+
<title>
7+
</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<head>
10+
11+
<style>
12+
body {background-color:#050505;background-repeat:no-repeat;background-position:top left;background-attachment:fixed;}
13+
h1{font-family:Arial, sans-serif;color:#ffffff;}
14+
h2{font-family:Arial, sans-serif;color:#ffffff;}
15+
p {font-family:Arial, serif;font-size:16px;font-style:normal;font-weight:normal;color:#ffffff}
16+
table.GeneratedTable {
17+
width: 100%;
18+
background-color: #ffffff;
19+
border-collapse: collapse;
20+
border-width: 2px;
21+
border-color: #8f8f8f;
22+
border-style: solid;
23+
color: #000000;
24+
}
25+
26+
table.GeneratedTable td, table.GeneratedTable th {
27+
border-width: 2px;
28+
border-color: #8f8f8f;
29+
border-style: solid;
30+
padding: 3px;
31+
width: 50%;
32+
}
33+
34+
table.GeneratedTable thead {
35+
background-color: #fafafa;
36+
}
37+
</style>
38+
</head>
39+
<body>
40+
<h1>Automation 2040 W Mini IO Interface</h1>
41+
<p>This displays the status of all the Automation 2040 W Mini inputs and outputs.</p>
42+
43+
<p id="LedOn" ></p>
44+
45+
46+
<h2>ADC Readings</h2>
47+
<table class="GeneratedTable">
48+
<thead>
49+
<tr>
50+
<th>IO</th>
51+
<th>Status</th>
52+
</tr>
53+
</thead>
54+
<tbody>
55+
<tr>
56+
<td>ADC1</td>
57+
<td id="ADC1"></td>
58+
</tr>
59+
<tr>
60+
<td>ADC2</td>
61+
<td id="ADC2"></td>
62+
63+
</tr>
64+
<tr>
65+
<td>ADC3</td>
66+
<td id="ADC3"></td>
67+
68+
</tr>
69+
</tbody>
70+
</table>
71+
72+
<h2>Input Readings</h2>
73+
<table class="GeneratedTable">
74+
<thead>
75+
<tr>
76+
<th>IO</th>
77+
<th>Status</th>
78+
</tr>
79+
</thead>
80+
<tbody>
81+
<tr>
82+
<td>INPUT1</td>
83+
<td id="INPUT1"></td>
84+
</tr>
85+
<tr>
86+
<td>INPUT2</td>
87+
<td id="INPUT2"></td>
88+
</tr>
89+
</tbody>
90+
</table>
91+
<h2>Button Readings</h2>
92+
<table class="GeneratedTable">
93+
<thead>
94+
<tr>
95+
<th>IO</th>
96+
<th>Status</th>
97+
</tr>
98+
</thead>
99+
<tbody>
100+
<tr>
101+
<td>Button A</td>
102+
<td id="SW_A"></td>
103+
</tr>
104+
<tr>
105+
<td>Button B</td>
106+
<td id="SW_B"></td>
107+
</tr>
108+
</tbody>
109+
</table>
110+
<h2>Outputs</h2>
111+
<table class="GeneratedTable">
112+
<thead>
113+
<tr>
114+
<th>IO</th>
115+
<th>Status</th>
116+
<th>Toggle</th>
117+
</tr>
118+
</thead>
119+
<tbody>
120+
<tr>
121+
<td>OUT1</td>
122+
<td id="OUT1"></td>
123+
<td><input type="button" onclick="toggleOutput('one')" value="Toggle"></input></td>
124+
</tr>
125+
<tr>
126+
<td>OUT2</td>
127+
<td id="OUT2"></td>
128+
<td><input type="button" onclick="toggleOutput('two')" value="Toggle"></input></td>
129+
</tr>
130+
</tbody>
131+
</table>
132+
<h2>Relays</h2>
133+
<table class="GeneratedTable">
134+
<thead>
135+
<tr>
136+
<th>IO</th>
137+
<th>Status</th>
138+
<th>Toggle</th>
139+
</tr>
140+
</thead>
141+
<tbody>
142+
<tr>
143+
<td>RELAY1</td>
144+
<td id="RELAY1"></td>
145+
<td><input type="button" onclick="toggleRelay('one')" value="Toggle"></input></td>
146+
</tr>
147+
</tbody>
148+
</table>
149+
<!-- Javascripts-->
150+
<script>
151+
152+
var getUrl = window.location;
153+
var baseUrl = getUrl .protocol + "//" + getUrl.host;
154+
155+
156+
//prototype arrays for holding current state information
157+
var outputState;
158+
var relayState;
159+
var ADCState;
160+
var inputState;
161+
var buttonState;
162+
var LEDState;
163+
164+
165+
166+
//functions for updating current states
167+
function updateOutputStates(){
168+
fetch(baseUrl+ '/outputs')
169+
.then((Response) => {
170+
return Response.json()
171+
})
172+
.then((data) =>{
173+
outputState = data;
174+
console.log('outputs', outputState);
175+
176+
})
177+
}
178+
function updateRelayStates(){
179+
fetch(baseUrl+ '/relays')
180+
.then((Response) => {
181+
return Response.json()
182+
})
183+
.then((data) =>{
184+
relayState = data;
185+
console.log('relays', relayState);
186+
187+
})
188+
}
189+
function updateInputStates(){
190+
fetch(baseUrl+ '/inputs')
191+
.then((Response) => {
192+
return Response.json()
193+
})
194+
.then((data) =>{
195+
inputState = data;
196+
console.log('inputs', inputState);
197+
})
198+
}
199+
function updateADCStates(){
200+
fetch(baseUrl+ '/adcs')
201+
.then((Response) => {
202+
return Response.json()
203+
})
204+
.then((data) =>{
205+
ADCState = data;
206+
console.log('ADCs', ADCState);
207+
})
208+
}
209+
function updateLEDStates(){
210+
fetch(baseUrl+ '/leds')
211+
.then((Response) => {
212+
return Response.json()
213+
})
214+
.then((data) =>{
215+
LEDState = data;
216+
console.log('LEDs', LEDState);
217+
})
218+
}
219+
220+
function updateButtonStates(){
221+
fetch(baseUrl+ '/buttons')
222+
.then((Response) => {
223+
return Response.json()
224+
})
225+
.then((data) =>{
226+
buttonState = data;
227+
console.log('Buttons', buttonState);
228+
})
229+
}
230+
231+
function getCurrentStates(){
232+
updateOutputStates()
233+
updateRelayStates()
234+
updateInputStates()
235+
updateADCStates()
236+
updateButtonStates()
237+
}
238+
239+
setInterval(getCurrentStates, 3000);
240+
241+
setInterval(displayADCValues, 1000);
242+
setInterval(displayButtonValues, 1000);
243+
setInterval(displayOutputValues, 1000);
244+
setInterval(displayInputValues, 1000);
245+
setInterval(displayRelayValues, 1000);
246+
247+
248+
249+
function displayADCValues(){
250+
document.getElementById('ADC1').innerHTML = ADCState['one']
251+
document.getElementById('ADC2').innerHTML = ADCState['two']
252+
document.getElementById('ADC3').innerHTML = ADCState['three']
253+
}
254+
function displayInputValues(){
255+
document.getElementById('INPUT1').innerHTML = inputState['one']
256+
document.getElementById('INPUT2').innerHTML = inputState['two']
257+
}
258+
function displayButtonValues(){
259+
document.getElementById('SW_A').innerHTML = buttonState['SW_A']
260+
document.getElementById('SW_B').innerHTML = buttonState['SW_B']
261+
}
262+
function displayOutputValues(){
263+
document.getElementById('OUT1').innerHTML = outputState['one']
264+
document.getElementById('OUT2').innerHTML = outputState['two']
265+
}
266+
function displayRelayValues(){
267+
document.getElementById('RELAY1').innerHTML = relayState['one']
268+
}
269+
//output Handlers
270+
271+
function updateRemote(funct, attribute, value ){
272+
273+
fetch(baseUrl+"/"+funct+"?"+attribute+"="+value)
274+
.then(response => {
275+
// indicates whether the response is successful (status code 200-299) or not
276+
if (!response.ok) {
277+
throw new Error(`Request failed with status ${reponse.status}`)
278+
}
279+
return response.json()
280+
})
281+
.then(data => {
282+
console.log(data)
283+
284+
})
285+
.catch(error => console.log(error))
286+
287+
}
288+
289+
function toggleOutput(outNumb){
290+
var newState = '0'
291+
var currentOutputState = outputState[outNumb]
292+
if (currentOutputState == newState){
293+
newState = '1';
294+
}
295+
else{
296+
newState = '0'
297+
}
298+
updateRemote('outputs', outNumb, newState )
299+
updateOutputStates()
300+
301+
302+
303+
}
304+
function toggleRelay(outNumb){
305+
var newState = '0'
306+
var currentRelayState = relayState[outNumb]
307+
if (currentRelayState == newState){
308+
newState = '1';
309+
}
310+
else{
311+
newState = '0'
312+
}
313+
updateRemote('relays', outNumb, newState )
314+
updateRelayStates()
315+
316+
}
317+
318+
updateOutputStates()
319+
updateRelayStates()
320+
321+
</script>
322+
</body>
323+
</html>

0 commit comments

Comments
 (0)