Hallo,
ich möchte eine kleine Weboberfläche für die ESP8266 WLAN - UART Bridge
bauen.
Aber wie schaffe ich es ein Bild als Hex File in dem HTML File zu
übergeben? Hat jamend eine Idee dazu?
Schönen Abend
Fritz S.
Fritz S. schrieb:> Aber wie schaffe ich es ein Bild als Hex File in dem HTML File zu> übergeben? Hat jamend eine Idee dazu?
warum soll das Bild in die HTML? Kannst du das Bild nicht extra ablegen?
Fritz S. schrieb:> Hallo,>> ich möchte eine kleine Weboberfläche für die ESP8266 WLAN - UART Bridge> bauen.>> Aber wie schaffe ich es ein Bild als Hex File in dem HTML File zu> übergeben?
Ist mir nicht klar, warum du das willst.
Der Broswer wendet sich grundsätzlich an den Server mit einem GET
Request. In diesem Request gibt er auch bekannt, was er gerne hätte.
Zuallererst wird er mal die HTML Seite haben wollen. Also schickt er an
den Server einen GET Request mit zb er Angabe, die Datei 'index.htm'
haben zu wollen (wenn der Browser keinen Dateinamen angibt, dann nimmt
der Server an, dass er diese Datei haben wollte).
Der Server liefert daraufhin die Datei aus (dsa muss physisch keine
Datei sein. Der Browser weiss ja nicht wo der Server den entsprechenden
Text herhat. Der Browser fordert eine 'Datei' an, und wie der Server zu
dem Text kommt, den er zurück schickt, interessiert ja den Broswer
nicht).
Der springende Punkt ist, dass in diesem Text, den der Browser kriegt
1
<HTML>
2
<BODY>
3
<img src="das_bild.png"></img>
4
</BODY>
5
</HTML>
ein Verweis auf eine Datei namens das_bild.png enthalten ist, der der
Browser als Bild anzeigen soll.
Also wendet sich der Browser erneut an seinen Server und schickt einen
weiteren GET Request los, diesmal nach der Datei 'das_bild.png'. Und der
Server liefert dann.
D.h. deine Frage macht insofern keinen Sinn, weil das Bild überhaupt
nicht ins HTML eingebettet wird, sondern du im Server dir einfach nur
ansiehst, wonach der Browser in seinem GET Request fragt: ist es die
'index.htm' bzw. nichts, dann lieferst du den HTML Text aus, ist es die
von dir ins HTML eingebaute Bilddatei, dann werden eben dessen Daten
rausgegeben. Allenfalls muss man sich da eben ein kleines rudimentäres
Filesystem bauen, welches gefakte Dateinamen in im Speicher vorgehaltene
Bytearrays umsetzt.
Sowas geht schon, auch wenn es für grössere Bilder eine Zumutung ist.
Hier mal ein kleiner Test für so etwas. Einfach die interessanten Sachen
aus dem Quelltext rauskopieren. Es ist kein direktes HEX, sondern
benutzt die o.a. BASE64 Methode:
http://berlin.schoeldgen.de/test.php
Hallo!
Danke erstmal an alle für die schnelle Antwort.
Hab mir die Inline - Grafik mit Base64 angesehen, und das funktioniert
soweit, das einzige, setze ich 3 Bild in folge nebeneinander ist ein
kleiner Abstand zwischen jedem Bild, ich möchte aber das Bild in der
Mitte je nach Zustand zwischen 2 auswählen und das ganze soll sich zu
einem Zusammenfügen.
Das wird damit wahrscheinlich nichts oder?
@ Karl Heinz: Das hört sich logisch an, Ich werde versuchen das ganze so
aufzubauen, scheint etwas "sauberer" zu sein. Danke!
Ich habe die Methode auch schon benutzt, um z.B. Messprotokolle in HTML
zu archivieren, die auch ein Logo und Kurven enthalten sollten.
Wenn die HTML-Datei von einem Webserver ausgeliefert wird, ist das keine
Rede wert, aber bei HTML-Dateien sind extere Bilder ausserordentlich
lästig - so gesehen dat die Methode durchaus ihren Sinn.
Manche Systeme sind nicht in der Lage PDF zu erstellen oder anzuzeigen,
dazu gehört ganz schön Rechenliestung, dann ist HTML mit embedded Images
ein möglicher Weg.
Aber keine Lösung ohne Ärger: Ratet mal, welche Browser embedded Images
nicht dastellen kann ...
Die Art der Darstellung (wie im Posting über diesem hier, bezüglich
Rand) ist Sache des Browsers und lässt sich z.B. mittels Inline-CSS
beeinflussen. Damit geht quasi Alles, man muss sich nur einarbeiten. Mit
Plain-HTML gewinnt man heute keinen "Blumentopf" mehr ... :-)
Frank Esselbach schrieb:> Aber keine Lösung ohne Ärger: Ratet mal, welche Browser embedded Images> nicht dastellen kann
Mein Test von da oben geht aber nicht nur mit meinem Standard Browser
SeaMonkey, sondern auch mit IE8. Du musst also Chrome oder Safari meinen
:-)
> Aber keine Lösung ohne Ärger: Ratet mal, welche Browser embedded Images> nicht dastellen kann
grad probiert:
Firefox geht
Safari geht
Chrome geht
Welche geht denn nicht? Lynx?
Fritz S. schrieb:> Hab mir die Inline - Grafik mit Base64 angesehen, und das funktioniert> soweit, das einzige, setze ich 3 Bild in folge nebeneinander ist ein> kleiner Abstand zwischen jedem Bild, ich möchte aber das Bild in der> Mitte je nach Zustand zwischen 2 auswählen und das ganze soll sich zu> einem Zusammenfügen.> Das wird damit wahrscheinlich nichts oder?
Das geht. Alle notwendigen Informationen hier:
http://www.w3schools.com/css/
Hallo,
danke für eure Hilfe,
Also es klappt nun soweit, dass sich alles zu einem Bild zusammenfügt.
Ich möchte in das Bild in der Mitte klicken können, und bei einem Klick
soll an den Webserver eine Nachricht geschickt werden (Funktioniert
soweit). Wenn der Server alles verarbeitet hat, soll er das Bild in der
Mitte ändern. Die Frage ist, ob ich hierfür eine komplett neue HTML
Seite senden muss, oder ob es dafür eine einfachere bzw. elegantere
Möglichkeit gibt?
Gruß Fritz
Fritz S. schrieb:> Hallo,>> danke für eure Hilfe,>> Also es klappt nun soweit, dass sich alles zu einem Bild zusammenfügt.
ok
> Ich möchte in das Bild in der Mitte klicken können, und bei einem Klick> soll an den Webserver eine Nachricht geschickt werden (Funktioniert> soweit).> Wenn der Server alles verarbeitet hat, soll er das Bild in der> Mitte ändern.
Das geht so schon mal nicht, der Browser muss das Bild neu anfordern.
Es gibt Wege, aber ob das mit deinem Webserver machbar ist?
> Die Frage ist, ob ich hierfür eine komplett neue HTML> Seite senden muss, oder ob es dafür eine einfachere bzw. elegantere> Möglichkeit gibt
wenn du jetzt nur das Bild updaten willst, hättest du dir den ganzen
Kram mit den einbetten der Bilddaten sparen können - denn nun brauchst
du die Bilddaten in einer eigenen Datei welche du per js nachladen
kannst. Damit ist es auch möglich das Bild im nachhinein zu ändern.
Sascha
Hallo Sascha,
ich verstehe, habe jetzt alles so umgebaut, dass er jetzt nach dem
Request nach dem Bild, den Inhalt des Bildes übermittelt.
Wie aber schaffe ich es nun ein Bild "dynamisch" zu verändern, wenn ich
das möchte?
Lg
Fritz
Dafür ist es nötig, dass entweder das Bild als animiertes *.gif File
gesendet wird oder aber die Daten wiederholt angefordert und
zwischenzeitlich aktualisiert werden. HTML selbst macht das glaube ich
nicht aber ein Javascript..... das erfordert aber einen aktivierten
Javascriptinterpreter (Runtime_DLL) am Zielrechner.
Namaste
Fritz S. schrieb:> Wie aber schaffe ich es nun ein Bild "dynamisch" zu verändern, wenn ich> das möchte?
Viele wege führen nach Rom, aber ist Rom die Endstation?
Weshalb muss das bild verändert werden, und
was soll das am schluss werden?
Wenn du mehrere Bilder hast, und du willst nur und ausschlieslich beim
Click auf einen Button dieses durch ein anderes ersetzen, reicht es mit
js den Click abzufangen und die Bildurl zu ändern. Wenn eine andere
Seite geladen werden soll, ändert man einfach die dessen url. Wenn eine
Seite aktualisiert werden soll, und sich der gesammte inhalt ändern
könnte, kann die Dynamische generierung der Seite auf dem Server sinn
machen. (dabei mit dem cacheing aufpassen). Wenn du Seiteninhalte zur
laufzeit ersetzen/ändern musst, ist javascript das Mittel der wahl.Wenn
du Bilder selten global dynamisch generieren musst, oder viele
serverdaten dazu notwendig sind, sollte man dass auf dem server tun.
Wenn du jedoch wenige serverdaten/leistun hast, und es schnell und oft
notwendig ist, sollten nur die zur Genernerung nötigen daten zum Browser
gesendet werden, und das Bild mit js generieren, falls Möglich.
HTML Seiten auf dem Server dynamisch zu generieren ist nur selten
sinnvoll, das kann ja meistens auch der client zusammensetzen, dann
entfallen sowohl unnötige berechnungen auf dem Server, als auch
cacheingprobleme!
Ich empfehle das anwenden des ModelViewViewModel prinzips, und das
verwenden von templating libraries.
Hallo, und schonmal danke für die großartige Hilfe.
Geplant ist eine Art Schalter als Bild, klickt man den Schalter an, soll
einerseits der PortPin toggeln ( kein Problem ) und andererseits, soll
sich eben das Bild des Schalter updaten ( ein bzw. aus Stellung ).
Im Grunde habe ich 6 - 7 solche Schalter auf der Webseite, und es wäre
natürlich gut, wenn er nicht jedes dieser Bilder extra anfordern muss,
sondern selbst erkennt, dass er 6x das selbe Bild hat.
Das ganze wird wohl auf js hinauslaufen richtig?
Ja, js ist hier die einfachste Lösung. Du kannst jedem schalter eine
eindeutige id geben, oder allen die selbe classe, oder ein eigenes
attribut. Nachfolgend einige nützliche javascript konstrukte:
1
// Ein schalter über id attribut
2
var schalterX = document.getElementById("idDesSchalers");
3
// Alle schalter über class attribut als nodelist.
4
var alleSchalter1 = document.getElementsByClassName("schalter");
5
// Alle scalter über ein benutzerdefiniertes attribut als liste
6
var alleSchalter2 = document.querySelectorAll("[data-schalter]");
7
8
// Eventlistener auf EventTarget registrieren
9
// Beispiel 1: EventTarget ist window, event ist "load", function ist anonym.
10
addEventListener("load",function(event){
11
// code, der nach laden der seite ausgefürt wirt
12
});
13
14
// Beispiel 2: EventTarget ist schalterX, event ist "click", function ist toggleSchalter.
Von den Schalterbildern braucht es ja nur zwei, welche zwei
unterschidliche adressen hätten, und wenn das cacheing richtig
funktioniert nur einmal geladen werden.
Der Schalterstatus kann auch in js abgefragt/gesetzt werden, dazu sendet
man einfach einen request mit XMLHttpRequest (einfach googeln), und
macht damit auf dem server was sinvolles.
Hallo Daniel,
Super! Das hat mir schon extremst weiter geholfen.
Also nun funktioniert schon soweit die Bilder laden, das Umschalten bei
anklicken eines Bildes, und bei Bild 3 ( siehe Anhang ), auch schon das
Umschalten des Bildes, erst wenn der Server die Anfrage mit irgendeiner
Antwort bestätigt ( Also wenn der Pin tatsächlich umgeschalten wurde ).
Das js Programm sieht nur glaube ich sehr sehr schlecht aufgebaut aus,
kannst du dir mal anschauen, wie man das am Besten vereinfacht bzw.
vereinheitlichen kann? Bzw. mir einen kleinen Denkanstoß dazu geben?
Danke!
Fritz
eProfi schrieb:> Matthias, kennst Du Detlev?
Jo, tue ich, isn langjähriger Kumpel. Aha, da kann jemand Morsezeichen
:-)
eProfi schrieb:> Was ich sagen wollte:> iE6.0 kann Matthias' PNG nicht darstellen.
Naja, naja. Wer heute noch mit IE6 rummacht, ist aber sowieso fast
überall abgehängt.
Außer, dass ich keine PNGs verwenden sollte wegen der PNG
Inkompatibilität des älteren IE Browser?
Bitte seid doch so freundlich und müllt den Thread nicht zu, es fing
doch so gut an :)
@fritz
für welche lösung hast du dich entschieden
karl heinz ..erneute socket oder daniel ..inline?
ich schreib hier soweit dazu, weil ich denke, dass die inline lösung die
elegantere ist für sachen die sich nicht so oft ändern ( schalter
zustand ) und sich beim esp am besten eignen wegen der uart des esp und
den angeforderten offenen sockets.
nachteil, wenn die daten sehr gross werden müsstest du diese aufteilen
wegen dem buffer ( 1024 ) und dich selber darum kümmern.
neuere at fw und auch sdk sind aber schon ganz gut zu gebrauchen und du
kannst den buffer eingangs anpassen oder eben splitten und nachschieben.
ein anderer ansatz wäre hält bei schneller GUI einfach auf grafik zu
verzichten und mit shapes und farben zu spielen ( green, red )
grad bei schalterstellung.
ein anderer tip den ich auch selber mache, sind iframes und target's,
darin ändere ich nur den bestimmten zieltarget und es geht auch sehr
schnell.
lg rudi ;-)
@matthias
hier werkelt noch ein schlanker ie 3.0 auf eMbeddedWIN 98 auf 32MB
DiskOnCHip ;-) in einer STB1030 auf RAM Basis mit XMSDISK ..
also bitte @Matthias ;-)
Hi Karl Heinz,
Karl Heinz schrieb:> Der Broswer wendet sich grundsätzlich an den Server mit einem GET> Request. In diesem Request gibt er auch bekannt, was er gerne hätte.
Ohne Server kein Request...
HTH,
Karl
R. W. schrieb:> @matthias> hier werkelt noch ein schlanker ie 3.0 auf eMbeddedWIN 98 auf 32MB> DiskOnCHip ;-) in einer STB1030 auf RAM Basis mit XMSDISK ..> also bitte @Matthias ;-)
Ich will gar nicht wissen, was ihr da noch so benutzt, da läufts einem
ja kalt den Rücken runter :-P
Für den TE ist vermutlich wichtiger, das es auf seinem Telefon auch
funktioniert :-), also holt raus eure smarten Dingse und probiert mal.
Ich lass das HTML'chen noch ein-zwei Tage drauf, dann fliegts Richtung
/dev/null.
Hi Fritz,
Fritz S. schrieb:> Hab mir die Inline - Grafik mit Base64 angesehen, und das funktioniert> soweit, das einzige, setze ich 3 Bild in folge nebeneinander ist ein> kleiner Abstand zwischen jedem Bild, ich möchte aber das Bild in der> Mitte je nach Zustand zwischen 2 auswählen und das ganze soll sich zu> einem Zusammenfügen.> Das wird damit wahrscheinlich nichts oder?
Warum nicht? Dafür gibt es Javascript (ECMA-Script).
HTH,
Karl
Hallo Fritz,
Fritz S. schrieb:> Also es klappt nun soweit, dass sich alles zu einem Bild zusammenfügt.
Prima.
> Ich möchte in das Bild in der Mitte klicken können, und bei einem Klick> soll an den Webserver eine Nachricht geschickt werden (Funktioniert> soweit). Wenn der Server alles verarbeitet hat, soll er das Bild in der> Mitte ändern.
Also doch ein Server... wozu dann der Aufwand mit den embedded Images?
> Die Frage ist, ob ich hierfür eine komplett neue HTML> Seite senden muss, oder ob es dafür eine einfachere bzw. elegantere> Möglichkeit gibt?
Ja, da gibt es elegantere Möglichkeiten, AJAX oder Websockets etwa.
HTH,
Karl
Fritz S. schrieb:> kannst du dir mal anschauen, wie man das am Besten vereinfacht bzw.> vereinheitlichen kann? Bzw. mir einen kleinen Denkanstoß dazu geben?
Ich würde es stärker kapseln und generischer machen. Ich habe mal ein
Beispiel gemacht ohne externe Libraries und mit OOP.
das schöne daran,
- du kannst alles mit "text/html" MIME beantworten.
- du kannst die standard AT Firmware verwenden wenn du einen MCU an der
UART betreibst;
lg rudi ;-)
ps
der SoC hat zwar auch base64 funktionen onBoard diese werden aber
derzeit von espressif nicht mehr unterstützt
http://bbs.espressif.com/viewtopic.php?f=7&t=6
Matthias Sch. schrieb:> Hier mal ein kleiner Test für so etwas...> ..Es ist kein direktes HEX, sondern> benutzt die o.a. BASE64 Methode:> http://berlin.schoeldgen.de/test.php
@Matthias, ist das von dir?
nutzt du da ein php script das dir base64 erzeugt von einem bild oder
ist das inline fertiger code?
php code würde mich interessieren wenn er ein base64 vom bild macht und
über environment zur verfügung stellt..
src? ;-)
btw
für den garten ohne internet reicht der ie3.0
;-)
lg rudi ;-)
Hi Fritz,
Fritz S. schrieb:> Außer, dass ich keine PNGs verwenden sollte wegen der PNG> Inkompatibilität des älteren IE Browser?
Vergiß die Inkompatibilitäten solcher Antiquitäten. Wer heute noch mit
dem IE6 surft, hat es nicht anders verdient.
Liebe Grüße,
Karl
Danke für die Files, und die Vorschläge.
@Daniel, danke ich werde mir das genauer anschauen, ist extremst
umfangreich, und ich leider in js nicht sehr bewandert.
@rudi: Aktuell bin ich etwas von den inline Grafiken abgekommen, da die
doch noch etwas Speicherintensiver sind, als wenn ich die .pngs nach
Anfrage des Clients einfach vom Server schicke.
Einfacher wäre es bestimmt, weil ich alles immer mit html komplett
nachlade, und keine Anfragen für Bilder etc. reinkommen. Aber einige der
Sachen kann ich sicher auch so verwenden und helfen extrem. Danke!
Lg Fritz
Man macht so was teilweise auch mit einem ganzen Satz an Icons oder
Bildern.
Also alle kleine Bilder in ein gesamtes großes:
http://rsiqueira.postbit.com/upload/2/posts/bootstrap-icons.png
Anstatt einem kleinen Bild stellt man dann ein Container dar, zB 32x32
Pixel, Hintergrund ist dieses große Bild. Und per Javascript setzt man
dann nur noch den Offset so, dass das gewünschte Icon dargestellt wird.
Das hat den Vorteil, dass am Anfang nur ein Bild geladen wird und es bei
neuen Bildern im Browser zu keiner Verzögerung kommt.
R. W. schrieb:>> http://berlin.schoeldgen.de/test.php>> @Matthias, ist das von dir?> nutzt du da ein php script das dir base64 erzeugt von einem bild oder> ist das inline fertiger code?
Das ist hardkodierter Inline Code, die Extension ist zwar php, ist aber
gar nicht wahr, also schlichtes HTML.
Hier der Beweis:
http://berlin.schoeldgen.de/test.html
> Naja, naja. Wer heute noch mit IE6 rummacht, ist aber sowieso> fast überall abgehängt.
Auf Seiten, die nicht angezeigt werden, (von Leuten, die nicht mehr
ordentlich coden können) verzichte ich gerne.
Das ist ein weitere Grund, warum ich mich hier im Forum so wohl fühle,
neben der netten Gesellschaft mit Euch (-;
Karl-Heinz, Matthias, Rudi, Radeblog, Winfried, Sascha, Axel Schwenke:
ich mag einfach Eure Art.
> Wer heute noch mit dem IE6 surft, hat es nicht anders verdient.
Es heißt ja nicht, dass ich nichts anderes in Peto habe (sonst hätte ich
ja das "Rätsel" nicht lösen können, dessen Lösung ich nun doch für
Fritz, da er so nett gefragt hat, preisgeben will.
Dazu muss man ein wenig "um die Ecke denken" können:
Das kleine PNG von Matze stellt Striche und Punkte dar, welche man
leicht als Morsecode identifizieren kann. Es sind 5 Zeichen, die der
Kenner schnell als Amateurfunk-Rufzeichen assoziiert. Kurz danach
gesucht, kommt man darauf, dass es dem D.K. zugewiesen ist.
>> Ist daran irgendwas Konstruktiv :P?>Ja.
Konspirativ?
> Ich will gar nicht wissen, was ihr da noch so benutzt,> da läufts einem ja kalt den Rücken runter :-P
Ja, es gibt sie noch, die gute alten Tools.
debug, AFD pro, die alten Nortons (ndd, nu, ndu), tc, gs etc.
Da kann das moderne Zeug (welches natürlich auch vorhanden ist) oft
nicht dagegen anstinken.
@Matthias: jetzt würde mich schon, warum Du ausgerechnet dieses Bild
genommen hast. Hattest Du das schon parat?
eProfi schrieb:>> Naja, naja. Wer heute noch mit IE6 rummacht, ist aber sowieso>> fast überall abgehängt.> Auf Seiten, die nicht angezeigt werden, (von Leuten, die nicht mehr> ordentlich coden können) verzichte ich gerne.
Du scheinst hier dem irrtum zu unterliegen, keine kompatiblitat zum ie6
ist kein ordentliches coding, aber es ist umgekehrt: wer kompatiblitat
zu uhrzeitbrowsern wie netscape und ie6 wahrt, muss sich mit dessen
teiweise nicht standartkonformen oder unterschiedlichen verhalten
herumschlagen. Dadurch werden hacks (z.B. css star hack) und die
verwendung von ActiveX objecten (für xmlhttprequests) nötig, sowie
browserabfragen zur behandlung von unterschieden (z.B. anderes Event
bubbeling). Wer solche hacks braucht, und zur ie6 kompatiblität braucht
man die, ist gezwungen die standards zu missachten und betreibt somtit
schlechtes codeing.
Die neueren standards sind schon weit verbreitet, schreiben besser vor
wie der Parser und das Rendering der webseite funktionieren müssen, und
erlauben bei dessen einhaltung ein korrektes funktionieren in allen
neueren browsern (css3 animationen im ie11 mal ausgenommen, das ist dort
russisch rulett).
IE browser vor version 10 sind sowiso nur eine ansammlung aus bugs,
woher sollte der ie sont einen so schlechten ruf haben, dass MS in
abschafft und einen neuen mit neuem namen entwickelt (heisst glaub ich
"spartan" oder so).
Zudem ist der ie6 unsicherer, seine schwachstellen bekannt, und der
support eingestellt.
Man sollte viren schreiben, die den ie6 deinstallieren, Chrome und
Firefox installieren, und sich danach wieder löschen. Das würde den user
sicher vor vielen gefärlicheren viren schützen.
Chrome wäre das letzte, dass ich haben wollte, wie oft ic damit schon
zwangsbeglückt wurde und ihn sofort runtergerissen habe vermag ich nicht
mehr zu zählen
Winfried J. schrieb:> Chrome wäre das letzte, dass ich haben wollte,
Was ist denn so schlimm an chrome?
> wie oft ic damit schon zwangsbeglückt wurde
Wenn du einen anderen browser als ein webkit oder gecko browser hattest,
ist dass doch die Lösung!
> und ihn sofort runtergerissen habe vermag ich nicht mehr zu zählen
Wiso den runterschmeissen? Es wurden doch 2 probleme gelöst:
Der veraltete browser ist überflüssig geworden, und du kannt mit chrome
nicht erneut "zwangsbeglückt" werden ;)
Wenn du den runterschmeisst hast du ja beide Probleme wieder,
vernünftige Programme&Webseiten müssen diesen missstand natürlich
beheben!