ioBroker HABPanel – Teil 10 – Mit dem Frame-Widget eine VIS-View einbinden

In dieser Artikelreihe zeige ich Dir eine weitere Visualierungsoberfläche für ioBroker.  

Im 10. Teil der Artikelreihe verwenden wir das Frame-Widget zur Einbindung einer VIS-View. Evtl. nutzt Du ein Widget in VIS, für das es keinen Ersatz in HABPanel gibt. Für dieses Problem gibt es eine einfache Lösung, denn wir können über das Frame-Widget Webseiten, also auch eine bestehende VIS-View einbinden. Für die separate Darstellung der View habe ich eine extra View in VIS angelegt, welche ich dann auch vom Style her an HABPanel anpassen kann.

Im folgenden Screenshot siehst Du die betroffene View, welche ich in HAPPanel integrieren möchte.

 

 

In der Ausführung der View kopieren wir uns die URL der VIS View in die Zwischenablagen, diese benötigen wir später zur Konfiguration des Widgets.

 

 

Im ersten Schritt habe ich dazu ein neues Dashboard erstellt, Du kannst das Frame Widget aber natürlich auch auf einem bestehenden Dashboard einfügen.

 

Für den Artikel vergebe ich nun hier den Namen „VIS-Beispiel“ und speichere das Dashboard mit der Schaltfläche „OK“.

 

Nun wechseln wir im Dashboard in den Bearbeitungsmodus.

 

Im Menü unter „Add Widget“ wählen wir das Frame-Widget aus.

 

Nach dem Einfügen des Widgets öffnen wir den Bearbeitungsmodus des Widget.

 

In den Widget Einstellungen können wir nun einen Namen, die URL Source sowie die eigentliche URL definieren. Die URL kann entweder statisch „Static URL“, oder per „String-Item“ definiert werden. Somit kann die URL auch über einen Datenpunkt gesteuert werden. Zudem kann hier noch ein Aktualisierungsintervall (Sekunden) eingestellt werden. Dieses Intervall benötigen wir für VIS-Views aber nicht, da diese sich automatisch Client-seitig aktualisieren.

 

 

Nach dem Speichern des Widgets wird nun die View folgendermaßen dargestellt. Der einzige Nachteil ist die Ladezeit der View.

 

 

Ich hoffe Dir gefällt der Artikel. Ich freue mich über Deinen Kommentar 🙂

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.

3 Gedanken zu „ioBroker HABPanel – Teil 10 – Mit dem Frame-Widget eine VIS-View einbinden

  • 24. März 2019 um 21:08
    Permalink

    Ist zufällig eine Folge in Planung die erklärt wie man eine Wetteranzeige umsetzt? Ich tue mich etwas schwer damit und würde mich freuen wenn du dich der Sache annehmen würdest. Danke für die bisherigen Folgen zum Thema HABPanel. Haben mir schon sehr weitergeholfen.

    Gruß U.Palme

    Antwort
    • 27. März 2019 um 13:13
      Permalink

      Ich hab den Adapter von „das wetter“ installiert und anschliessend ein eigens Widget erstellt:

      .myWeatherstyle {
      border-collapse:collapse;
      border-spacing:0;
      font-family: sans-serif;
      }
      .myWeatherstyle td{
      font-size:12px;
      padding:0px 0px;
      overflow:hidden;
      word-break:normal

      }
      .th1{
      font-size:12px;
      font-weight:normal;
      padding:0px 0px;
      overflow:hidden;
      word-break:normal
      }

      .th2{
      font-size:12px;
      font-weight:normal;
      overflow:hidden;
      word-break:normal;
      padding:0px 0px
      }

      {{itemValue(config.string_item_Day1)}}
      {{itemValue(config.string_item_Symbol1)}}
      {{itemValue(config.string_item_maxTemp1)}}°C / {{itemValue(config.string_item_minTemp1)}}°C
      {{itemValue(config.string_item_Wind1)}}

      {{itemValue(config.string_item_Day2)}}
      {{itemValue(config.string_item_Symbol2)}}
      {{itemValue(config.string_item_maxTemp2)}}°C / {{itemValue(config.string_item_minTemp2)}}°C
      {{itemValue(config.string_item_Wind2)}}

      {{itemValue(config.string_item_Day3)}}
      {{itemValue(config.string_item_Symbol3)}}
      {{itemValue(config.string_item_maxTemp3)}}°C / {{itemValue(config.string_item_minTemp3)}}°C
      {{itemValue(config.string_item_Wind3)}}

      <!–

      {{itemValue(config.string_item_Day4)}}
      {{itemValue(config.string_item_Symbol4)}}
      {{itemValue(config.string_item_maxTemp4)}}°C / {{itemValue(config.string_item_minTemp4)}}°C
      {{itemValue(config.string_item_Wind4)}}

      –>

      Antwort
      • 27. März 2019 um 13:38
        Permalink

        Top! Ich bin derzeit auch dabei ein eigenes Widget für das Wetter zu implementieren 🙂

        Antwort

Schreibe einen Kommentar

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

Ich akzeptiere