Commit 0ec30ef0 authored by Klint Youngmeyer's avatar Klint Youngmeyer
Browse files

Finish LED control page.

Add link to LED page to index
Convert list elements to ints
parent c4495e61
......@@ -31,7 +31,7 @@ def led_control(json_dict):
# GET Functions
def get_switch(var_list):
if var_list:
switch_num = var_list[0]
switch_num = int(var_list[0])
else:
switch_num = 1
......@@ -46,7 +46,7 @@ def get_switch(var_list):
def get_led(var_list):
if var_list:
led_num = var_list[0]
led_num = int(var_list[0])
else:
led_num = 1
......
......@@ -41,6 +41,7 @@
<BR><BR>
Send questions to <a href="mailto:supporrt@emacinc.com">support@emacinc.com</a>.
<HR>
<a href="page2.html">Page 2</a>
<a href="page2.html">Page 2</a> |
<a href="leds.html">LED Control</a>
</body>
</html>
......@@ -19,10 +19,12 @@
h3 {
line-height: 1.2
}
.column {
float: left;
width: 25%;
}
.row:after {
content: "";
display: table;
......@@ -31,7 +33,7 @@
</style>
</head>
<body>
<body onload="populateLedStatuses()">
<center>
<a href="https://micropython.org/"><img src="MicroPython_Logo.png" align="bottom" title="MicroPython"
hspace="20"></a>
......@@ -39,22 +41,46 @@
<BR>
<H1>This website is hosted on the EMAC CutiPy with the Redpine RS9116 module</H1>
</center>
<HR>
<p align='center'>
This page can controll all four LEDs on the CutiPy board. The LED values should populate on page load.
<div class="row" align='center'>
<div class="column">
LED 1
<p id="status1">_____</p>
<div class="row">
<button onclick="controlLED('status1', 1, 'on')">On</button>
<button onclick="controlLED('status1', 1, 'off')">Off</button>
<button onclick="controlLED('status1', 1, 'on')">On</button>
<button onclick="controlLED('status1', 1, 'off')">Off</button>
</div>
</div>
<div class="column">
LED 2
<p id="status2">_____</p>
<div class="row">
<button onclick="controlLED('status2', 2, 'on')">On</button>
<button onclick="controlLED('status2', 2, 'off')">Off</button>
</div>
</div>
<div class="column">
LED 3
<p id="status3">_____</p>
<div class="row">
<button onclick="controlLED('status3', 3, 'on')">On</button>
<button onclick="controlLED('status3', 3, 'off')">Off</button>
</div>
</div>
<div class="column">
LED 4
<p id="status4">_____</p>
<div class="row">
<button onclick="controlLED('status4', 4, 'on')">On</button>
<button onclick="controlLED('status4', 4, 'off')">Off</button>
</div>
</div>
<div class="column">One</div>
<div class="column">Two</div>
<div class="column">Three</div>
</div>
</p>
<HR>
<a href="index.html">Home</a>
<script>
function controlLED(id, led_num, led_action) {
......@@ -65,7 +91,7 @@
if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
var data = xhr.responseText;
var jsonResponse = JSON.parse(data);
document.getElementById(id).innerHTML = jsonResponse['status'];
updateStatusText(id, jsonResponse['status']);
}
}
xhr.send(JSON.stringify({
......@@ -80,24 +106,32 @@
if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
var data = xhr.responseText;
var jsonResponse = JSON.parse(data);
var elem = document.getElementById(id);
var status = "";
var color = "";
if (jsonResponse['status'] == 'on') {
status = "On";
color = "yellow";
} else {
status = "Off";
color = "";
}
elem.innerHTML = status;
elem.color = color;
updateStatusText(id, jsonResponse['status']);
}
}
xhr.send();
};
function populateLedStatuses() {
var statuses = [];
var i;
for (i = 1; i < 5; i++) {
// This timeout is so that the server doesn't get overwhelmed
setTimeout(getLED('status' + i, i), 100);
}
};
function updateStatusText(id, status_in) {
var elem = document.getElementById(id);
var status = "";
var color = "";
if (status_in == 'on') {
status = "On";
color = "yellow";
} else {
status = "Off";
color = "";
}
elem.innerHTML = status;
elem.color = color;
}
</script>
</body>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment