ioBroker VIS – Image-Widget

In diesem Artikel zeige ich Dir wie Du das Image-Widget in Deiner Visualisierung verwenden kannst. Mit dem Image-Widget können eigene oder externe Bilddateien in die Visualisierung eingebunden werden. So können mit dem Widget z.B. Bilder von Wohnräumen, Geräten oder sonstiges in die Visualisierung eingefügt werden. Im ersten Schritt ziehen wir uns daher das Image-Widget auf unsere View und passen die Größe und Position entsprechend an.

 

Im nächsten Schritt wollen wir ein eigenes Bild für die Visualisierung verwenden. Im ersten Schritt markieren wir daher das Image-Widget auf der View und klicken im Bereich Allgemein auf die Schaltfläche „Bild auswählen“.

 

Jetzt öffnet sich der Datei Manager. Wir müssen nun die eigene Datei in den ioBroker hochladen. Dazu klicken wir im Datei Manager auf den Menü-Punkt „Upload“.

 

In das nachfolgende Fenster können wir entweder per Drag&Drop (Google Chrome) oder per Klick das Bild auswählen und hochladen.

 

Das hochgeladene Bild sehen wir jetzt im Datei Manager. Mit einem Klick auf die Bild wird das Bild für das markierte Image-Widget übernommen.

 

Alternativ kann als Quelle auch eine externe Quelle eines anderen Servers eingefügt werden. Hierzu einfach die URL der Bilddatei kopieren und in das Feld Quelle einfügen.

Das Image-Widget verfügt neben der Quelle noch über weitere Einstellungsmöglichkeiten.

  • Updatezeit (ms)
    Aktualisierungsintervall der Quelle
  • Kein Sandkasten
    Diese Einstellung habe ich nicht aktiviert.
  • Update bei Aufwachen / Viewechsel
    Mit dieser Einstellung wird das Bild beim Aufwachen oder beim Wechseln der View nochmals neu geladen.
  • Scroll X und Scroll Y aktivieren
  • Kein Rahmen darstellen

 

Auf diesem Weg lassen sich z.B. auch externe Webcam-Bilder in die eigene Visualisierung einbinden. Ich hoffe euch gefällt dieser Artikel. Über Kommentare unterhalb des Artikels oder per E-Mail freue ich mich wie immer ?

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.

5 Gedanken zu „ioBroker VIS – Image-Widget

  • 2. Juli 2018 um 17:24
    Permalink

    Hallo,

    ich habe ein Problem mit der Einbindung von externen Grafiken. Ich würde gerne ein Snapshot Bild meiner IP-Cam einbinden. Gebe ich die URL dort ein, sehe ich das Bild auch sofort. Ich sehe es auch, wenn ich über den PC die VIS aufrufe. Versuche ich es aber über die VIS App, sehe ich dort nichts.

    Hast du eine Lösung?

    Antwort
    • 3. Juli 2018 um 17:52
      Permalink

      Hallo,
      ich nutze die VIS-App nicht, von daher kann ich Dir da leider nicht helfen. Warum nutzt Du nicht den Browser auf dem Smartphone/Tablet?

      Antwort
  • 25. November 2021 um 17:49
    Permalink

    Hallo,
    ich möchte gerne JPG-Bilder von meinem 2. Raspberry PI3 im VIS des PI4 mit IOBroker anzeigen.
    Wie oben beschrieben klappt es aber leider nicht…

    Ich habe einige Schreibweisen probiert; mit und ohne http, bzw. https, ohne Erfolg.

    Z.B.: http://192.168.178.197/home/pi/Bilder/Aussentemp.jpg

    Bitte um Hilfestellung

    Der Dateimanager zeigt nur das Verzeichnis des VIS wenn ich das richtig verstehe…

    Danke im Voraus

    Gruss

    FH

    Antwort
    • 25. November 2021 um 18:06
      Permalink

      Hallo Frank,

      wird das Bild denn so im Web-Browser dargestellt?
      Wenn die URL erreichbar ist, dann wird das Bild auch in der Visualisierung dargestellt.

      LG Matthias

      Antwort
  • 24. Mai 2022 um 15:20
    Permalink

    Hi,
    soweit, so einfach. Aber wie kann ich die URL aus einem Datenknoten auslesen und dort das icon aufrufen.
    Ich habe einen Knotenpunkt „mqtt.0.Wetter_0.Prognose.icon“. Dort steht jeweils der Link zum aktuell gültigen Icon drin, also z.B. „https://icons.wxug.com/i/c/v4/11.svg“. Dieses ändert sich natürlich.
    Wenn ich nun aber in VIS beim Image Widget als Quelle den Knotenpunkt „mqtt.0.Wetter_0.Prognose.icon“ angebe, dann wird das icon nicht angezeigt.

    Wie funktioniert das denn?

    Grüße
    Sam

    Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.