Weihnachtsangebot 2025! 🎄

[Supermicha]

Moin. ich hab da mal ein Problem mit meinem VIS

Ich hab einen Button mit einem basic - Bool HTML realisiert und diesen auch über eine CSS-Klasse gestyled

jetzt würde ich gern per Signalbild einen Status anzeigen lassen... indem die CSS-Klasse geändert wird...
das geht ansich ja...

allerdings verschwindet dann die Beschriftung komplett...

mach ich da was falsch?

ich hätte gerne, das da der Button-Text wieder erscheint...

[pix]

Hallo,

habe versucht, das nachzubauen. Aber bin nicht ganz sicher. Kannst du bitte das Widget exportieren und den Code hier in Code-Tags posten. Den boolean-Datenpunkt TestSchalter kann ich selbst anlegen (einen anderen verwenden).

Die Formatierung, die unter Klassen [1] hinterlegt sind, gelten nur für das Signalbild. Ist da evtl. ein höherer z-index angegeben?

_

Ich würde dein Vorhaben aber anders umsetzen:

Nutze das Feld Generell/CSS-Klasse in den Widget-Einstellungen. Dort kannst du ein VIS-Binding mit dem Datenpunkt anlegen.

{dp:javascript.0.Datenpunkte.TestSchalter;(dp=true) ? "rod nom red" : ""}

So sollten die Klassen gelten, wenn der Datenpunkt true enthält. Evtl. musst du dem CSS-Code nocht ein !important anhängen

Gruß
Pix

[Supermicha]

Hallo Pix, danke für deine schnelle Antwort.

Also ich versuchs nochmal genauer zu beschreiben....
Bisher hatte ich für alles Widgets mit eigene Grafiken... das wird auf dauer aber ganz schön aufwendig...
Deswegen bin ich jetzt dabei, auf einfache HTML-Widgets umzusteigen und den Text dann als Button zu stylen...

Ich nutze Generell/CSS-Klasse für dieses Styling. In meinem Beispiel oben sind das die 3 Klassen "rod" "norm" und "black" die das Textfeld so aussehen lassen wie den Stop-Button aus der Abbildung.

Mein Zeil war es jetzt, diesem Bool-Button bei z.B. true rot einzufärben... also die css-Klasse in "rod" "norm" "red" zu ändern.

Bei Grafiken klappt das ja mit den Signalbilder hervorragend. nur bei den Text-Buttons ebend nicht... da fehlt dann der Text...

Jetzt mal das Widged

[{"tpl":"tplValueBoolCtrl","data":{"oid":"system.adapter.radar.0.alive","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":true,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"","signals-icon-size-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":"","signals-icon-size-1":"","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,"min":"0","max":"1","html_false":"Start","html_true":"Stop","class":"rod norm black","signals-oid-0":"system.adapter.radar.0.alive","signals-text-class-1":"","signals-text-class-0":"","signals-text-0":"","signals-text-style-0":"color: red","signals-oid-1":"javascript.0.Datenpunkte.Test.TestSchalter","signals-text-style-1":"","signals-icon-style-1":"","signals-text-1":""},"style":{"left":"840px","top":"270px","height":"","width":"103px"},"widgetSet":"basic"}]

und hier nochmal die verwendeten CSS-Klassen...

.rod{
    display:block;
    float:left;
    text-align:center;
    overflow:hidden;
    border-radius:3px;
    font-weight:bold;
    border:1px solid;
    box-sizing: border-box;
}
.norm{
    height:35px;
    font-size:24px;
    padding: 4px 0px 2px 0px;
}
.black{
    color:#ececec;
    background: linear-gradient(to bottom, #d6d6d6 0%,#777777 35%,#3d3d3d 39%,#000000 100%);
    border-color: #3a3a3a;
}
.red{
    color:black;
    background:linear-gradient(to bottom, #ffbcbc 0%,#C66D6D 35%,#c73434 39%,#9b2b29 100%);
    border-color: #940000;
}

Wie gesagt... der "Button" nimmt über die Signalbilder den gewünschten Hintergrund an, der Button-Text ist weg...

zu deinem Vorschlag mit dem Binding... wie müsste der denn aussehen, wenn ich dort für das normale Styling schon eine Klasse drin habe? Geht das dann überhaubt?

[OliverIO]

Schau doch mal über die chrome oder Firefox Developer Tools auf deinen Knopf welche css Klassen da tatsächlich wirken. Evtl. Pfuschest dir da noch was anderes mit rein

In chrome: auf das Element gehen und dann rechte Maustaste „untersuchen“
Auf der rechten Seite zeigt es dir dann auch die Eigenschaften zu den css Klassen an

[Supermicha]

@OliverW
Mittels Firefox-Inspector konnte ich feststellen, das der Background vom Signalbild über den gesamten Button gelegt wird...
Schalte ich den manuell aus, sehe ich einen roten Rand um den Schwarzen Button mit Text.. schalte ich den Hintergrund wieder an, ist der Text wieder weg...

Es sieht für mich so aus, als würde das Signalbild den eigentlichen Button vollständig überlagern...
Bei Grafiken ja Sinn der Sache...(da brauch ich ja aber auch kein CSS)... bei Text natürlich doof...

[pix]

Du kannst in Github ein Issue erstellen und das Problem beschreiben ("Text wird überlagert"). Dann sieht es der Entwickler (Bluefox)

https://github.com/iobroker/ioBroker.vis/issues

Gruß
Pix