AJAX und CANVAS

Fan73 · February 1, 2020, 8:59am

Hallo,

ich suche die Lösung für folgendes Problem.

Ich experimentiere derzeit mit einem M5StickC an welchem ich einen ENV Sensor angeschlossen habe.
Der M5Stick verbindet sich mit dem Heim-Netzwerk und wenn ich mit einem anderen Gerät die
IP des M5StickC aufrufe, dann werden mir die Werte des Sensors angezeigt.
Das funktioniert soweit.

Nun möchte ich gerne einen Zeiger "zappeln" lassen, je nach Sensor-Wert.
Ich erzeuge auch mit Canvas eine Grafik, Rechteck und Linie.
Dies wird jedoch nur einmal zum Beginn der Verbindung aufgerufen.
Nur, wie kann ich nun den Verlauf der Linie in Abhängigkeit der Werte ändern?

Vielleicht hat da jemand ein einfaches Beispiel parat?

Vielen Dank schon mal im voraus...

Grüße von Jürgen

noiasca · February 1, 2020, 9:05am

da sehe ich zwei Aspekte:

zahlt sich das aus selber zu machen? Warum nicht Highchart oder ähnliches?

und

Die Datenaktualisierung mittels AJAX beginnt eigentlich schon damit: kannst du bereits einzelne Werte auf deiner Webseite mittels Ajax ändern oder klappt reiner Text auch noch nicht?

wenn Bunt und Grafisch würde ich zunächst mal auf der HP von Derfips nachsehen...

Fan73 · February 1, 2020, 9:12am

Hallo,

Danke für den Hinweis.
Ich werde dort mal nachsehen.

Das es fertige Lösungen gibt hatte ich auch schon gesehen.

Da ist u.a. auch eine fertige Lösung zu finden.

Mich interessiert halt wie es funktionieren könnte und ich wollte selber etwas damit experimentieren.

Eine Anzeige in Zeichenform funktioniert bei mir bereits. Das habe ich einigermaßen verstanden.

Gruß Jürgen

noiasca · February 1, 2020, 9:31am

Mich interessiert halt wie es funktionieren könnte und ich wollte selber etwas damit experimentieren.

verstehe da die Frage nicht.
periodisch mittels AJAX Daten nachholen und das "Ding" halt aktualisieren.

Woran fehlts nun?

Fan73 · February 1, 2020, 9:49am

Hallo,

die Daten werden ja periodisch aktualisiert, als Zahlenwerte auf dem Bildschirm.

Ich weiß leider nicht, wie ich diese Zahlenwerte nutzen kann um auch periodisch
eine, z.B. Linie, zu zeichnen.

Es wird ja ein leeres DIV angelegt mit einer ID ana_data in welchem dann die Werte angezeigt werden.

...

function GetSwitchAnalogData() {
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
drawline(59)
if (this.responseText != null) {
document.getElementById("ana_data").innerHTML = this.responseText;
}}}}
request.open("GET", "ajax_switch" + nocache, true);
request.send(null);
setTimeout('GetSwitchAnalogData()', 250);
}

...

so schaut die Funktion im Auszug aus.

und hier die SUB welche sich auf dem M5StickC befindet:

void GetAjaxData(WiFiClient cl)
{

   cl.print("<p>Temperatur: ");
   cl.print(tmp);
   cl.println("</p>");
   cl.print("<p>Humidity : ");
   cl.print(hum);
   cl.println("</p>");
   cl.print("<p>Pressure : ");
   cl.print(pressure/100);
   cl.println("</p>");

    cl.print("<p>Akku : ");
   cl.print(vbat2);
   cl.println("</p>");


}

Gruß Jürgen

noiasca · February 1, 2020, 9:57am

Mit irgendwelchen codeschnippseln wird das nichts.
mach einen minimal lauffähigen aber vollständigen Sketch und schreibe was genau nicht funktioniert.

Was man so sieht: du holst dir mit AJAX halbes html.
Das willst du sicher nicht parsen um an die Werte zu kommen.
Schick dir ein JSON raus und lasse das Javascript das JSON parsen.
dann kannst du die Werte einerseits per JavaScript als Text in deine Seite einsetzen und andererseits auch vernünftig weiterarbeiten und grafisch darstellen.

Fan73 · February 1, 2020, 10:05am

danke für den Tip mit JSON.

Es ist ja nicht so, dass etwas nicht funktioniert.
Ich weiß nicht wie ich es geht, eine Zeichnung entsprechend zu ändern,
abhängig der Werte.

Deshalb fragte ich Eingangs auch nach einem einfachen Beispiel...

Ich werde mir das dann nachher mal mit JSON ansehen...

Gruß

noiasca · February 1, 2020, 10:10am

du brauchst ja nichtmal eine großartige JSON lib
mach einfach aus deinem HTML ein valides JSON (unbedingt überprüfen!!!),
Javascript kann dann damit gut umgehen.

vieleicht hilft dir auch mein geschreibe auf ESP8266 Webserver - Aktualisierung der Webseite mit Fetch API - obwohl das eigentlich nur ein Teil einer größeren Anleitung ist...

Fan73 · February 2, 2020, 9:39am

Hallo,

ich wollte mittteilen, dass ich das Rätsel gelöst habe.

Ich habe einen Messwert zwischen 2 "Sterne"(*) verpackt und diese Zeichenkette dann
aus "this.responseText" ausgefiltert.
Damit konnte ich dann mit dem ausgesiebten Wert meine SUB zum zeichnen der Grafik
aufrufen.

Nun habe ich aber festgestellt, im Heimnetzwerk, mit fast 10 anderen Geräten, der Durchsatz
ganz schön einbricht, also alle 500ms einen Wert abrufen, das ruckelt ganz schön.

Vielleicht sollte ich die Daten mit diesem UDP erstellen und aussenden?

Fazit: Das Parsen hat mich auf den richtigen Weg gebracht...
Vielen Dank für Eure Hinweise .

mfg Jürgen

Derfips · February 2, 2020, 9:53am

Fan73:
Ich habe einen Messwert zwischen 2 "Sterne"(*) verpackt und diese Zeichenkette dann
aus "this.responseText" ausgefiltert.

Du machst es dir unnötig schwer!

Dafür nimmt man Json, aber das wurde dir ja schon mitgeteilt.

JSON.parse()

Gruß Fips

noiasca · February 2, 2020, 10:28am

wenn du alle 500ms einen Wert abrufst - na klar ruckelt die Anzeige, eine halbe Sekunde sieht ein Mensch
Aber eigentlich liegt es an deiner Anzeige - du musst halt vom alten Wert zum neuen Wert "langsam" mit Zwischenschritten hochfahren.

ja und du sollst auch UDP probieren. Ob das was bringt, wage ich zu bezweifeln ohne deinen jetzigen Code zu sehen.

Mach mal ein Bild vom Netmonitor in deinem Browser (Firefox: Tools|Web Developer| Network) und zeige was da momentan in deiner Kommunikation zwischen Browser und Device abläuft, wie groß die Requests sind und wie lange die Dauern. Die Ausgabe von deinem void GetAjaxData(WiFiClient cl) ist ja jetzt schon suboptimal.

Und dass es an den 10 anderen Netzteilnehmern liegt, ist ebenso zu bezweifeln. Was glaubst du was da so bei uns im Netzt läuft

Der M5StickC ist eigentlich ein ESP32 oder? Ich denke dein webserver lässt sich massiv verbessern,...

Fan73 · February 2, 2020, 11:43am

Hallo,

Derfips:
Du machst es dir unnötig schwer!

Dafür nimmt man Json, aber das wurde dir ja schon mitgeteilt.

JSON.parse()

Gruß Fips

Ja, ich wollte es halt mal auf die Schnelle testen mit einem Wert.

Gruß..

Fan73 · February 2, 2020, 12:10pm

noiasca:
wenn du alle 500ms einen Wert abrufst - na klar ruckelt die Anzeige, eine halbe Sekunde sieht ein Mensch
Aber eigentlich liegt es an deiner Anzeige - du musst halt vom alten Wert zum neuen Wert "langsam" mit Zwischenschritten hochfahren.

ja und du sollst auch UDP probieren. Ob das was bringt, wage ich zu bezweifeln ohne deinen jetzigen Code zu sehen.

Mach mal ein Bild vom Netmonitor in deinem Browser (Firefox: Tools|Web Developer| Network) und zeige was da momentan in deiner Kommunikation zwischen Browser und Device abläuft, wie groß die Requests sind und wie lange die Dauern. Die Ausgabe von deinem void GetAjaxData(WiFiClient cl) ist ja jetzt schon suboptimal.

Und dass es an den 10 anderen Netzteilnehmern liegt, ist ebenso zu bezweifeln. Was glaubst du was da so bei uns im Netzt läuft

Der M5StickC ist eigentlich ein ESP32 oder? Ich denke dein webserver lässt sich massiv verbessern,...

Hallo, mit dem Ruckeln meinte ich, dass die Werte manchmal schnell angezeigt werden und es dann wieder zu Pausen kommt die wesentlich länger als 500ms sind.
Aber da liegt noch irgendetwas im Argen denke ich.
Kann das aber noch nicht so genau beurteilen, dazu fehlen mir die Kenntnisse.
Nutzen tue ich Chrome als Browser

mfg

noiasca · February 2, 2020, 12:22pm

die vielen failed würden mich stören.
Wie oft schickst du los?
Ist es ein ESP32?

Fan73 · February 2, 2020, 1:03pm

Hallo,

momentan, zum Zeitpunkt der Aufnahme, war der Wert 200ms

setTimeout('GetSwitchAnalogData()', 200);

Der M5StickC beinhaltet einen ESP32.

Gruß Jürgen

Derfips · February 2, 2020, 1:12pm

Fan73:
setTimeout('GetSwitchAnalogData()', 200);

Ist dein Sketch Blockierungsfrei ?

Versuch es mit einem anderem Interval.

Javascript "setTimeout" ist nebenbei die falsche Funktion. Heutzutage nimmt man setInterval(GetSwitchAnalogData, 250);

Gruß Fips

Fan73 · February 2, 2020, 5:03pm

noiasca:
... Ich denke dein webserver lässt sich massiv verbessern,...

was meinst Du damit?

gruß Jürgen

Fan73 · February 2, 2020, 5:17pm

Derfips:
Ist dein Sketch Blockierungsfrei ?

Versuch es mit einem anderem Interval.

Javascript "setTimeout" ist nebenbei die falsche Funktion. Heutzutage nimmt man setInterval(GetSwitchAnalogData, 250);

Gruß Fips

Hallo,
was meinst Du mit Blockierungsfrei?

Habe jetzt die von Dir vorgeschlagene Änderung eingebaut:

                         client.println("setInterval('GetSwitchAnalogData()', 300);");

                        client.println("function GetSwitchAnalogData() {");

                             client.println("nocache = \"&nocache=\" + Math.random() * 1000000;");
                             client.println("var request = new XMLHttpRequest();");
                             client.println("request.onreadystatechange = function() {");
                             client.println("if (this.readyState == 4) {");
                             client.println("if (this.status == 200) {");
                                    
                             client.println("if (this.responseText != null) {");
                             client.println("document.getElementById(\"sw_an_data\").innerHTML = this.responseText;");
                                    

                              client.println("var myObj = JSON.parse(this.responseText);");

                              client.println("document.getElementById(\"can_data\").innerHTML = myObj.Temperatur;");  
                                       
                               client.println ("drawline(myObj.Temperatur);");
                                       
                              client.println("}}}}");
                       
                              client.println("request.open(\"GET\", \"ajax_switch\" + nocache, true);");
                              client.println("request.send(null);");


                              client.println("}");

Ebenso das JSON Format genutzt, geht ja doch einfacher als gedacht.

Es kommt allerdings immer noch zu vielen Fehlern...
(Siehe anhängendes Bild)

Gruß Jürgen

Tommy56 · February 2, 2020, 5:24pm

Zeige uns doch einfach mal den kompletten Code Deines Webservers.

Gruß Tommy

Derfips · February 2, 2020, 5:49pm

Tommy56:
Zeige uns doch einfach mal den kompletten Code Deines Webservers.

Das wäre an der Zeit.

Wenn ich schon das "client.println" sehe, bää!

Warum nimmst du nicht den kompfortablen Webserver?

Gruß Fips

Topic		Replies	Views
Problema con AJAX Software	2	309	May 7, 2021
Ajax Request auswerten. Deutsch	13	4183	May 6, 2021
Webseitenlayout über Ajax mit Arduino Kommunizieren lassen Deutsch	15	5944	May 6, 2021
Probleme beim Auswerten von Ajax Request (nicht direkt ein Problem mit Arduino) Deutsch	7	1241	May 6, 2021
[gelöst]jQuery Ajax-Request Deutsch	1	1031	May 6, 2021

AJAX und CANVAS

Related topics