Hallo,
hier mein Ergebnis mit Javascript/AJAX.
Hier wollte ich ein Bild von meiner Webseite einfügen, kann ich aber nicht bedienen.
Die Webseite enthält zwei Toggle-Button für: GEYSER ON/OFF und LIGHT ON/OFF, der Status der Ausgänge (GPIO21+26) wird mit je einem ICON für Wasser Warm/Kalt und Licht An/Aus angezeigt.
Hier mein Programm-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
<!-- CSS Toggle-Button GEYSER ON/OFF -->
.onoffswitch {
position: relative; width: 140px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 40px; padding: 0; line-height: 40px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "GEYSER ON";
padding-left: 10px;
background-color: #0000FF; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "GEYSER OFF";
padding-right: 10px;
background-color: #FF0000; color: #00FF00;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 20px; margin: 10px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 96px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
<!-- CSS Toggle-Button Light ON/OFF -->
.onoffswitch_L {
position: relative; width: 140px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-inner_L {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner_L:before, .onoffswitch-inner_L:after {
display: block; float: left; width: 50%; height: 40px; padding: 0; line-height: 40px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner_L:before {
content: "LIGHT ON";
padding-left: 23px;
background-color: #FFFFFF; color: #000000;
}
.onoffswitch-inner_L:after {
content: "LIGHT OFF";
padding-right: 23px;
background-color: #FFFF00; color: #000000;
text-align: right;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner_L {
margin-left: 0;
}
</style>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// Date and Time
function startTime() {
var today = new Date();
var year = today.getYear();
if(year<1000) year+=1900;
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var tag = today.getDate();
var d = GetDay(today.getDay());
var mo = GetMonth(today.getMonth());
m = checkTime(m);
s = checkTime(s);
document.getElementById('uhr').innerHTML = d + " " + tag + " " + mo + " " + year + " " + h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
function GetDay(intDay){
var DayArray = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
return DayArray[intDay];
}
function GetMonth(intMonth){
var MonthArray = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
return MonthArray[intMonth];
}
// Request senden: Geyser Status
function setRequest() {
// Request erzeugen
if (window.XMLHttpRequest) {
request = new XMLHttpRequest(); // Mozilla, Safari, Opera
} else if (window.ActiveXObject) {
try {
request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
} catch (e) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
} catch (e) {}
}
}
// überprüfen, ob Request erzeugt wurde
if (!request) {
alert("Kann keine XMLHTTP-Instanz erzeugen");
return false;
} else {
var url = "gpiostatus.php";
// Request 1 öffnen
request.open('post', url, true);
// Request senden
request.send(null);
// Request auswerten
request.onreadystatechange = interpretRequest;
}
}
// Request auswerten
function interpretRequest() {
switch (request.readyState) {
// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
case 4:
if (request.status != 200) {
alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
} else {
var content = request.responseText;
// den Inhalt des Requests in das <div> schreiben
//alert (content);
if (content == '1') {
document.getElementById('output').innerHTML = "<img src=\"Geyser_off_64.png\" alt=\"Geyser_OFF\">";
document.getElementById('output_L').innerHTML = "<img src=\"Light_off_64.png\" alt=\"LIGHT_OFF\">";
}
if (content == '2') {
document.getElementById('output').innerHTML = "<img src=\"Geyser_off_64.png\" alt=\"Geyser_OFF\">";
document.getElementById('output_L').innerHTML = "<img src=\"Light_on_64.png\" alt=\"LIGHT_ON\">";
}
if (content == '3') {
document.getElementById('output').innerHTML = "<img src=\"Geyser_on_64.png\" alt=\"Geyser_ON\">";
document.getElementById('output_L').innerHTML = "<img src=\"Light_off_64.png\" alt=\"LIGHT_OFF\">";
}
if (content == '4') {
document.getElementById('output').innerHTML = "<img src=\"Geyser_on_64.png\" alt=\"Geyser_ON\">";
document.getElementById('output_L').innerHTML = "<img src=\"Light_on_64.png\" alt=\"LIGHT_ON\">";
}
}
break;
default:
break;
}
}
setRequest();
// Geyser ON/OFF
$(document).ready(function() {
$('#myonoffswitch').click(function(){
var a= new XMLHttpRequest();
a.open("GET", "gpio21onoff.php"); a.onreadystatechange=function(){
if(a.readyState==4){ if(a.status ==200){
document.getElementById("output").innerHTML=a.responseText;
console.log(a.responseText);
} else alert ("http error"); } }
a.send();
});
});
// Light ON/OFF
$(document).ready(function() {
$('#myonoffswitch_L').click(function(){
var a= new XMLHttpRequest();
a.open("GET", "gpio26onoff.php"); a.onreadystatechange=function(){
if(a.readyState==4){ if(a.status ==200){
document.getElementById("output_L").innerHTML=a.responseText;
console.log(a.responseText);
} else alert ("http error"); } }
a.send();
});
});
</script>
<title> </title>
</head>
<body onload='startTime()'>
<h2>Control Geyser/Outside Lamp</h2>
<br><br>
<table border="0" cellspacing="20" cellpadding="1">
<tr valign="top">
<td>
<!-- Toggle-Button GEYSER ON/OFF -->
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</td>
<td>
<div style="width:150px; border: 0px black solid;" id="output"></div>
</td>
</tr>
</table>
<br><br>
<table height="64" border="0" cellspacing="20" cellpadding="1">
<tr valign="top">
<td>
<!-- Toggle-Button LIGHT ON/OFF -->
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch_L" checked>
<label class="onoffswitch-label" for="myonoffswitch_L">
<span class="onoffswitch-inner_L"></span>
<span class="onoffswitch-switch"></span>
</div>
</td>
<td>
<div style="width:150px; border: 0px black solid;" id="output_L"></div>
</td>
</tr>
</table>
<br><br>
<table height="64" border="0" cellspacing="0" cellpadding="1">
<caption align="top"></caption>
<tr valign="top">
<td><div id ='uhr'></div></td>
</tr>
</table>
</body>
</html>
Display More
Bei dieser Version habe ich aber noch das Problem: wenn bei Aufruf der Webseite der Status eines Ausgangs "High" ist, wird der entsprechende Toggle-Button falsch dargestellt.
Die Umschaltung erfolgt mit:
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
checked.
Wie könnte ich "checked/unchecked" je nach Status steuern ?
MfG
Juergen B,
