Hi,
ich würde meinen ESP32 gerne über ein Web-Interface bedienbar machen (Werte anzeigen, ein paar Buttons). Eigentlich kein Problem, jedoch hapert es bei mir etwas an den Web-Design-Fähigkeiten ;-)
Kann mir jemand einen Tipp geben, womit ich eine halbwegs ansprechende und moderne Weboberfläche hinbekomme?
Klar, es gibt fette Frameworks wie Bootstrap, React usw.. Aber das ist für einen ESP32 natürlich Overkill. Gibt es hier auch was kleines/einfaches?
Meine Wünsche:
Klein (muss auf einen ESP passen)
Self-Contained (es gibt keine Internetverbindung)
Moderne Optik (Material Design o.ä.)
Ein Weg wäre natürlich, einfach alles selbst zu schreiben (HTML, CSS und JS), aber vielleicht gibt es ja schon was Fertiges, was genau für solche Anwendungsfälle geeignet ist?
Müßte man mal schauen, wie das mit den Bausteinen, die mit
TASMOTA geflasht sind, gemacht wird. Da wird ja auch oft
so ein Web-Interface angeboten (siehe z.b Stromzähler mit
ESP32).
Hier mal eine Anlaufstelle :
https://tasmota.github.io/docs/
Das widerspricht sich doch:
Modern heißt "Klicki-Bunti" mit vielen Icons aka Bilder.
Alles, was irgendwie optisch hochwertig wirkt, kostet Speicher (und Übertragungskapazität).
Aus meiner Erfahrung:
Wenn man nur ein Display an einen Mikrocontroller hängt, werden die Grafik-Daten meist auf einer SD-Karte bzw. externem Speicher zur Verfügung gestellt.
Damit kann man dann auch komplexere, "hübschere" Sachen machen.
Gleiches dürfte für Webserver gelten. (ich kann aber auch danebenliegen...)-
Software macht kein schönes UI. Du brauchst einen begabten Grafikdesigner.
Vor vielen Jahren hatte ich eine Web Anwendung für den deutschen Wetterdienst programmiert. Dort konnte man Wetterberichte sehen und als SMS abonieren. Der Fokus lag bei mobilen Geräten.
Es funktionierte gut, sah aber sch.... aus. Erst als die Grafikdesignerin dem Ganzen ihren Style verpasste, wurde es richtig gut, so dass wir am Ende auf das Werk Stolz sein konnten. Bei dem Projekt habe ich gelernt, wie wichtig/sinnvoll die Arbeit dieser Leute ist.
Oder: zieht euch mal eine Heute Show mit geschlossenen Augen rein. Ohne die Grafiken ist die Sendung micht mal halb so interessant.
Klar, es gibt fette Frameworks wie Bootstrap, React usw.. Aber das ist
für einen ESP32 natürlich Overkill. Gibt es hier auch was
kleines/einfaches?
React geht problemlos auf dem ESP32.
Das braucht auf dem PC beim Kompilieren viel Resourcen, und im Webbrowser beim Anzeigen, aber nicht am ESP32.
Hab so eine Weboberfläche laufen, mit React, React-Bootstrap, dynamischen SVG-Grafiken, Menu und mehreren Seiten, Balken- und Liniendiagrammen, Serviceworker usw.
Kompiliert sich alles in allem (Wenn man die Debug-Informationen weglässt) auf unter 1MB. Ohne dass irgendwas von extern eingebunden wäre.
Klar, im Vergleich zu einer handgezimmerten Webseite ist das sehr viel, aber passt problemlos ins Flash-Filesystem am ESP32.
Komprimiert (gzip) wären es nur so 350 Kilobyte, dann müsste der ESP beim Ausliefern noch einen passenden Transfer-Encoding Header mitschicken.
bootstrap.bundle.min.js (5.1.3), also das Fette mit Popper (77kB)
bootstrap.min.css (5.1.3) (161kB)
jquery-3.7.1_min.js (86kB)
Sind 321kB gesamt.
Wenn man es aber GZIPt sind es nur noch gesamt 74kB.
Das geht schon. Hab das schon ab und zu mal verwendet.
Die meisten ESP32 Boards die ich kenne haben mehr als genug Flash um es selbst ungeZIPt abzulegen.
Selbst bei einem Standard Raspi Pico mit seinen 2MB geht das.
Software macht kein schönes UI. Du brauchst einen begabten
Grafikdesigner.
Klar, damit die Site gut aussieht definitiv. Aber selbst wenn man nur die Components von z.B. Bootstrap o.ä. nimmt sieht es schon deutlich schöner aus als mit den Browser Standards. Kann man natürlich auch alles selbst schreiben mit (inline) CSS.
Das widerspricht sich doch:
Modern heißt "Klicki-Bunti" mit vielen Icons aka Bilder.
Wenn der Speicher knapp wäre würde man natürlich nicht alle 2000+ Icons nehmen. Sondern nur die wo man braucht. Pro SVG sind das geschätzt 100-500 Byte. Da kann man dann sehr selektiv arbeiten.
Das war mir meist zu blöd. Jedesmal neu hinzufügen wenn man ein weiteres Icon braucht. Deshalb hab ich mir immer den kompletten Web-Font reingezogen. Das sind dann nochmal 172kB/128kB (woff/woff2).
Wenn man also ALLE Funktionalitäten mit ALLEN Icons haben wollte, so wären das insgesamt so um die 449kB (unkomprimiert) bzw. 202kB GZIPt. Wenn man aussortiert dementsprechend weniger.
Oder: zieht euch mal eine Heute Show mit geschlossenen Augen rein. Ohne
die Grafiken ist die Sendung micht mal halb so interessant.
Nein, sie ist unerträglich. Ein Programm für Leute die es Mögen was der ÖR vorgibt um dem Allgemeinquatsch selbst zu rechtfertigen. "Es ist so bequem, unmündig zu sein" (Bruder von Harald Kant, der nach seiner Emigrierung nach Amerika fortan verarscht wurde)
Hi,
ich würde meinen ESP32 gerne über ein Web-Interface bedienbar machen
(Werte anzeigen, ein paar Buttons). Eigentlich kein Problem, jedoch
hapert es bei mir etwas an den Web-Design-Fähigkeiten ;-)
Kann mir jemand einen Tipp geben, womit ich eine halbwegs ansprechende
und moderne Weboberfläche hinbekomme?
hat viel mehr Freiheiten im ESP als im AVR das zu realisieren.
Ich finde mein Webinterface schön, mehr braucht man nicht, aber natürlich kann man bunte Bildchen einbauen oder Gifs.
Das dir das nicht gefällt interessiert doch nicht oder gehts dir wieder nur um Klicks?
Angefangen hat Monk roehrmond, indem er die Heute Show als interessant bezeichnete. Schon das gehört nicht hierher und fordert Leute heraus, welche due Heute Show unerträglich finden, und das zu recht. Ein Mainstream-Veranstaltung und Meinungsmache, bei der sich alle wohlfühlen, die sich im "wir sind die guten"-Gefühl suhlen wollen.
hat viel mehr Freiheiten im ESP als im AVR das zu realisieren.
Ich finde mein Webinterface schön, mehr braucht man nicht, aber
natürlich kann man bunte Bildchen einbauen oder Gifs.
Anderes Bsp. für eine gute Grundlage um Programmcode und html Code zu trennen.
https://fipsok.de/Esp32-Webserver/Esp32
Nutzt man den Dateimanager kann man seine html Seiten ohne jedesmal komplett neu flashen jederzeit ändern.
Man kann sich das ganze solange es nicht aus einer API dynamisch generiert wird in einem Homepagebaukasten zusammenklicken.
z.B. gerade bei der Kacheloptik geht das sehr schnell.
So ein richtig tolles KlickiBunti Layout hat viele Custom Grafiken und wird quasi in Photoshop erstellt und dann Blanko ohne Texte in einzelne Grafiken gescliced.
Ich habe hier sehr viele IOT-Geräte, die meisten auf Basis ESP8266 oder ESP32
Teils sind es fertige Geräte wie Shelly - Teils Adaptionen wie ESPEasy oder Tasmota
Alle haben eine Weboberfläche - diese nutze ich aber nur zum konfigurieren - das eigentliche Uerinterface muss woanders passieren - die diversen AKtoren werden nur gesteuert
Ich finde mein Webinterface schön, mehr braucht man nicht, aber
natürlich kann man bunte Bildchen einbauen oder Gifs.
Moin,
man mag es mögen oder nicht. Das Programm ist sicher gut zu verstehen und anzupassen. Für den Net-IO sieht eine meiner Seiten ähnlich aus. Ich würde klein anfangen mit Programmen, die ich überblicken kann.
Gruß
Carsten
Ich finde mein Webinterface schön, mehr braucht man nicht, aber
natürlich kann man bunte Bildchen einbauen oder Gifs.
Moin,
man mag es mögen oder nicht. Das Programm ist sicher gut zu verstehen
und anzupassen. Für den Net-IO sieht eine meiner Seiten ähnlich aus. Ich
würde klein anfangen mit Programmen, die ich überblicken kann.
Gruß
Carsten
Nimmt es mit beide nicht übel. Aber wie oben schon gesagt hat das halt absolut nichts mit MODERNEM Web UI zu tun.
Klar ich sehe es auch so dass an erster Stelle die Funktion stehen muss.
Bei Atmega und Co macht so eine Seite ja auch Sinn was Speicher und auch Übertragungsdauer angeht.
