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

[Nashra]

@skokarl sagte in [Javascript] Regenradarbilder des DWD:

@nashra sagte in [Javascript] Regenradarbilder des DWD:

Geile Idee :+1:
Bekomme aber leider die Animation nicht d.h. Datenpunkt ist leer

der Datenpunkt in den Objekten sieht bei mir auch leer aus, ist er aber nicht.
Im Widget auch den Film Datenpunkt angegeben ?

<img src="{0_userdata.0.Wetter.RegenRadar.Hessen_Film}" width="300px" />

Jow, da nichts drin stand im Datenpunkt hatte ich es in der VIS auch nicht probiert.
Ani wird im VIS angezeigt, danke :+1:

[Ritter]

Hallo, bei mir legt er im Datenpunkt ca. 5 DIN A4 Seiten wirren Text an und iobroker wird ganz träge.

[Homoran]

@ritter sagte in [Javascript] Regenradarbilder des DWD:

Hallo, bei mir legt er im Datenpunkt ca. 5 DIN A4 Seiten wirren Text an und iobroker wird ganz träge.

Das wird wohl der Film sein

Das ist ganz normal ;-)
ich bekomme z.B. auf dem Tablet die Seite gar nicht mehr auf

[skokarl]

@ritter
@Homoran

die Readme habt ihr gelesen, oder ?

Das Bild wird direkt im Datenpunkt abgelegt und nicht als Datei gespeichert. Deswegen sollte man sich den Datenpunkt
des GIFs (Film), auch wenn er leer erscheint, nicht mittels Browser ansehen wollen. Das kann zu hoher Systemlast, 
bis hin zum Absturz des Client-Browsers führen!

[Homoran]

@skokarl sagte in [Javascript] Regenradarbilder des DWD:

die Readme habt ihr gelesen, oder ?

ich nicht, brauche es aber nicht weil ich es weiß

[Ritter]

<img src="{0_userdata.0.Wetter.RegenRadar.Bayern_Film}" width="240px" />

das habe ich jetzt in das html Widget eingefügt, aber kein Bild

[Ritter]

@ritter sagte in [Javascript] Regenradarbilder des DWD:

<img src="{0_userdata.0.Wetter.RegenRadar.Bayern_Film}" width="240px" />

das habe ich jetzt in das html Widget eingefügt, aber kein Bild

Jetzt gehts doch super!

[Chaot]

@sborg Danke dir.
Schöne Spielerei.
Ich habe das in ein Icontwo Widget gepackt. Da geht die Größeneinstellung für mich bequemer.

Spoiler

[{"tpl":"i-vis-multi","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","iUniversalWidgetType":"Background","iValueType":"boolean","iStateResponseTime":"0","iStateResetValueTime":"0","iNavWait":"100","iPopUpBackground":"#666666","iPopUpPreventClickOutside":"","iPopUpShowTitle":"true","iPopUpTitle":"","iPopUpTitleColor":"#ffffff","iPopUpCloseBtnColor":"#dc2e2e","iPopUpWidth":"800","iPopUpHeight":"500","iPopUpHeightTitle":"50","iPopUpTitleSize":"28","iPopUpPosition":"center","iPopUpPositionX":"0","iPopUpPositionY":"0","iPopUpCloseAfterSeconds":"0","iPopUpCornerRadiusUL":"12","iPopUpCornerRadiusUR":"0","iPopUpCornerRadiusLR":"12","iPopUpCornerRadiusLL":"0","iPopUpShadowXOffset":"2","iPopUpShadowYOffset":"2","iPopUpShadowBlur":"2","iPopUpShadowSpread":"1","iPopUpShadowColor":"#111111","iUniversalValueCount":"1","iCheckType1":"iCheckDefault","iValueComparison1":"equal","iButtonActiveM1":"#455618","iTextColorActive1":"#ffffff","iShadowColorActiveM1":"#111111","iShadowInnerColorActiveM1":"#111111","iShadowTextColorActiveM1":"#111111","iBorderColorActiveM1":"#ffffff","iImgBlinkTrue1":"0","iImgColorTrue1":"","iHtmlTextFieldTrue1":"","iButtonCol":"#333333","iButtonColHover":"","iOpacityBack":"1","iCornerRadiusUL":"12","iCornerRadiusUR":"0","iCornerRadiusLR":"12","iCornerRadiusLL":"0","iContentFlexDirection":"vertical","iContentVertAlign":"iCenter","iContentOrder":"orderTextImg","iOpacityCtn":"1","iContentType":"image","iTextColor":"#ffffff","iTextColorActive":"#ffffff","iTextSize":"10","iTextAlign":"iCenter","iTextSpaceTop":"0","iTextSpaceBottom":"0","iTextSpaceLeft":"0","iTextSpaceRight":"0","iIconSize":"150","iImgAlign":"iCenter","iImgRotation":"0","iImgSpaceTop":"0","iImgSpaceBottom":"0","iImgSpaceLeft":"0","iImgSpaceRight":"0","iImgBlinkFalse":"0","iImgColorFalse":"","iImgClockFace":"01","iImgClockHands":"01","iImgClockShowBorder":"true","iImgColorClockFace":"#ffffff","iImgColorHands":"#ffffff","iImgColorHandSecond":"#ff0000","iClockShowSeconds":"","iClockTimezone":"Europe/Berlin","iHtmlTextFieldFalse":"","iShadowXOffset":"2","iShadowYOffset":"2","iShadowBlur":"2","iShadowSpread":"1","iShadowColor":"#111111","iShadowInnerXOffset":"0","iShadowInnerYOffset":"0","iShadowInnerBlur":"0","iShadowInnerSpread":"0","iShadowInnerColor":"#111111","iShadowTextXOffset":"0","iShadowTextYOffset":"0","iShadowTextBlur":"0","iShadowTextColor":"#111111","iBorderSize":"0","iBorderStyle":"none","iBorderColor":"#ffffff","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"iImageFalse":"{0_userdata.0.Wetter.RegenRadar.Bayern_Film}","iTextFalse":"Regenradar"},"style":{"left":"415px","top":"245px","width":"185px","height":"159px","z-index":"2"},"widgetSet":"vis-inventwo"}]

[Ritter]

Könnte man diese Ansicht auch nach deinem Rezept machen oder ist das ein rießen Aufwand?

https://www.dwd.de/DE/leistungen/wolken_niederschlagsart/wolken_niederschlagsart.html?nn=16102

[Chaot]

@ritter
Das musst du doch bloß im Script als Datenpunkt mit anlegen soweit ich das sehe.
https://www.dwd.de/DWD/wetter/sat/satwetter/njob_satrad.png
Oder du übernimmst es direkt als Binding

[Ritter]

Vom Programmieren hab ich keine Ahnung darum weis ich nicht wo man das Austauschen kann. Ich habe es als basic image in vis direkt eingebunden, aber die andere Variante soll doch den Browser entlasten?

[Rene55]

@SBorg Super, wieder was neues brauchbares. Und läuft auf anhieb. Einfach klasse:+1:

[SBorg]

Es hat schon maginale Geschwindigkeitsvorteile, interessant wird es aber bei 1+n Geräten, da nicht jedes immer alles downloaden muss. Ferner liegen die Daten halt auch immer vor, zumindest die letzte ladbare Variante vor ev. Störungen. Pauschal kann man aber natürlich auch das Binding direkt auf die Bilder setzen ;)

Neue Version V0.0.3 Online:

• + Satellitenradarbild (optional) hinzugefügt
• V0.0.2 / 09.01.2022 - ~ Schreibzugriff auf die Datenpunkte entfernt

Ich habe mittlerweile den Zugriff auf die Datenpunkte beschränkt. So kann man sie sich nicht mehr (irrtümlich) ansehen wollen und blockiert (gerade bei der ~5.5MB großen GIF) so den Browser. Das sind eh nur kryptische Zahlen-/Zeichenfolgen des Bildes. Außer Neo (aus Matrix ;) ) wird wohl keiner von uns daraus etwas sehen können ^^
Wer dennoch möchte/muss (ich bin kein Freund von Gängeleien): in den Objectdaten des Datenpunktes von "write": false wieder auf "write": true stellen...

[Ahnungsbefreit]

@sborg Sehr schön, läuft sofort und da ich auch im "richtigen" Bundesland (Hessen) wohne, brauchte ich noch nicht einmal etwas zu ändern. Vielen Dank dafür!

Eine Frage hätte ich noch: Hat jemand schon diese Regenradar-Bilder an Telegram geschickt? Oder braucht es dafür eine "richtige" Datei?

[Ritter]

Hallo, vielen Dank für das einbauen des Satelitenradarbildes. Funktioniert bestens.

[Homoran]

@sborg sagte in [Javascript] Regenradarbilder des DWD:

interessant wird es aber bei 1+n Geräten, da nicht jedes immer alles downloaden muss.

oder kann!
Ich hatte diese Variante genutzt um die Bilder auch auf meinen Wandtablets, die keinen Internetzugang haben, darstellen zu können.

Aber jetzt habe ich noch einen Wunsch.
Mit width kann ich das Bild verkleinern - bei mir um den Film in die obere rechte Ecke zu verbannen.

Das Wolkenbild deckt jedoch ganz Deutschland ab, dieses noch verkleinert ist jetzt kontraproduktiv.
Gibt es eine Möglichkeit einen Ausschnitt zu erzeugen?

[SBorg]

@homoran Ja :)

Du fügst folgendes (für deinen Ausschnitt anzupassendes) CSS hinzu:

.homoran{
    height: 300px;
    width: 100% !important;
    object-fit: cover;
    object-position: top center;
}

Den Namen darfst du natürlich ändern ;)

Im HTML-Tag musst du dann nur beim Bild noch die Klasse angeben:

<img class="homoran" src="{0_userdata.0.Wetter.RegenRadar.SatRadar}" width="400px">

Dann wird aus ganz Deutschland zB. dieser Ausschnitt (meteoalarm kommt von meiner Test-View...):

[SBorg]

Neue Version V0.1.0 Online:

• + Foreca-Regenradar hinzugefügt
• ~ Codeoptimierungen

Habe den Code etwas "verschlankt" und noch (optional) ein Bild von Foreca hinzugefügt (etwas lokalere Ansicht):

Bitte beachten (steht aber auch im JS): die Konfiguration bei Foreca erfolgt in Breiten-/Längengrad
Es kann zwar nichts bei einem Fehler passieren, es könnte dann aber sein, dass ihr mitten im Pazifik oder der Sahara wohnt... :grin:

[Nashra]

Yeah, bin gerade auf Hawai :sunglasses:
Nein, alles ok, danke @SBorg :+1:

[Chaot]

@sborg Danke dir.
Klappt hervorragend.
Aber mal eine Frage:
Kann es sein das sich die "Objekte" Seite stark verlangsamt wenn der Objektbaum mit den Bildern aufgeklappt ist oder tritt der Effekt nur bei mir auf?