Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[jmeister79]

@sigi234
ich nutze CSS Klassen die den Rest darstellen und klären, dann färbe ich nur noch % davon ein.

In diesem Fall die mdui-h-bargraph und mdui-segment-10 vom material design paket von @Uhula

zu finden unter
https://github.com/Uhula/ioBroker-Material-Design-Style

Nils

[sigi234]

@jmeister79 sagte in [gelöst] Ergebnis eines Javascripts in Widget darstellen:

@sigi234
ich nutze CSS Klassen die den Rest darstellen und klären, dann färbe ich nur noch % davon ein.

In diesem Fall die mdui-h-bargraph und mdui-segment-10 vom material design paket von @Uhula

zu finden unter
https://github.com/Uhula/ioBroker-Material-Design-Style

Nils

Danke, das kenne ich...............kannst du mal einen Screenshot einstellen?

[jmeister79]

@sigi234

hiervon oder willst du konkreten code?

[sigi234]

@jmeister79

Danke, hab es so:

[jmeister79]

@sigi234 sieht gut aus, hattest du auch das problem mit exponentiellem verlauf?

[sigi234]

@jmeister79 sagte in [gelöst] Ergebnis eines Javascripts in Widget darstellen:

@sigi234 sieht gut aus, hattest du auch das problem mit exponentiellem verlauf?

Meinst du den Farbverlauf?

[dos1973]

Das gefällt mit echt gut, aber irgendwie kann ich euch nicht folgen...

@sigi234
Hast du den gleichen Weg angewendet?

[sigi234]

@dos1973 sagte in [gelöst] Ergebnis eines Javascripts in Widget darstellen:

Hast du den gleichen Weg angewendet?

Nein,

hier mal 3 verschiedene Widget mit Balkenverlauf. Könnt Ihr anpassen. ( @Uhula material design )

Widget_Farbverlauf_Set.txt

[dos1973]

da fehlen dann noch die css, der blau mit den "Kästchen" interessiert mich
mdui-h-bargraph mdui-segment-10

[sigi234]

@dos1973 sagte in [gelöst] Ergebnis eines Javascripts in Widget darstellen:

da fehlen dann noch die css

Ja, Voraussetzung ist ccs von @Uhula material design!

https://github.com/Uhula/ioBroker-Material-Design-Style

3. Installation
   Keine. Die CSS Anweisungen müssen lediglich in einem ioBroker.vis Projekt unter "CSS / Projekt" eingefügt werden, die paar Zeilen Script unter "Skript". Beides am besten aus dem [Demo-Projekt]("ioBroker projects/MD_Demo.zip") entnehmen.

[dos1973]

das ist mir zu mächtig ;-)
da muss ich bestimmt wieder alles umbauen, dann ohne Kästchen...

[jmeister79]

@dos1973
dann kopier dir doch die entsprechenden css klassen raus.

meine Lösung nutzt ja nur die von @Uhula erzeugte klasse und missbraucht sie ein wenig.
Du müsstest selbst bei Übernahme der ganzen CSS Datei nichts umbauen, das ist ja das tolle an @Uhula s Lösung. die kannst Du einfach auf dein vorhandenes Projekt aufsetzen und die CSS klassen nach Bedarf nutzen.
So hab ich es anfangs auch gemacht, später hab ich mir dann aber das ganze layout genommen, da es so wunderbar dynamisch ist.

Hauptmotivation war bei mir ja, dass man in einem widget nicht so einfach komplexe Berechnungen anstellen konnte. Und ich wollte zusätzliche Objekte für die Umwandlung durch Logarithmus vermeiden.

Nils