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 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
                                          • DJMarc75
                                            DJMarc75 @Minifutzi last edited by

                                            @minifutzi sagte in Material Design Widgets: Progress Widget:

                                            Das eine zeigt den Balken an, das andere nicht

                                            Sind das verschiedene Browser ? Wenn ja welcher auf welchem ?

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            750
                                            Online

                                            31.9k
                                            Users

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