[Projekt] Material Design CSS für ioBroker.vis

[der-eine]

@mctom klicke oben links auf die drei Balken —> Einstellungen und verändere die Farben. Das „Problem“ ist weiße Schrift auf weißem Hintergrund.

[mctom]

@der-eine: Danke habe es angepasst.

[mrFenyx]

@Uhula ich habe eine Frage zu den Sliders. Ist es möglich die "mdui-transparent-acc" classe zu benutzen aber trotzdem dem Slider Handle eine Farbe zu geben so dass es nicht immer weiß ist?

[bilberry]

Hallo Uhula, Hallo liebe Fan-Gemeinde!
Auch von mir erstmal herzlichen Dank an @Uhula für die neue MD-Version. Als langer treuer Leser dieses Forums habe ich bislang immer irgendwo Lösungsansätze von Euch für meine jeweiligen Herausforderungen gefunden. Doch an einer Stelle komme ich seit langem nicht weiter und hoffe auf Eure Hilfe:

Ich möchte den Glow- bzw. den Blink-Effekt für Buttons nutzen. ABER, nur wenn dieser auf true gesetzt (also angeschaltet) wurde.
Ich denke, der richtige Ansatz ist hier das "basic-bool HTML"-Widget. Das kann ich mit z.B. <i class="material-icons mdui-green-glow">power_settings_new</i> im Feld HTML bei 'true' auch schon fast so wie gewünscht darstellen (sh. Beispielbild). Dann leuchtet aber nur der innere Text ( in dem Fall ein Icon) aber nicht der Rahmen. Wenn der auch leuchten würde, wäre noch das i-Tüpfelchen. Wer hat eine Idee, wie ich das hinbekommen könnte?

[Pittini]

@bilberry Das is ne gute Frage. Es geht zwar simpel und unelegant mit nem 2ten Button der via sichtbarkeit geschaltet wird, aber das is mehr ein workaround. Würde mich auch freuen wenn @Uhula uns da helfen könnte, würde mir etliche übereinanderliegende Buttons ersparen.

[Glasfaser]

@bilberry

Versuche es mal damit , ob es dir gefällt :

Datenpunkt natürlich anpassen

{val:javascript.0.Datenpunkt.DP3;val=="true"? "mdui-green-glow":  " "}

[sigi234]

@Uhula

Hallo,
habe die neue Version eingefügt.
Der Hintergrund im Editor ist jetzt weis in der Runtime Schwarz.
Möchte auch im Editor den Hintergrund Schwarz haben.

[Glasfaser]

@sigi234

Versuche mal den Background mit :

rgba(1, 1, 1, 1) none repeat scroll 0% 0% / auto padding-box border-box

[sigi234]

@Glasfaser sagte in [Projekt] Material Design CSS für ioBroker.vis:

@sigi234

Versuche mal den Background mit :

rgba(1, 1, 1, 1) none repeat scroll 0% 0% / auto padding-box border-box

Leider nein.

[Glasfaser]

@sigi234

War ja ein Versuch .. .. habe das neue CSS noch nicht eingefügt um selber zu testen ..

[Glasfaser]

@sigi234

Hier die Zeile ist dafür zuständig ..

.vis_container>div {
    background: #f8f8f8 !important;

[Uhula]

@bilberry Glasfaser hat dir im Prinzip die richtige Antwort gegeben. Der glow-Effekt muss dem ganzen Widget zugewiesen werden, nicht nur dem Icon. Da du das "schaltbar" haben möchtest, kannst du die vis-Bindingfähigkeit nutzen. Statt "mdui-button-outlined mdui-blue-glow" musst du dann "mdui-button-outlined {javascript.0.myGlow}" zuweisen. Über die Wertzuweisung an "javascript.0.myGlow" kannst dann das Glühen einschalten in dem du den Wert "mdui-blue-glow" zuweist. Natürlich auch andere Farben

@sigi234 Den Hintergrund des Editors setzt du im Projekt-CSS an der Stelle ".vis_container>div"

/* -----
   Design
   ----- */

.vis_container>div {
    background: #f0f0f0 !important;
}

Statt #f0f0f0 einfach z.B. #121212 zuweisen.

[sigi234]

@Uhula sagte in [Projekt] Material Design CSS für ioBroker.vis:

@sigi234 Den Hintergrund des Editors setzt du im Projekt-CSS an der Stelle ".vis_container>div"

Ok geht, also hat die Einstellung use Background keinen Einfluss mehr bzw. dein css überschreibt das?

[Uhula]

@sigi234 Im Designer: Klar, lege ja auch mein Raster drauf! Btw. mit den view-Einstellungen selbst konnte ich mich nie anfreunden, die wirken im Designer nicht wie erwartet.

[darkiop]

@Uhula sagte in [Projekt] Material Design CSS für ioBroker.vis:

Btw. mit den view-Einstellungen selbst konnte ich mich nie anfreunden, die wirken im Designer nicht wie erwartet.

Ich habe auch immer ein Misch-Masch aus VIS EDIT und CSS

VIS Edit ist eigentlich so mächtig, das hätte mal einen neuen Anstrich + Modernisierung verdient

[Pittini]

Ich finde ja die mdui-expand Funktion höchst interessant. Was mich allerdings grad stört, ist die Tatsache das bei Seitenrefresh die cards immer expandiert dargestellt werden, ich hätte die aber gern zusammengeklappt, am besten noch wahlweise. Gibts da ne Möglichkeit, sowas wie mdui-collapse?

[Dominik F.]

@Pittini

mdui-onload: Hierüber kann festgelegt werden, dass die dem Widget zugewiesene Funktion bereits beim Laden der Page ausgeführt werden soll. Wirkt sich nur im Zusammenhang mit mdui-toggle, mdui-expand oder mdui-fullscreen aus.

in der Demoversion ist eine der Cards eingeklappt dargestellt und wenn ich das richtig verstanden habe ist dieses Widget dafür verantwortlich:

[{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<i class=\"material-icons\">expand_less</i>","class":"mdui-button mdui-center mdui-expand mdui-onload"},"style":{"left":"calc(100% - 56px)","top":"16px","width":"40px","height":"40px"},"widgetSet":"basic"}]

Das ist das Widget mit dem man die Cards ein und ausklappen kann.

[bilberry]

@Pittini zwei übereinanderliegende Button war auch meine allererste Idee - aber sobald es mehrere ähnliche Buttons sein sollen, ist das kaum noch zu beherrschen
Deshalb bin ich jetzt auch dankbar für den Tipp von @Glasfaser. Hab ihn gerade ausprobiert und - juhu - so funktionierts!

@Uhula Dein Vorschlag ging ja im Prinzip in die gleiche Richtung, jedoch sollte ich einem Datenpunkt den String "mdui-(color)-glow" zuweisen. Genau das hatte ich mir nämlich letzte Woche auch schon mal überlegt. Aber dann müsste ich doch für jeden Button einen separaten Datenpunkt anlegen, sonst würden ja alle Buttons auf einmal glühen, wenn einer geschaltet wird. Außerdem bräuchte ich noch einen Trigger (Skript), welcher je nach Schaltzustand „glow“ oder „“ in den Datenpunkt schreibt. Oder habe ich einen Denkfehler und es geht doch noch einfacher?

[Pittini]

@bilberry sagte in [Projekt] Material Design CSS für ioBroker.vis:

Oder habe ich einen Denkfehler und es geht doch noch einfacher?

Ich hab das ganz genauso verstanden. Aber is ja erledigt und funktioniert super mit dem Tipp von @Glasfaser

[Pittini]

@Dominik-F
mdui-onload klappt, vielen Dank, hatte das zwar gelesen aber anders interpretiert. Das Widget war klar.