gelöst: Einbinden einer html-Seite über Widget iFrame?

[WillyIobrok]

Hallo zusammen,

ich versuche schon seit 2021 mit wechselndem Erfolg folgende Funktionalität in ioBroker zu integrieren:

ich tippe / klicke auf einen Punkt in einer Landkarte, das Programm errechnet die Himmelsrichtung und die Entfernung und meine Antenne auf dem Dach dreht sich in die entsprechende Richtung.

Jetzt, im 3. Versuch bin ich ein Stück weiter gekommen - ich habe eine HTML Webseite, die mit Hilfe von ein paar Javascript-Funktionen das entsprechend macht.

So sieht's aus:

Der rote Marker entspricht meinem eigenen Standort, der fix ist, der blaue wird durch Klick in die Karte jedesmal neu gesetzt.

Diese html-Seite liegt hier lokal als files (.html+.js) auf einem meiner Rechner, der aber KEIN webserver ist. Ich habe auch keine externe Web-Page.

Jetzt kommt das Problem / die Frage:

Ich wollte diese html-Seite über das iFrame Widget in den iobroker integrieren, bekomme aber nur Fehlermeldungen:
"The requested URL was not found on this server"

eingegebene URL(!?!): \NASDI\home\Rotorkarte\25_02\V2\V2_003\rotor.html
Ich habe mir sagen lassen, daß das keine URL wäre, was muß ich denn in's URL-Feld des Widgets iFrame reinschreiben, dass er die Karte aufruft und anzeigt?

Weiterhin brauche in den Inhalt einer Variable, ("Richtung") die in der html-Seite erzeugt wird, in meinem iobroker mqtt server

Geht das überhaupt?

Was für Alternativen gibt's für die Integration der Funktionalität/Webpage in ioBroker?

Bin für jeden Tip dankbar!

VG WillyIobrok

p.s.: ich habe natürlich auch das Widget "map" ausprobiert - das unterstützt die von mir geforderte Funktionalität m.W. leider gar nicht ...

[Codierknecht]

@willyiobrok
Wenn das statisches HTML ist: Pack die Datei auf den Server, auf dem ioBroker läuft.
http://127.0.0.1/files/0_userdata.0/meine_karte.html

[WillyIobrok]

@codierknecht

super, danke für den Tip! werde ich gleich mal probieren ...
ähmmm ... statisches HTML?
das ist ein HTML file, das sich natürlich "Openstreetmaps" von extern zieht und zur Unterstützung ein paar javascript Funtionen und Bitmaps (alles auch lokal) braucht ...

[OliverIO]

@willyiobrok sagte in Einbinden einer html-Seite über Widget iFrame?:

Weiterhin brauche in den Inhalt einer Variable, ("Richtung") die in der html-Seite erzeugt wird, in meinem iobroker mqtt server

wenn du in diesem beispiel daten an den javascriptcode der htmlseite übergeben willst könntest du das über einen adressparameter machen.
als adresse würdest du dann

http://127.0.0.1/files/0_userdata.0/meine_karte.html?param1=abc&param2=123&param3=456

angeben.
diese info kann dann vom javascript der seite ausgewertet werden.

[OliverIO]

@willyiobrok sagte in Einbinden einer html-Seite über Widget iFrame?:

statisches HTML

statisch bedeutet nur, das da eine datei auf dem server liegt die ausgeliefert wird.
dynamisches html wäre nspw php, welches die html datei dynamisch erstellt

[WillyIobrok]

@oliverio
OK, super, Danke !

im Moment kämpfe ich mit den Basics ... Wie finde ich im Linux Filesystem des Raspberry Pi, auf dem der ioBroker läuft, die directory "/files/0_userdata.0" ? ... krame gerade mit "Midnight Commander" sämtliche Linux directories durch ...sorry dass ich mich jetzt so blöd anstelle ...

Ich will übigens nicht einen Parameter an die HTML-Seite übergeben, sondern im Falle eines Mausklicks in die Karte einen Parameter (die Himmels-Richtung) bekommen. Geht das auch indem ich der HTML Seite beim Start einen Parameter so wie oben beschrieben, übergebe ?

VG WillyIorrok

[OliverIO]

@willyiobrok

im normalfall ist der iobroker im verzeichnis

/opt/iobroker

da drunter findest du dann den order unter

/opt/iobroker/iobroker-data/files

installier

[WillyIobrok]

@oliverio

cool - found

[OliverIO]

@willyiobrok sagte in Einbinden einer html-Seite über Widget iFrame?:

Ich will übigens nicht einen Parameter an die HTML-Seite übergeben, sondern im Falle eines Mausklicks in die Karte einen Parameter (die Himmels-Richtung) bekommen. Geht das auch indem ich der HTML Seite beim Start einen Parameter so wie oben beschrieben, übergebe ?

daten von der html seite nach iobroker machst du am besten über den simple-api adapter
per javascript befehl fetch mit methode get kannst du dann eine andere http-adresse aufrufen. dort kommt der parameter und datenpunkt ähnlich wie beschrieben rein und der simple api adapter setzt dir dann den datenpunkt

https://github.com/ioBroker/ioBroker.simple-api
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
https://developer.mozilla.org/de/docs/Web/API/Fetch_API/Using_Fetch

Die Beispiele sind zwar so, als ob du daten laden möchtest.
Aber den Ladeteil kannst du ja ignorieren.

[WillyIobrok]

@oliverio

ok, danke für die info. Da brauche ich jetzt mal einige Zeit um das alles zu verarbeiten

jetzt werde ich erstmal "0_userdata.0" usw. anlegen und die Daten irgendwie reinkopieren

was mich wundert ist, daß 0_userdata.0 noch nicht in der directory-struktur unter

/opt/iobroker/iobroker-data/files

sichtbar ist ?!? obwohl ich in iobroker unter objecte schon ein paar lokale variable sehe ?

habe jetzt mal in ioBroker die directories angelegt ... sehe sie aber immer noch nicht im Linux filesystem?!?

[OliverIO]

@willyiobrok

nein nicht da.

[WillyIobrok]

@oliverio
auweia ... sorry

[OliverIO]

@willyiobrok

die Dateien sind dann im browser wie folgt erreichbar

http://<iobroker>_8082/0_userdata.0/testabc.png

[WillyIobrok]

@oliverio

cool, hat funktioniert !

vielen Dank für die Hilfe (auch der letzte Hinweis war leider notwendig )

[WillyIobrok]

@willyiobrok

Hallo zusammen,

aufgrund der Hilfe aus dem Forum, eines Freundes und ChatGPT konnte ich trotz meiner Unkenntnis bzgl. HTML und Javascript nach 4 Jahren mein Ziel erreichen und eine Landkarte mit Antennenrotorsteuerung für den Amateurfunk (weltweit!) erstellen !

Herzlichen Dank dafür!

Damit ist dieser Topic endgültig von meiner Seite aus gelöst !

Ebenso sind folgende Topics gelöst:

2023
bildschrmkoordinaten-eines-mausklicks-tastendrucks
2023
richtungseingabe-durch-tippen-auf-touchscreen
2021
antennenrichtungsanzeige-erweiterte-möglichkeiten
2021
richtungsanzeige-in-landkarte-wie-mache-ich-das

Falls jemand sich für den HTML/javascript code interessieren sollte, stelle ich die gerne zur Verfügung ...

Viele Grüße

WillyIoBrok

[OliverIO]

@willyiobrok

Das sieht jetzt nicht so nach iobroker spezifischen Themen aus.
Eher nach html. Da ist es hier manchmal etwas schwieriger.

Für html kann auch auch sehr

https://wiki.selfhtml.org/
https://developer.mozilla.org/de/

Empfehlen.

Viele Fragen werden auch bei

https://stackoverflow.co/teams/features/?utm_source=adwords&utm_medium=ppc&utm_campaign=kb_teams_search_nb_dsa_targeted_audiences_emea-dach&_bt=646019453177&_bk=&_bm=&_bn=g&gad_source=1&gbraid=0AAAAADlO0L1Cz0UFpyxR4eBlejlhjyGF9&gclid=CjwKCAiAiOa9BhBqEiwABCdG8wG4vFev9r2TcVwlSn6q3E5ZQGyK1mmYTYiWZl1M62DuZFbv3DRNFxoCh98QAvD_BwE

Gestellt und beantwortet.

[WillyIobrok]

@oliverio

ja, das war auch nicht so iobroker sprezifisch, gebe ich zu.

Ich steuer halt meine ganze Afu-Station über ioBroker( + etliche uProzessoren über mqtt) und wollte durch Tippen/Klicken auf eine bestimmte Position im Bildschirm meine Antenne in die richtige Richtung drehen.
Da ioBroker m.W. das mit Bordmitteln nicht unterstützt war das Widget iFrame mit entsprechender SW-Unterstützung die einzige Möglichkeit.

Vielen Dank nochmal speziell an dich (weiss immer noch nicht, wo der Danke Knopf sitzt ) - werde mich in den angegebenen Quellen entsprechend mal umschauen.

VG, WIllyioBrok

[OliverIO]

@willyiobrok

Alles gut.