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.
    • 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
            • K
              Kusi @Scrounger last edited by 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-sky 2 Replies Last reply Reply Quote 0
              • liv-in-sky
                liv-in-sky @Kusi last edited by

                @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 2 Replies Last reply Reply Quote 0
                • liv-in-sky
                  liv-in-sky @Kusi last edited by

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

                  1 Reply Last reply Reply Quote 0
                  • K
                    Kusi @liv-in-sky last edited by Kusi

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

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

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

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

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

                            DJMarc75 1 Reply Last reply Reply Quote 0
                            • DJMarc75
                              DJMarc75 @n811e last edited by

                              @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

                              1 Reply Last reply Reply Quote 0
                              • M
                                Minifutzi last edited by

                                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 😞

                                DJMarc75 1 Reply Last reply Reply Quote 0
                                • DJMarc75
                                  DJMarc75 @Minifutzi last edited by

                                  @minifutzi sagte in Material Design Widgets: Progress Widget:

                                  an keinem meiner Geräte in der Runtime Ansicht angezeigt

                                  z-index eingestellt?

                                  M 1 Reply Last reply Reply Quote 0
                                  • M
                                    Minifutzi @DJMarc75 last edited by

                                    @djmarc75 Ja, z-index ist eingestellt 😕

                                    DJMarc75 1 Reply Last reply Reply Quote 0
                                    • DJMarc75
                                      DJMarc75 @Minifutzi last edited by

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

                                      M 1 Reply Last reply Reply Quote 0
                                      • M
                                        Minifutzi @DJMarc75 last edited by

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

                                        DJMarc75 1 Reply Last reply Reply Quote 0
                                        • DJMarc75
                                          DJMarc75 @Minifutzi last edited by

                                          @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 1 Reply Last reply Reply Quote 0
                                          • M
                                            Minifutzi @DJMarc75 last edited by

                                            @djmarc75 ok, hab ich gemacht.

                                            Hab mir mal testhalber ein zweites Tablett hinzugeholt.

                                            Das eine zeigt den Balken an, das andere nicht 😄

                                            DJMarc75 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            599
                                            Online

                                            31.9k
                                            Users

                                            80.1k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            16
                                            60
                                            5194
                                            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