Liste der Anhänge anzeigen (Anzahl: 1)
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:
Code:
data:image/png;base64,iVBORw....AElFTkSuQmCC
Weil das 9KByte sind, hier als Textdatei: Anhang 34498
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.
Liste der Anhänge anzeigen (Anzahl: 1)
Zitat:
Zitat von
Moppi
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.
Anhang 34499
war das so gemeint?
Liste der Anhänge anzeigen (Anzahl: 1)
Zitat:
Zitat von
Moppi
Nein! Du hast den Kurzen aus dem Veranschaulichungsbeispiel genommen! :Haue
Du musst den langen String aus der Textdatei nehmen, nur der ist vollständig. :-b
jaja, hau nur drauf...
das sieht aber schon besser aus jetzt:
Anhang 34500
den zweck musst Du mir aber bei passender gelegenheit erklären...
Liste der Anhänge anzeigen (Anzahl: 1)
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: Anhang 34501
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:
Code:
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:
Code:
<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:
Code:
<div style='display:table-row'>
display:table-row ... DIV-Container als Tabellenzeile
------------------------------------------------------------------
Eine Tabellenzelle ist definiert mit:
Code:
<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
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo inka!
Ich habe da mal noch eine Versuchsdatei: Anhang 34503
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:
Code:
<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
Liste der Anhänge anzeigen (Anzahl: 1)
Zitat:
Zitat von
Moppi
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:
Anhang 34504
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!
