[gelöst]Widget Map
- scotty
- Beiträge: 676
- Registriert: 28. Apr 2020 04:44
Re: Widget Map
@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:
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:
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
- peter-pan
- Beiträge: 2564
- Registriert: 28. Nov 2018 12:03
- Wohnort: Schwäbisch Gmünd
Re: Widget Map
...das ist aber komisch. Bei mir sieht der Ordner "/etc/openhab2/html/" so aus:
... 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.
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$
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
- scotty
- Beiträge: 676
- Registriert: 28. Apr 2020 04:44
Re: Widget Map
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
@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
- peter-pan
- Beiträge: 2564
- Registriert: 28. Nov 2018 12:03
- Wohnort: Schwäbisch Gmünd
Re: Widget Map
...immer gerne und wenn's nur die moralische Unterstützung ist
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian
- scotty
- Beiträge: 676
- Registriert: 28. Apr 2020 04:44
Re: Widget Map
Wie versprochen, hier der Code mit Kurzanleitung zur Anzeige einer eigenen Map in Verbindung mit Tankerkönig.
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!
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: '© ' + 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>
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
- udo1toni
- Beiträge: 13864
- Registriert: 11. Apr 2018 18:05
- Wohnort: Darmstadt
Re: [gelöst]Widget Map
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
- scotty
- Beiträge: 676
- Registriert: 28. Apr 2020 04:44
Re: [gelöst]Widget Map
kein Problem...
der linke Teil hier noch einmal etwas deutlicher dargestellt (natürlich mit falschen Koordinaten)
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...
der linke Teil hier noch einmal etwas deutlicher dargestellt (natürlich mit falschen Koordinaten)
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
- peter-pan
- Beiträge: 2564
- Registriert: 28. Nov 2018 12:03
- Wohnort: Schwäbisch Gmünd
Re: [gelöst]Widget Map
Super !!!
Hab mal auf die Schnelle (ohne Installation ) deine HTML-Vorlage genommen und ein bisschen damit gespielt: 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
Hab mal auf die Schnelle (ohne Installation ) deine HTML-Vorlage genommen und ein bisschen damit gespielt: 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
- scotty
- Beiträge: 676
- Registriert: 28. Apr 2020 04:44
Re: [gelöst]Widget Map
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).
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
- peter-pan
- Beiträge: 2564
- Registriert: 28. Nov 2018 12:03
- Wohnort: Schwäbisch Gmünd
Re: [gelöst]Widget Map
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