Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Praktische Anwendungen (Showcase)
  4. [Javascript] Regenradarbilder des DWD und Foreca

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.7k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.2k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.2k

[Javascript] Regenradarbilder des DWD und Foreca

Geplant Angeheftet Gesperrt Verschoben Praktische Anwendungen (Showcase)
dwdjavascriptregenradar
42 Beiträge 12 Kommentatoren 6.4k Aufrufe 22 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • SBorgS SBorg

    @mgieso Du nimmst bspw. ein HTML-Widget und kopierst dir vorher am einfachsten den gewünschten Objektpfad:
    Bild 1.png
    Im Widget gibst du dann bei "HTML" den img-Tag mit dem Objekt-Pfad als Binding (der Pfad liegt noch in deiner Zwischenablage) ein:
    Bild 2.png
    Im Editor siehst du dann (wg. des Bindings) allerdings nur:
    Bild 3.png
    In der Runtime aber:
    Bild 4.png

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

    mgiesoM Offline
    mgiesoM Offline
    mgieso
    schrieb am zuletzt editiert von mgieso
    #30

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

    SBorgS hydrotecH 2 Antworten Letzte Antwort
    0
    • mgiesoM mgieso

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

      SBorgS Offline
      SBorgS Offline
      SBorg
      Forum Testing Most Active
      schrieb am zuletzt editiert von
      #31

      @mgieso Nein, denn da wird nur das Bild von deren Website geladen. Hast du bei "Foreca_GPS" in den Usereinstellungen korrekt deinen Breitengrad und Längengrad eingetragen?

      LG SBorg ( SBorg auf GitHub)
      Projekte: Lebensmittelwarnung.de | WLAN-Wetterstation | PimpMyStation

      1 Antwort Letzte Antwort
      0
      • SBorgS 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

        DWD-Bild DWD-GIF DWD Satellitenradar Foreca.png
        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

        I Offline
        I Offline
        IceD112
        schrieb am zuletzt editiert von
        #32

        @sborg
        Ich suche schon eine Weile nach einer brauchbaren Ansicht eines Wetterradars für meine VIS
        Ich bin programmiertechnische aber ein absoluter Leihe. und muss an der Stelle mal Frage, was brauche ich für Voraussetzungen um sowas in meine VIS zu bekommen? Muss dazu was aus dem GitHub installieren? Da fängt es nämlich an... Hab ich noch nie gemacht.
        Was für Adapter benötige weiterhin, und wie sieht das Skript dazu aus. Bin aus dem Post leider nicht schlauer geworden. Scheint ja bei vielen auf Anhieb geklappt zu haben aber ich bin nicht dahinter gestiegen

        SBorgS 1 Antwort Letzte Antwort
        0
        • mgiesoM mgieso

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

          hydrotecH Offline
          hydrotecH Offline
          hydrotec
          schrieb am zuletzt editiert von
          #33

          @mgieso

          Vertausche mal Breitengrad und Längengrad, das hat bei mir geholfen.

          Ubuntu 22.04 LTS (LXD/LXC)
          admin: v6.3.5
          js-controller: v4.0.24
          node: v18.16.1
          npm: v9.5.1
          repository: stable

          1 Antwort Letzte Antwort
          0
          • I IceD112

            @sborg
            Ich suche schon eine Weile nach einer brauchbaren Ansicht eines Wetterradars für meine VIS
            Ich bin programmiertechnische aber ein absoluter Leihe. und muss an der Stelle mal Frage, was brauche ich für Voraussetzungen um sowas in meine VIS zu bekommen? Muss dazu was aus dem GitHub installieren? Da fängt es nämlich an... Hab ich noch nie gemacht.
            Was für Adapter benötige weiterhin, und wie sieht das Skript dazu aus. Bin aus dem Post leider nicht schlauer geworden. Scheint ja bei vielen auf Anhieb geklappt zu haben aber ich bin nicht dahinter gestiegen

            SBorgS Offline
            SBorgS Offline
            SBorg
            Forum Testing Most Active
            schrieb am zuletzt editiert von
            #34

            @iced112 Speziell brauchst du eigentlich nichts installieren. Du brauchst zwar den Skript-Adapter (für Javascript, Blockly usw.) und zB. die VIS, dass sollte man aber eh schon installiert haben.
            Du kopierst dir den kpl. Inhalt der Datei (https://github.com/SBorg2014/ioBroker-Addons/blob/master/DWD-Regenradar/DWD-Regenradar.js) in die Zwischenablage, dann wechselst du in den Skript-Adapter und legst ein neues Skript vom Typ Javascript an (wie du es nennst und ob du es in einen Ordner packen willst bleibt dir überlassen).
            Unter den "Usereinstellungen" musst du jetzt noch dein Bundesland eintragen und ob du ggf. weitere Bilder möchtest wie zB. SatRadar-Bild. Dann musst du dort nur false in true abändern.

            Speichern und das Skript über das rote Pausezeichen starten.

            Wenn du den Datenpunkt nicht abgeändert hast liegen nun in den Objekten unter "0_userdata.0 => Wetter => RegenRadar => xyz" deine Bilder.

            In der VIS nimmst du nun bspw. ein HTML-Widget und trägst dort als "Inhalt"

            <img src="{0_userdata.0.Wetter.RegenRadar.SatRadar}" />
            

            ein (bzw. musst du den Objektpfad anpassen wenn du ihn im Skript geändert hast, und natürlich welches Bild er denn da anzeigen soll ;) )
            Dann muss ggf. nur noch die Bildgröße an deine VIS angepasst werden.

            LG SBorg ( SBorg auf GitHub)
            Projekte: Lebensmittelwarnung.de | WLAN-Wetterstation | PimpMyStation

            1 Antwort Letzte Antwort
            0
            • I Offline
              I Offline
              IceD112
              schrieb am zuletzt editiert von IceD112
              #35

              @sborg said in [Javascript] Regenradarbilder des DWD und Foreca:

              <img src="{0_userdata.0.Wetter.RegenRadar.SatRadar}" />

              Ei, prima soweit.
              mit dem Pfad .SatRadar hat es schonmal halbwegs geklappt. Aber änder ich den Pfad, z.B. zu Foreca, bekomme ist nicht angezeigt.
              Und dann noch ne Frage, wo kann ich denn die Anzeigegröße in der VIS des Radarbilds ändern?

              EDIT: Hat sich geklärt. Längen und Breitengrad waren vertauscht.... Aber die Größe ändern, das hab ich noch nicht raus gefunden

              SBorgS 1 Antwort Letzte Antwort
              0
              • I IceD112

                @sborg said in [Javascript] Regenradarbilder des DWD und Foreca:

                <img src="{0_userdata.0.Wetter.RegenRadar.SatRadar}" />

                Ei, prima soweit.
                mit dem Pfad .SatRadar hat es schonmal halbwegs geklappt. Aber änder ich den Pfad, z.B. zu Foreca, bekomme ist nicht angezeigt.
                Und dann noch ne Frage, wo kann ich denn die Anzeigegröße in der VIS des Radarbilds ändern?

                EDIT: Hat sich geklärt. Längen und Breitengrad waren vertauscht.... Aber die Größe ändern, das hab ich noch nicht raus gefunden

                SBorgS Offline
                SBorgS Offline
                SBorg
                Forum Testing Most Active
                schrieb am zuletzt editiert von
                #36

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

                Aber die Größe ändern, das hab ich noch nicht raus gefunden

                Steht eigentlich alles da ;)
                ... aber, du legst zuerst mal im Widget die Größe des HTML-Widgets fest, je nach dem was du an Platz in deiner View hast. Sagen wir mal du hättest 300 Pixel Höhe und 200 Pixel Breite.
                Jetzt kommt es auf die Größe des Bildes an. Das wird nicht die 300x200 Pixel haben, also muss man es skalieren. Dabei darf man es aber nicht "brutal" auf 300x200 px setzen, sonst staucht oder streckt man das Bild.
                Man setzt also mal die Höhe auf 300px und schaut ob es passt, oder die Breite auf 200 px.
                Das ist dann HTML-Syntax:

                zB.
                <img src="{0_userdata.0.Wetter.RegenRadar.SatRadar}" width="200px" />
                
                oder
                <img src="{0_userdata.0.Wetter.RegenRadar.SatRadar}" height="300px" />
                
                genau passend, aber wegen ggf. Verzerrungen, Stauchungen etc. nicht zu empfehlen:
                <img src="{0_userdata.0.Wetter.RegenRadar.SatRadar}" width="200px" height="300px" />
                

                LG SBorg ( SBorg auf GitHub)
                Projekte: Lebensmittelwarnung.de | WLAN-Wetterstation | PimpMyStation

                I 1 Antwort Letzte Antwort
                0
                • SBorgS SBorg

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

                  Aber die Größe ändern, das hab ich noch nicht raus gefunden

                  Steht eigentlich alles da ;)
                  ... aber, du legst zuerst mal im Widget die Größe des HTML-Widgets fest, je nach dem was du an Platz in deiner View hast. Sagen wir mal du hättest 300 Pixel Höhe und 200 Pixel Breite.
                  Jetzt kommt es auf die Größe des Bildes an. Das wird nicht die 300x200 Pixel haben, also muss man es skalieren. Dabei darf man es aber nicht "brutal" auf 300x200 px setzen, sonst staucht oder streckt man das Bild.
                  Man setzt also mal die Höhe auf 300px und schaut ob es passt, oder die Breite auf 200 px.
                  Das ist dann HTML-Syntax:

                  zB.
                  <img src="{0_userdata.0.Wetter.RegenRadar.SatRadar}" width="200px" />
                  
                  oder
                  <img src="{0_userdata.0.Wetter.RegenRadar.SatRadar}" height="300px" />
                  
                  genau passend, aber wegen ggf. Verzerrungen, Stauchungen etc. nicht zu empfehlen:
                  <img src="{0_userdata.0.Wetter.RegenRadar.SatRadar}" width="200px" height="300px" />
                  
                  I Offline
                  I Offline
                  IceD112
                  schrieb am zuletzt editiert von IceD112
                  #37

                  @sborg
                  Ok, aber nehme ich da dann den Punkt Signalbilder? Kann ich da dann überhaupt die Pixel Größe anpassen? Da hab ich doch nur den Schieber für die Größe allgemein 🤔

                  Und zum Zeitplan hätte ich noch ne Frage: wie kann ich die Codezeile verstehen? Wann nimmt er sich die Änderungen und wie müsste ich den Befehl aufbauen wenn es zeitlich kürzer oder länger sein soll

                  
                  const Zeitplan = "*/10 * * * *";                // wann sollen die Daten geholt werden (cron-Syntax)?
                  
                  
                  SBorgS 1 Antwort Letzte Antwort
                  0
                  • I IceD112

                    @sborg
                    Ok, aber nehme ich da dann den Punkt Signalbilder? Kann ich da dann überhaupt die Pixel Größe anpassen? Da hab ich doch nur den Schieber für die Größe allgemein 🤔

                    Und zum Zeitplan hätte ich noch ne Frage: wie kann ich die Codezeile verstehen? Wann nimmt er sich die Änderungen und wie müsste ich den Befehl aufbauen wenn es zeitlich kürzer oder länger sein soll

                    
                    const Zeitplan = "*/10 * * * *";                // wann sollen die Daten geholt werden (cron-Syntax)?
                    
                    
                    SBorgS Offline
                    SBorgS Offline
                    SBorg
                    Forum Testing Most Active
                    schrieb am zuletzt editiert von
                    #38

                    @iced112 Ne, du hast ja beim HTML-Widget (und allen anderen auch ;) ) :
                    Bild 1.png
                    Damit ziehst du quasi mal eine "Begrenzungsmauer" (width + height) wie groß dein Bild überhaupt werden darf. Hier wird es nie höher als 380 Pixel und breiter als 280 Pixel.
                    Dann hängst du eben an das obige Binding noch die Breite oder Höhe an, je nachdem was besser passt.

                    Wenn du jetzt einfach width="280px" height="380px" angibst, dann "quetscht" er das Bild da rein ohne Rücksicht auf Verluste (oder verzerrt es). Wäre das Originalbild zB. 380px hoch, aber nur 140px breit, dann macht er es damit doppelt so breit (=280px), belässt es aber in der Höhe bei 380px. Dein Bild wäre also in der Breite doppelt so breit gezogen...
                    Deswegen würde man hier nur die Höhe angeben und hat halt nicht die gewünschte Breite. Oder man skaliert es auf die gewünschte Breite, dann hat man halt nicht mehr die gewünschte Höhe.
                    Stell es dir als gedrucktes Bild auf einem Stück Luftballon vor. Egal wie du da anfängst zu ziehen, dass Bild wird immer verzerrt werden, außer du ziehst gleichmäßig und gleichzeitig in zwei Richtungen.

                    wg. des Zeitplans möchte ich gerne auf die Syntax von "cron" zB. Wikipedia verweisen, da dort nichts anderes steht als was ich jetzt hier erklären würde. Pauschal bedeutet aber "*/10" alle 10 Minuten ab Skript(re)start.
                    Analog wäre dann "*/15" alle 15 Minuten, nachdem man das Skript neu startet (nur speichern startet hier den cronjob nicht neu). Kürzer ergibt eigentlich keinen Sinn, da die Bilder nur etwa alle 10 Minuten erneuert werden.

                    LG SBorg ( SBorg auf GitHub)
                    Projekte: Lebensmittelwarnung.de | WLAN-Wetterstation | PimpMyStation

                    1 Antwort Letzte Antwort
                    0
                    • SBorgS Offline
                      SBorgS Offline
                      SBorg
                      Forum Testing Most Active
                      schrieb am zuletzt editiert von SBorg
                      #39

                      Wie man aktuell im Eingangspost sehen kann... :(

                      Der DWD hat seine Struktur heute gegen 11:30 Uhr geändert und die Regional-Bilder und den Radarfilm etwas umstrukturiert. Ich muss das Skript anpassen, da es nicht nur mit einer einfachen Änderungen der URL getan ist, da es nun keine einzelnen Bundesländer mehr gibt, sondern Regionen.

                      Fix folgt asap ;)

                      *EDIT* ...und großer Voodoo, sie haben nochmals umgestellt. Es geht wieder unter den alten URLs. Mal sehen ob das dann schon die neue Version war die dann ggf. demnächst kommt, ein Versehen, ...

                      LG SBorg ( SBorg auf GitHub)
                      Projekte: Lebensmittelwarnung.de | WLAN-Wetterstation | PimpMyStation

                      ch90045C 1 Antwort Letzte Antwort
                      2
                      • SBorgS SBorg

                        Wie man aktuell im Eingangspost sehen kann... :(

                        Der DWD hat seine Struktur heute gegen 11:30 Uhr geändert und die Regional-Bilder und den Radarfilm etwas umstrukturiert. Ich muss das Skript anpassen, da es nicht nur mit einer einfachen Änderungen der URL getan ist, da es nun keine einzelnen Bundesländer mehr gibt, sondern Regionen.

                        Fix folgt asap ;)

                        *EDIT* ...und großer Voodoo, sie haben nochmals umgestellt. Es geht wieder unter den alten URLs. Mal sehen ob das dann schon die neue Version war die dann ggf. demnächst kommt, ein Versehen, ...

                        ch90045C Offline
                        ch90045C Offline
                        ch90045
                        schrieb am zuletzt editiert von ch90045
                        #40

                        @sborg Ich kriege es leider nicht gebacken .... JS läuft:

                        58c53c65-6e64-4f76-ab11-470bbbc5e029-image.png

                        Html widget im VIS gewählt:

                        c5c5e9dd-76ec-4b2e-a899-dfd3fbc7b75d-image.png

                        dargestellt wird aber nur:

                        06111ec8-c437-475c-91c2-7f496c61a483-image.png

                        Habe das mal "untersucht":

                        b00afa08-3321-4ebe-8522-0a526f765275-image.png

                        Undefined?!

                        Bin bisschen überfragt

                        SBorgS 1 Antwort Letzte Antwort
                        0
                        • ch90045C ch90045

                          @sborg Ich kriege es leider nicht gebacken .... JS läuft:

                          58c53c65-6e64-4f76-ab11-470bbbc5e029-image.png

                          Html widget im VIS gewählt:

                          c5c5e9dd-76ec-4b2e-a899-dfd3fbc7b75d-image.png

                          dargestellt wird aber nur:

                          06111ec8-c437-475c-91c2-7f496c61a483-image.png

                          Habe das mal "untersucht":

                          b00afa08-3321-4ebe-8522-0a526f765275-image.png

                          Undefined?!

                          Bin bisschen überfragt

                          SBorgS Offline
                          SBorgS Offline
                          SBorg
                          Forum Testing Most Active
                          schrieb am zuletzt editiert von
                          #41

                          @ch90045 Du kannst das nicht direkt als Bild per Widget einbinden ;)
                          Du musst bspw. das HTML-Widget nehmen und dort als "Inhalt" ein Binding eintragen.

                          <img src="{0_userdata.0.Wetter.RegenRadar.NRW_Film}"  /> 
                          

                          ...und wird dann auch nur in der Runtime (wegen des Bindings) komplett angezeigt.

                          LG SBorg ( SBorg auf GitHub)
                          Projekte: Lebensmittelwarnung.de | WLAN-Wetterstation | PimpMyStation

                          1 Antwort Letzte Antwort
                          0
                          • SBorgS Offline
                            SBorgS Offline
                            SBorg
                            Forum Testing Most Active
                            schrieb am zuletzt editiert von
                            #42

                            Kleines Mini-Update auf V0.2.0
                            Kein Update nötig, eigentlich nur für Neueinsteiger (und da auch nur für Foreca-Nutzer) interessant. Es müssen nicht mehr die GPS-Koordinaten von Hand ermittelt werden, sondern es können, sofern eingetragen, die im ioBroker hinterlegten genutzt werden.

                            let Foreca_GPS = "SYSTEM";                      /* GPS-Koordinaten für die das Bild geladen werden soll.
                                                                               Default: [SYSTEM] / =aus den Systemeinstellungen
                                                                               oder Ermittlung zB. unter https://www.laengengrad-breitengrad.de
                                                                               Achtung: Eingabe dann als "Breitengrad/Längengrad" [x.xx/y.yy]
                                                                               2 Nachkommastellen genügen idR.  */
                            

                            LG SBorg ( SBorg auf GitHub)
                            Projekte: Lebensmittelwarnung.de | WLAN-Wetterstation | PimpMyStation

                            1 Antwort Letzte Antwort
                            0
                            Antworten
                            • In einem neuen Thema antworten
                            Anmelden zum Antworten
                            • Älteste zuerst
                            • Neuste zuerst
                            • Meiste Stimmen


                            Support us

                            ioBroker
                            Community Adapters
                            Donate

                            908

                            Online

                            32.4k

                            Benutzer

                            81.5k

                            Themen

                            1.3m

                            Beiträge
                            Community
                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                            ioBroker Community 2014-2025
                            logo
                            • Anmelden

                            • Du hast noch kein Konto? Registrieren

                            • Anmelden oder registrieren, um zu suchen
                            • Erster Beitrag
                              Letzter Beitrag
                            0
                            • Home
                            • Aktuell
                            • Tags
                            • Ungelesen 0
                            • Kategorien
                            • Unreplied
                            • Beliebt
                            • GitHub
                            • Docu
                            • Hilfe