Remote control via ESP-HTTPD
Posted: Thu Sep 17, 2015 9:04 amPlease help me out guys - my web knowledge is lacking.
I am implementing a wifi remote control, using the ESP-HTTPD project, and have a webpage with a few sliders on (with text boxes to display their values), and a checkbox. When I change one of the sliders or change the checkbox I want to post the data to the ESP.
This is where I have issues. How can I post the values of all sliders and the checkbox and pick it up the other side on any change? I'd also not like to refresh the page is possible, but I think that requires jquery
So what I have now is the 3 sliders and text boxes, and a checkbox. I want to post to control.cgi.
HTML page is like so:
I am implementing a wifi remote control, using the ESP-HTTPD project, and have a webpage with a few sliders on (with text boxes to display their values), and a checkbox. When I change one of the sliders or change the checkbox I want to post the data to the ESP.
This is where I have issues. How can I post the values of all sliders and the checkbox and pick it up the other side on any change? I'd also not like to refresh the page is possible, but I think that requires jquery
So what I have now is the 3 sliders and text boxes, and a checkbox. I want to post to control.cgi.
HTML page is like so:
Code: Select all
<html>
<head><title>Controller</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
function submitform()
{
document.controlForm.submit();
}
// Any change of the slider value - updates its corresponding text box with the value
function slideValue(sliderID, spanbox){
var x = document.getElementById(sliderID);
var y = document.getElementById(spanbox);
if (sliderID == 'flow') {
var str1 = "Val=";
y.value = str1.concat(parseInt(x.value));
}
if (sliderID == 'dur') {
var str1 = "Val= ";
y.value = str1.concat(parseInt(x.value));
}
if (sliderID == 'int') {
var str1 = "Val= ";
y.value = str1.concat(parseInt(x.value));
}
}
window.onload = function() {
slideValue('flow', 'flowTxt');
slideValue('int', 'intTxt');
slideValue('dur', 'durTxt');
}
</script>
</head>
<body>
<div id="main">
<h1><img src="cats/logo.png"><br />CONTROLLER</h1>
<form name="controlForm" action="control.cgi">
<ul style="list-style-type:none">
<li><input type="text" id="flowTxt" style="border:none" readonly><input type="range" id="flow" min="0" max="100" value="0" step="1" onchange="slideValue('flow', 'flowTxt');"></li>
<li><input type="text" id="durTxt" style="border:none" readonly><input type="range" id="dur" min="0" max="100" value="50" step="10" onchange="slideValue('dur', 'durTxt');"> </li>
<li><input type="text" id="intTxt" style="border:none" readonly><input type="range" id="int" min="0" max="100" value="50" step="10" onchange="slideValue('int', 'intTxt');"></li>
<li></li>
<li>
<div class="onoffswitch" align="center">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</li>
</ul>
</form>
</div>
</body></html>