Forum: Mikrocontroller und Digitale Elektronik Bilder in ESP32 dynamisch generieren


von Gowron (Gast)


Lesenswert?

Ich habe einen ESP32, der als WLAN-AP und Webserver arbeitet, was 
problemlos funktioniert. Dieser hält intern ein paar (veränderliche) 
Datenreihen vor, die ich jetzt gerne grafisch aufbereitet in Form einer 
Kurve darstellen möchte.

Meine Idee wäre es jetzt, die Datenreihen in ein Bild zu zeichnen und 
dieses Bild innerhalb der Webseite anzuzeigen.

Deswegen meine Frage: gibt es irgendwelche ESP32-Tools (gerne auch 
innerhalb der ArduinoIDE-Bibliotheken), die sowas ermöglichen? Also 
irgendwas wie php-gd, nur halt in einer Größe, die auf dem ESP32 
einsetzbar ist?

Oder welche alternativen Möglichkeiten gibt es, so eine Kurve 
darzustellen?

Danke!

von svedisk ficklampe (Gast)


Lesenswert?

Zeichnen geht wie von allein mit SVG.

von Michael U. (amiga)


Lesenswert?

Hallo,

bekannt ist mir da nichts, allerdings habe ich auch noch nie danach 
gesucht...
Vom Ansatz her hätten ja übliche Bibliotheken von Display die nötigen 
Funktionen drin. Man müßte sozusagen die Daten mit einem 
"Displaytreiber" in den Ram legen und dann einen BMP-Header senden und 
die Daten aus dem Buffer richtig sortiert. Könnte man temporär sicher 
auch ins SPIFFS legen, dann müßte man nur bei Änderungen neu erstellen. 
Zur Not muß es eben ein ESP32 mit PSRAM (ESP32-Wrover) sein, dann hat 
man genug Ram verfügbar.

Aber vielleicht kennt ja auch jemand da schon was.

Gruß aus Berlin
Michael

von Michael U. (amiga)


Lesenswert?

Hallo,

svedisk ficklampe schrieb:
> Zeichnen geht wie von allein mit SVG.

Danke für den Anstoß, das scheint ja im ESP32Webserver schon was drin zu 
sein.
https://github.com/zhouhan0126/WebServer-esp32/blob/master/examples/AdvancedWebServer/AdvancedWebServer.ino

Gruß aus Berlin
Michael

von Stefan F. (Gast)


Lesenswert?

Michael U. schrieb:
> Danke für den Anstoß, das scheint ja im ESP32Webserver schon was drin zu
> sein.

Das hat nichts mit dem Webserver zu tun, es ist eine simple Verkettung 
von Strings.

von Johannes S. (Gast)


Lesenswert?

Der bessere Weg wäre den Server Script und Daten liefern zu lassen. 
Zeichnen kann der Browser auf dem PC viel besser. Das dann zb mit 
Highcharts und ähnlichem, so konnte das schon ein ATMega.

von Stefan F. (Gast)


Lesenswert?

Johannes S. schrieb:
> Der bessere Weg wäre den Server Script und Daten liefern zu lassen.

Was glaubst du, was bei SVG passiert? Genau das!

von Johannes S. (Gast)


Lesenswert?

Stefan F. schrieb:
> Was glaubst du, was bei SVG passiert? Genau das!

Script und Daten. Es war eine Antwort auf:

Gowron schrieb:
> Meine Idee wäre es jetzt, die Datenreihen in ein Bild zu zeichnen und
> dieses Bild innerhalb der Webseite anzuzeigen.

von Gowron (Gast)


Lesenswert?

Michael U. schrieb:
> Danke für den Anstoß, das scheint ja im ESP32Webserver schon was drin zu
> sein.
> 
https://github.com/zhouhan0126/WebServer-esp32/blob/master/examples/AdvancedWebServer/AdvancedWebServer.ino

Das sieht ja schon mal sehr gut aus! Damit bräuchte ich ja noch nicht 
mal Speicher- und Rechenzeitintensive Grafikoperationen. Prima, Danke!

von Johannes S. (Gast)


Lesenswert?

> 
https://github.com/zhouhan0126/WebServer-esp32/blob/master/examples/AdvancedWebServer/AdvancedWebServer.ino

da ich auch gerade an einem Webserver baue, so sieht das aus:
http://boracay.homeip.net:8888/test.svg
aber nur heute und temporär.

Hier wird nicht Script + Daten geliefert, sondern der Server liefert die 
Zeichenbefehle.

von Dennis H. (c-logic) Benutzerseite


Lesenswert?

Johannes S. schrieb:
>>
> 
https://github.com/zhouhan0126/WebServer-esp32/blob/master/examples/AdvancedWebServer/AdvancedWebServer.ino
>
> da ich auch gerade an einem Webserver baue, so sieht das aus:
> http://boracay.homeip.net:8888/test.svg
> aber nur heute und temporär.
>
> Hier wird nicht Script + Daten geliefert, sondern der Server liefert die
> Zeichenbefehle.

Geht da nicht was mit Path. Es sind doch zusammenhängende Linien.

<g>
  <path d=""/>
</g>

von Johannes S. (Gast)


Lesenswert?

Soweit kenne ich die Features von svg noch nicht. Habe noch nichts damit 
gemacht, hier nur gerade das Beispiel reingehackt.
Eine Demo von highcharts läuft auch auf dem Server, das mit Websockets 
ist mein Favorit.
Das svg kann auf dem Client generiert werden, das Zeichnen auf einem 
kleinen Controller kostet viele Resourcen.

von Dennis H. (c-logic) Benutzerseite


Lesenswert?

Johannes S. schrieb:
> Soweit kenne ich die Features von svg noch nicht. Habe noch nichts damit
> gemacht, hier nur gerade das Beispiel reingehackt.
> Eine Demo von highcharts läuft auch auf dem Server, das mit Websockets
> ist mein Favorit.
> Das svg kann auf dem Client generiert werden, das Zeichnen auf einem
> kleinen Controller kostet viele Resourcen.

aus sowas
<g stroke="black">
<line x1="10" y1="137" x2="20" y2="102" stroke-width="1" />
.....
</g>

kannst sowas machen
<g stroke="black" fill="transparent" >
<path stroke-width="1" 
d="M10,137L20,102,30,26,40,139,50,131,60,43,70,136,80,54,90,46,100,19,11 
0,23,120,122,130,105,140,61,150,51,160,125,170,62,180,13,190,90,200,112, 
210,84,220,123,230,85,240,126,250,82,260,98,270,54,280,131,290,18,300,11 
4,310,139,320,133,330,109,340,128,350,66,360,69,370,48,380,23,390,87,"/>
</g>
Ein Absoluter Move und Absolute Lines danach.

Ich mag SVG :) Vorallem dann noch mit Javascript und Animationen.

: Bearbeitet durch User
von Johannes S. (Gast)


Lesenswert?

Ja, macht Sinn, sieht etwas kompakter aus.
Nutzt hc intern auch svg? Habe da noch nicht unter die Haube geguckt.

von Dennis H. (c-logic) Benutzerseite


Lesenswert?

Macht irgendwie den Eindruck das die auch SVG in Verbindung mit HTML5 
nehmen. Im Quellcode sah es eben so aus.
SVG kann übrigens durch Javascript auch den Rückkanal zur Verfügung 
stellen. Mit Ajax könnte es gehen. Das woll ich eh mal ausprobieren.

von Johannes S. (Gast)


Lesenswert?

Sind die Websocken da nicht der neue heisse Dings? Das können die 
Browser incl. Smartphones doch mittlerweile alle.

von Dennis H. (c-logic) Benutzerseite


Lesenswert?

ich bin da nicht mehr so up-to-date.
Was aber immer ne schöne Kombination war, war Inkscape und SVG. Um mal 
zu schauen wie InkScape so Sachen umsetzt in SVG-Quellcode.

: Bearbeitet durch User
von Johannes S. (Gast)


Lesenswert?

Me2. Das Webgedöns war auch nie meine Welt. Wenn man die Irrungen und 
Wirrungen da sieht hat man auch nix verpasst :) Jetzt sind die Standards 
wohl brauchbar, gut das Steve sowas wie Flash Boykottiert hat :)
Ja, Inkscape habe ich auch schon benutzt. Guter Tip.

von Dirk B. (dirkb2)


Lesenswert?

Z.B. mit Dygraphs

Ist eine freie JS-Bibliothek um Zeitreihen darzustellen.
Das Javascript wird von der Herstellerseite geladen.

Und deine Daten dazu (in der Webseite oder als CVS-Download).

von Stefan F. (Gast)


Lesenswert?

Johannes S. schrieb:
> Sind die Websocken da nicht der neue heisse Dings?

Die sind nur interessant, wenn der Server genug ressourcen hat, für 
jeden Client entsprechend viele Verbindungen offen zu halten.

von Johannes S. (Gast)


Lesenswert?

Stefan F. schrieb:
> Die sind nur interessant, wenn der Server genug ressourcen hat,

die µC haben immer mehr Speicher und Power, das reicht locker für eine 
handvoll Verbindungen und Anwendungen. Auch auf dem ESP32 sollte das 
laufen und damit schnelle Aktualisierungen auch bei vielen Daten möglich 
sein.

von Zonk (Gast)


Lesenswert?

Dennis H. schrieb:
> Was aber immer ne schöne Kombination war, war Inkscape und SVG

Vorsicht mit Inkscape, das kommt auch mit einer inkompatiblen, 
nicht-Standard-Version von SVG daher. Wenn du da beim Speichern nicht 
aufpasst, hast du statt richtigem SVG diesen verkrüppelten Mist am Hals.

von Stefan F. (Gast)


Lesenswert?

>> Die (Websockets) sind nur interessant, wenn der Server genug ressourcen hat,

Johannes S. schrieb:
> die µC haben immer mehr Speicher und Power, das reicht locker für eine
> handvoll Verbindungen und Anwendungen. Auch auf dem ESP32 sollte das
> laufen und damit schnelle Aktualisierungen auch bei vielen Daten möglich
> sein.

Der ESP8266 kann maximal 5 Verbindungen, wovon schon m9ndestens 2 nötig 
sind, damit normale Browser ohne spürbare Einschränkungen arbeiten.

Wie viele Verbindungen kann der ESP32 gleichzeitig offen haben?

von Johannes S. (Gast)


Lesenswert?

Stefan F. schrieb:
> Wie viele Verbindungen kann der ESP32 gleichzeitig offen haben?

Google sagt 4, wenn man das SDK selber kompiliert kann man es bis auf 16 
heraufsetzen.

Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.