GUI Designer für Webapplications (ESP32, HTML) - HTML designer ähnlich Qtdesigner? (Drag and drop)

[Seppde]

Servus,
Ich zermarter mir ein wenig den Kopf seit Tagen und finde nichts Befriedigendes mit Google:

Auf einem esp32 will ich einige sensorWerte auslesen und dann auf einer Website mit dem esp interagieren;
I.e. Ich will über die IP Adresse auf ihn zugreifen und dann dort eine hübsche Bedienoberfläche finden, in die ich auch mal noch einen Graph, Buttons, Textfelder etc einfüge.
Das funktioniert auch alles, hab mir dafür mal eine simple html geschrieben, alles top.

Leider hab ich von jeglicher webentwicklung keine Ahnung. Entsprechend sieht halt die Oberfläche jetzt noch aus.
Auch wenn ich jetzt schon bisschen verstanden hab, wie CSS und JS funktioniert.

Gibt es nicht eine Möglichkeit, eine schöne Oberfläche für eine Website mit einem Drag and drop editor zu erstellen?
A la Qtdesigner, bei dem ich ja auch meinen qml Code relativ für alle möglichen DisplayGrößen erstellen kann und eventhandlers habe...

Alternativ kann mir vielleicht jemand andere Möglichkeiten sagen, wie ich:
Über eine schicke Oberfläche mit dem mcu interagiere, ohne apps dafür zu schreiben
(, die jeder benutzer dann noch installieren müsste - das find ich ganz elegant an der webapplication Lösung)

Webassembly hab ich mir angeschaut, aber da gehen die Dateigrößen über das, was ich in den Flash eines mcu bekomme.

LG Sepp

 

[kim88]

Einen wirklich brauchbaren Drag & Drop Editor wirst du nicht finden.

Aber für deine Anforderung eigenet sich Bootstrap. Da musst du eigentlich nur die Komponenten aus der Dokumentation copy&pasten und bekommst so ein relativ easy layout: https://getbootstrap.com/

 

[madmax2010]

Eine der einfachsten und meistgenutzten Loesungen ist hier wohl https://esphome.io/
Sonst halt home assisstant oder openhab

Wenn es dir nur ums plottengeht: Grafana. Alternativlos. Das macht die huebschesten Plots die du finden wirst.

 

[netzgestaltung]

ich glaube für sensoren wäre ein dashboard vielleicht geeignet: https://github.com/awesome-selfhosted/awesome-selfhosted#personal-dashboards

 

[Seppde]

Einiges davon habe ich mir schon angeschaut aber fand nix davon richtig zufriedenstellend.
Ich hab das eher als Wunsch hingestellt aber eigentlich ist es eher Pflicht, dass die GUI ohne zusätzliche Installationen über die IP erreichbar ist. (Wird später von unterschiedlichen Leuten, hauptsächlich per Smartphone benutzt werden)
Ich glaube ESP Home (und dergleichen) sind nicht in den Flash zu bekommen.

Bootstrap... hab ich jetzt tausendmal gelesen, meine derzeitige Lösung basiert auf w3.css und Chart.js, ist ja im Grunde dasselbe. Oder bietet mir Bootstrap irgendwelche Vorteile? Mit den css tags von w3 hab ich bisher halt Probleme, dass alles schön angeordnet ist... Aber liegt vielleicht an meinen Webfähigkeiten
Vielleicht ist das ja aber schon die Optimallösung für mich.

Einen wirklich brauchbaren Drag & Drop Editor wirst du nicht finden.

Warum nicht? Also was macht es so kompliziert? Oder ist es für die meisten Webentwickler leichter, in Code zu gestalten?

 

[netzgestaltung]

das modernste in die richtung sind vermutlich programme wie Sketch. Aber das CSS ist bis auf dekorationen kaum zu gebrauchen. Es wird auch das layout je nach verwendeter technologie ganz unterschiedlich aufgebaut, da können solche programme keinen direkten output generieren.

 

[kim88]

Warum nicht? Also was macht es so kompliziert? Oder ist es für die meisten Webentwickler leichter, in Code zu gestalten?

Hier fehlt eine Standardisierung. Damit meine ich nicht Webstandards wie HTML5 oder CSS3. Sondern eine GUI Standardisierung. Bei QT Anwendungen oder GTK Anwendungen, etc hast du gewisse Guidelines. Menüs funktionieren immer gleich. Boxen wo jemand Text eingeben kann sehen immer gleich aus und erfüllen weitgehend immer die selben Funktionen etc

Im Web hast du das nicht. Niemand regel das ein Ok und Abbrechen Button immer gleich angeordnet sein sollen, oder wie die auszusehen haben oder welche Funktion sie erfüllen. Webseiten sind da im Bereich der Gestaltung komplett individuell.

Einer GTK Anwendung sehe ich immer an, dass sie in GTK "geschrieben" wurde. Genauso bei einer QT Anwendung. Beim Web hast du das nicht.

Alternativ kann ich dir auch empfehlen bei ThemeForrest was zu kaufen. Unter dem Suchbegriff "Admin Templates" findest du dort fertige HTML Vorlagen Mit Charts und allen möglichen Gestlatungsmöglichkeiten. Dort kannst du quasi rauslöschen was du nicht brauchst und die Werte dann einfach mit deinen dynamischen Werten ersetzen.

Kostenpunkt zwischen 20-30 Dollar. Hier ein Beispiel: https://themeforest.net/item/enlink-bootstrap-admin-template/24739526

 

[Seppde]

nungut. Dann bleibe ich wahrscheinlich mal bei der mainly css basierten Lösung die ich derzeit habe. Wird schon werden.

 

[sh.]

Schonmal Webflow angeschaut?
https://webflow.com

Da kannst du dir ein Design zusammenklicken und danach exportieren. Ich glaube von Bootstrap gibt es da auch was: https://bootstrapstudio.io

 

[H4110]

Theoretisch reicht es, auf dem MCU nur eine HTML-Datei abzulegen, die sonstige Resourcen von einem anderen Webserver lädt, sei es JavaScript oder eben WASM. Dann wäre Qt/QML mit WASM-Target eine Option.

 

[Seppde]

Theoretisch reicht es, auf dem MCU nur eine HTML-Datei abzulegen, die sonstige Resourcen von einem anderen Webserver lädt, sei es JavaScript oder eben WASM. Dann wäre Qt/QML mit WASM-Target eine Option.

Schöner Gedanke aber vermutlich wird das als Stand-Alone Lösung als AP ohne Internetverbindung betrieben werden müssen.

Da kannst du dir ein Design zusammenklicken und danach exportieren. Ich glaube von Bootstrap gibt es da auch was: https://bootstrapstudio.io

Genau das such ich. Irgendwie wirkt das ganze immer noch recht komplex...
Aber nach bisschen suchen werde ich mal sehen was ich da mit layoutit! zusammengebastelt bekomme, das habe ich nach den beiden Vorschlägen dann noch als vergleichbare Freeware gefunden.

LG

 

[GroMag]

Ich möchte eine Mauer hochziehen, gibt es dafür Templates?

Nein? Ach, dazu holt man sich nen Mauer oder lernt es richtig. Anderer Bereich... aber im Prinzip genau das Gleiche.