HTTP Request per JavaSkript und Fetch auswerten

mat-sche

Zitat von HoerMirAuf

{"NAME":"Gosund SP111 v1.4","GPIO":[57,255,56,255,0,134,0,0,131,17,132,21,0],"FLAG":0,"BASE":45}{"NAME":"Gosund SP111 v1.4","GPIO":[57,255,56,255,0,134,0,0,131,17,132,21,0],"FLAG":0,"BASE":45}

Ohne CORS verhindert der Browser nicht standartmäßige Requests oder Umleitungen auf andere Domains als die eigentlich aufgerufene. Hintergrund ist, bösartige Umleitungen auf fake oder spy Seiten, bzw. die nicht standartmäßige (evtl gefährlichen) Request zu verhindern.
Aber du weißt ja wer was wann und warum aufruft, weiterleitet, etc.
CORS wurde ja auch nicht aus der FW genommen, ist nur nicht aktiv. So ein ESP hat eben nicht viel Speicher und bei der Unmenge was man inzwischen in Tasmota reinpacken kann, zählt eben jedes kB. Dinge die selten und kaum gebraucht werden sind dann eben im default nicht enthalten.

Moin!

jup mit den Umleitungen stimmt! Und ja, es ist ne ganze Menge damit

Gestern Abend war es noch zu spät zum schreiben.... Habe da doch noch ein kleines Problem. Habe die FW für die Steckdose mit dem Online Tool erstellt.

Nach dem ich die Steckdose wie immer ( {"NAME":"Gosund SP111 v1.4","GPIO":[57,255,56,255,0,134,0,0,131,17,132,21,0],"FLAG":0,"BASE":45} ) konfiguriert habe, wurde mir im Browser die Punkte für die Energiedaten angezeigt, bekomme jedoch keine Messergebnisse.

Habe ich irgend welche Fehler in der Auswahl im TasmoCompiler?

Ich kann aber im Moment nicht sagen, ob SW oder HW das Problem beschehrt. Mit der vorhergehenden FW lief die Steckdose....

Hast Du evtl. ne Idee?

HoerMirAuf

Zitat von mat-sche

Hast Du evtl. ne Idee?

Passt eigentlich im Compiler. Stromsensoren ist ja aktiviert.

Bist Du sicher das du bei der SP111 die Version 1.4 hast und das Template passt?

mat-sche

Zitat von HoerMirAuf

Passt eigentlich im Compiler. Stromsensoren ist ja aktiviert.
Bist Du sicher das du bei der SP111 die Version 1.4 hast und das Template passt?

Ja ich bin mir sicher. Ich habe noch weitere Steckdosen mit der Tasmota-FW die direkt als BIN downloadbar in Benutzung und habe das Template von dort genommen, wie auch mehrere andere Einstellungen versucht.....

Werd mich heut Abend nochmals hinsetzen und einen anderen Stecker umflashen.

HoerMirAuf

Wenn du hardwareseitig flashen kannst, am besten mit dem Tasmotizer nochmal drauf bügeln. (erase befor flashing aktivieren !!)

mat-sche

Danke für den Tip! Das mache ich schon immer so bei Tasmota FW-flashen

Die FW wurde sauber installiert, jetzt kann ich ja CORS nutzen, darum weiß ich nicht warum keine Messergebnisse kommen. Muss man die Messfunktion noch über die Konsole aktivieren?

Bis spaäter

HoerMirAuf

Moin.

eigentlich muss da nichts aktiviert werden. Sollte out-off-the-box laufen.

mat-sche

Moin dito,

habe gestern eine weiter Steckdose geflasht und bei der ging dann alles :).

Jetzt suche ich mir noch Beispiele/Anleitungen zusammen, wie ich mit einem Java Script auf meiner Webseite den Json Stream mit den Werten aus

Code

cm?cmnd=Status%2010

auswerten/anzeigen lassen kann. Hast Du das schon gemacht und hättest Du evtl. ein Beispiel?

HoerMirAuf

Hi.

Das ist relativ einfach, mit:

document.getElementById('<NAME>').innerHTML

Eingebaut ins HTML Beispiel:

HTML

<!DOCTYPE html>
<html>

<head>
<title>Get Fetch-Request</title>
</head>
<body>

<script language="JavaScript">
<!--
var POWERSTATE

function TogglePower(){
fetch('http://<IP>/cm?user=admin&password=<password>&cmnd=power%20toggle').then(function(response) {
response.text().then(function(text) {
const Status = JSON.parse(text);
POWERSTATE = Status.POWER;
document.getElementById('PowerValue').innerHTML = POWERSTATE;
});
});
};

function GetPowerValue(){
fetch('http://<IP>/cm?user=admin&password=<password>&cmnd=power').then(function(response) {
response.text().then(function(text) {
const Status = JSON.parse(text);
POWERSTATE = Status.POWER;
document.getElementById('PowerValue').innerHTML = POWERSTATE;
});
});
};
</script>

<table>
    <tr><td colspan="2"><input type="button" value="Get Power State" onclick=GetPowerValue()></input></td></tr>
    <tr><td colspan="2"><input type="button" value="Toggle Power   " onclick=TogglePower()></input></td></tr>
    <tr><td>Power:</td><td><p id="PowerValue"></p></td></tr>
</table>

</body>
</html>

Alles anzeigen

mat-sche

Ja das stimmt, was ich aber noch nicht weiß... mir erlesen habe ist, wie kann ich die einzelnen Werte aus dem Json-String in einzelne Textelemente abspeichern/zuweisen? Bei "Power" ist es einfach, doch bei "Status 10" bekomme ich mehrere Werte in einer Art Tabelle.

Code

document.getElementById('POWER').innerHTML = Status.POWER;
document.getElementById('Voltage').innerHTML = Status.Voltage;
document.getElementById('Curent').innerHTML = Status.Curent;

Leider bin ich noch auf Arbeit, sonst könnte ich den gesammten Zusammenhang näher auflisten. Aber vllt. weißt Du was ich meine....

Nach dem der Json Stream

Code

response.text().then(function(text) {
const Status = JSON.parse(text);

in der Konstante steht, muss diese ja noch in die einzelnen Komponenten aufgeteilt werden, um sie in der Webseite weiter "verarbeiten" zu können.

HoerMirAuf

Hier mal das Beispiel erweitert mit dem Parsen des Statuses:

HTML

<!DOCTYPE html>
<html>
<head>
<title>Get Fetch-Request</title>
</head>
<body>

<script language="JavaScript">

function TogglePower(){
fetch('http://<IP>/cm?user=admin&password=<password>&cmnd=power%20toggle').then(function(response) {
response.text().then(function(text) {
const Status = JSON.parse(text);
document.getElementById('PowerValue').innerHTML = Status.POWER;
});
});
};

function GetStatusValue(){
fetch('http://<IP>/cm?user=admin&password=<password>&cmnd=status%205').then(function(response) {
response.text().then(function(text) {
JSON.parse(text, function (key, value) {
if (key == "WifiConfig") { document.getElementById('WifiConfigValue').innerHTML = value; }
if (key == "Hostname") { document.getElementById('HostNameValue').innerHTML = value; }
if (key == "IPAddress") { document.getElementById('IPAddressValue').innerHTML = value; }
});
});
});
fetch('http://<IP>/cm?user=admin&password=<password>&cmnd=power').then(function(response) {
response.text().then(function(text) {
const Status = JSON.parse(text);
document.getElementById('PowerValue').innerHTML = Status.POWER;
});
});
};
</script>

<table>
<tr><td colspan="2"><input type="button" value="Get State" onclick=GetStatusValue()></input></td></tr>
<tr>
<td><input type="button" value="Toggle Power" onclick=TogglePower()></input></td>
<td id="PowerValue"></td>
</tr>
<tr><td>WifiConfig:</td><td id="WifiConfigValue"></td></tr>
<tr><td>Hostname  :</td><td id="HostNameValue"></td></tr>
<tr><td>IP        :</td><td id="IPAddressValue"></td></tr>
</table>

</body>
</html>

Alles anzeigen

mat-sche

Zitat von HoerMirAuf

Hier mal das Beispiel erweitert mit dem Parsen des Statuses:

HTML

<!DOCTYPE html>
<html>
<head>
<title>Get Fetch-Request</title>
</head>
<body>

<script language="JavaScript">

function TogglePower(){
fetch('http://<IP>/cm?user=admin&password=<password>&cmnd=power%20toggle').then(function(response) {
response.text().then(function(text) {
const Status = JSON.parse(text);
document.getElementById('PowerValue').innerHTML = Status.POWER;
});
});
};

function GetStatusValue(){
fetch('http://<IP>/cm?user=admin&password=<password>&cmnd=status%205').then(function(response) {
response.text().then(function(text) {
JSON.parse(text, function (key, value) {
if (key == "WifiConfig") { document.getElementById('WifiConfigValue').innerHTML = value; }
if (key == "Hostname") { document.getElementById('HostNameValue').innerHTML = value; }
if (key == "IPAddress") { document.getElementById('IPAddressValue').innerHTML = value; }
});
});
});
fetch('http://<IP>/cm?user=admin&password=<password>&cmnd=power').then(function(response) {
response.text().then(function(text) {
const Status = JSON.parse(text);
document.getElementById('PowerValue').innerHTML = Status.POWER;
});
});
};
</script>

<table>
<tr><td colspan="2"><input type="button" value="Get State" onclick=GetStatusValue()></input></td></tr>
<tr>
<td><input type="button" value="Toggle Power" onclick=TogglePower()></input></td>
<td id="PowerValue"></td>
</tr>
<tr><td>WifiConfig:</td><td id="WifiConfigValue"></td></tr>
<tr><td>Hostname  :</td><td id="HostNameValue"></td></tr>
<tr><td>IP        :</td><td id="IPAddressValue"></td></tr>
</table>

</body>
</html>

Alles anzeigen

moin'se

auch das hat wieder gut geklappt! Wie kann ich Dir mal nen Kaffee Spendieren?

MAT

HoerMirAuf

Moin.

Zitat von mat-sche

Wie kann ich Dir mal nen Kaffee Spendieren?

Wirklich sehr freundlich, DANKE !

Aber absolut nicht nötig. Es war mir ein Fest!

mat-sche

Hallo HörMirAuf,

es ist Winter und ich mach ma an meinem Projekt weiter. Deine letzten Codes zum Parsen haben mir viel geholfen. Nach einem Tag des suchens und probierens geb ich auf und vllt. kannst Du mir weiter helfen.

Jetzt wollte ich von einer Tasmota Steckdose die Energiedaten visualisieren, ganz nach dem Schema #31. Leider klappt das so nicht.

die Steckdose liefert mir folgendes:

{"StatusSNS":{"Time":"2024-01-19T12:58:34","ANALOG":{"Temperature":20.9},"ENERGY":{"TotalStartTime":"2023-12-29T14:09:41","Total":0.009,"Yesterday":0.000,"Today":0.000,"Power":0,"ApparentPower":0,"ReactivePower":0,"Factor":0.00,"Voltage":232,"Current":0.000},"TempUnit":"C"}}

Die Daten stehen nun in einem Array und nun weiß ich nicht, wie ich an die z. Bsp. Werte von "ENERGY" heran komme. Irgendwie muss das Array mit einer for-next Schleife durchlaufen werden aber wie?

Hast Du einen Plan wie mann das realisieren kann?

Vielen DAnk und Grüße!

2000ede

Hallo!
wenn ich es richtig verstanden habe, seid ihr auf einem nicht tasmota bestückten ESP32 unterwegs und wertet da Tasmota Daten aus?

da bin ich noch nicht unterwegs, weil meine Strategie noch ist, alles mit tasmota umzusetzen. Sieht bis jetzt auch ganz gut aus, dass man es hinbekommt.
Aber auch auf einem nackten ESP32 ist doch json einfach bzw mit Standards auszuwerten, oder nicht?

siehe
- https://www.az-delivery.de/blogs/azdelive…ettervorhersage

- https://hartmut-waller.info/arduinoblog/es…m-tft-anzeigen/

Darüber hinaus kann man auch Werte von Tasmota direkt versenden.
Oder habe ich Euch falsch verstanden?

Auf jeden Fall interessant!

mat-sche

Zitat von 2000ede

wenn ich es richtig verstanden habe, seid ihr auf einem nicht tasmota bestückten ESP32 unterwegs und wertet da Tasmota Daten aus?

Hi,

fast richtig, aber hier geht es nicht umbedingt ums Board, tasmota ist ja SW und das Board kann so gestalltet werden wie Du magst!

Zitat von 2000ede

da bin ich noch nicht unterwegs, weil meine Strategie noch ist, alles mit tasmota umzusetzen. Sieht bis jetzt auch ganz gut aus, dass man es hinbekommt.

Jup, Tasmota ist sehr mächtig und komplex, über Scripts oder Rules kann einiges gemacht werden, gerade mit einem ESP32.

Zitat von 2000ede

Darüber hinaus kann man auch Werte von Tasmota direkt versenden.
Oder habe ich Euch falsch verstanden?

Und auch Jup!

Bei meiner Geschichte geht es darum, Tasmota über einen http request anzusprechen und die Daten, die auch über MQTT von Tasmota verschickt werden können, direkt auf einer Webseite auf einem Server zu verarbeiten.

Grüße MAT

2000ede

Erster Punkt: das ist schon klar (Board, SW usw.)

2. / Anmerkung:

Du kannst dir ALLES aus tasmota holen. BSP: IP/cm?cmnd=script?VARIABLE
Wobei Variable auch ein Array sein kann.

Lasst die Spiele beginnen

HoerMirAuf

Moin

Zitat von mat-sche

Die Daten stehen nun in einem Array und nun weiß ich nicht, wie ich an die z. Bsp. Werte von "ENERGY" heran komme. Irgendwie muss das Array mit einer for-next Schleife durchlaufen werden aber wie?

Das wird genauso geparst wie das einfache JSON.

Ich hab dir die Energydaten mal in das Beispiel mit eingebaut:

HTML

<!DOCTYPE html>
<html>
<head>
<title>Get Fetch-Request</title>
</head>
<body>
<script language="JavaScript">
function TogglePower(){
fetch('http://<IP>/cm?user=admin&password=<password>&cmnd=power%20toggle').then(function(response) {
response.text().then(function(text) {
const Status = JSON.parse(text);
document.getElementById('PowerValue').innerHTML = Status.POWER;
});
});
};
function GetStatusValue(){
fetch('http://<IP>/cm?user=admin&password=<password>&cmnd=status%205').then(function(response) {
response.text().then(function(text) {
JSON.parse(text, function (key, value) {
if (key == "WifiConfig") { document.getElementById('WifiConfigValue').innerHTML = value; }
if (key == "Hostname") { document.getElementById('HostNameValue').innerHTML = value; }
if (key == "IPAddress") { document.getElementById('IPAddressValue').innerHTML = value; }
});
});
});
fetch('http://<IP>/cm?user=admin&password<password>&cmnd=status%208').then(function(response) {
response.text().then(function(text) {
const Status = JSON.parse(text);
JSON.parse(text, function (key, value) {
if (key == "Voltage") { document.getElementById('VoltageValue').innerHTML = value; }
if (key == "Current") { document.getElementById('AmpereValue').innerHTML = value; }
if (key == "Power") { document.getElementById('EnergyPowerValue').innerHTML = value; }
});
});
});
fetch('http://<IP>/cm?user=admin&password=<password>&cmnd=power').then(function(response) {
response.text().then(function(text) {
const Status = JSON.parse(text);
document.getElementById('PowerValue').innerHTML = Status.POWER;
});
});
};
</script>
<table>
<tr><td colspan="2"><input type="button" value="Get State" onclick=GetStatusValue()></input></td></tr>
<tr>
<td><input type="button" value="Toggle Power" onclick=TogglePower()></input></td>
<td id="PowerValue"></td>
</tr>
<tr><td>WifiConfig:</td><td id="WifiConfigValue"></td></tr>
<tr><td>Hostname  :</td><td id="HostNameValue"></td></tr>
<tr><td>IP        :</td><td id="IPAddressValue"></td></tr>
<tr><td>Voltage   :</td><td id="VoltageValue"></td></tr>
<tr><td>Ampere    :</td><td id="AmpereValue"></td></tr>
<tr><td>Power     :</td><td id="EnergyPowerValue"></td></tr>
</table>
</body>
</html>

Alles anzeigen

mat-sche

Zitat von HoerMirAuf
Moin
Das wird genauso geparst wie das einfache JSON.
Code

N'guten Abend!

Danke für die Antwort!

Hatte inzwischen aus einem JS Forum Hlfe bekommen und es so umgesetzt:

Code

   fetch('http://192.xxx.xxx.xxx/cm?cmnd=status%208').then(function (response) {
            // Aus der Antwort vom Server den Text zurück geben:
                response.text().then(function(text) {
                    // Ausgabe des geparsten Strin/Objekt/array in der Konsole vom BrowserInspector
                    console.log ("Fetchdaten");
                    console.log (JSON.parse(text));
                    // Den Text parsen und in Variable legen:
                    const parsed = JSON.parse(text);
                    // Zeit in DOM-Element anzeigen:
                    if (parsed.StatusSNS.ANALOG.Temperature) {
                        console.log(parsed.StatusSNS.ANALOG.Temperature); 
                        // Text der gefunden und geparst wurde in diesem Dokument eine ID vergeben und Inhalt übergeben
                        // ID muss im HTML Teil vorhanden sein! 
                        document.getElementById('TasmoTemp').innerHTML = parsed.StatusSNS.ANALOG.Temperature;
                    }
                    if (parsed.StatusSNS.ENERGY.Total) {
                        document.getElementById('TasmoVoltage').innerHTML = parsed.StatusSNS.ENERGY.Voltage;
                    }
                    if (parsed.StatusSNS.ENERGY.Total) {
                        document.getElementById('TasmoCurent').innerHTML = parsed.StatusSNS.ENERGY.Current;
                    }
                    if (parsed.StatusSNS.ENERGY.Total) {
                        document.getElementById('TasmoPower').innerHTML = parsed.StatusSNS.ENERGY.Power;
                    }

Alles anzeigen

Ich werde an der Sache dranbleiben, muss noch einiges lernen. Jetzt designe ich erstmal die Seite für meinen ESP32

Vielen DAnk und Grüße!

ansim

Hallo, ich habe versucht, die o.a. Beispiele (nach: Ich hab dir die Energydaten mal in das Beispiel mit eingebaut:) umzusetzen.
Ich bekomme aber keine Werte zurückgeliefert. Woran kann das liegen?

Wenn ich das Beispiel aufrufe erscheint das:

Beim Klick auf "Get State" passiert gar nichts.
Ich habe versucht mit document.write("Hier"); zu prüfen ob die functions aufgerufen werden, Es wird aber kein "Hier" ausgegeben.

Ach ja, falls das wichtig ist, ich habs mit firefox und edge probiert...
Wer kann helfen?

Vielen Dank!!!

karoCB

Die html-Seite von HoerMirAuf muss auf einem Webserver liegen und mit dem Browser aufgerufen werden, nach dem zuvor die IP-Adressen des Zielsystems (evtl. Passwort eingetragen oder Link gekürzt z.B. auf http://192.166.177.xxx/cm?cmnd=status%205) wurde.

Kleinster Webserver - ESP32C3 mit Script und Manager File System - siehe ESP32-C3 SUPER MINI Pinout

Aufruf dann mit http://192.166.177.10x/ufs/HTMLvonHoerMirAuf.html

Benutzer online in diesem Thema