outdoor I

[inka]

okay, das war ein bischen zu schnell für'n alten man

Die Datei kann in das "Filesystem" auf dem nodeMCU geschrieben werden, damit belegt es keinen Programmspeicher. Allerdings kommt dann wieder zusätzlicher Programmcode, für SPIFF hinzu.

muss ich das manuell machen und nur einmal, oder macht das das programm? Und was ist SPIFF?

Oder zweitens, ich codiere die Datei gleich zu Base64 und diesen String kann man dann direkt in den Programmcode integrieren. Das wäre vielleicht zu Anfang die einfachste Methode.

ok, die einfachste methode, aber bitte was ist Base64?

Du siehst schon, viele von den begriffen von damals haben nicht überlebt ...

Ich glaube wir müssen es etwas anders aufbauen. Mit beispielen. Und ich weiss nicht, ob Dir das nicht zu viel wird

edit:
base64 (ungefähr =) open PGP - und PGP ist mir von früher her ein begriff
SPIFF -flash-speicher?

-----------------------
aber Du musst schon etwas langsammer machen

[Moppi]

Das ist zunächst der erste Schritt:



Ich habe jetzt mal das Bild bearbeitet und verkleinert, dass es noch eine annehmbare Zahl an Details enthält, wenn das Bild nachher im Browser dargestellt wird, sollte der die Pixelübergänge weichzeichnen.
Hier ist erst einmal der String, wie der dann aussieht:

data:image/png;base64,iVBORw....AElFTkSuQmCC

Weil das 9KByte sind, hier als Textdatei: ir_fernbedienung.txt

Base64 ist eine Codierung, die Hex-Code in Zeichencode umwandelt (ganz einfach ausgedrückt). So kann der auch im Webseitencode transportiert werden. Damit kann man eine DATA-URL erzeugen, direkt im Webseitencode, der Browser erkennt das und stellt die Grafik dann als solche dar, weil er das zuvor dekodiert. Man kann diesen String aber auch direkt im Browser, oben in der URL-Zeile, eingeben (reinkopieren), der Browser sollte dann das Bild darstellen (es ist in dem Moment eine Data-URL). Wenn Du es ausprobierst, wird Dir sicher alles klar.


MfG

- - - Aktualisiert - - -

SPIFF ist das File System, dass auf einem nodeMCU emuliert wird. Ein ESP-12E hat 1MByte Programmspeicher und 3MByte für SPIFFs (zusätzlicher Flash-Speicher für Dateien). In der Arduino-IDE kann man Dateien im Menü "Werkzeuge" mit "Sketch Data Upload" hochladen. So wie man den Programmcode in den Programmspeicher hochlädt. So, wie Du eine SD-Karte verwenden kannst, kannst Du auch diesen Speicher per SPIFFs verwenden. Wieviel der ESP32 hat, weiß ich nicht, habe noch keinen ESP32.

[inka]

Man kann diesen String aber auch direkt im Browser, oben in der URL-Zeile, eingeben (reinkopieren), der Browser sollte dann das Bild darstellen (es ist in dem Moment eine Data-URL). Wenn Du es ausprobierst, wird Dir sicher alles klar.

war das so gemeint?

[Moppi]

Nein! Du hast den Kurzen aus dem Veranschaulichungsbeispiel genommen!

Du musst den langen String aus der Textdatei nehmen, nur der ist vollständig.

- - - Aktualisiert - - -

Zweiter Schritt dann:

Wir bauen einfach eine Tabelle, wo die Grafik als Hintergrundbild dient.

[inka]

Nein! Du hast den Kurzen aus dem Veranschaulichungsbeispiel genommen!

Du musst den langen String aus der Textdatei nehmen, nur der ist vollständig.

jaja, hau nur drauf...

das sieht aber schon besser aus jetzt:

den zweck musst Du mir aber bei passender gelegenheit erklären...

[Moppi]

Ich habe aber gerade nochmal nachgesehen, statt Tabelle können wir wohl auch eine Image Map in HTML benutzen. Dafür sind diese Dinger da. Das würde die Sache erleichtern.

Also nehmen wir dann dieses Bild und erzeugen damit in HTML eine Map, also Karte, mit den Koordinaten, wo was angeklickt werden kann.

Wofür das oben gut ist? Du siehst, dass man diesen 9KByte langen String als Text kopieren kann und sich darin Dein Bild befindet.



MfG

- - - Aktualisiert - - -

Nächster Schritt



Ich habe schon mal eine Tabelle, als Rahmen, erstellt und das ganz einfach als HTM-Datei gespeichert.
Zuerst muss die Tabelle definiert werde, dann in der Tabelle drei Zeilen und jede Zeile enthält drei Zellen.
Die mittlere Zelle bekommt später als Inhalt die Image Map, also das Bild der Fernbedienung.
Die Tabelle dient als Rahmen um das Bild, damit die Fernbedienung dem Original nahe kommt.
Ich habe bei dem Bild zunächst alle Ränder abgeschnitten, damit wir Speicherplatz sparen.
Die Ränder sind mit der Tabelle wieder hinzugefügt. Belegen damit 928Byte, also knapp 1KByte, zusätzlich zum Bild.

Hier erstmal die Datei mit den Rohdaten: ir_fernbedienung_htm.txt
Die Datei ist als *.TXT gespeichert. Die Endung kann umbenannt werden von ".txt" in ".htm", um sie im Browser zu laden und anzuschauen.

Fragen so weit? Wir machen weiter, wenn nicht.



MfG

- - - Aktualisiert - - -

Zur Erläuterung des HTML-Codes


Die Tabelle ist so aufgebaut:

TABELLE
.......TABELLENZEILE
...................TABELLENZELLE|TABELLENZELLE|TABELLENZELLE
.......TABELLENZEILE
...................TABELLENZELLE|TABELLENZELLE|TABELLENZELLE
.......TABELLENZEILE
...................TABELLENZELLE|TABELLENZELLE|TABELLENZELLE

Die Tabelle hat also sechs Zellen, in drei Zeilen.


------------------------------------------------------------------


Die Tabelle ist definiert mit:

<div style='display:table;background:#000000;border-radius:2em'>

display:table ... DIV-Container als Tabelle
background ... #000000 = hexadezimale Notation für RGB (Rot/Grün/Blau) ergibt hier schwarz
border-radius ... damit die Ecken der Tabelle rund werden, die Zahl gibt den Durchmesser an


Maßeinheit: ich verwende immer "em", diese Maßeinheit ist skalierbar. 1em sind normalerweise 16 Pixel, aber nicht in jedem Browser, hängt mit der Basis-Schriftgröße zusammen; Pixel "px" wäre eine absolute Größe und ist unpraktisch, wir wollen später sehen, dass sich unsere HTML-Fernbedienung an die Größe Deines Smartphone-Bildschirms anpasst


------------------------------------------------------------------


Eine Tabellenzeile ist definiert mit:

<div style='display:table-row'>

display:table-row ... DIV-Container als Tabellenzeile


------------------------------------------------------------------


Eine Tabellenzelle ist definiert mit:

<div style='display:table-cell;width:3em;height:3em'>

display:table-cell ... DIV-Container als Tabellenzelle
width ... Breite einer Zelle
height ... Höhe einer Zelle

[inka]

oh, Moppi, Du bist mir viel zu schnell , morgen geht's weiter, wenn ich alles verstanden hab...
gruss inka

[Moppi]

Ich habe keine Zeit zu verlieren

Guck es Dir ruhig an. Dann kommt noch die Image Map, das ist nicht allzu schwer. Dann müssen wir sehen, dass der HTML-Code das macht, was er soll und dann muss der in Dein Programm eingebunden werden.

Ist schon spät heute.

MfG

[Moppi]

Hallo inka!

Ich habe da mal noch eine Versuchsdatei: ir_fernbedienung_htm1.txt

Wieder Endung ".txt" in ".htm" umbenennen und mit dem Webbrowser laden.

Daran ist zu sehen, wie das mit der Image Map funktioniert.
Hier der Teil der Map:

<img width='170' height='372' usemap='#Remote' src='data:image/png;base64,iVBO...uQmCC'> 
<map name='Remote'>
        <area shape='circle' coords='84,26,22' href='..'>
</map>

Mit width und height wird die Breite und Höhe des Bildes angegeben. Usemap verweist auf die Map mit dem Namen "Remote".
Weil zu dem Bild eine "Karte" mit Koordinaten angegeben werden muss - der Bereich "area", wo sich eine Taste, auf dem Bild der Fernbedienung, befindet. Für die oberste Taste ist das die Position 84 Pixel von links und 26 Pixel von oben, mit einem Radius (weil die Tasten rund sind) von 22 Pixel. Angegeben wird das alles in "<area ...>". "shape='circle'" wird verwendet, weil wir einen Kreis, als Bereich, definieren. "src=..." ist die Quelle des Bildes für die Map, hier setzen wir den Base64-kodierten String unseres Bildes ein.

Und nun haben wir ein Problem, das mir nicht gefällt. Hätte ich ganz zu Anfang dran denken können, das zu überprüfen (obwohl ich schon einmal Image Maps verwendet habe, ist allerdings schon etwa 15 Jahre her): die Image Map arbeitet nur mit Pixel. Wir können keine Koordinaten verwenden, die einfach skaliert werden können, indem wir ein anderes Maß, als eben Pixel, verwenden. Falls das doch irgendwie machbar sein sollte, weiß ich noch nicht wie.
Das bedeutet, dass die Tabelle und das Bild - also die Fernbedienung in HTML - in Pixel definiert wird (was ich in der Beispieldatei schon gemacht habe). Sollte die Fernbedienung, in Pixel, breiter oder höher sein, als der Smartphone-Bildschirm, passt die dort nicht vollständig drauf und muss horizontal und/oder vertikal gescrollt werden. Natürlich kann man die Pixelmaße dann an seinen Smartphone- oder Tablet-Bildschirm anpassen, es bleibt aber eine feste Angabe.

Ich lass das erst einmal so stehen. Schau es Dir zunächst einmal an. Dann schauen wir weiter.

-------------

Gleich noch etwas weiter drüber nachgedacht: die Pixelangaben können nachher im Programm berechnet und in die HTML-Seite eingesetzt werden, basierend auf einer vorgegebenen Breite und Höhe (z.B. Displaygröße in Pixel v. Smartphone). Damit kann die Größe der HTML-Fernbedienung auch nachjustiert werden. Aber das jetzt erst einmal nur so nebenbei.




MfG

[inka]

Und nun haben wir ein Problem, das mir nicht gefällt. Hätte ich ganz zu Anfang dran denken können, das zu überprüfen (obwohl ich schon einmal Image Maps verwendet habe, ist allerdings schon etwa 15 Jahre her): die Image Map arbeitet nur mit Pixel. Wir können keine Koordinaten verwenden, die einfach skaliert werden können, indem wir ein anderes Maß, als eben Pixel, verwenden. Falls das doch irgendwie machbar sein sollte, weiß ich noch nicht wie.
Das bedeutet, dass die Tabelle und das Bild - also die Fernbedienung in HTML - in Pixel definiert wird (was ich in der Beispieldatei schon gemacht habe). Sollte die Fernbedienung, in Pixel, breiter oder höher sein, als der Smartphone-Bildschirm, passt die dort nicht vollständig drauf und muss horizontal und/oder vertikal gescrollt werden. Natürlich kann man die Pixelmaße dann an seinen Smartphone- oder Tablet-Bildschirm anpassen, es bleibt aber eine feste Angabe.

die darstellung auf dem smartphone sieht so aus:



ich meine, es muss nicht sein, dass die html fernbedienung das ganze display ausfüllt, toll (und völlig ausreichend) wäre es, wenn es in etwa zentriert zum display wäre.

Die anderen sachen habe ich mir angeschaut, selber programmieren könnte ich es nicht, aber ich habe verstanden wo Du was und wie gemacht hast, müsste also in der lage sein kleine korrekturen selbst durchführen zu können. Toll erklärt!