[gelöst]Widget Map

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

Benutzeravatar
scotty
Beiträge: 676
Registriert: 28. Apr 2020 04:44

Re: Widget Map

Beitrag von scotty »

@udo1toni

Entschuldigung, das hatte ich überlesen :(

@peter-pan

ich hab in dem Verzeichnis gar keine index.html - ist die zwingend erforderlich? Falls ja, wie erzeuge ich die überhaupt?

edit: ich habe mal statt "index.html" meine "tanke.html" aufgerufen und bekomme diese Meldung:
tanke.png
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
OH 3.4.5 im Docker auf Synology DS918+ mit USV, Reolink-RLC-511WA, Philips Hue, AVM Fritz!Box 6591C, Alexa, Logitech Harmony und diversen Shelly's

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: Widget Map

Beitrag von peter-pan »

...das ist aber komisch. Bei mir sieht der Ordner "/etc/openhab2/html/" so aus:

Code: Alles auswählen

[13:47:37] openhabian@openHABPi:/etc/openhab2/html$ ls -alF
insgesamt 16
drwxrwxr-x+  2 openhab openhab 4096 Aug 24 10:17 ./
drwxrwxr-x+ 15 openhab openhab 4096 Apr 26 15:13 ../
-rw-rw-r--   1 openhab openhab  451 Dez 17  2018 index.html
-rw-rw-r--   1 openhab openhab  282 Dez 17  2018 readme.txt
[14:54:06] openhabian@openHABPi:/etc/openhab2/html$
... und die beiden Dateien waren dort standard-mässig enthalten. Ich habe das System per SD-Karten-Image erstellt.

Edit: Ich glaube aber nicht, dass man die dringend braucht. Ich denke das ist nur ein Beispiel.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

Benutzeravatar
scotty
Beiträge: 676
Registriert: 28. Apr 2020 04:44

Re: Widget Map

Beitrag von scotty »

Jetzt funktioniert es auch bei mir. Ich habe noch einmal ganz von vorne angefangen und alles neu programmiert. Wichtig dabei war wohl, dass ich dazu Visual Studio Code benutzt habe.

@peter-pan
Danke noch einmal für deine Unterstützung. Sie kam im richtigen Moment, sonst hätte ich wohl aufgegeben.

Später werde ich die Datei mit Anleitung hier veröffentlichen. Ich muss erst meine eigenen Daten unkenntlich machen ;)
OH 3.4.5 im Docker auf Synology DS918+ mit USV, Reolink-RLC-511WA, Philips Hue, AVM Fritz!Box 6591C, Alexa, Logitech Harmony und diversen Shelly's

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: Widget Map

Beitrag von peter-pan »

...immer gerne und wenn's nur die moralische Unterstützung ist ;)
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

Benutzeravatar
scotty
Beiträge: 676
Registriert: 28. Apr 2020 04:44

Re: Widget Map

Beitrag von scotty »

Wie versprochen, hier der Code mit Kurzanleitung zur Anzeige einer eigenen Map in Verbindung mit Tankerkönig.

Code: Alles auswählen

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Map</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin=""/>
</head>
<body>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin=""></script>

    <div id="map" style="width: 100%; height: 540px"></div>

    <script>
       var planes = [
		["<b>Aral Tankstelle</b><br>Mustermann Str. 1",48.123459,2.12325],		<!-- Muster-Eintrag für Ihre Tankstelle1 -->
		["<b>Esso Tankstelle</b><br>Mustermann Str. 2",48.123459,2.12245],		<!-- Muster-Eintrag für Ihre Tankstelle2 -->
		["<b>Shell Tankstelle</b><br>Mustermann Str. 3",48.123459,2.12342],	<!-- Muster-Eintrag für Ihre Tankstelle3 -->
		["<b>Jet Tankstelle</b><br>Mustermann Str. 4",48.123459,2.12325],		<!-- Muster-Eintrag für Ihre Tankstelle4 -->
		["<b>Total Tankstelle</b><br>Mustermann Str. 5",48.123459,2.12245],	<!-- Muster-Eintrag für Ihre Tankstelle5 -->
		["<b>Shell Tankstelle</b><br>Mustermann Str. 6",48.123459,2.1232],		<!-- Muster-Eintrag für Ihre Tankstelle6 -->
		["<b>Bavaria Tankstelle</b><br>Mustermann Str. 7",48.123459,2.125],	<!-- Muster-Eintrag für Ihre Tankstelle7 -->
		["<b>Markant Tankstelle</b><br>Mustermann Str. 8",48.123459,2.2345],	<!-- Muster-Eintrag für Ihre Tankstelle8 -->
		];
         var map = L.map('map').setView([41.2858, 174.78682], 13)				<!-- Koordinaten Ihrer eigenen Adresse   -->

         var circle = L.circle([41.2858, 174.78682], {							<!-- Koordinaten Ihrer eigenen Adresse   -->
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5,
            radius: 200
        }).addTo(map);

        circle.bindPopup("<b>Eigene Adresse:</b><br>Muster Str. 9");

         mapLink = 
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + '  created by scotty',
            maxZoom: 18,
            }).addTo(map);

		for (var i = 0; i < planes.length; i++) {
			marker = new L.marker([planes[i][1],planes[i][2]])
				.bindPopup(planes[i][0])
				.addTo(map);
		}
               
    </script>
</body>
</html>
1.) Erstelle mit Visual Studio Code auf dem raspi im Verzeichnis /etc/openhab2/html eine HTML-Datei (z. B. tanke.html)
2.) Füge den obigen Code in die leere Datei ein und speicher sie ab.
3.) Die richtigen Koordinaten für deine Tankstellen und deine Adresse (Zeilen 19 bis 26, 28 und 30 kannst du dir über den Tankstellenfinder von Tankerkönig (https://creativecommons.tankerkoenig.de/) besorgen. Wenn du möchtest kannst du dir eine Zusammenstellung als "station.json" runterladen.
4.) Nachdem die Datei mit deinen Daten gefüllt und gespeichert ist, empfiehlt sich ein Neustart.
5.) Installiere das Widget "Rahmen" im Habpanel und trage in den Einstellungen "http://raspiIP:8080/static/deinehtmldatei.html" ein.

Dann müsste deine eigene Map mit den Markern zu deinen Tankstellen eigentlich auf dem Bildschirm bzw. Tablet zu sehen sein.

Weitere Hilfe kannst du dir hier:
https://leafletjs.com/reference-1.6.0.html
https://wiki.openstreetmap.org/wiki/DE: ... rbereitung
https://wiki.openstreetmap.org/wiki/DE: ... HTML-Datei
https://leanpub.com/leaflet-tips-and-tr ... to-our-map
https://leafletjs.com/examples/extendin ... trols.html
https://astrid-guenther.de/dies-und-das ... -erstellen

holen.

Verbesserungsvorschläge sind jederzeit willkommen!
Zuletzt geändert von scotty am 2. Sep 2020 17:33, insgesamt 1-mal geändert.
OH 3.4.5 im Docker auf Synology DS918+ mit USV, Reolink-RLC-511WA, Philips Hue, AVM Fritz!Box 6591C, Alexa, Logitech Harmony und diversen Shelly's

Benutzeravatar
udo1toni
Beiträge: 13864
Registriert: 11. Apr 2018 18:05
Answers: 222
Wohnort: Darmstadt

Re: [gelöst]Widget Map

Beitrag von udo1toni »

Kannst Du noch einen Screenshot mit der fertigen Ansicht einfügen?
openHAB4.1.2 stable in einem Debian-Container (bookworm) (Proxmox 8.1.5, LXC), mit openHABian eingerichtet

Benutzeravatar
scotty
Beiträge: 676
Registriert: 28. Apr 2020 04:44

Re: [gelöst]Widget Map

Beitrag von scotty »

kein Problem...

fertig.png

der linke Teil hier noch einmal etwas deutlicher dargestellt (natürlich mit falschen Koordinaten)
marker-05.png
Durch klicken auf einen Marker erscheint die Adresse, ein zweites Mal irgend wohin klicken und die Adresse verschwindet.
Ich habe hier über die Funktion "Hover" nachgedacht. Allerdings macht es keinen Sinn, da auf dem Tablet selten mit einer Maus gearbeitet wird.
* Hover (es erscheint ein Text, wenn man mit der Maus über den Marker fährt)

Eine Funktion "Entfernung von der Heimatadresse" baue ich vielleicht noch ein. Jeder der Lust hat, kann sich an der Entwicklung beteiligen.

Viel Spaß damit...
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
OH 3.4.5 im Docker auf Synology DS918+ mit USV, Reolink-RLC-511WA, Philips Hue, AVM Fritz!Box 6591C, Alexa, Logitech Harmony und diversen Shelly's

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: [gelöst]Widget Map

Beitrag von peter-pan »

Super !!!
Hab mal auf die Schnelle (ohne Installation ) deine HTML-Vorlage genommen und ein bisschen damit gespielt:
leaf.jpg
Hab kein Hab-Panel, aber vielleicht geht's auch über BasicUI oder vielleicht hat das ja auch schon einer realisiert.

Sieht gut aus 👍. Weiter so
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

Benutzeravatar
scotty
Beiträge: 676
Registriert: 28. Apr 2020 04:44

Re: [gelöst]Widget Map

Beitrag von scotty »

Hast du auf deinem Rechner getestet? Das ging bei mir auch relativ zügig. Die meiste Zeit habe ich damit verbracht, das Ding auf dem raspi zum Laufen zu bringen (also da, wo du mir zuletzt "moralisch" geholfen hast).

Edit: Interessant für mich daran ist, dass keine Installation des Widget "Map" erforderlich ist (bekam ich nämlich nicht konfiguriert).
OH 3.4.5 im Docker auf Synology DS918+ mit USV, Reolink-RLC-511WA, Philips Hue, AVM Fritz!Box 6591C, Alexa, Logitech Harmony und diversen Shelly's

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: [gelöst]Widget Map

Beitrag von peter-pan »

Ich habe nur die Seite auf meinem PC mit dem Browser ausprobiert um zu sehen wie das aussehen könnte.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

Antworten