outdoor I

[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