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
    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

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

    @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
    schrieb am zuletzt editiert von
    #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 Antwort Letzte Antwort
    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
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      1
      • ScroungerS Scrounger

        @Dirni
        Wie rund? Das ist ein eigenes Widget

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

        D Offline
        D Offline
        Dirni
        schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
        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
          schrieb am zuletzt editiert von
          #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 Antwort Letzte Antwort
          0
          • D Offline
            D Offline
            Dirni
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            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
              schrieb am zuletzt editiert von 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 Antworten Letzte Antwort
              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
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                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
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  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
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    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
                      schrieb am zuletzt editiert von
                      #19

                      @Scrounger
                      Ah jetzt funktionierts, danke :blush:

                      1 Antwort Letzte Antwort
                      0
                      • ub.privatU Offline
                        ub.privatU Offline
                        ub.privat
                        schrieb am zuletzt editiert von
                        #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 Antwort Letzte Antwort
                        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
                          schrieb am zuletzt editiert von
                          #21

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

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

                          ub.privatU 1 Antwort Letzte Antwort
                          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
                            schrieb am zuletzt editiert von
                            #22

                            @scrounger

                            DANKE, wieder etwas gelernt!

                            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!

                              Frank ZoellnerF Offline
                              Frank ZoellnerF Offline
                              Frank Zoellner
                              schrieb am zuletzt editiert von
                              #23

                              @scrounger sagte in Material Design Widgets: Progress Widget:

                              Online Beispiel

                              Hallo,
                              kann man die Progressbar auch vertikal darstellen ?

                              ScroungerS 1 Antwort Letzte Antwort
                              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
                                schrieb am zuletzt editiert von
                                #24

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

                                ub.privatU 1 Antwort Letzte Antwort
                                1
                                • ScroungerS Scrounger

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

                                  ub.privatU Offline
                                  ub.privatU Offline
                                  ub.privat
                                  schrieb am zuletzt editiert von
                                  #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 Antwort Letzte Antwort
                                  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
                                    schrieb am zuletzt editiert von
                                    #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 Antwort Letzte Antwort
                                    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
                                      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
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          680

                                          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