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

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    24
    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.6k

Material Design Widgets: Progress Widget

Scheduled Pinned Locked Moved Visualisierung
vis
60 Posts 16 Posters 6.9k Views 15 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.
  • D Offline
    D Offline
    Dirni
    wrote on last edited by
    #8

    Könnte mir jemand sagen wie ich das Progress Widget rund bekommen ? Und ein kleines Beispiel für das Binding Thema ?

    lg Danke

    ScroungerS 1 Reply Last reply
    0
    • D Dirni

      Könnte mir jemand sagen wie ich das Progress Widget rund bekommen ? Und ein kleines Beispiel für das Binding Thema ?

      lg Danke

      ScroungerS Offline
      ScroungerS Offline
      Scrounger
      Developer
      wrote on last edited by
      #9

      @Dirni
      Wie rund? Das ist ein eigenes Widget

      c34579cc-fe3a-47ba-85b4-a3f2cea2371e-grafik.png

      liv-in-skyL D 2 Replies Last reply
      0
      • ScroungerS Scrounger

        @Dirni
        Wie rund? Das ist ein eigenes Widget

        c34579cc-fe3a-47ba-85b4-a3f2cea2371e-grafik.png

        liv-in-skyL Offline
        liv-in-skyL Offline
        liv-in-sky
        wrote on last edited by
        #10

        @Scrounger

        hi

        kann man das als object id (binding) im progress widget einsetzen?

        {wert:controll-own.0.AAATEST.TestZahl2;Math.floor(wert/60)} 
        

        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

        ScroungerS 1 Reply Last reply
        0
        • liv-in-skyL liv-in-sky

          @Scrounger

          hi

          kann man das als object id (binding) im progress widget einsetzen?

          {wert:controll-own.0.AAATEST.TestZahl2;Math.floor(wert/60)} 
          
          ScroungerS Offline
          ScroungerS Offline
          Scrounger
          Developer
          wrote on last edited by
          #11

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

          kann man das als object id (binding) im progress widget einsetzen?

          {wert:controll-own.0.AAATEST.TestZahl2;Math.floor(wert/60)} 
          

          Das wird nicht funktionieren, weil Object Id immer eine gültige Id eines Datenpunktes erwartet. Wenn dein Binding aufgelöst wird, ist das aber eine Zahl.

          1 Reply Last reply
          1
          • ScroungerS Scrounger

            @Dirni
            Wie rund? Das ist ein eigenes Widget

            c34579cc-fe3a-47ba-85b4-a3f2cea2371e-grafik.png

            D Offline
            D Offline
            Dirni
            wrote on last edited by Dirni
            #12

            @Scrounger

            Das gibt es bei mir aber nicht ?

            04c83730-a3c6-4c9f-a786-ab8c6918c4b4-image.png

            und wo setzt man das binding ein ?

            ScroungerS 1 Reply Last reply
            0
            • D Dirni

              @Scrounger

              Das gibt es bei mir aber nicht ?

              04c83730-a3c6-4c9f-a786-ab8c6918c4b4-image.png

              und wo setzt man das binding ein ?

              ScroungerS Offline
              ScroungerS Offline
              Scrounger
              Developer
              wrote on last edited by
              #13

              @Dirni sagte in Material Design Widgets: Progress Widget:

              Das gibt es bei mir aber nicht ?

              04c83730-a3c6-4c9f-a786-ab8c6918c4b4-image.png

              Welche MDW Version?
              Welchen Browser verwendest du?
              Sind auch wirklich keine Filter gesetzt?
              Consolen Log (F12) nach Laden des VIS Editors zur Verfügung stellen

              P 1 Reply Last reply
              0
              • D Offline
                D Offline
                Dirni
                wrote on last edited by
                #14

                OK hab mal ein Update gemacht nun habe ich ihn auch Danke dir

                Aber das mit den Bindings habe ich immer noch nicht verstanden

                1 Reply Last reply
                0
                • ScroungerS Scrounger

                  @Dirni sagte in Material Design Widgets: Progress Widget:

                  Das gibt es bei mir aber nicht ?

                  04c83730-a3c6-4c9f-a786-ab8c6918c4b4-image.png

                  Welche MDW Version?
                  Welchen Browser verwendest du?
                  Sind auch wirklich keine Filter gesetzt?
                  Consolen Log (F12) nach Laden des VIS Editors zur Verfügung stellen

                  P Offline
                  P Offline
                  Phinix
                  wrote on last edited by Phinix
                  #15

                  Hallo zusammen,

                  ich würde mir gern mit dem Progress Widget meinen CO2 Sensor visualisieren, jedoch schaffe ich es nicht je nach Wertebereich unterschiedliche Farben anzuzeigen (Ampel; grün, orange, rot). Der Balken bleibt konstant grün, egal wie sich der Wert ändert.

                  Ich habe es auch mit einem Datenpunkt versucht, welchen ich selbst beschreibe. Allerdings genau das gleiche Problem.
                  Ich verstehe meinen Fehler nicht. Eigentlich sollte es bei dem aktuellen Wert Orange anzeigen?

                  b8ffcfb5-f86b-475d-9030-c0a794e91f50-image.png

                  5988ed77-0395-4575-b5c9-35997503e333-image.png

                  H ScroungerS 2 Replies Last reply
                  0
                  • P Phinix

                    Hallo zusammen,

                    ich würde mir gern mit dem Progress Widget meinen CO2 Sensor visualisieren, jedoch schaffe ich es nicht je nach Wertebereich unterschiedliche Farben anzuzeigen (Ampel; grün, orange, rot). Der Balken bleibt konstant grün, egal wie sich der Wert ändert.

                    Ich habe es auch mit einem Datenpunkt versucht, welchen ich selbst beschreibe. Allerdings genau das gleiche Problem.
                    Ich verstehe meinen Fehler nicht. Eigentlich sollte es bei dem aktuellen Wert Orange anzeigen?

                    b8ffcfb5-f86b-475d-9030-c0a794e91f50-image.png

                    5988ed77-0395-4575-b5c9-35997503e333-image.png

                    H Offline
                    H Offline
                    Happyuser20
                    wrote on last edited by
                    #16

                    @Phinix said in Material Design Widgets: Progress Widget:

                    Hallo zusammen,

                    ich würde mir gern mit dem Progress Widget meinen CO2 Sensor visualisieren, jedoch schaffe ich es nicht je nach Wertebereich unterschiedliche Farben anzuzeigen (Ampel; grün, orange, rot). Der Balken bleibt konstant grün, egal wie sich der Wert ändert.

                    Ich habe es auch mit einem Datenpunkt versucht, welchen ich selbst beschreibe. Allerdings genau das gleiche Problem.
                    Ich verstehe meinen Fehler nicht. Eigentlich sollte es bei dem aktuellen Wert Orange anzeigen?

                    b8ffcfb5-f86b-475d-9030-c0a794e91f50-image.png

                    5988ed77-0395-4575-b5c9-35997503e333-image.png

                    Bei mir das gleiche Problem.

                    Möchte den Kreis als Anzeige für den aktuellen Stromverbrauch nutzen.

                    Den wechsel von zwei Farben bekomme ich hin aber die dritte nicht!

                    Es soll so aussehen
                    -500 W bis 0 W grün (wenn meine Mini-PV mehr liefert als ich verbrauche.
                    0 W bis ca. 3000 W gelb
                    alles über 3000 W rot

                    Gruß
                    HappyUser20

                    ScroungerS 1 Reply Last reply
                    0
                    • H Happyuser20

                      @Phinix said in Material Design Widgets: Progress Widget:

                      Hallo zusammen,

                      ich würde mir gern mit dem Progress Widget meinen CO2 Sensor visualisieren, jedoch schaffe ich es nicht je nach Wertebereich unterschiedliche Farben anzuzeigen (Ampel; grün, orange, rot). Der Balken bleibt konstant grün, egal wie sich der Wert ändert.

                      Ich habe es auch mit einem Datenpunkt versucht, welchen ich selbst beschreibe. Allerdings genau das gleiche Problem.
                      Ich verstehe meinen Fehler nicht. Eigentlich sollte es bei dem aktuellen Wert Orange anzeigen?

                      b8ffcfb5-f86b-475d-9030-c0a794e91f50-image.png

                      5988ed77-0395-4575-b5c9-35997503e333-image.png

                      Bei mir das gleiche Problem.

                      Möchte den Kreis als Anzeige für den aktuellen Stromverbrauch nutzen.

                      Den wechsel von zwei Farben bekomme ich hin aber die dritte nicht!

                      Es soll so aussehen
                      -500 W bis 0 W grün (wenn meine Mini-PV mehr liefert als ich verbrauche.
                      0 W bis ca. 3000 W gelb
                      alles über 3000 W rot

                      Gruß
                      HappyUser20

                      ScroungerS Offline
                      ScroungerS Offline
                      Scrounger
                      Developer
                      wrote on last edited by
                      #17

                      @Phinix sagte in Material Design Widgets: Progress Widget:

                      ich würde mir gern mit dem Progress Widget meinen CO2 Sensor visualisieren, jedoch schaffe ich es nicht je nach Wertebereich unterschiedliche Farben anzuzeigen (Ampel; grün, orange, rot). Der Balken bleibt konstant grün, egal wie sich der Wert ändert.

                      @Happyuser20 sagte in Material Design Widgets: Progress Widget:

                      Bei mir das gleiche Problem.

                      Scheint ein Bug zu sein, funktioniert nur wenn man Prozent und nicht Wert verwendet.
                      Bitte schreibt ein Issue auf Github, dann korrigiere ich es zu nächsten Version.

                      1 Reply Last reply
                      0
                      • P Phinix

                        Hallo zusammen,

                        ich würde mir gern mit dem Progress Widget meinen CO2 Sensor visualisieren, jedoch schaffe ich es nicht je nach Wertebereich unterschiedliche Farben anzuzeigen (Ampel; grün, orange, rot). Der Balken bleibt konstant grün, egal wie sich der Wert ändert.

                        Ich habe es auch mit einem Datenpunkt versucht, welchen ich selbst beschreibe. Allerdings genau das gleiche Problem.
                        Ich verstehe meinen Fehler nicht. Eigentlich sollte es bei dem aktuellen Wert Orange anzeigen?

                        b8ffcfb5-f86b-475d-9030-c0a794e91f50-image.png

                        5988ed77-0395-4575-b5c9-35997503e333-image.png

                        ScroungerS Offline
                        ScroungerS Offline
                        Scrounger
                        Developer
                        wrote on last edited by
                        #18

                        @Phinix @Happyuser20

                        Das ist doch kein Bug. Die Werte für die Farben müssen in Prozent angeben sein, muss ich noch mit in die Doku aufnehmen.

                        Für folgendes Beispiel

                        @Happyuser20 sagte in Material Design Widgets: Progress Widget:

                        b8ffcfb5-f86b-475d-9030-c0a794e91f50-image.png

                        müssen die Zahlen so eingeben werden:

                        a5acfdd1-bf14-46cb-b50e-81acf3db1d5c-grafik.png

                        P 1 Reply Last reply
                        1
                        • ScroungerS Scrounger

                          @Phinix @Happyuser20

                          Das ist doch kein Bug. Die Werte für die Farben müssen in Prozent angeben sein, muss ich noch mit in die Doku aufnehmen.

                          Für folgendes Beispiel

                          @Happyuser20 sagte in Material Design Widgets: Progress Widget:

                          b8ffcfb5-f86b-475d-9030-c0a794e91f50-image.png

                          müssen die Zahlen so eingeben werden:

                          a5acfdd1-bf14-46cb-b50e-81acf3db1d5c-grafik.png

                          P Offline
                          P Offline
                          Phinix
                          wrote on last edited by
                          #19

                          @Scrounger
                          Ah jetzt funktionierts, danke :blush:

                          1 Reply Last reply
                          0
                          • ub.privatU Offline
                            ub.privatU Offline
                            ub.privat
                            wrote on last edited by
                            #20

                            @Scrounger

                            besteht die Möglichkeit der Anmation in Abhängigkeit eines Wertes (>0)
                            962c46ff-34ca-45a7-97d2-4d7952885668-grafik.png

                            Die Animation soll erst erfolgen, wenn der Wert größer 0 ist.

                            ScroungerS 1 Reply Last reply
                            0
                            • ub.privatU ub.privat

                              @Scrounger

                              besteht die Möglichkeit der Anmation in Abhängigkeit eines Wertes (>0)
                              962c46ff-34ca-45a7-97d2-4d7952885668-grafik.png

                              Die Animation soll erst erfolgen, wenn der Wert größer 0 ist.

                              ScroungerS Offline
                              ScroungerS Offline
                              Scrounger
                              Developer
                              wrote on last edited by
                              #21

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

                              kannst über Sichtbarkeit steuern:
                              eec90260-98c6-41c2-bc31-1f61a8c9f391-grafik.png

                              ub.privatU 1 Reply Last reply
                              0
                              • ScroungerS Scrounger

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

                                kannst über Sichtbarkeit steuern:
                                eec90260-98c6-41c2-bc31-1f61a8c9f391-grafik.png

                                ub.privatU Offline
                                ub.privatU Offline
                                ub.privat
                                wrote on last edited by
                                #22

                                @scrounger

                                DANKE, wieder etwas gelernt!

                                1 Reply Last reply
                                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!

                                  Frank ZoellnerF Offline
                                  Frank ZoellnerF Offline
                                  Frank Zoellner
                                  wrote on last edited by
                                  #23

                                  @scrounger sagte in Material Design Widgets: Progress Widget:

                                  Online Beispiel

                                  Hallo,
                                  kann man die Progressbar auch vertikal darstellen ?

                                  ScroungerS 1 Reply Last reply
                                  0
                                  • Frank ZoellnerF Frank Zoellner

                                    @scrounger sagte in Material Design Widgets: Progress Widget:

                                    Online Beispiel

                                    Hallo,
                                    kann man die Progressbar auch vertikal darstellen ?

                                    ScroungerS Offline
                                    ScroungerS Offline
                                    Scrounger
                                    Developer
                                    wrote on last edited by
                                    #24

                                    @frank-zoellner
                                    Ja in der kommenden Version kann man die um 90° drehen

                                    ub.privatU 1 Reply Last reply
                                    1
                                    • ScroungerS Scrounger

                                      @frank-zoellner
                                      Ja in der kommenden Version kann man die um 90° drehen

                                      ub.privatU Offline
                                      ub.privatU Offline
                                      ub.privat
                                      wrote on last edited by
                                      #25

                                      @scrounger

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

                                      Das wäre supi!

                                      ScroungerS 1 Reply Last reply
                                      0
                                      • ub.privatU ub.privat

                                        @scrounger

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

                                        Das wäre supi!

                                        ScroungerS Offline
                                        ScroungerS Offline
                                        Scrounger
                                        Developer
                                        wrote on last edited by
                                        #26

                                        @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 1 Reply Last reply
                                        0
                                        • 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
                                          wrote on last edited by
                                          #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 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          674

                                          Online

                                          32.5k

                                          Users

                                          81.7k

                                          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