outdoor I

[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!

[Moppi]

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.

So etwas mache immer am Ende irgendwann. Manchmal werden ganze Entwürfe wieder verworfen, dann macht man nicht so viel Arbeit umsonst. Wenn das später so bleiben sollte, schauen wir, dass wir das zentriert bekommen. Oder wie auch immer. Berechnen müssen wir das im Programmcode neu. Jetzt passt es zwar, aber mit einem andern Gerät sieht das wieder anders aus. Aber die Berechnung können wir auch später einfügen.

Du kannst ja mal schauen, dass Du die Koordinaten für die anderen Tasten hinzufügst, da fehlen noch 16. Zurzeit feilen wir am Design und HTML-Layout. Deshalb Frage: Wie ist das jetzt überhaupt, ist das schon so in Ordnung oder fehlen noch zusätzliche Funktionen an der Fernbedienung in HTML? Gefällt Dir sonst irgendwas nicht? Oder willst Du lieber was anderes?



MfG

- - - Aktualisiert - - -

Ausgabe zentrieren


Ich habe etwas experimentiert. Und es hat funktioniert. Da es einfach war, hier direkt der neue HTML-Quelltext: ir_fernbedienung_htm2.txt
Umbenennen der Datei kennst Du ja schon.

Noch ist das alles nicht so geordnet, sondern mehr zusammengeschmiert
Das macht aber nichts, weil ich mich so dem Endergebnis annähere.

Ich habe noch einen DIV-Container drumherum gesetzt:

<div style='width:100%;height:100%;display:flex;align-items:center;justify-content:center'>

Der bekommt als Eigenschaften die Breite von 100% (uns unbekannte Displaybreite) und die Höhe von 100% (uns unbekannte Displayhöhe).
In dem Container platzieren wir unser bisheriges HTML. Dann schließen wir den Container mit:

</div>

"display:flex;" sorgt dafür, dass der Browser Kenntnis erhält, wie er mit unserem Layout innerhalb des Containers und mit dem Container umgehen soll (Flex-Container)
"align-items:center;" zentriert alle Elemente (vertikal)
"justify-content:center;" zentriert alle Elemente (horizontal)



MfG

[inka]

hier die txt datei mit den koordinaten, auf dem smartphone kann man beim antippen den kreis der sich bildet sehen, 100%tig stimmt die lage nicht...
edit: dafür, dass man da mit dem finger "zielt" ist es m.e. nach genau genug

das mit dem zentrieren klappt wunderbar am pc, da folgt die FB brav den aussenkanten des fensters, beim smartphone klappt es nicht, da muss man scrollen um die FB zu sehen...

ir_fernbedienung_htm2_cors.txt

[Moppi]

Auf dem Smartphone musst Du jetzt scrollen? Ist merkwürdig. Was ist da für ein OS drauf?

[inka]

android 9

[Moppi]

Passt es horizontal oder vertikal nicht oder beides nicht?

[inka]

moin Moppi,

Deine frage nach änderungen im bild der FB hat mich kalt erwischt - ich habe bilder aus meiner webseiten programmierzeit als etwas unveränderliches in erinnerung, hier stellt sich die frage wieviel aufwand eine veränderung / erweiterung des FB-bildes bedeutet? Denn - die IR-FB kann ich ja nicht erweitern...
Natürlich würde ich dann voll auf smartphone steuerung unsteigen - wie gesagt, es ist die frage des aufwands....

Mir sind folgende änderungen eingefallen:
- KEYES raus
- zeichen "<" und ">" als zeichen zum blättern (in evtl. zwei bildern?) im unteren bereich hinzu - wenn man selbst die bilder personalisieren könnte?
- speziell zu roboter ist mir nur "nordsuche" eingefallen
- die zeichen "*" und "#" machen in einer neu zu definierenden FB keinen sinn...

btw: die darstellung der "IR-fernbedienung_htm3.htm" ist auf dem smartphone in chrome, HTML-anzeige und firefox super zentriert, der aufbau im firefox dauert etwas...