Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

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

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]

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

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

müssen die Zahlen so eingeben werden:

[Phinix]

@Scrounger
Ah jetzt funktionierts, danke :blush:

[ub.privat]

@Scrounger

besteht die Möglichkeit der Anmation in Abhängigkeit eines Wertes (>0)

Die Animation soll erst erfolgen, wenn der Wert größer 0 ist.

[Scrounger]

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

kannst über Sichtbarkeit steuern:

[ub.privat]

@scrounger

DANKE, wieder etwas gelernt!

[Frank Zoellner]

@scrounger sagte in Material Design Widgets: Progress Widget:

Online Beispiel

Hallo,
kann man die Progressbar auch vertikal darstellen ?

[Scrounger]

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

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

[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 ;-)

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

[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

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

Ist eine solche Beschriftung irgendwie möglich?

[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

[Kusi]

@scrounger sagte in Material Design Widgets: Progress Widget:

Benutzerdefinierte Beschriftung

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]

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

[Kusi]

@scrounger
Linksbündig funktioniert einwandfrei...

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

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

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

@kusi

td brauch table und tr

du kannst auch einfach das leerzeichen

 

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    {..} %

[liv-in-sky]

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