Alternatives Wetter-Widget

Für unser smartes Zuhause habe ich ein alternatives Wetter-Widget gesucht, welches ich noch besser und flexibler an meinen Anwendungsfall anpassen kann. Dabei bin ich auf das Widget von www.daswetter.com gestoßen. Das Wetter-Widget ist zwar eigentlich für die Nutzung in Webseiten gedacht, lässt sich natürlich aber auch in VIS integrieren. In diesem Artikel möchte ich daher die Konfiguration sowie Integration in die eigene VIS Oberfläche zeigen.

Im ersten Schritt gehen wir auf die Wetter-Widget Seite

Über die Schritte 1-5 kann das Wetter-Widget entsprechend nach den eigenen Wünschen und Bedürfnissen konfiguriert werden. Im ersten Schritt wird der eigene Ort über die Auswahl des Landes und Bundesland ausgewählt. Falls der Ort nicht in der Liste eingetragen ist, einfach den am nächsten gelegenen Ort wählen. Optional kann dann noch die Überschrift angepasst werden.

Im zweiten Schritt wird das Format ausgewählt mit dem das Wetter-Widget angezeigt werden soll. Dabei können die Anzahl der dargestellten Tage für die Vorhersage sowie die Ausrichtung ausgewählt werden.

Im dritten Schritt kann die Auswahl des Inhaltes sowie die Skala der Temperatur (Grad Celsius oder Fahrenheit) ausgewählt werden.

Nach dem die Größe sowie die Inhalte des Widget definiert wurden, können abschließend noch Einstellungen zum Aussehen der Icons sowie Farb-Einstellungen getroffen werden. Hier kann das Widget wirklich perfekt an das eigene Design der VIS Oberfläche angepasst werden.

 

Das fertige Widget sieht nun mit meinem Einstellungen folgendermaßen aus:



 

Im nächsten Schritt muss nun hier die E-Mail Adresse eingegeben werden. Laut dem Anbieter des Widget wird diese nur erfasst, um bei Änderungen des Widgets (zusätzliche Einstellungen oder neuer Aufruf-Code) darüber zu informieren.

 

Nach der Eingabe des E-Mail und Bestätigung der Schaltfläche „Code generieren“ wird nun ein Script-Code generiert, welchen wir per Copy&Paste in VIS weiterverwenden werden.

 

Im nächsten Schritt wechseln wir nun in die ioBroker VIS Konfigurationsoberfläche und wählen die View aus, in dem wir das Wetter anzeigen möchten.

Auf der linken Seite im Bereich „Widget einfügen“ wählen wir nun das statische HTML Widget und fügen dies in die View ein.

 

Im nächsten Schritt fügen wir den Code von der Webseite in den Bereich Allgemein – HTML ein. Nach dem Einfügen des Codes wird nun das Widget geladen und in in dem HTML-Widget angezeigt.

 

Über diese Vorgehensweise können natürlich auch andere HTML-Inhalte in Views geladen werden.

 

 

Matthias Korte

Hauptberuflich Software-Entwickler und seit einigen Jahren Smart-Home Fan. Angefangen hat alles mit einem RaspberryMatic und einer schaltbaren Steckdose. Mittlerweile habe ich einige Steckdosen, Sensoren, und Thermostate sowie ioBroker zur Visualisierung im Einsatz.

14 Gedanken zu „Alternatives Wetter-Widget

  • 8. Februar 2018 um 15:45
    Permalink

    Hallo, leider kann ich keinen Ort auswählen. Wenn ich die Seite Starte, ist Berlin ==> Berlin voreingestellt. Ändere ich dann das Bundesland auf NRW, ändert sich aber die DropDown-Liste für die Stadt nicht.

    Habe es mit Safari, Firefox und Chrome probiert. Es geht nicht. Irgendeinen Trick mit dem ich meine Stadt auswählen kann?

    Antwort
    • 8. Februar 2018 um 15:52
      Permalink

      Hallo Frank, ich habe das gerade nochmals ausprobiert, geht bei mir auch nicht. In der Browser-Konsole erscheint ein JSON-Fehler. Ich habe den Anbieter kontaktiert, sobald es wieder funktioniert melde ich mich hier wieder 🙂

      Antwort
  • 11. Februar 2018 um 20:01
    Permalink

    Hallo zusammen,

    endlich mal eine super Anleitung wie man das Wetter in VIS integrieren kann. Vielen Dank. Werde das in mein VIS rein kopieren.
    Bei dem Ort hatte ich auch Probleme. Gebt erstmal auf der normalen Wetter Seite Euren Ort in dem Suchfeld ein und dann, wenn das Wetter in Eurem Ort angezeigt wird weiter bis fast ganz nach unten auf der Seite auf den Reiter Widget erzeugen.
    Bei „das Wetterauf Ihrer Internetseite“. Dann öffnet sich dei gleiche Seite die oben hier in der Beschreibung steht, aber direkt mit Eurem Ort vorkonfiguriert.

    Gruß
    Bastian

    Antwort
    • 12. Februar 2018 um 7:01
      Permalink

      Hallo, super, danke für den Tipp! So kann man das Problem umgehen 🙂

      Antwort
  • 6. März 2018 um 17:32
    Permalink

    Hallo,
    leider öffnet sich nach der Anleitung bei mir ein Browserfenster mit dem Wetterwidget und ich komme nicht mehr auf die Viewseite. Wo liegt der Fehler?

    Antwort
    • 6. März 2018 um 17:57
      Permalink

      Hallo Uwe, hast Du dir zunächst den Code für das Widget erstellt und diesen dann in das HTML-Widget kopiert? Wann öffnet sich dann eine neue Browser-Seite?

      Antwort
      • 6. März 2018 um 20:58
        Permalink

        Hallo, sobald ich den Code in das Html Feld eingebe wechselt die Anzeige auf das Wetterwidget links oben in der Ecke. Die IP Adresse ist nach wie vor die vom view. Ich komme von dort auch nicht wieder raus.

        Antwort
  • 16. Dezember 2018 um 20:51
    Permalink

    Leider wird bei mir nix angezeigt. Hab den generierten HTML-Code in das HTML-Element eingetragen. Wenn ich die Vis anzeige bekomme ich ein weißes Rechteck.

    Antwort
    • 27. Dezember 2018 um 11:07
      Permalink

      Merkwürdig, ich habe es gerade nochmals gecheckt, läuft problemlos. Überprüfe doch bitte einmal die Farb-Einstellungen, liegts es evtl. daran? Alternativ mal den Inhalt in eine lokale HTML-Seite einbinden, geht es dann?

      Antwort
  • 4. Januar 2019 um 19:28
    Permalink

    Moin moin,

    super, Danke für das tolle Wetter-Widget.
    Besteht vielleicht die Möglichkeit die Grösse dynamisch anpassbar zu gestalten.
    Leider werden im Alter die Augen nicht besser und auf dem Tablet ist das – für mich- einfach zu klein.

    Vielen Dank im Voraus, Stephan

    Antwort
    • 5. Januar 2019 um 12:12
      Permalink

      Moin Stephan,

      nein dynamisch leider meines Wissens nach nicht. Ich würde im Zweifel lieber eine zweiten View für das Tablet erstellen. Ich habe meine VIS auch für Mobile und Tablet-View erstellt. Ist zwar mehr Arbeit, lohnt sich aber!

      Viele Grüße,
      Matthias

      Antwort
  • 4. März 2019 um 17:00
    Permalink

    Hallo Frank,
    Eine super Erklärung hinsichtlich Wetter.
    Nach Deiner Anleitung prima geklappt.
    Nur, wie kann ich unter Stil die Icons wechseln.
    Ist mir nicht gelungen.
    Gruß Michael

    Antwort
    • 4. März 2019 um 17:05
      Permalink

      Hallo Michael,

      Du musst nur in der 4. Box den entsprechenden Icon-Style auswählen und dann nochmals generieren lassen. Dann sollte das funktionieren.

      Grüße,
      Matthias

      Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.