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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    23
    1
    1.3k

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    9.3k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    14
    1
    2.5k

Material Design Widgets: Progress Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
60 Beiträge 16 Kommentatoren 6.9k 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.
  • ScroungerS Scrounger

    @ub-privat sagte in Material Design Widgets: Progress Widget:

    @scrounger

    Ist nur ein drehen um 90° oder ein freies Drehen möglich, so dass der animierte Fortschrittsbalken die Richtung ändert.

    nur um 90°, andere Werte könnt ihr per css erreichen.

    Also von links > rechts oder rechts > links...

    Das geht doch heute schon -> Wert umkehren aktivieren.

    Bilder sagen mehr als Worte ;-)
    progress.gif

    F Offline
    F Offline
    firehero
    schrieb am zuletzt editiert von
    #27

    @scrounger

    Super Sache. Respekt!!!

    Ich habe eben das aktuelle Update eingespielt.

    Cool wäre noch, wenn man nicht nur einen Kreis, oder Linear verwenden könnte sondern einen frei definierbaren Radius.

    Somit könnte man einen eigenen Tacho damit gestalten.

    Bsp. 260°

    ScroungerS 1 Antwort Letzte Antwort
    0
    • F firehero

      @scrounger

      Super Sache. Respekt!!!

      Ich habe eben das aktuelle Update eingespielt.

      Cool wäre noch, wenn man nicht nur einen Kreis, oder Linear verwenden könnte sondern einen frei definierbaren Radius.

      Somit könnte man einen eigenen Tacho damit gestalten.

      Bsp. 260°

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

      @firehero
      Ich weiß nicht ob die vuetify API sowas ermöglicht, schreib bitte nen issued auf github, dann Bau ich das evtl Mal ein.

      alternativ kannst du mit dem Slider round Widget realisieren mit readonly aktiviert. das

      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!

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

        @scrounger
        Gerne würde ich das Progress Widget noch beschriften, damit man sieht um was für einen DP es sich handelt.
        Folgendes habe ich mit anderen Widgets gebaut zur Veranschaulichung:
        0e02e12e-b362-49bc-93c4-67c0b0a33e54-image.png

        Ist eine solche Beschriftung irgendwie möglich?

        1 Antwort Letzte Antwort
        0
        • ScroungerS Offline
          ScroungerS Offline
          Scrounger
          Developer
          schrieb am zuletzt editiert von Scrounger
          #30

          @kusi
          Benutzerdefinierte Beschriftung kann man dafür verwenden. Wie das geht ist in der Doku beschrieben.

          Oder einfach ein String Widget zusätzlich benutzen

          K 1 Antwort Letzte Antwort
          0
          • ScroungerS Scrounger

            @kusi
            Benutzerdefinierte Beschriftung kann man dafür verwenden. Wie das geht ist in der Doku beschrieben.

            Oder einfach ein String Widget zusätzlich benutzen

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

            @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 1 Antwort Letzte Antwort
            0
            • 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
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          663

                                          Online

                                          32.5k

                                          Benutzer

                                          81.7k

                                          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