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. Visualisierung
  4. Material Design Widgets: Progress Widget

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    15
    1
    641

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    630

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    1.9k

Material Design Widgets: Progress Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
60 Beiträge 16 Kommentatoren 7.0k Aufrufe 15 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.
  • K Kusi

    @scrounger sagte in Material Design Widgets: Progress Widget:

    Benutzerdefinierte Beschriftung

    5b7f82ae-7905-4143-a92d-b757fededee8-image.png
    klappt schon langsam... jetzt nur noch die Hürde, damit der Text "Speicher-Auslastung" linksbündig angezeigt wird.

    Ich stelle soeben meine sämtliche vis auf die Material Design Widgets um, die sind wirklich sehr toll... Danke vielmals für die tolle Arbeit!

    ScroungerS Offline
    ScroungerS Offline
    Scrounger
    Developer
    schrieb am zuletzt editiert von
    #32

    @kusi
    Ich glaub da gibt's ne Option im Editor für, sonst halt per CSS überschreiben

    K 2 Antworten Letzte Antwort
    0
    • ScroungerS Scrounger

      @kusi
      Ich glaub da gibt's ne Option im Editor für, sonst halt per CSS überschreiben

      K Offline
      K Offline
      Kusi
      schrieb am zuletzt editiert von Kusi
      #33

      @scrounger
      Linksbündig funktioniert einwandfrei...
      7f86c8d7-4561-4653-bd58-d0c3f12a59a2-image.png

      <td align"left">Speicher-Auslastung {proxmox.0.node_Proxmox.memory.used_lev;round(0)} %</td>
      

      Gerne würde ich aber nun den Wert auf der rechten Seite darstellen lassen, dies funktioniert allerdings (noch?) nicht, da er sich gemäss. meiner Recherche am breitesten Text orientiert und nicht der Widget-Breite.
      da5924f0-831f-4e27-bc28-5cc1d1c4cc01-image.png

      <td align="left">CPU-Belastung</td> <td align="right">{proxmox.0.node_Proxmox.cpu;round(0)} %</td>
      

      Hat man nämlich mehrere Wert übereinander, dann wird der Abstand breiter:
      3ffe8da6-99d8-42ce-93a4-0d42c42b3e76-image.png

      <table>
        <tr>
          <td align="left">CPU-Belastung</td>      
          <td><b>{proxmox.0.node_Proxmox.cpu} %</b></td>
        </tr>   
          <tr>
          <td align="left">Speicher-Auslastung von Intel Nuc</td>      
          <td><b>{proxmox.0.node_Proxmox.memory.used_lev} %</b></td>
        </tr>   
      </table>
      
      liv-in-skyL 2 Antworten Letzte Antwort
      0
      • K Kusi

        @scrounger
        Linksbündig funktioniert einwandfrei...
        7f86c8d7-4561-4653-bd58-d0c3f12a59a2-image.png

        <td align"left">Speicher-Auslastung {proxmox.0.node_Proxmox.memory.used_lev;round(0)} %</td>
        

        Gerne würde ich aber nun den Wert auf der rechten Seite darstellen lassen, dies funktioniert allerdings (noch?) nicht, da er sich gemäss. meiner Recherche am breitesten Text orientiert und nicht der Widget-Breite.
        da5924f0-831f-4e27-bc28-5cc1d1c4cc01-image.png

        <td align="left">CPU-Belastung</td> <td align="right">{proxmox.0.node_Proxmox.cpu;round(0)} %</td>
        

        Hat man nämlich mehrere Wert übereinander, dann wird der Abstand breiter:
        3ffe8da6-99d8-42ce-93a4-0d42c42b3e76-image.png

        <table>
          <tr>
            <td align="left">CPU-Belastung</td>      
            <td><b>{proxmox.0.node_Proxmox.cpu} %</b></td>
          </tr>   
            <tr>
            <td align="left">Speicher-Auslastung von Intel Nuc</td>      
            <td><b>{proxmox.0.node_Proxmox.memory.used_lev} %</b></td>
          </tr>   
        </table>
        
        liv-in-skyL Offline
        liv-in-skyL Offline
        liv-in-sky
        schrieb am zuletzt editiert von
        #34

        @kusi

        td brauch table und tr

        du kannst auch einfach das leerzeichen

        &emsp;
        

        missbrauchen

        beispiel:

        <table><tr><td align="left">CPU-Belastung</td> <td align="right">&emsp;&emsp;  {...} %</td> </tr></table>
        

        ich glaube, du mußt um das reponsive zu machen mit css arbeiten
        oder einfach:

        CPU-Belastung &emsp;&emsp; {..} %
        

        nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

        K 2 Antworten Letzte Antwort
        0
        • K Kusi

          @scrounger
          Linksbündig funktioniert einwandfrei...
          7f86c8d7-4561-4653-bd58-d0c3f12a59a2-image.png

          <td align"left">Speicher-Auslastung {proxmox.0.node_Proxmox.memory.used_lev;round(0)} %</td>
          

          Gerne würde ich aber nun den Wert auf der rechten Seite darstellen lassen, dies funktioniert allerdings (noch?) nicht, da er sich gemäss. meiner Recherche am breitesten Text orientiert und nicht der Widget-Breite.
          da5924f0-831f-4e27-bc28-5cc1d1c4cc01-image.png

          <td align="left">CPU-Belastung</td> <td align="right">{proxmox.0.node_Proxmox.cpu;round(0)} %</td>
          

          Hat man nämlich mehrere Wert übereinander, dann wird der Abstand breiter:
          3ffe8da6-99d8-42ce-93a4-0d42c42b3e76-image.png

          <table>
            <tr>
              <td align="left">CPU-Belastung</td>      
              <td><b>{proxmox.0.node_Proxmox.cpu} %</b></td>
            </tr>   
              <tr>
              <td align="left">Speicher-Auslastung von Intel Nuc</td>      
              <td><b>{proxmox.0.node_Proxmox.memory.used_lev} %</b></td>
            </tr>   
          </table>
          
          liv-in-skyL Offline
          liv-in-skyL Offline
          liv-in-sky
          schrieb am zuletzt editiert von
          #35

          @kusi oh -hast ja eh schon die lösung gfunden

          nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

          1 Antwort Letzte Antwort
          0
          • liv-in-skyL liv-in-sky

            @kusi

            td brauch table und tr

            du kannst auch einfach das leerzeichen

            &emsp;
            

            missbrauchen

            beispiel:

            <table><tr><td align="left">CPU-Belastung</td> <td align="right">&emsp;&emsp;  {...} %</td> </tr></table>
            

            ich glaube, du mußt um das reponsive zu machen mit css arbeiten
            oder einfach:

            CPU-Belastung &emsp;&emsp; {..} %
            
            K Offline
            K Offline
            Kusi
            schrieb am zuletzt editiert von Kusi
            #36

            @liv-in-sky sagte in Material Design Widgets: Progress Widget:

            mit css arbeiten

            damit kenne ich mich überhaupt nicht aus...

            1c8464a7-e7a1-4a70-9547-e5f42804bf09-image.png
            damit lässt sich der Text nach links verschieben. Diesen Menüpunkt habe ich erst jetzt gesehen.

            1 Antwort Letzte Antwort
            0
            • liv-in-skyL liv-in-sky

              @kusi

              td brauch table und tr

              du kannst auch einfach das leerzeichen

              &emsp;
              

              missbrauchen

              beispiel:

              <table><tr><td align="left">CPU-Belastung</td> <td align="right">&emsp;&emsp;  {...} %</td> </tr></table>
              

              ich glaube, du mußt um das reponsive zu machen mit css arbeiten
              oder einfach:

              CPU-Belastung &emsp;&emsp; {..} %
              
              K Offline
              K Offline
              Kusi
              schrieb am zuletzt editiert von
              #37

              @liv-in-sky sagte in Material Design Widgets: Progress Widget:

              du kannst auch einfach das leerzeichen
               

              missbrauchen

              Gute Idee...
              8c049ff7-5343-4270-baf0-754840fd8e6d-image.png

              CPU-Auslastung &emsp;&emsp;&emsp;&emsp;&emsp;&emsp; {proxmox.0.node_Proxmox.cpu;round(0)} %
              
              ScroungerS 1 Antwort Letzte Antwort
              0
              • K Kusi

                @liv-in-sky sagte in Material Design Widgets: Progress Widget:

                du kannst auch einfach das leerzeichen
                 

                missbrauchen

                Gute Idee...
                8c049ff7-5343-4270-baf0-754840fd8e6d-image.png

                CPU-Auslastung &emsp;&emsp;&emsp;&emsp;&emsp;&emsp; {proxmox.0.node_Proxmox.cpu;round(0)} %
                
                ScroungerS Offline
                ScroungerS Offline
                Scrounger
                Developer
                schrieb am zuletzt editiert von
                #38

                @kusi
                Du brauchst übrigens kein Binding verwenden. Mit [#value] wir der Wert bzw mit [#percent] Prozent im benutzdefinierten Feld übernommen.
                Möglichst auf bindings verzichten vorallem wenn der Wert sich im Sekundentakt ändert - das führt zu Performance Problemen

                1 Antwort Letzte Antwort
                0
                • ScroungerS Scrounger

                  @kusi
                  Ich glaub da gibt's ne Option im Editor für, sonst halt per CSS überschreiben

                  K Offline
                  K Offline
                  Kusi
                  schrieb am zuletzt editiert von Kusi
                  #39

                  @scrounger sagte in Material Design Widgets: Progress Widget:

                  Mit [#value] wir der Wert bzw mit [#percent] Prozent im benutzdefinierten Feld

                  Damit funktioniert es einwandfrei... Vielen Dank für den Tipp.

                  1 Antwort Letzte Antwort
                  0
                  • ScroungerS Scrounger

                    Progress Widget | Progress Circular Widget

                    progress.gif

                    Sämtliche Fragen zu Einstellungen (VIS Editor, Bedienung, JSON strings, etc.) des Widgets hier stellen

                    Das ist sicher besser für die Übersichtlichkeit und Dokumentation.

                    • Dokumentation Progress
                    • Dokumentation Circular
                    • Online Beispiel

                    Themen zu anderen Widgets findest du hier!

                    N Offline
                    N Offline
                    n811e
                    schrieb am zuletzt editiert von
                    #40

                    @scrounger

                    Ich habe eine Verständnis Frage zu diesem Widget.

                    Ich möchte gern, den Akkustand eines Gerätes per Datenpunkt angezeigt bekommen.

                    über 85% = Grün
                    84% bis 20% Gelb
                    19& bis 0% Rot

                    Ich habe etliche Einstellungen versucht, komme aber mit der Reihenfolge einfach nicht klar.

                    Könntest Du mir das evtl. erklären?

                    Bild_2022-06-26_203753191.png

                    Weiterhin, bekomme ich die Benutzerdefinierte Beschriftung nicht angezeigt.
                    Woran könnte das liegen?

                    DJMarc75D 1 Antwort Letzte Antwort
                    0
                    • N n811e

                      @scrounger

                      Ich habe eine Verständnis Frage zu diesem Widget.

                      Ich möchte gern, den Akkustand eines Gerätes per Datenpunkt angezeigt bekommen.

                      über 85% = Grün
                      84% bis 20% Gelb
                      19& bis 0% Rot

                      Ich habe etliche Einstellungen versucht, komme aber mit der Reihenfolge einfach nicht klar.

                      Könntest Du mir das evtl. erklären?

                      Bild_2022-06-26_203753191.png

                      Weiterhin, bekomme ich die Benutzerdefinierte Beschriftung nicht angezeigt.
                      Woran könnte das liegen?

                      DJMarc75D Offline
                      DJMarc75D Offline
                      DJMarc75
                      schrieb am zuletzt editiert von
                      #41

                      @n811e sagte in Material Design Widgets: Progress Widget:

                      Ich habe etliche Einstellungen versucht, komme aber mit der Reihenfolge einfach nicht klar

                      erste Farbe: ROT
                      zweite Farbe: GELB
                      dritte Farbe: GRÜN

                      Bei der Beschriftung wählst Du Custom (benutzerdefiniert) aus

                      ist halt englisch bei mir:

                      Screenshot 2022-06-27 080628.png

                      Lehrling seit 1975 !!!
                      Beitrag geholfen ? dann gerne ein upvote rechts unten im Beitrag klicken ;)
                      https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge

                      1 Antwort Letzte Antwort
                      0
                      • M Offline
                        M Offline
                        Minifutzi
                        schrieb am zuletzt editiert von
                        #42

                        Huhu, bräuchte auch mal eure Hilfe.

                        Ich habe das Widget als Balken eingefügt, Object ID vergeben usw.

                        Lustigerweise wird das Widget an keinem meiner Geräte in der Runtime Ansicht angezeigt :(

                        DJMarc75D 1 Antwort Letzte Antwort
                        0
                        • M Minifutzi

                          Huhu, bräuchte auch mal eure Hilfe.

                          Ich habe das Widget als Balken eingefügt, Object ID vergeben usw.

                          Lustigerweise wird das Widget an keinem meiner Geräte in der Runtime Ansicht angezeigt :(

                          DJMarc75D Offline
                          DJMarc75D Offline
                          DJMarc75
                          schrieb am zuletzt editiert von
                          #43

                          @minifutzi sagte in Material Design Widgets: Progress Widget:

                          an keinem meiner Geräte in der Runtime Ansicht angezeigt

                          z-index eingestellt?

                          Lehrling seit 1975 !!!
                          Beitrag geholfen ? dann gerne ein upvote rechts unten im Beitrag klicken ;)
                          https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge

                          M 1 Antwort Letzte Antwort
                          0
                          • DJMarc75D DJMarc75

                            @minifutzi sagte in Material Design Widgets: Progress Widget:

                            an keinem meiner Geräte in der Runtime Ansicht angezeigt

                            z-index eingestellt?

                            M Offline
                            M Offline
                            Minifutzi
                            schrieb am zuletzt editiert von
                            #44

                            @djmarc75 Ja, z-index ist eingestellt :/

                            DJMarc75D 1 Antwort Letzte Antwort
                            0
                            • M Minifutzi

                              @djmarc75 Ja, z-index ist eingestellt :/

                              DJMarc75D Offline
                              DJMarc75D Offline
                              DJMarc75
                              schrieb am zuletzt editiert von
                              #45

                              @minifutzi zeig mal bitte einen Screenshot von den Einstellungen des Widgets

                              Lehrling seit 1975 !!!
                              Beitrag geholfen ? dann gerne ein upvote rechts unten im Beitrag klicken ;)
                              https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge

                              M 1 Antwort Letzte Antwort
                              0
                              • DJMarc75D DJMarc75

                                @minifutzi zeig mal bitte einen Screenshot von den Einstellungen des Widgets

                                M Offline
                                M Offline
                                Minifutzi
                                schrieb am zuletzt editiert von
                                #46

                                @djmarc75 2f7da151-1af3-40a2-b43e-8c441ef026fe-image.png

                                DJMarc75D 1 Antwort Letzte Antwort
                                0
                                • M Minifutzi

                                  @djmarc75 2f7da151-1af3-40a2-b43e-8c441ef026fe-image.png

                                  DJMarc75D Offline
                                  DJMarc75D Offline
                                  DJMarc75
                                  schrieb am zuletzt editiert von
                                  #47

                                  @minifutzi min und max Werte mal eintragen und schieb den z-index mal auf 100 oder so, nicht dass da doch noch ein Widget drüber liegt

                                  Lehrling seit 1975 !!!
                                  Beitrag geholfen ? dann gerne ein upvote rechts unten im Beitrag klicken ;)
                                  https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge

                                  M 1 Antwort Letzte Antwort
                                  0
                                  • DJMarc75D DJMarc75

                                    @minifutzi min und max Werte mal eintragen und schieb den z-index mal auf 100 oder so, nicht dass da doch noch ein Widget drüber liegt

                                    M Offline
                                    M Offline
                                    Minifutzi
                                    schrieb am zuletzt editiert von
                                    #48

                                    @djmarc75 ok, hab ich gemacht.

                                    Hab mir mal testhalber ein zweites Tablett hinzugeholt.

                                    Das eine zeigt den Balken an, das andere nicht :D

                                    DJMarc75D 1 Antwort Letzte Antwort
                                    0
                                    • M Minifutzi

                                      @djmarc75 ok, hab ich gemacht.

                                      Hab mir mal testhalber ein zweites Tablett hinzugeholt.

                                      Das eine zeigt den Balken an, das andere nicht :D

                                      DJMarc75D Offline
                                      DJMarc75D Offline
                                      DJMarc75
                                      schrieb am zuletzt editiert von
                                      #49

                                      @minifutzi sagte in Material Design Widgets: Progress Widget:

                                      Das eine zeigt den Balken an, das andere nicht

                                      Sind das verschiedene Browser ? Wenn ja welcher auf welchem ?

                                      Lehrling seit 1975 !!!
                                      Beitrag geholfen ? dann gerne ein upvote rechts unten im Beitrag klicken ;)
                                      https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge

                                      M 1 Antwort Letzte Antwort
                                      0
                                      • DJMarc75D DJMarc75

                                        @minifutzi sagte in Material Design Widgets: Progress Widget:

                                        Das eine zeigt den Balken an, das andere nicht

                                        Sind das verschiedene Browser ? Wenn ja welcher auf welchem ?

                                        M Offline
                                        M Offline
                                        Minifutzi
                                        schrieb am zuletzt editiert von
                                        #50

                                        @djmarc75 Ich benutze die IOBroker App

                                        DJMarc75D 1 Antwort Letzte Antwort
                                        0
                                        • M Minifutzi

                                          @djmarc75 Ich benutze die IOBroker App

                                          DJMarc75D Offline
                                          DJMarc75D Offline
                                          DJMarc75
                                          schrieb am zuletzt editiert von
                                          #51

                                          @minifutzi sagte in Material Design Widgets: Progress Widget:

                                          Ich benutze die IOBroker App

                                          und an beiden über WLAN ?

                                          Lehrling seit 1975 !!!
                                          Beitrag geholfen ? dann gerne ein upvote rechts unten im Beitrag klicken ;)
                                          https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge

                                          M 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

                                          766

                                          Online

                                          32.6k

                                          Benutzer

                                          81.9k

                                          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