So, dann machen wir uns mal an die Lösung:
Es werden zwei Skripte benötigt, ein PHP Skript auf dem Webserver, dass vom Shelly aufgerufen wird um den Zustand zu übermitteln. Dann noch ein JavaScript, dass in die Website eingebunden wird.
In den Shelly werden in den Actions OUTPUT SWITCHED ON / OFF die URLs zum php-Skript eingetragen. Auf der Website tauscht das JavaSkript dann den Inhalt eines Elements mit der Id "demo" gegen den Inhalt des Zustands.
Ich hab das ganz mal in der Tat für meine Kaffeemaschine realisiert und auf meiner Homepage eingebunden. Da steht dann auch noch ein wenig mehr zur Technik und warum man sich ein paar Gedanken machen sollte zum Thema Sicherheit. Aber da wir ja ein Shelly Forum und kein Webdesigner Forum sind, denke ich mal ist die kurze Variante ein guter Einstieg.
Falls doch jemand mal sehen will ob meine Maschine noch an ist, dann -> Meine Kaffeemaschine
Ach ... bevor ich es vergesse
Es gibt grundsätzlich die Möglichkeit einer Manipulation der Anzeige auf der Website. Der oder die Erste, der oder die hier den Link veröffentlicht, mit dem meine Website ein manipuliertes Ergebnis anzeigt bekommt von mir bei nächster Gelegenheit einen Kaffee spendiert.
LG
Hannes
Das PHP-Skript
<?php
/*
* Shelly Website Status Skript
* by Johannes Brunner Jan. 2020
*
* this script is published under the GNU GPL Version 2
*
* Description
* This PHP script is a workaround as long as JSON requests to the shelly.cloud
* do not necessarily provide correct information about the device. It can be
* called from any Shelly by setting the corresponding Action to send two parameters
* in the following way:
*
* http://url/way/to/shelly_status.php?devicename=NAME&status=STATUS
*
* where 'url' and 'way to' should be self explaining.
*
* NAME should be a unique identifier for your shelly-relay like 'Kaffeemaschine'
* STATUS needs to be set to 0 for OFF and 1 for ON
*
* IMPORTANT: If you call the skript without status set to 0 or 1 the skript returns
* the corresponding status of the device set by devicename
*/
$status = $_GET["status"];
if ($status == '0' or $status == '1') {
/*open a file to store current status*/
$shellyfile = fopen("__shelly__".$_GET["devicename"], "w");
/*write the status into the file*/
fwrite($shellyfile,$_GET["status"] );
/*close the file*/
fclose($shellyfile);
}
else {
echo (file_get_contents("__shelly__".$_GET["devicename"]));
}
?>
Alles anzeigen
und das JavaSkript für die Website
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 ) {
var myObj = this.responseText;
if (myObj == 0) {
document.getElementById("demo").innerHTML = "Kaffeemaschine ist aus";
}else if (myObj == 1) {
document.getElementById("demo").innerHTML = "Kaffeemaschine ist ein";
} else {
document.getElementById("demo").innerHTML = "Kaffeemaschine ist kaputt";
}
}
};
xmlhttp.open("GET", "https://johannesbrunner.de/shellystatus.php?devicename=Kaffeemaschine", true);
xmlhttp.send();
</script>
Alles anzeigen