Im in the world of C# to program AVR and my problem is wired. I think it is realy easy an Im thinking too complex. I compiled an AVR ethernet controller (Atmel) and the code provides a webpage with of "outputs" of the controller. I can set the output to true|false with the checkbox, that works fine. The internal AVR program set the output from itself and I will provide the state to the webpage by the ajax request, that´t the target.
Actually I push the information to the web page through "span" commands like "true|false". But how can I modify the checkbox itself? I tried to provide with the span inside of the
This is the full code of web page:
<!DOCTYPE html>
<html>
<body >
<head>
<title>Arduino Ajax I/O</title>
<script>
strOUT1 = "";
strOUT2 = "";
strOUT3 = "";
strOUT4 = "";
strOUT5 = "";
strOUT6 = "";
strOUT7 = "";
strOUT8 = "";
var OUT1_state = 0;
var OUT2_state = 0;
var OUT3_state = 0;
var OUT4_state = 0;
var OUT5_state = 0;
var OUT6_state = 0;
var OUT7_state = 0;
var OUT8_state = 0;
var hw_min = 0;
var hw_max = 0;
var br_min = 0;
var br_max = 0;
function GetArduinoIO()
{
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseXML != null) {
// XML file received - contains analog values, switch values and LED states
var count;
// get analog inputs
var num_an = this.responseXML.getElementsByTagName('analog').length;
for (count = 0; count < num_an; count++) {
document.getElementsByClassName("analog")[count].innerHTML =
this.responseXML.getElementsByTagName('analog')[count].childNodes[0].nodeValue;
}
// get pcf inputs
var num_an = this.responseXML.getElementsByTagName('switch').length;
for (count = 0; count < num_an; count++) {
document.getElementsByClassName("switches")[count].innerHTML =
this.responseXML.getElementsByTagName('switch')[count].childNodes[0].nodeValue;
}
// get pcf outputs
var num_an = this.responseXML.getElementsByTagName('OUT').length;
for (count = 0; count < num_an; count++) {
document.getElementsByClassName("OUT")[count].innerHTML =
this.responseXML.getElementsByTagName('OUT')[count].childNodes[0].nodeValue;
}
}
}
}
}
// send HTTP GET request with Outs to switch on/off if any
request.open("GET", "ajax_inputs" + strOUT1 + strOUT2 + strOUT3 + strOUT4 + strOUT5 + strOUT6 + strOUT7 + strOUT8 + nocache, true);
request.send(null);
setTimeout('GetArduinoIO()', 500);
strOUT1 = "";
strOUT2 = "";
strOUT3 = "";
strOUT4 = "";
strOUT5 = "";
strOUT6 = "";
strOUT7 = "";
strOUT8 = "";
}
// service LEDs when checkbox checked/unchecked
function GetCheck()
{
if (OUT_form.OUT1.checked) {
strOUT1 = "&OUT1=1";
}
else {
strOUT1 = "&OUT1=0";
}
if (OUT_form.OUT2.checked) {
strOUT2 = "&OUT2=1";
}
else {
strOUT2 = "&OUT2=0";
}
if (OUT_form.OUT3.checked) {
strOUT3 = "&OUT3=1";
}
else {
strOUT3 = "&OUT3=0";
}
if (OUT_form.OUT4.checked) {
strOUT4 = "&OUT4=1";
}
else {
strOUT4 = "&OUT4=0";
}
if (OUT_form.OUT5.checked) {
strOUT5 = "&OUT5=1";
}
else {
strOUT5 = "&OUT5=0";
}
if (OUT_form.OUT6.checked) {
strOUT6 = "&OUT6=1";
}
else {
strOUT6 = "&OUT6=0";
}
if (OUT_form.OUT7.checked) {
strOUT7 = "&OUT7=1";
}
else {
strOUT7 = "&OUT7=0";
}
if (OUT_form.OUT8.checked) {
strOUT8 = "&OUT8=1";
}
else {
strOUT8 = "&OUT8=0";
}
}
</script>
<style>
.IO_box {
float: left;
margin: 0 20px 20px 0;
border: 1px solid white;
padding: 0 5px 0 5px;
width: 120px;
background-color: rgb(150, 150, 150);
}
.INPUT_field {
float: left;
margin: 0 20px 20px 0;
border: 1px solid white;
padding: 0 5px 0 5px;
width: 200px;
background-color: rgb(150, 150, 150);
}
#inhalt h1 {
font-size: 120%;
color: #FFFFFF;
margin: 0 0 10px 0;
}
#inhalt h2 {
font-size: 85%;
color: #FFFFFF;
margin: 5px 0 5px 0;
}
#inhalt p, form, button {
font-size: 80%;
color: #000000;
}
#inhalt .small_text {
font-size: 70%;
color: #000000;
}
#kopfbereich {
background:url(logo.png) no-repeat left top;
background-color:rgb(150, 150, 150);
height:80px;
color:white;
text-align:right;
font-size:2em;
padding:0.2em 0.2em 0 0;
}
#inhalt html, body {
font: 100% Arial, Helvetica, sans-serif;
background-color: #F6A800;
}
#inhalt h1, h2, h3, p, ul {
padding:.7em;
margin-left: 1em;
}
#inhalt ul {
padding-left:0em;
}
#menu h1, h2, h3, p, ul {
padding-bottom:.7em;
background-color: rgb(150, 150, 150);
float: left;
margin: 0em;
margin-right: 1em;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 90px;
background-color: rgb(150, 150, 150);
margin-right: 0.6em;
}
#menu li a {
display: block;
color: rgb(255, 255, 255);
padding: 8px 16px;
text-decoration: none;
}
#menu li a.active {
background-color: #555;
color: white;
}
#menu li a:hover:not(.active) {
background-color: #333;
color: white;
}
* {
margin:0;
padding:0;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body onload="GetArduinoIO()">
<div id="kopfbereich">
</div>
<div id="menu">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#data">Werte</a></li>
<li><a href="#onewire">Sensoren</a></li>
</ul>
</div>
<div id="inhalt">
<div id="home">
<h1>Arduino Ajax I/O</h1>
<div class="IO_box">
<h2>1Wire Temperaturen</h2>
<p>Sensor 1: <span class="analog">...</span> ℃</p>
<p>Sensor 2: <span class="analog">...</span> ℃</p>
<p>Sensor 3: <span class="analog">...</span> ℃</p>
</div>
<div class="IO_box">
<h2>PCF Inputs</h2>
<p>Input 1 : <span class="switches">...</span></p>
<p>Input 2 : <span class="switches">...</span></p>
<p>Input 3 : <span class="switches">...</span></p>
<p>Input 4 : <span class="switches">...</span></p>
<p>Input 5 : <span class="switches">...</span></p>
<p>Input 6 : <span class="switches">...</span></p>
<p>Input 7 : <span class="switches">...</span></p>
<p>Input 8 : <span class="switches">...</span></p>
</div>
<div class="IO_box">
<h2>PCF Outputs</h2>
<form id="check_OUT" name="OUT_form">
<p><span class="OUT">...</span><br><input type="checkbox" name="OUT1" value="0" onclick="GetCheck()" '<span class="OUT"></span>'/> OUT 1<br /><br /></p>
<p><span class="OUT">...</span><br><input type="checkbox" name="OUT2" value="0" onclick="GetCheck()" '<span class="OUT"></span>'/> OUT 2<br /><br /></p>
<p><span class="OUT">...</span><br><input type="checkbox" name="OUT3" value="0" onclick="GetCheck()" '<span class="OUT"></span>'/> OUT 3<br /><br /></p>
<p><span class="OUT">...</span><br><input type="checkbox" name="OUT4" value="0" onclick="GetCheck()" '<span class="OUT"></span>'/> OUT 4<br /><br /></p>
<p><span class="OUT">...</span><br><input type="checkbox" name="OUT5" value="0" onclick="GetCheck()" '<span class="OUT"></span>'/> OUT 5<br /><br /></p>
<p><span class="OUT">...</span><br><input type="checkbox" name="OUT6" value="0" onclick="GetCheck()" '<span class="OUT"></span>'/> OUT 6<br /><br /></p>
<p><span class="OUT">...</span><br><input type="checkbox" name="OUT7" value="0" onclick="GetCheck()" '<span class="OUT"></span>'/> OUT 7<br /><br /></p>
<p><span class="OUT">...</span><br><input type="checkbox" name="OUT8" value="0" onclick="GetCheck()" '<span class="OUT"></span>'/> OUT 8<br /><br /></p>
</form>
</div>
<div class="Input_field"><p>
Heizwasser min: <input type="text" id="hw_min" value=""> °C<br />
Heizwasser max: <input type="text" id="hw_max" value=""> °C<br />
Brauchwasser min: <input type="text" id="bw_min" value=""> °C <br />
Brauchwasser max: <input type="text" id="bw_max" value=""> °C <br />
<button onclick="saveSettings()">speichern</button><br />
</p></div>
</div>
</div>
</body>
</html>
I see the state of my outputs in front of the code (I know, the code is not complient, because tried so much different versions by "try&error" method). But how can I check or uncheck the "checkbox" if I get "true"|"false" from my AVR microcontroller? Thank you so verry much for help guys. Sincerly Lars
Aucun commentaire:
Enregistrer un commentaire