[Javascript] Regenradarbilder des DWD und Foreca

[SBorg]

Entstand mehr oder minder freiwillig ( ) aus einem Thread mit @Homoran heraus und wurde im Gegensatz zu der Version im Thread von mir nochmals etwas aufgepimpt.

Mit dem Javascript ist es möglich, die aktuellen Regenradaraufnahmen (Bild + animierte GIF) des im Script konfigurierten Bundeslandes, sowie optional ein Satellitenbild von der DWD-Website und Foreca in vier Datenpunkte automatisch zu laden.

Konfigurationsmöglichkeiten im Script:

• Bundesland
• Datenpunkt
• Satellitenradar (optional)
• Foreca (optional)
• Abfrageintervall

Die Darstellung kann dann bspw. in der VIS mittels HTML-Widget und Binding mit folgendem Inhalt erfolgen (Attribute sind natürlich nach HTML-Standard ebenfalls möglich):

<img src="{hier_den_kompletten_Datenpunktpfad_und_Namen_einfügen}" width="240px" />

Project auf GitHub

[skokarl]

@sborg
Moin mein Gutster,

geile Scheisse

läuft auf Anhieb ..... bin auch von Dir nichts anderes gewöhnt.

Kann ich das noch auf einen bestimmten Ort zoomen ?

[Nashra]

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

[Homoran]

@skokarl sagte in [Javascript] Regenradarbilder des DWD:

Kann ich das noch auf einen bestimmten Ort zoomen ?

nein, höchstens per Bildausschnitt.

Ich habe bei mir den Film in eine Ecke geschoben, die mich nicht interessiert und das Standbild groß gelassen.
Auf einen Ort zu zoomen bringt ja nichts, weil man ja sehen will wie die Lage ist.
Das Bild wird ja auch nur alle 10 Minuten aktualisiert, da kann der Regen schneller da sein, als ein zu kleiner Ausschnitt suggeriert

[skokarl]

@nashra sagte in [Javascript] Regenradarbilder des DWD:

Geile Idee
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" />

[Nashra]

@skokarl sagte in [Javascript] Regenradarbilder des DWD:

@nashra sagte in [Javascript] Regenradarbilder des DWD:

Geile Idee
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

[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

[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.