Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[luder]

Hallo,

ich würde gerne eine aktuelle Wetterkarte als Hintergrundbild in der VIS einfügen.
Ich habe nur die Möglichkeit gefunden ein beliebiges Bild unter
CSS-Hintergrund - image einzubinden.
Ist das irgendwie möglich?

VG
ludger

[BananaJoe]

https://www.smarthome-tricks.de/software-iobroker/iobroker-vis-widget-iframe/

oder

https://forum.iobroker.net/topic/3674/gelöst-teil-einer-webseite-einbinden-in-vis/2

Aber!

Es geht nur https mit https oder http mit http. Du kannst keine Verschlüsselte https-Seite in eine http Seite einfügen und umgekehrt. Wenn deine Quellseite also nur https kann, müsste deine VIS auch per https aufgerufen werden.
Geht wohl doch ... http in https einbinden ging nicht, so war das

Woher kommt denn deine Wetterkarte?
Ich habe bei mir 2 Wetterkarten in der VIS:

Einmal Windy.com:

Ist ein html-Widget mit folgendem Inhalt (ist animiert)

<iframe width="1280" height="800" src="https://embed.windy.com/embed2.html?lat=52.935&lon=9.080&detailLat=53.010&detailLon=9.040&width=1280&height=800&zoom=10&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=true&metricWind=km%2Fh&metricTemp=%C2%B0C&radarRange=-1" frameborder="0"></iframe>

Einfach die Koordinaten anpassen

Und Regenradar (wird als Film abgespielt):

Das sind 3 HTML-Widgets:

<img src="{0_userdata.0.Wetter.RegenRadar.Niedersachsen_Bremen_Film}" height="800px" />
<img src="{0_userdata.0.Wetter.RegenRadar.Foreca}" width="299px" />
<img src="{0_userdata.0.Wetter.RegenRadar.SatRadar}" width="299px" />

Die per Regenradar-Skript gefüllt werden:
https://github.com/SBorg2014/ioBroker-Addons/tree/master/DWD-Regenradar

[Homoran]

@bananajoe sagte in beliebige Webseite Hintergrundbild in VIS möglich?:

HTML-Widgets:

ist nicht

@luder sagte in beliebige Webseite Hintergrundbild in VIS möglich?:

Hintergrundbild in der VIS
(view - Background)

[BananaJoe]

@homoran Stimmt.
@luder dann halt so

Beliebiges Bild:
basic - image Widget nehmen und dann die URL eintragen:

Ist in diesem Fall die URL zu einer meiner Webcams (die benutze ich gerne als Hintergrundbilder),
Da kann man aber auch jede beliebige andere URL eintragen die zu einem Bild(!) führt
Updatedatezeit sorgt dafür das das Bild regelmäßig erneuert wird,
Die 4 unteren Haken beachten, der Haken "Addiere nichts zu URL" war wie ich meine wichtig nicht gesetzt zu sein.

[Homoran]

@bananajoe sagte in beliebige Webseite Hintergrundbild in VIS möglich?:

basic - image Widget nehmen

@luder statt Hintergrund des Views also ein WIDGET auf Viewgöße ziehen und auf Z=0 setzen.
Dann müssen alle anderen Widget einen Z-Wert >0 haben.

[BananaJoe]

und am besten das Widget dann auch noch sperren:

Dann kannst du es nicht mehr versehentlich anklicken beim Editieren.
Ran kommst du dann noch über das Widget-Auswahlmenü:

Wenn du es dort anhakst kannst du es wieder bearbeiten. Also am besten auch gleich einen Namen vergeben.

So, noch ein "Profi-Tipp"
Du kannst so auch 2 oder mehr Bilder übereinander legen:

Ich nutze gerne Bild 1 auf Z = 0 als Hintergrundbild, z.B. "zerkratztes Metall", gerne ein etwas dunklerer Hintergrund.
Und Bild 2 auf Z=1 darüber das eigentliche. Dann mit Transparenz. Wenn man da noch andere Widgets wie Buttons drüber legt sind mir viele Hintergrundbilder zu hell, so kann man diese "abdunkeln" bzw. Effekte wie die Kratzer durchscheinen lassen.

Schwarzer Hintergrund + leichte Transparenz dunkel das auch so alleine ab.

[luder]

@bananajoe Vielen vielen dank für diese ausführlichen Infos.
Das spart mir eine Menge Arbeit. Werde das erst einmal so versuchen.

[OliverIO]

@bananajoe

Geht wohl doch ... http in https einbinden ging nicht, so war das

Mit einem proxy könnte man die Protokolle überschreiben. Dann würde das auch gegen.