Übersichts(land)karte mit Webcam-Bildern - wie umsetzen?

[calima]

Hallo zusammen,

ich habe mir ein Dashboard mit Webcam-Bildern angelegt. Die Webcams zeigen Bilder aus allen Himmelsrichtungen rund um meinen Standort:



Die Bilder sind als picture entities mit der entsprechenden Bild-URL eingefügt und aktualisieren sich bei jedem Aufruf des Dashboards. Bei Klick auf ein Bild öffnet es sich in einem neuen Fenster.
Ich würde die Webcambilder gern als thumbnails auf einer Landkarte von Norddeutschland positionieren. Die könnte ein Hintergrundbild sein oder - noch besser - eine Map.

Ich habe mir zwei Herangehensweisen überlegt:

1. Anlegen eines sehr kleinteiligen Rasters (grid), in dem die meisten Positionen nicht belegt sind und die kleinen Vorschaubilder nur dort platziert werden, wo sich auf dem Hintergrundbild der bestreffende Ort befindet.
2. Feste Zuweisung eines Attributs mit einem Geocode (latlong) für jede picture entity.

Ist das überhaupt möglich, wenn kein Gerät existiert, das den Geocode als source liefert? Hat jemand von Euch schon mal so etwas versucht? Würde die erste Option zu Performance-Problemen führen?

 

[RudiP]

Ich habe mir eine Landkarte angelegt und lasse dort die Tankstellenpreise umliegender Tankstellen anzeigen.
Welche Entitäten Du dort einträgst ist sicher dein Problem, es sollten also auch Webcams gehen, denke ich.

Also ein neues Dashboard anlegen, Layout Panel.
Dann auf "Karte hinzufügen" und die Landkarte auswählen.
Bei Entitäten dann deine Webcams angeben und "Daumen drücken".

 

[calima]

Ja, die Karte mit den Kraftstoffpreisen war mein Ideengeber. Die nutze ich ja auch. Und so stelle ich mir die Ansicht auch vor, eben mit anklickbaren thumbnails der Webcams. Bei den Kraftstoffpreisen stellt aber die Tankerkönig-integration den Geocode zur Verfügung.



Meine Webcam-Ansichten sind aber einfach von Webseiten eingesammelte Bildchen, die ich selbst als picture entity in 3 vertikale Stapel verteilt habe. Von sich aus wissen die nicht, wo sie geografisch positioniert sind. Und wie sich ihnen eine GPS-Information zuweisen lässt, habe ich noch nicht herausbekommen. Das ist meine Frage bzw. ob das überhaupt möglich ist.

 

[RudiP]

Ich denke schon, das man das irgendwie mit einem Template hin bekommen kann. Die Koordinaten könnte man sich ja bei Google holen.
Aber wie man da ein Template bastelt, da bin ich leider raus. Soviel Ahnung habe ich noch nicht.

 

[RudiP]

Schau mal hier. Beitrag Nr. 6 von Nival. Ich denke, das könnte die Lösung sein.
Du legst einen NEUEN Sensor an, gibst als value_template deine Entität mit der Webcam an und kannst dann, so hoffe ich, nach dem Beispiel oben mit Längengrad und Breitengrad die Position der Kamera festlegen.

Wie gesagt, ist gerade nur so ein Gedanke in meinem Kopf.

 

[calima]

Ja, vielen Dank! Ich probiere das mal aus. Weil ich meine Sensoren nicht nur Werte auslesen lasse, sondern auch ihr Erscheinungsbild und das Aussehen der Visualisierung ändere, ist es wahrscheinlich eine gute Idee, das alles gesammelt in die templates.yaml auszulagern. Bisher hatte ich das meist über CSS styles der Karten gelöst. Wenn Attribute dazukommen, die nicht in der Entität angelegt sind, funktioniert das natürlich nicht mehr.

 

[Nival]

Also was auf jeden Fall funktioniert ist etwas in dieser Art in der template.yaml:

- sensor:
  - name: "img_geo"
    picture: "https://...png"
    state: "https://...png"
    attributes:
      latitude: "53.58278381881549"
      longitude: "8.982203895648722"

und das wird in der Map dann auch am richtigen Ort platziert.

 

[calima]

Cool! Tausend Dank!

 

[RudiP]

Ich sag ja.Nival rettet uns alle.

 

[Nival]

Ich fürchte - so aus meiner Sicht - das wird noch ein langer Weg. Was ich nämlich, zumindest so auf die Schnelle, nicht realisieren konnte, war, etwas anderes als "more Info" bei Klick zu erhalten oder auch nur mehr als das kleine runde Bildchen.

Aber, meine Hoffnung war ja, dass der Codeschnipsel reicht und dann jemand mit tatsächlich Plan von HA einspringen kann

 

[calima]

Ich bin auf dem langen Weg schon mal ein paar Tippelschritte gegangen. Wenn ich den Code des template-Sensors so erweitere

- sensor:
    - name: "img_geo_ohv"
      picture: "https://cam.dnsapp.de/inselblick-hafen/bild.php"
      state: "https://cam.dnsapp.de/inselblick-hafen/bild.php"
      attributes:
        latitude: "53.147288"
        longitude: "12.804852"
        tap_action: url
        url_path: https://cam.dnsapp.de/inselblick-hafen/bild.php

bekomme ich das kleine Vorschau-Bild und das more-info Popup listet mir beim Klick darauf die Bild-URL als Attribut. Bei Klick auf die URL öffnet sich das Bild dann in einem neuen Fenster. So weit, so gut.
Diese Aktion möchte ich gern bei Klick auf das Vorschau-Bild haben. Ich denke also, dass ich den Event per Script aufrufen müsste. Irgendwelche Ideen, wie das funktioniert?

 

[calima]

Ich krieg' hier 'nen Fön. Über ChatGPT habe ich versucht, eine Lösung zu bekommen, was im ersten Anlauf schief ging, weil die KI vorschlug, die tap_action aus dem template Sensor in den Code der Map Card auszulagern. Das thumbnail der Webcam wurde durch den Titel der Webcam ersetzt, aber das Verhalten blieb gleich. Es öffnete sich more-info. Nur fehlte diesmal sogar die URL vollständig.

Ich fragte noch mal und bekam diese Antwort, die ich demnächst ausprobieren werde:

Danke für die Klarstellung – du hast absolut recht, und ich korrigiere meine vorherige Aussage.
Tatsächlich funktioniert die Anzeige eines Thumbnails auf der Map Card, wenn man einen template sensor mit dem Attribut picture: nutzt. Der Marker zeigt dann das Bild korrekt auf der Karte.

Dein Problem:​

Du möchtest beim Klick auf das Thumbnail auf der Map-Karte nicht das more-info-Fenster des Sensors öffnen, sondern das Bild selbst (z. B. in einem neuen Tab oder einem Popup).

Der Punkt ist:​

Leider unterstützt die map-Karte in Home Assistant aktuell nicht direkt tap_action: bei sensor-Entitäten innerhalb des Markers, selbst wenn du das Attribut tap_action oder url_path im Sensor setzt – diese werden nicht übernommen.

Das Verhalten beim Klick auf ein Bild-Marker-Sensor auf der map-Karte ist fest verdrahtet als more-info.

Mögliche Umgehungslösungen​

1. Bild über Kamera-Entität einbinden (mit Streaming/Picture)​

Wenn du statt eines Sensors eine camera-Entität definierst, kannst du das Verhalten über camera_view und tap_action besser steuern.
Beispiel:

camera:
  - platform: generic
    name: "Webcam Waren"
    still_image_url: "https://www.waren-tourismus.de/sites/default/files/neuermarkt.jpg"
    stream_source: ""

Dann auf der Map-Karte anzeigen (nur als Marker) oder besser mit:

type: picture-entity
entity: camera.webcam_waren
camera_image: camera.webcam_waren
camera_view: live
tap_action:
  action: url
  url_path: https://www.waren-tourismus.de/sites/default/files/neuermarkt.jpg

So kannst du bei Klick das Bild oder sogar einen Livestream öffnen.

ChatGPT schlägt noch eine zweite Lösung vor, für die ich aber die Zusatzkomponente browser_mod installieren müsste. Ich versuche es daher erst mal mit der vorstehend beschriebenen Lösung.

Fazit: ChatGPT ist super... aber man muss wissen, wie man fragt. Sonst bekommt man Schrott.

 

[u5zzug]

Eine Webcam mit Bild zu nutzen, wie ich es z.B. für das Wetterradarbild mache, wäre auch mein Gedanke gewesen, habs aber noch nicht probiert. Das zeigt jedenfalls bei Klick auf Vorschau ein größeres Bild an.

 

[calima]

Ja, das geht, wenn das Bild als picture-entity auf einem Hintergrundbild platziert ist, das als picture-elements angelegt ist. Dann platzierst Du die Vorschau-Bildchen nicht mit einem Geocode, sondern schiebst sie pixelweise an die richtige Position. Es sieht so aus, dass nur diese Möglichkeit funktioniert, wenn Du auf Klick eine größere Ansicht des Webcam-Bilds haben willst. Eine Positionierung per Geocode wäre eleganter gewesen, denn dann könnte ich auf der "echten" Landkarte noch weitere reale Geo-Infos anzeigen lassen.

 

[calima]

Jetzt habe ich ein Hintergrundbild (picture_elements) ohne GPS-Referenz mit thumbnails (image entities) der verlinkten Webcams und eine Landkarte (map) mit GPS-Daten mit den gleichen thumbnails (template sensors).

Variante mit Hintergrundbild:

Bei Klick auf die Vorschaubildchen, die ich mühsam per try & error mit Pixelschubserei auf die entsprechenden Platzierungen geschoben habe, öffnet sich das Webcam-Bild in Originalgröße in einem neuen Tab. Das Hintergrundbild so ins Layout zu bekommen, dass das Dashboard bildfüllend und auf jedem Bildschirm einigermaßen gleich angezeigt wird, war auch nicht einfach.

Variante mit "echter" Landkarte und Geocode der Webcams:

Bei Klick auf die Vorschaubildchen, die ich einfach per geocode auf die Platzierungen gesetzt habe (Längen- und Breitengrad sind für jede Webcam im template sensor definiert), öffnet sich das fest verdrahtete more-info Popup. Mit einem zweiten Klick kann ich im unteren Teil des Popups die Attribute ausklappen und mit dem dritten Klick auf die URL, die ich als url_path eingetragen habe, öffnet sich dann das Webcam-Bild in einem neuen Tab.

Beide Varianten haben Vor- und Nachteile: Mit dem Hintergrund-Bild bin ich schneller am Ziel, die Landkarte kann ich verschieben und die thumbnails bleiben immer an der korrekten Position. Die Zoomstufe der Landkarte lässt sich nicht fest einstellen. Bei jedem Neuaufruf wird mir ein viel zu großer Kartenausschnitt angezeigt. Theoretisch könnte ich auf der Landkarte weitere Geo-Informationen platzieren, z.B. den Wolken-Layer oder Windgeschwindigkeits-Layer eines Wetterdienstes als overlay. Allerdings weiß ich nicht, wie das umzusetzen wäre.

Einen Nachteil sehe ich in beiden Varianten: Die thumbnails aktualisieren sich nicht von allein, wenn ein neues Webcam-Bild verfügbar ist. Ich muss beide Dashboards jedes Mal aktualisieren, in manchen Fällen sogar den Browser Cache löschen. Hin- und Herschalten in der Seitenleiste reicht nicht aus.

Mein Ziel, eine schnelle Übersicht auf den ersten Blick über Sonnenschein bzw. Wolkenbedeckung rund um meinen Standort zu bekommen, lässt sich mit diesen Varianten daher nur bedingt umsetzen.