über "Fetch" Json Array/Object auswerten

[mat-sche]

da ich mitbekommen habe, dass ich keine Variable aus Tasmota bekomme, die mir den aktuellen Verlauf der Bewegung über Json ausgibt 

Das verstehe ich jetzt nicht, Du hattest doch dieses JSON gepostet:

Das dachte ich auch, bis ich dann mal den Befehl, während der Rolladen aktiviert ist, aktualisiert habe und dabei mitbekommen habe, dass "Position" nur den Wert anzeigt, nachdem der Rolladen die gewünschten Punkt erreicht hat.
Also ich gebe ein:  "http://192.168.188.121/cm?cmnd=ShutterPosition%20100" dann wird das Relais so lange angesteuert bis der  Wert 100 erreicht hat. danach wird dieser Wert  unter "Position" auf 100 gesetzt.

Code:

{"StatusSNS":{"Time":"2024-02-27T20:26:59","Shutter1":{"Position":100,"Direction":0,"Target":100,"Tilt":0}}}

Und ich hatte das so verstanden, das "Position" die Position des Rolladen angibt? Mit genau diesem JSON hatte ich es getestet.

=> leider ist es nicht so
Leider ist es

---

Ich nochmal

Jetzt weiß ich den aktuellen Wert zum abfragen der aktuellen Positio: http://192.168.188.121/cm?cmnd=ShutterPosition%20?
Damit lässt sich etwas Basteln.... auch mit einem Slider muss jetzt aber leider los, werd vllt. heut abend noch einal was ausprobieren.

Grüße MAT

[Sempervivum]

Dann verstehe ich das. Du hast ja auch einen Screenshot der Seite von Tasmota gepostet und geschrieben:

Diese Funktion ist gegeben auf der Webseite von der Tasmota Steuerung:

Bedeutet das, dass die kontinuierliche Anzeige auf dieser Seite funktioniert? Dann könnten wir ja hergehen und diese Seite analysieren und herausfinden, wie man es machen muss.

---

Jetzt weiß ich den aktuellen Wert zum abfragen der aktuellen Positio: http://192.168.188.121/cm?cmnd=ShutterPosition%20?
Damit lässt sich etwas Basteln.... auch mit einem Slider  muss jetzt aber leider los, werd vllt. heut abend noch einal was ausprobieren.

Hast Du das nachträglich hinein editiert? Damit müsste man dann wirklich zum Ziel kommen.

BTW: Interessante Sache das Ganze!

[mat-sche]

Dann verstehe ich das. Du hast ja auch einen Screenshot der Seite von Tasmota gepostet und geschrieben:

Diese Funktion ist gegeben auf der Webseite von der Tasmota Steuerung:

Bedeutet das, dass die kontinuierliche Anzeige auf dieser Seite funktioniert? Dann könnten wir ja hergehen und diese Seite analysieren und herausfinden, wie man es machen muss.
Eigentlich wollte ich den letzten Post nicht editieren, ist wohl so reingerutscht

=> Bedeutet das, dass die kontinuierliche Anzeige auf dieser Seite funktioniert?

Jup! Die Tasmotasoftware ist ein gigantisch geneiales Teil, wenn man(n) weiß wie es funktioniert. Inzwischen können eigene Scripts geschrieben und in die SW "eingebettet" werden, eine Menge an Sensoren und andere Peripherie gibt es, die angeschlossen werden kann.

---

Jetzt weiß ich den aktuellen Wert zum abfragen der aktuellen Positio: http://192.168.188.121/cm?cmnd=ShutterPosition%20?
Damit lässt sich etwas Basteln.... auch mit einem Slider  muss jetzt aber leider los, werd vllt. heut abend noch einal was ausprobieren.

Hast Du das nachträglich hinein editiert? Damit müsste man dann wirklich zum Ziel kommen.
BTW: Interessante Sache das Ganze!
=> das finde ich auch!

[mat-sche]

Moin'se

Habe nach langen überlegens und suchens eine Slider Anwendung kreiert, die so für mich passt:

Code:

window.onload = function() {
        var slider = document.getElementById('viewsize');
        var zeige = document.getElementById('currentValue');
                var position;
        if(window.addEventListener){
        slider.addEventListener('change', function () {
         zeige.innerHTML = slider.value;
         window.resizeTo( parseInt(slider.value), 400 ); // evtl parseInt? dunno
                 position = slider.value;
                 console.log("zeige Sliderposition", position);
                 fetch('http://192.168.188.121/cm?cmnd=ShutterPosition%20'+ slider.value).then(function(response) {
                      response.text().then(function(text) {
                      const Status = JSON.parse(text);
                      console.log("statustext",Status);
                      //document.getElementById('Fenster_auf_IP_120').innerHTML = Status.POWER1;               
                      //document.getElementById('Fenster_auf_IP_120').innerHTML = text.StatusSNS.Shutter1.Position;
                      });
                    });

          });
                }

Im Vorfeld hatte ich mit:

Code:

        setInterval(update, 2000);
        update();
        function update(){
            let data;
            //var slider = document.getElementById("XSlider");
            fetch('http://192.168.188.121/cm?cmnd=ShutterPosition%20?').then(function(response) {
                     response.text().then(function(text) {                   
                        const Status = JSON.parse(text);
                        console.log("Anzeige der Constante",Status); // Anzeige FireFox F12 => Entwicklerwerkzeug: "" Object { POWER: "ON" } ""
                        document.getElementById('Status').innerHTML = Status.Shutter1.Position;
                        data = Status.Shutter1.Position;
                        console.log("Anzeige", data);
                        document.getElementById("XSlider").value = data;
                    });
                });
            };

 per Intervall mir den Stand vom Rolladen geholt. Hier nur besteht das Problem, dass wenn die Webseite geöffnet ist, der Intervall dauernd anliegt und später dann werden noch meherer Device abgefrage. Das würde ne menge Datenaustausch zwischen den Devices und der Webseite (dann auch mobil auf dem Handy) bedeuten.

Nun habe ich mir gedacht vollgenden Workflow ein Script zu erstellen:
1. Slider wird ausgelöst
2. Variable setzen, mit der die Bewegung überwacht wird (nen Timer) und die Webseite bzw. der Fetch zur Abfrage des aktuellen standes wird gesetzt
3. im Respons vom Tasmota-Rolladen bekomme ich :     diese Daten, die ich auswerten kann

Doch leider ist mir noch schleirhaft, wie ich eine Variable setze, die außerhalb der Funktion "Bestand" hat und mit der ich eine neue Funktion programmieren könnte.

Code:

            position_update();
            function position_update(){
                if (position !=target){
                    let data;
   
                     fetch('http://192.168.188.121/cm?cmnd=ShutterPosition%20?').then(function(response) {
                        response.text().then(function(text) {                   
                            const Status = JSON.parse(text);
                            console.log("Anzeige der Constante",Status.Shutter1.Position); // Anzeige FireFox F12 => Entwicklerwerkzeug: "" Object { POWER: "ON" } ""
                            document.getElementById('Status').innerHTML = Status.Shutter1.Position;
                            //data = Status.Shutter1.Position;
                            console.log("Anzeige", data);
                            //document.getElementById("XSlider").value = data;
                        });
                    });
                }
            }

Hier bekomme ich den Fehler " Uncaught ReferenceError: position is not defined " weil sicherlich für diese Funktion die Varible nicht existiert.
Wie aber kann ich eine Funktion erst "starten" wenn in einer anderen ein Ergebnis vorliegt. Habe jetzt noch angefangen tiefer über selfhtml.org/ mich einzulesen.
Dennoch könnt ich einwenig schnelle Hilfe benötige... meine Frau sitzt mir im Nacken .

Grüße MAT

[Sempervivum]

Wenn ich das richtig überblicke müsstest Du die Position des Rolladen prüfen und, wenn er seine Endstellung erreicht hat, den Timer wieder stoppen. Das geht, wenn Du die ID des Timers einer Variablen zuweist und clearInterval mit dieser ID als Parameter aufrufst:

Code:

        let timerForShutter = setInterval(update, 2000);
        update();
        function update() {
            //var slider = document.getElementById("XSlider");
            fetch('http://192.168.188.121/cm?cmnd=ShutterPosition%20?').then(function (response) {
                response.text().then(function (text) {
                    const Status = JSON.parse(text);
                    console.log("Anzeige der Constante", Status); // Anzeige FireFox F12 => Entwicklerwerkzeug: "" Object { POWER: "ON" } ""
                   const data = Status.Shutter1.Position;
                   document.getElementById('Status').innerHTML = data;
                    console.log("Anzeige", data);
                    document.getElementById("XSlider").value = data;
                    // Hat der Rolladen seine Endstellung erreicht?
                    if (data == 0) {
                        // Timer stoppen:
                        clearInterval(timerForShutter);
                    }
                });
            });
        }

Das ist natürlich unvollständig, denn der Endwert, auf den Du prüfen musst, hängt davon ab oder der Rolladen rauf oder runter geht.

---

PS

das Problem, dass wenn die Webseite geöffnet ist, der Intervall dauernd anliegt und später dann werden noch meherer Device abgefrage. Das würde ne menge Datenaustausch zwischen den Devices und der Webseite (dann auch mobil auf dem Handy) bedeuten.

Für das Problem gibt es noch eine andere Lösung: Mit Websockets kann der Server bzw. Tasmota von sich aus Daten zum Client bzw. Browser senden. Das setzt natürlich voraus, dass Tasmota das unterstützt. Müsste man überprüfen.

[mat-sche]

Wenn ich das richtig überblicke müsstest Du die Position des Rolladen prüfen und, wenn er seine Endstellung erreicht hat, den Timer wieder stoppen. Das geht, wenn Du die ID des Timers einer Variablen zuweist und clearInterval mit dieser ID als Parameter aufrufst:
=> ich bekomme Daten über die Fahrrichtung, Ausgangspunkt Endpunkt und ob gerade eine Bewegung statt findet.

Code:

let timerForShutter = setInterval(update, 2000);

Die Idee ist genial! aber wie könnte ich den Timer starten aus dieser Funktion:?

Code:

window.onload = function()

Hierrüber schicke ich Tasmota mit dem Befehl: " http://192.168.188.121/cm?cmnd=ShutterPosition%20'+ slider.value" den Rolladen zu verfahren. An der Stelle könnte ich gleich den Timer

Code:

set timerForShutter

Starten. Und wenn dann die Bedingungen erreicht ist, wird der Timer wieder abgeschalten.

---

PS

das Problem, dass wenn die Webseite geöffnet ist, der Intervall dauernd anliegt und später dann werden noch meherer Device abgefrage. Das würde ne menge Datenaustausch zwischen den Devices und der Webseite (dann auch mobil auf dem Handy) bedeuten.

Für das Problem gibt es noch eine andere Lösung: Mit Websockets kann der Server bzw. Tasmota von sich aus Daten zum Client bzw. Browser senden. Das setzt natürlich voraus, dass Tasmota das unterstützt. Müsste man überprüfen.

Das wird leider nicht durch Tasmota unterstützt.

[Sempervivum]

wie könnte ich den Timer starten aus dieser Funktion:?
Code:

Code:

window.onload = function()

Im Moment sehe ich nicht, dass dieses onload erforderlich ist. Stelle einfach das Javascript an das Ende des Body, dann sollte es keine Problem geben.

[mat-sche]

Guten Morgen,

bin nun schon etwas weiter gekommen aber es stellt sich noch eine Frage:

Code:

setInterval(update, 2000);

kann ich den Timer setzen und mit 

Code:

clearInterval(timerForShutter);

zurücksetzen, ist das Richtig? Ich habe mir eine Function geschrieben

Code:

        function myStop() {
            clearInterval(timerForShutter);
        }
// und mit einem Button zur Auslösung der Stoppfunktion

<td width="300"><button type="button" onclick="myStop();"><a>Stop Timer</a></button> </td>

versucht den Timer zurück zusetzen, was leider nicht funktionierte.

Code:

                const timerForShutter = setInterval(update, 2000);
                //update();
                function update() {
                    //var slider = document.getElementById("XSlider");
                    fetch('http://192.168.188.121/cm?cmnd=ShutterPosition%20?').then(function (response) {
                        response.text().then(function (text) {
                            const Status = JSON.parse(text);
                            console.log("Anzeige der Constante", Status); // Anzeige FireFox F12 => Entwicklerwerkzeug: "" Object { POWER: "ON" } ""
                            const position = Status.Shutter1.Position;
                            const target = Status.Shutter1.Target;
                            //document.getElementById('Status').innerHTML = data;
                            console.log("aktuell Position", position);
                            console.log("aktuelle Target",target);
                            document.getElementById('Fenster_auf_IP_120_target').innerHTML = Status.Shutter1.Target;
                            document.getElementById('Fenster_auf_IP_120_position').innerHTML = Status.Shutter1.Position; 
                            //document.getElementById("XSlider").value = data;
                                // Hat der Rolladen seine Endstellung erreicht?
                            if (position == target ) {
                                 // Timer stoppen:
                                 myStop();
                            }
                        });
                    });
                }

Leider wird weiterhin die " function update() " weiter durchlaufen.

Was mache ich falsch?

[Sempervivum]

Hast Du das window.onload noch drin?

[mat-sche]

Hast Du das window.onload noch drin?

Nein, aber ich frage mich, warum wird der Timer nicht zurück gesetzt?

A)  ich aktiviere ihn in der Function über "setInterval(update, 2000);"

Code:

function TogglePower_Wasch(){
            fetch('http://192.168.188.121/cm?cmnd=ShutterPosition%20?').then(function(response) {
                // empfangenen Json String in "Text" packen
                     // empfangenen Json String in "Text" packen
                     response.text().then(function(text) {
                    // etwas empfangen? Daten in Konstante "Status" aus Json parsen
                    const Status = JSON.parse(text);
                    console.log("Anzeige der Constante",Status); // Anzeige FireFox F12 => Entwicklerwerkzeug: "" Object { POWER: "ON" } ""
                    //geparstes Text " {"POWER":"ON"} " ins Html Dokument an ID = 'OnOff_Wama' übergeben
                    document.getElementById('Status').innerHTML = Status.Shutter1.Position;
                    //fader.value = Status.Shutter1.Position;
                    setInterval(update, 2000);
                });
            });
           
        };

der Timer ist aktiv und dier Function wird ausgeführt. => dann werden die Daten über fetch aktualisiert

Code:

        let timerForShutter = setInterval(update, 2000);
        update();
        function update(){ 
        let data;
            //var slider = document.getElementById("XSlider");
            fetch('http://192.168.188.121/cm?cmnd=ShutterPosition%20?').then(function(response) {
                     response.text().then(function(text) {                  
                        const Status = JSON.parse(text);
                        console.log("Anzeige der Constante",Status); // Anzeige FireFox F12 => Entwicklerwerkzeug: "" Object { POWER: "ON" } ""
                        document.getElementById('Status').innerHTML = Status.Shutter1.Position;
                        data = Status.Shutter1.Position;
                        const position = Status.Shutter1.Position;
                        const target = Status.Shutter1.Target;
                        console.log("Anzeige", data);
                        document.getElementById("XSlider").value = data;
                        //document.getElementById("x-slider.value").innerHTML = data;
                        //slider.innerHTML = data;
                        if (position == target ) {
                            // Timer stoppen:
                            myStop();
                            clearInterval(timerForShutter);
                        }
                    });
            });
        };

function myStop() {
clearInterval(timerForShutter);
}

Nur die Rücksetzung funktioniert irgend wie nicht, ob über:
B) iRücksetzung über Button / Function myStop()

C) im Fetch über

Code:

                        if (position == target ) {
                            // Timer stoppen:
                            myStop();
                            clearInterval(timerForShutter);
                        }

Anbei noch eine Ausgabefenster:
   

Wenn das so funktionieren würde wäre es perfekt!