handelsübliche WLAN-Steckdose ohne China-Server

Die bei Amazon gekauften Steckdosen haben den Nachteil, daß diese nur funktionieren, wenn man sie mit einem externen Server verbindet. Wenn dieser nicht erreichbar ist, klappt nichts.

Um das zu umgehen ist es nur notwendig, die TASMOTA-Software zu installieren. Das ging relativ einfach, man musste nur den ESP8266 adaptieren und TASMOTA uploaden. Der ESP8266 muß dabei mit einer externen Stromversorgung verbunden werden, da nicht sicher gestellt ist, daß die vorhanden SV eine sichere elektrische Trennung besitzt.

Stromversorgung, mit galvanischer Trennung (sichere?)

Webseite

Für die Steuerung habe ich eine eigene Webseite mit PHP, Javascript und Ajax-Objekten gebaut. Da können dann gleich mehrere Steckdosen geschaltet werden.

blaue Buttons = nicht im WLan
grüne Buttons = aus
rote Buttons = ein

Die Texte und anderen Eigenschaften sind in einer extra Datei abgelegt, damit je nach Verwendung der Dosen der Text leicht geändert werden kann.

Mit PHP werden für jeden Button die Javascriptroutinen einzeln erzeugt.

Code der Webseitensteuerung:

<!DOCTYPE html>
<html>
 <head>
  <title>WLAN-Schalter</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name=viewport content="width=device-width, initial-scale=1">
  <script type="text/javascript">
// Url definieren
<?php

// Definition WLAN-Dosen [Nr,Url,SW]
include('wlan-sd.php');

$i=0;
foreach ($WL_Dosen as $WLD){
echo 'var Url'.$i.' = "http://'.$WLD[2].'/cm";';
$i++;
?>

<?php
}
?>     

window.onload = start;                //Funktion nach dem laden des HTMLs ausführen
 
function start () 
{
	if (!window.XMLHttpRequest) {alert("no support");}
// Wenn Ereignis vom Server kommt, wird funktion LesenAjax ausgeführt
<?php
$i=0;
foreach ($WL_Dosen as $WLD){
echo "myAjax".$i." = new XMLHttpRequest();";      // Bilden des AJAX objekts
echo "myAjax".$i.".onreadystatechange=LesenAjax".$i.";";
echo "\r\n";
$i++;
}
?>
setInterval(aktualisieren,1000);      // Initialisiert das Timer-gesteuerte Ausführen von Funktion //aktualisieren();
aktualisieren ();                     // Relais Zustand holen beim laden der Webseite
}
function meineFunktion (){;}
function aktualisieren () 
{
<?php
$i=0;
foreach ($WL_Dosen as $WLD){
echo 'myAjax'.$i.'.open("GET",Url'.$i.'+"?cmnd=power",true);'; // GET-Anfrage an Server senden Asynchron
echo 'myAjax'.$i.'.send();';
echo "\r\n";
$i++;
}
?>	

} 
<?php
$i=0;
foreach ($WL_Dosen as $WLD){
echo "	
function LesenAjax".$i."()                      //AJAX-Ereignis ist passiert
{
if (myAjax".$i.".readyState==4) //&& myAjax".$i.".status==200)    // Wenn antwort vollständig und OK
	{                                          // dann
//	var datenstr=myAjax".$i.".responseText;        // empfangene Daten als Text 
	document.getElementById('aus".$i."').innerText = datenstr;
     if ((datenstr == '{\"POWER\":\"OFF\"}') || (datenstr == '0'))                             // Button Farben ändern
      {
       document.getElementById('aus".$i."').style.backgroundColor = '#40FF00';
       document.getElementById('aus".$i."').innerText = 'SW".$i." AUS';
      } 
     if ((datenstr == '{\"POWER\":\"ON\"}') || (datenstr == '1')) 
      {
       document.getElementById('aus".$i."').style.backgroundColor = '#FF0040';
       document.getElementById('aus".$i."').innerText = 'SW".$i." EIN';
      }      
    }
    else {
		document.getElementById('aus".$i."').style.backgroundColor = '#7E00E2';
//		document.getElementById('aus".$i."').innerText =myAjax".$i.".readyState;
		}
}";
$i++;
}
$i=0;
foreach ($WL_Dosen as $WLD){
echo '	
function httpGet'.$i.' ( sende )            // GET anfrage an Server. 
{
myAjax'.$i.'.open ( "GET", Url'.$i.' + sende, true ) ;
myAjax'.$i.'.send() ;
}';
$i++;
}
?>

</script>
 
<style type="text/css" media="screen, print, projection">
.button {
   background-color: #7E00E2;
   width: 100px;
   border: 2;
   color: #FFFF00;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 8px 8px;
   cursor: pointer;
   border-radius: 10px;
   padding: 6px 6px 6px 6px;
}
</style>
 
 </head>
 <body>
 <p align=middle>
 <table align=center>
<?php
$cmd	="('?cmnd=power 2')";
$i=0;
foreach ($WL_Dosen as $WLD){
	echo '<tr><td>'.$WLD[3].'</td><td><button id="aus'.$i.'" class="button" onclick="httpGet'.$i. $cmd .'">SW'.$i.'</button></td></tr>';

?>

<?php
$i++;
}
?>
 </p>
 </table>
  </body>
</html>
Code-Sprache: HTML, XML (xml)