Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [gelöst] png-Bilder im mdw-Widget "Button Toggle"

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.1k

[gelöst] png-Bilder im mdw-Widget "Button Toggle"

Scheduled Pinned Locked Moved Visualisierung
5 Posts 2 Posters 406 Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • KlausStoertebekerK Offline
    KlausStoertebekerK Offline
    KlausStoertebeker
    wrote on last edited by KlausStoertebeker
    #1

    Hallo in's Forum,
    ich möchte unter VIS/VIS 2 eigene "png"-Bilder in die Widgets "Button Toggle"/"Button Toggle vertical" des "vis-materialdesign"-Adapters einfügen.
    Hintergrund ist, dass ich mir eine Fernbedienung für meinen Fernseher erstellen möchte, bei der die Tasten die Sender-Logos als Beschriftung haben sollen.
    Bisher konnte ich diese auch über die Eigenschaft "/Symbol/Bild" über den eingebauten Dateiauswahldialog auswählen. Und die Bildgröße konnte ich mit der Eigenschaft "/Symbol/Bildgröße" einstellen. Das Bild wurde anschließend so dargestellt, wie ich es mir vorgestellt habe.
    Seit neuestem geht das aber nicht mehr. Ich kann zwar eine "png"-Bild auswählen (wie beschrieben), aber wenn das Textfeld dann ausgefüllt ist, erhalte ich ein Auswahlmenü, aus dem ich dann nur die "mitgelieferten" Bilder des Adapters auswählen kann. Mein ausgewähltes Bild wird nicht mehr angezeigt.
    Ich weiß nicht mehr genau, wann das Problem bei mir aufgetreten ist. Ich kann nur sagen, dass es mir nach dem Update des "admin"-Adapters auf die Version 6.13.11 bewusst aufgefallen ist.
    Ich habe folgende visualisierungsrelevanten Adapterversionen installiert (repository "latest"):
    admin - 6.13.11
    vis - 1.5.4
    vis-2 - 2.9.8
    vis-keyboard - 0.1.2
    vis-materialdesign - 0.5.9
    vis-players - 0.1.6
    socketio - 6.6.0
    icons-mfd-svg - 1.2.0
    icons-open-icon-library-png - 0.1.3
    vis-2-widgets-energy - 0.3.9
    vis-2-widgets-gauges - 1.0.1
    vis-2-widgets-material - 1.3.17
    ws - 2.5.10
    web - 6.2.3
    Meine Frage ist nun: Wie kann ich wieder eigene "png"-Bilder in die Widgets "Button Toggle" und "Button Toggle vertical" einbinden?
    Viele Grüße und schoneinmal herzlichen Dank für die Hilfe
    "Klaus"

    ioBroker-Host: Raspberry Pi 5 (8GByte RAM) mit Halo8-KI-Hat, Argon ONE M.2-Gehäuse mit 256GByte PCIe-SSD

    sigi234S 1 Reply Last reply
    0
    • KlausStoertebekerK KlausStoertebeker

      Hallo in's Forum,
      ich möchte unter VIS/VIS 2 eigene "png"-Bilder in die Widgets "Button Toggle"/"Button Toggle vertical" des "vis-materialdesign"-Adapters einfügen.
      Hintergrund ist, dass ich mir eine Fernbedienung für meinen Fernseher erstellen möchte, bei der die Tasten die Sender-Logos als Beschriftung haben sollen.
      Bisher konnte ich diese auch über die Eigenschaft "/Symbol/Bild" über den eingebauten Dateiauswahldialog auswählen. Und die Bildgröße konnte ich mit der Eigenschaft "/Symbol/Bildgröße" einstellen. Das Bild wurde anschließend so dargestellt, wie ich es mir vorgestellt habe.
      Seit neuestem geht das aber nicht mehr. Ich kann zwar eine "png"-Bild auswählen (wie beschrieben), aber wenn das Textfeld dann ausgefüllt ist, erhalte ich ein Auswahlmenü, aus dem ich dann nur die "mitgelieferten" Bilder des Adapters auswählen kann. Mein ausgewähltes Bild wird nicht mehr angezeigt.
      Ich weiß nicht mehr genau, wann das Problem bei mir aufgetreten ist. Ich kann nur sagen, dass es mir nach dem Update des "admin"-Adapters auf die Version 6.13.11 bewusst aufgefallen ist.
      Ich habe folgende visualisierungsrelevanten Adapterversionen installiert (repository "latest"):
      admin - 6.13.11
      vis - 1.5.4
      vis-2 - 2.9.8
      vis-keyboard - 0.1.2
      vis-materialdesign - 0.5.9
      vis-players - 0.1.6
      socketio - 6.6.0
      icons-mfd-svg - 1.2.0
      icons-open-icon-library-png - 0.1.3
      vis-2-widgets-energy - 0.3.9
      vis-2-widgets-gauges - 1.0.1
      vis-2-widgets-material - 1.3.17
      ws - 2.5.10
      web - 6.2.3
      Meine Frage ist nun: Wie kann ich wieder eigene "png"-Bilder in die Widgets "Button Toggle" und "Button Toggle vertical" einbinden?
      Viele Grüße und schoneinmal herzlichen Dank für die Hilfe
      "Klaus"

      sigi234S Online
      sigi234S Online
      sigi234
      Forum Testing Most Active
      wrote on last edited by
      #2

      @klausstoertebeker
      Geht es mit vis1 auch nicht ?
      In Vis2 wird materialdesign noch nicht unterstützt.

      Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
      Immer Daten sichern!

      KlausStoertebekerK 1 Reply Last reply
      0
      • sigi234S sigi234

        @klausstoertebeker
        Geht es mit vis1 auch nicht ?
        In Vis2 wird materialdesign noch nicht unterstützt.

        KlausStoertebekerK Offline
        KlausStoertebekerK Offline
        KlausStoertebeker
        wrote on last edited by
        #3

        Moin moin sigi234,
        nein, in VIS 1 funktioniert es NICHT MEHR - komischer Weise. Bis vor ein paar Tagen konnte ich zum Beispiel die Sender-Logos als "png"-Bild einfügen.
        Wenn VIS2 noch kein Material Design unterstützt, kann ich das verstehen ;-) Aber bei VIS 1? Zumal es ja in VIS 1 funktioniert hat...

        ioBroker-Host: Raspberry Pi 5 (8GByte RAM) mit Halo8-KI-Hat, Argon ONE M.2-Gehäuse mit 256GByte PCIe-SSD

        sigi234S 1 Reply Last reply
        0
        • KlausStoertebekerK KlausStoertebeker

          Moin moin sigi234,
          nein, in VIS 1 funktioniert es NICHT MEHR - komischer Weise. Bis vor ein paar Tagen konnte ich zum Beispiel die Sender-Logos als "png"-Bild einfügen.
          Wenn VIS2 noch kein Material Design unterstützt, kann ich das verstehen ;-) Aber bei VIS 1? Zumal es ja in VIS 1 funktioniert hat...

          sigi234S Online
          sigi234S Online
          sigi234
          Forum Testing Most Active
          wrote on last edited by
          #4

          @klausstoertebeker
          Stell das Widget mal rein.

          Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
          Immer Daten sichern!

          KlausStoertebekerK 1 Reply Last reply
          0
          • sigi234S sigi234

            @klausstoertebeker
            Stell das Widget mal rein.

            KlausStoertebekerK Offline
            KlausStoertebekerK Offline
            KlausStoertebeker
            wrote on last edited by KlausStoertebeker
            #5

            @sigi234
            Moin moin und entschuldigung für die lange Wartezeit.
            Ich habe ein wenig mit dem Widget "experimentiert" und herausgefunden, dass man das Widget MANUELL nachbearbeiten muss (könnte auch für andere Widgets des "materialdesign"-Adapters gelten). Interessant ist hier, dass man auch die Icons, die das System zur Verfügung stellt, manuell eintragen muss. Aber Du hast ja schon angemerkt, dass das "materialdesign" noch nicht unterstützt wird. Ich habe Folgendes herausgefunden:
            Wenn man einen "Button Toggle vertical" mit Icon erstellt, wird IMMER das Icon "checkbox-marked" genommen, egal, welches man über den entsprechenden Dialog auswählt. Im exportierten Widget sieht dass dann so aus:

            "image": "checkbox-marked",
            "g_icon": true,
            

            Möchte man jetzt eines von den "eingebauten" Icons verwenden (zum Beispiel das "Power"-Symbol), muss man den Code wie folgt ändern:

            "image": "power",
            "g_icon": true,
            

            Wenn man jetzt ein eigenes png-Bild nutzen möchte, muss man dann den KOMPLETTEN Pfad des png-Bildes (ab der ioBroker-root-Ebene!) angeben, angefgeführt von zwei Punkten. Außerdem muss das Attribut "g_icon" auf "false" gesetzt werden:

            "image": "../pfad/zum/png-Bild.png",
            "g_icon": false,
            

            Ärgerlich ist hier nur, dass die Änderungen nur so lange Bestand haben, bis eine neue Änderung an dem Widget durchgeführt wird.
            Ich habe daher die Seite exportiert, in eine Textdatei gepackt und gespeichert, nachdem ich alle Widgets plaziert hatte, und habe die Änderungen, wie beschrieben, in der Textdatei durchgeführt. Anschließen habe ich dann die komplette Seite importiert (ACHTUNG: vorher ALLE Widgets Löschen, sonst hat man die doppelt.

            ioBroker-Host: Raspberry Pi 5 (8GByte RAM) mit Halo8-KI-Hat, Argon ONE M.2-Gehäuse mit 256GByte PCIe-SSD

            1 Reply Last reply
            1
            Reply
            • Reply as topic
            Log in to reply
            • Oldest to Newest
            • Newest to Oldest
            • Most Votes


            Support us

            ioBroker
            Community Adapters
            Donate

            994

            Online

            32.4k

            Users

            81.5k

            Topics

            1.3m

            Posts
            Community
            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
            ioBroker Community 2014-2025
            logo
            • Login

            • Don't have an account? Register

            • Login or register to search.
            • First post
              Last post
            0
            • Home
            • Recent
            • Tags
            • Unread 0
            • Categories
            • Unreplied
            • Popular
            • GitHub
            • Docu
            • Hilfe