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/
:
Bearbeitet durch User
Bernd schrieb: > - Self-Contained (es gibt keine Internetverbindung) > - Klein (muss auf einen ESP passen) > - Moderne Optik (Material Design o.ä.) 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.
Bernd schrieb: > 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.
Bernd schrieb: > Klar, es gibt fette Frameworks wie Bootstrap Klar, sind schon ein paar kB: * 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. Monk schrieb: > 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. Rahul D. schrieb: > 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.
Monk schrieb: > 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)
Jens K. schrieb: > Leute die es Mögen was der ÖR vorgibt um dem Allgemeinquatsch > selbst zu rechtfertigen ... blabla, ich mag diese Leier nicht mehr hören. Das hier ist kein Politik Forum!
Jens K. schrieb: > Ein Programm für Leute die es Mögen was der > ÖR vorgibt um dem Allgemeinquatsch selbst zu rechtfertigen. Ah, ein Schwurbler!
Jens K. schrieb: > <schwurbel> Du könntest dir wenigstens ein ganz klein wenig Mühe geben, einen Zusammenhang zum Thema dieses Threads herzustellen :-(
Rainer W. schrieb: > Du könntest dir wenigstens ein ganz klein wenig Mühe geben, einen > Zusammenhang zum Thema dieses Threads herzustellen :-( Mühe geben? Ein Schwurbler? Ganz mein Humor.
Bernd schrieb: > 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? Ja sicher. Sich etwas in HTML und CSS einarbeiten, und per Netbeans IDE HTML-Code erstellen, und dann rüberschieben ins Web-IF. Das HTML Gerüst wird selbsterstellt extrem schmal. Dann kommt noch PHP und evtl. Phyton zum Einsatz, wegen Buttons. Graphicen, Buttons erstellen mit Photoshop.
Angehängte Dateien:
Bernd schrieb: > 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? warum nicht wie das von NETIO? passte in einen AVR also auch in einen ESP32
Joachim B. schrieb: > warum nicht wie das von NETIO? Weil er dies will: Bernd schrieb: > eine halbwegs ansprechende und moderne Weboberfläche
Monk schrieb: > er 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?
:
Bearbeitet durch User
Joachim B. schrieb: > Das dir das nicht gefällt interessiert doch nicht Dann antworte nicht! > oder gehts dir wieder nur um Klicks? Nur in deiner spinnerten Phantasie.
Monk schrieb: > Nur in deiner spinnerten Phantasie. absolut nicht, nachprüfbare Tatsache hier 4 Beiträge von dir und kein Rat für den TO außer Klickgenerierung für dich!
:
Bearbeitet durch User
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.
Joachim B. schrieb: > Monk schrieb: >> er > > 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. Deine Weboberfläche mag für dich funktionieren und für dich ausreichend sein. Soweit alles gut. Wenn es aber um die Frage von modern und hübsch geht, dann gibt es ein klares Nein von mir. Man kann an den Buttons Anpassungen vornehmen. Dafür kann man sich ruhig Youtube Kanäle anschauen. Oder https://www.w3schools.com/howto/howto_css_switch.asp https://makeusershappy.de/perfektes-button-design/ 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.
:
Bearbeitet durch User
Bernd schrieb: > ich würde meinen ESP32 gerne über ein Web-Interface bedienbar machen > (Werte anzeigen, ein paar Buttons). Stöbere mal bei randomnerdtutorials durch. Da wirst Du einiges finden. Der Code ist immer gut erklärt und funktioniert! https://randomnerdtutorials.com/ mfg Klaus
Veit D. schrieb: > Wenn es aber um die Frage von modern und hübsch > geht, dann gibt es ein klares Nein von mir. ist doch OK, nur hilft es dem TO auch nicht, genausowenig wie die 4 Beiträge vom Dauerschwurbler.
>Kann mir jemand einen Tipp geben, womit ich eine halbwegs ansprechende >und moderne Weboberfläche hinbekomme? Das hier hat vor kurzem mal jemand gezeigt: https://cloud.arduino.cc/
Bernd schrieb: > Self-Contained (es gibt keine Internetverbindung) Christoph M. schrieb: > Das hier hat vor kurzem mal jemand gezeigt: > https://cloud.arduino.cc/ Entweder ich verstehe das was falsch oder Cloud und ohne Internet passt nicht zusammen.
Tom H. schrieb: > Angefangen hat Monk roehrmond, indem er die Heute Show als interessant > bezeichnete. Nein, er hat die Heute Show nicht als interessant bezeichnet. LG, Sebastian
N. M. (mani)
>Entweder ich verstehe das was falsch oder Cloud und ohne Internet passt
nicht zusammen.
Sorry, hab's überlesen ...
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.
Sigi S. schrieb: > Versuchs mit EspBasic. Ist das versehentlich in den falschen Thread geraten? Ich verstehe nicht, wie das die Frage nach einer modernen ansprechenden Weboberfläche beantwortet.
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
Angehängte Dateien:
-
ESP_BME.jpg
5,6 KB -
Dimmer.jpg
160 KB
Joachim B. schrieb: > 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
Carsten-Peter C. schrieb: > Joachim B. schrieb: >> 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. Aber das war hier halt nicht gefragt.
Thread beobachten
Seitenaufteilung abschaltenBitte 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
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.