[Javascript] Regenradarbilder des DWD und Foreca

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

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

[Nashra]

Yeah, bin gerade auf Hawai
Nein, alles ok, danke @SBorg

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

[SBorg]

@chaot sagte in [Javascript] Regenradarbilder des DWD und Foreca:

Kann es sein das sich die "Objekte" Seite stark verlangsamt wenn der Objektbaum mit den Bildern aufgeklappt ist...

Nicht nur kann, ist leider so (gerade wenn der Host nicht der schnellste ist). Die Bilder fallen dabei kaum ins Gewicht, aber die GIF hat etwa 5.5MB an Daten, da braucht der ioB einen Augenblick, um das zu verarbeiten (auch wenn er die Daten gar nicht im Datenpunkt anzeigt).
Deswegen liegen sie standardmäßig in einem Sub-Sub-Ordner, den man am besten so wenig wie möglich anrührt. Sehen tut man eh nix und einbinden zB. in die VIS macht man ja auch nicht dauernd

[mgieso]

@sborg

Wie bekomme ich es Vis dargestellt ?

Datenpunkte sind vorhanden

[SBorg]

@mgieso Du nimmst bspw. ein HTML-Widget und kopierst dir vorher am einfachsten den gewünschten Objektpfad:

Im Widget gibst du dann bei "HTML" den img-Tag mit dem Objekt-Pfad als Binding (der Pfad liegt noch in deiner Zwischenablage) ein:

Im Editor siehst du dann (wg. des Bindings) allerdings nur:

In der Runtime aber:

Dann musst du nur noch die gewünschte Größe anpassen.

[mgieso]

@sborg

super danke

[mgieso]

Alle gehen außer den Foreca muss ich noch einen Adapter installieren dafür