Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Material Design Widgets: Progress Widget

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Material Design Widgets: Progress Widget

    This topic has been deleted. Only users with topic management privileges can see it.
    • Scrounger
      Scrounger Developer @Dirni last edited by

      @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 Reply Quote 0
      • D
        Dirni last edited by

        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 Reply Quote 0
        • P
          Phinix @Scrounger last edited by 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 Scrounger 2 Replies Last reply Reply Quote 0
          • H
            Happyuser20 @Phinix last edited by

            @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

            Scrounger 1 Reply Last reply Reply Quote 0
            • Scrounger
              Scrounger Developer @Happyuser20 last edited by

              @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 Reply Quote 0
              • Scrounger
                Scrounger Developer @Phinix last edited by

                @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 Reply Quote 1
                • P
                  Phinix @Scrounger last edited by

                  @Scrounger
                  Ah jetzt funktionierts, danke 😊

                  1 Reply Last reply Reply Quote 0
                  • ub.privat
                    ub.privat last edited by

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

                    Scrounger 1 Reply Last reply Reply Quote 0
                    • Scrounger
                      Scrounger Developer @ub.privat last edited by

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

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

                      ub.privat 1 Reply Last reply Reply Quote 0
                      • ub.privat
                        ub.privat @Scrounger last edited by

                        @scrounger

                        DANKE, wieder etwas gelernt!

                        1 Reply Last reply Reply Quote 0
                        • Frank Zoellner
                          Frank Zoellner @Scrounger last edited by

                          @scrounger sagte in Material Design Widgets: Progress Widget:

                          Online Beispiel

                          Hallo,
                          kann man die Progressbar auch vertikal darstellen ?

                          Scrounger 1 Reply Last reply Reply Quote 0
                          • Scrounger
                            Scrounger Developer @Frank Zoellner last edited by

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

                            ub.privat 1 Reply Last reply Reply Quote 1
                            • ub.privat
                              ub.privat @Scrounger last edited by

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

                              Scrounger 1 Reply Last reply Reply Quote 0
                              • Scrounger
                                Scrounger Developer @ub.privat last edited by

                                @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 Reply Quote 0
                                • F
                                  firehero @Scrounger last edited by

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

                                  Scrounger 1 Reply Last reply Reply Quote 0
                                  • Scrounger
                                    Scrounger Developer @firehero last edited by Scrounger

                                    @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 Reply Last reply Reply Quote 0
                                    • K
                                      Kusi @Scrounger last edited by Kusi

                                      @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 Reply Last reply Reply Quote 0
                                      • Scrounger
                                        Scrounger Developer last edited by 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 1 Reply Last reply Reply Quote 0
                                        • K
                                          Kusi @Scrounger last edited by

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

                                          Scrounger 1 Reply Last reply Reply Quote 0
                                          • Scrounger
                                            Scrounger Developer @Kusi last edited by

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

                                            K 2 Replies Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            838
                                            Online

                                            31.9k
                                            Users

                                            80.2k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            16
                                            60
                                            5196
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo