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

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

                                            @djmarc75 Ich benutze die IOBroker App

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            644
                                            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