ansprechende Webseite z.B. für ESP8266

[Jörg (Gast)]

Hallo,

günstige LAN oder Wifi Module bieten ja mittlerweile tolle 
Möglichkeiten.
Will man nun z.B. über eine Webseite (die möglichst im z.B. ESP8266 
gespeichert werden soll) den Controller "bedienen", muss man diese - 
logisch- vorher erstellen. Einfache HTML Seiten erfüllen den Zweck, 
sehen aber oft nicht wirklich ansprechend aus. Dazu kann man vielfälltig 
Online-HTML-Editoren nutzen oder von Hand programmieren.
Optisch ansprechende Seiten haben einen ziemlichen Overload im 
Hintergrund, der sich nicht ohne weiteres in den ESP8266 programmieren 
lässt.

Daher meine Frage: auf welche Art oder mit welchen Tools erstellt Ihr 
Eure Seiten, um sie später im Controller abzulegen? Ich spreche hier 
speziell nicht von einem Webhoster basierten Ansatz.


Danke schonmal!

Jörg

[Planlos (Gast)]

Viel von dem Overhead kommt aus verschiedenen JS-Libraries (jQuery & 
co), CSS-Frameworks (Bootstrap...) usw.

Die kann man meistens auch aus einem öffentlichen CDN ziehen, brauchst 
also neben dem ESP keinen eigenen Webserver.

[Michael U. (amiga)]

Hallo,

über Sinn und Zweck will ich hier jetzt nicht nachdenken.

Jörg schrieb:
> Optisch ansprechende Seiten haben einen ziemlichen Overload im
> Hintergrund, der sich nicht ohne weiteres in den ESP8266 programmieren
> lässt.

Ich nutze auf dem ESP8266 den Webserver im Zusammenhang mit dem SPIFFS.
Das hat für mich den Vorteil, daß man sich Kunststücke beim Einfügen des 
HTML/CSS/JS-Codes in den Sourcecode komplett sparen kann.
Außerdem jat meine (nicht optisch ansprechende) Configseite die 
Möglichekeit für den Up-/Download der Dateien ins SPIFFS. Damit sind 
(optische) Änderungen am HTML-Zeug ohne programmieren des ESP8266 
einfach und schnell zu testen.

Man sollte aber bedenken, daß ein ESP Grenzen hat. Bearbeiten zur 
Laufzeit, also Platzhalter mit aktuellen Werten erstezen usw., wird 
durch den Ram begrenzt. Mehr als 5kB sollte der zu bearbeitende 
HTML-Teil also nicht sein.

Ansonsten hat man auf dem ESP8266-12 ja 3MB Filesystem zur Verfügung, da 
paßt etliches an HTML/CSS/JS rein.

Gruß aus Berlin
Michael

[Daniel A. (daniel-a)]

Meine Seiten schreibe ich manuell, mit HTML, CSS und eventuell JS. 
(momentane Seite: danielabrecht.ch alte seite: old.danielabrecht.ch). Es 
gibt immer gewisse threadoffs, z.B. client side vs server side 
templateing vs anzahl Requests vs Dateigröße, etc. Will man aber die 
Optimale Seite, sind Franeworks eher hinderlich. Auf jeden fall braucht 
man aber Erfahrung.

Ich behaupte, du kannst dir ein beliebiges Design ausdenken, und ich 
kann es in <1KB umsetzen.

[Stefan F. (Gast)]

Das Traurige bei den Web Frameworks ist: Alle versprechen schlanker und 
schneller zu sein, ohne unnötigen Overhead. Doch genau das Gegenteil ist 
der Fall - zumindest bei den bekannten eierlegenden Wollmilchsäuen.

Ich denke, es geht auch gar nicht anders. Entweder reduziert man den 
Code auf einen konkreten Anwendungsfelder oder man hat Overhead und eben 
nicht optimale Performance.

[Michael U. (amiga)]

Hallo,

Daniel A. schrieb:
> Meine Seiten schreibe ich manuell, mit HTML, CSS und eventuell JS.
> (momentane Seite: danielabrecht.ch alte seite: old.danielabrecht.ch). Es
> gibt immer gewisse threadoffs, z.B. client side vs server side
> templateing vs anzahl Requests vs Dateigröße, etc. Will man aber die
> Optimale Seite, sind Franeworks eher hinderlich. Auf jeden fall braucht
> man aber Erfahrung.
>
> Ich behaupte, du kannst dir ein beliebiges Design ausdenken, und ich
> kann es in <1KB umsetzen.

ok, habe mir beides mal angeschaut. Auch wenn es keinen wirklichen Sinn 
hat:
wieviel Platz belegt das jeweils auf dem Webspace? Sind alle Komponenten 
enthalten oder gibt es Zugriffe auf externe Resourcen?
Der Zweck der Frage ist reines Interesse: ich würde das mal versuchen in 
mein ESP-Webserver-Konzept zu packen, nur zum Spaß. Geht natürlich nur, 
wenn es Dich interessiert, ob das geht und wenn Du mir den kompletten 
Inhalt per Mail zukommen lassen würdest.
Entweder ich sage nach dem Reinschauen gleich ab und lösche es wieder 
oder ich mahce es passend und stelle es dann mal temporär vom ESP als 
Webserver ins Netz. Anderes Interesse habe ich Deinem Content nicht, ich 
designe keine Webseiten und habe auch keinerlei Ambitionen, damit 
irgendwelchen Unfug anzustellen.

Es würde mich einfach interessieren, wo die Grenzen des ESP8266 und die 
von meinem Konzept liegen.
Die ESP-Sachen kann ohnehin jeder haben und nutzen, sie benutzen nur die 
allgemein verfügbaren Libs für ESP und Arduino.
Nur das SPIFFS-Handling und die dynamische Bearbeitung habe ich auf 
meine Art gelöst, weil ich nichts handhabbares und stabiles im Netz 
fand.

Gruß aus Berlin
Michael

[Daniel A. (daniel-a)]

Michael U. schrieb:
> ok, habe mir beides mal angeschaut. Auch wenn es keinen wirklichen Sinn
> hat:
> wieviel Platz belegt das jeweils auf dem Webspace? Sind alle Komponenten
> enthalten oder gibt es Zugriffe auf externe Resourcen?

Die Beispiele sind noch nicht auf einen Mikrokontroller optimiert und 
daher noch nicht Minifiziert, usw. Es werden keine externen Ressourcen 
genutzt.
Meine aktuelle Seite ist auf dynamische content änderung (wenn man in 
der Konsole die variable model verändert verändert sich der 
Seiteninhalt) ausgelegt, mit 2713 bytes css und 2451 bytes Templates, 
6111 bytes js (das "Notwendige" file) davon 1027 bytes leerzeichen. Der 
Text auf Allen Unterseiten ist 28372 bytes. Dann gibt es noch das 
Hintergrundbild, 2*60kb
Meine alte Seite ist auf multidesign ausgelegt, dort ist es wesentlich 
schwieriger festzustellen, welche Dateien von welchem Design verwendet 
werden, und beide Seiten haben Spracheinstellungsfeaturs und einen 
non-js modus, etc. Sind also nicht für uCs gedacht...

Ich kann die den Code zu den Seiten schon senden, aber dieser erfordert 
eine spezielle Serverkonfiguration die ein uC nicht bieten kann, die 
Aktuelle Seite z.B. verwendet einen nodejs server... Vermutlich können 
nur wenige etwas damit anfangen.

Ich dachte eigentlich eher daran, ein beliebiges neues Design nach 
seinen Wünschen speziell für die Verwendung mit einem uC angepasst 
umzusetzen.

Ich hänge meine komplette Homepage trotzdem mal in den Anhang.

[Michael U. (amiga)]

Hallo,

erstmal Danke für das Archiv.
Einen nodejs werde ich kaum auf den ESP packen (können)...
Ich konnte es trotzdem nicht lassen, den Inhalt Deines www-ordners ohne 
jede Änderung ins Filesystem des ESP zu packen und auf meinen 
"Webserver" loszulassen.

Ich habe zum Spaß mal 2 Screenshots angehängt, einel der Aufruf von 
root/default.html und einmal der Ausfruf von noscript.html.
Im Debug-Fenster ist zu sehen, was er nachgeladen hat.

Ich werde das konkret kaum weiterverfolgen, zeigen wollte ich erstmal 
dem TO damit, daß man die HTML/CSS/JS-Sachen ohne Änderungen nutzen 
kann, also ohne Einfügen in den Programmcode, ohne Escaping von Zeichen 
usw.
Meine Config-Seite kann ich nur von einer anderen Installation zeigen, 
mit Deinem Inhalt fliegt mir die wegen der Anzahl Dateien und Ordner 
mangels RAM um die Ohren...

Prinzipiell kann ich von dort die Sachen vom ESP runterladen, ändern und 
wieder hochladen.

Problem sind natürlich dynamische Inhalte. Ich habe nur eine "Funktion" 
eingebaut, die etwa dem PHP-<? echo $variablenname ?> entspricht, man 
muß also Platzhalter in den HTML/.. Code einbauen im Format 
~variablenname~ und natürlich für jede aufgerufene Seite, die das 
benutzt, eine Behandlunsroutine programmieren. Das ist aber für das, was 
mit normalerweise mit dem ESP macht, wenig Aufwand. Selbiges trifft 
natürlich für übergebene Argumente zu, die liefert der Webserver als 
Array und man muß es bearbeiten.

Mein Problem ist da eher, daß ich zwar µC usw. gut programmieren kann, 
meine HTML-Kenntnisse eher aus dem vorigen Jahrtausend sind. ;)

Sollen alles nur Anregungen für den TO und sonstige Interessenten sein, 
was man mit wenig Aufwand mit so einem ESP und seinem Webserver machen 
kann und was besser nicht.

Ist alles nur "Spaß an der Freude".

Gruß aus Berlin
Michael

[Mw E. (Firma: fritzler-avr.de) (fritzler)]

Wenn man kleine, aber gut aussehende Webseiten ohne Overhead haben will.
Ja dannn muss man selber Hand anlegen oder das unnötige Zeuch ausm HTML 
Code werfen was das Tool da reingeworfen hat.

Viel sparen kann man zudem mit AJAX.
Da brauchts dann einmal die schön designte Hauptseite und es werden dann 
nurnoch kleinere INhalte nachgeladen.
Mit HTML5 bekommt man ja schon ansprechende Designs ohne nutzung von 
Bildern hin.