oh, Moppi, Du bist mir viel zu schnell, morgen geht's weiter, wenn ich alles verstanden hab...
gruss inka
oh, Moppi, Du bist mir viel zu schnell
gruss inka
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
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:
Mit width und height wird die Breite und Höhe des Bildes angegeben. Usemap verweist auf die Map mit dem Namen "Remote".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>
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
Geändert von Moppi (20.11.2019 um 08:41 Uhr)
die darstellung auf dem smartphone sieht so aus:Zitat von 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.
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!
gruß inka
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.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.
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:
Der bekommt als Eigenschaften die Breite von 100% (uns unbekannte Displaybreite) und die Höhe von 100% (uns unbekannte Displayhöhe).Code:<div style='width:100%;height:100%;display:flex;align-items:center;justify-content:center'>
In dem Container platzieren wir unser bisheriges HTML. Dann schließen wir den Container mit:
"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)Code:</div>
"align-items:center;" zentriert alle Elemente (vertikal)
"justify-content:center;" zentriert alle Elemente (horizontal)
MfG
Geändert von Moppi (22.11.2019 um 07:44 Uhr) Grund: align-items = vertikal, justify-content = horizontal
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
Geändert von inka (20.11.2019 um 15:35 Uhr)
gruß inka
Auf dem Smartphone musst Du jetzt scrollen? Ist merkwürdig. Was ist da für ein OS drauf?
Berechtigungen
Zitieren
Lesezeichen