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

[TG70]

Jetzt habe ich noch das Problem, dass ich keinen Taster finde, welchen ich zum Design
meiner Schalter anpassen kann.

[{"tpl":"tplVis-materialdesign-Button-Toggle-vertical","data":{"oid":"hm-rpc.0.LEQ0875518.1.STATE","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","buttonStyle":"text","toggleType":"boolean","stateIfNotTrueValue":"on","vibrateOnMobilDevices":"49","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,"colorBgFalse":"#191919","valueOff":"","valueOn":"","image":"/icons-mfd-png/measure_battery_100.png","iconHeight":"83","imageTrue":"/icons-mfd-png/measure_battery_100.png","labelFalse":"LADEGERÄT","invertImageTrue":false,"colorBgTrue":"green","labelTrue":"LADEGERÄT"},"style":{"left":"319px","top":"161px","color":"#FFFFFF","text-align":"center","line-height":"0","font-variant":"normal","font-weight":"normal","font-size":"small","background":"","width":"118px","height":"118px","border-style":"solid","border-color":"#4a4a4a","border-radius":"0px","background-color":"#191919","border-width":"1px"},"widgetSet":"materialdesign"}]

Soweit komme ich. Ich bekomm aber weder die gleiche Hintergrundfarbe #191919 hin, noch den Rand, noch wird das Bild angezeigt.

[{"tpl":"tplHqButton","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"oid":"scene.COPY_Bett_gehen_01","min":"","max":"","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,"pushButton":true,"g_center":true,"iconName":"/icons-mfd-png/scene_sleeping.png","btIconWidth":"0","offsetAuto":true,"leftOffset":"0","topOffset":"0","g_leftRight":true,"timeAsInterval":false,"infoLeftFontSize":"6","infoFontRightSize":"6","infoLeftPaddingLeft":"0","infoLeftPaddingRight":"0","infoRightPaddingRight":"0","iconOn":"/icons-mfd-png/scene_sleeping.png","descriptionLeft":"COPY_Bett gehen 01","caption":"BETT Gehen","descriptionLeftDisabled":true,"oid-working":"","oid-signal":"","oid-battery":"","g_styles":true,"usejQueryStyle":true,"styleNormal":"","styleActive":"","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,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","infoBackground":"#191919","infoColor":"white"},"style":{"left":"789px","top":"483px","z-index":"0","background-color":"#191919","background":"#191919","border-color":"#4a4a4a","border-width":"1px","border-style":"solid","border-radius":"0px","width":"118px","height":"118px","color":"white","text-align":"center"},"widgetSet":"hqwidgets"}]

[Homoran]

@TG70
Könnte dir diesen anbieten:

Auf die Schnelle und aus dem Kopf gemacht
Hintergrundfarbe und Rundung müsste man vielleicht noch anpassen

[TG70]

@Homoran --Oh nehm ich natürlich gerne... sehr nett von Dir.

Mein Design schaut so aus - letzter Button rechts ist auch einen Szenen Button der
ersetzt werden muss. Ist alles noch im Grobzustand und komplett festgelegt bin ich nicht, da
ich nur die ersten Screens fertig habe:

[Homoran]

@TG70 dann eben diese Variante:

Ist wirklich in paar Minuten mit der heißen Nadel gestrick - Sorry dafür:

[{"tpl":"tplHqButton","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","oid":"nothing_selected","min":"false","max":"true","iconName":"/icons-material-png/notification/ic_airline_seat_flat_white_48dp.png","btIconWidth":"48","offsetAuto":false,"leftOffset":"23","topOffset":"5","timeAsInterval":"true","infoLeftFontSize":"12","infoFontRightSize":"12","infoLeftPaddingLeft":"15","infoLeftPaddingRight":"50","infoRightPaddingRight":"15","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,"pushButton":true,"usejQueryStyle":false,"styleNormal":"hq-button-no-background","caption":"ins Bett","infoColor":"","descriptionLeftDisabled":true},"style":{"left":"190px","top":"90px","border-radius":"0px","background-color":"#333333","color":"white","width":"91px","height":"93px","border-width":"2px","border-style":"solid","border-color":"black"},"widgetSet":"hqwidgets"}]

Da musst du noch was spielen.

Wahrscheinlich Rand heller (#555555) und dafür background 'black'

[TG70]

@Homoran .. aber was hast du anders gemacht als ich ... ich habe es einfach nicht geschafft, denn
Hintergrund in der entsprechenden Farbe einzufärben

EDIT: Ich habs... Button no Background .. das habe ich nicht gefunden im Bereich Stil war das Problem

[Homoran]

@TG70 sagte in Abfolge von Befehlen:

@Homoran .. aber was hast du anders gemacht als ich ... ich habe es einfach nicht geschafft, denn
Hintergrund in der entsprechenden Farbe einzufärben

Habe wahrscheinlich kein jqui Widget genommen (oder den Button kein jqui verwenden angehakt)

Das hätte jetzt den schwarzen Background und den grauen rand

[TG70]

@Homoran .. nehme ich gerne ... mal schauen was du gemach hast... ich habe immer noch das Problem, dass ich den Hintergrund nicht in der entsprechenden Farbe ändern kann

[Homoran]

@TG70 sagte in Abfolge von Befehlen:

mal schauen was du gemach hast

Mach das.
und wie immer: Bei Fragen: fragen!

[TG70]

@Homoran ... postet du das Widget bitte noch :clap:

[Homoran]

@TG70
ist doch schon lange da:
https://forum.iobroker.net/topic/29412/abfolge-von-befehlen/27

Da musst du nur mit den Farben des Randes und des Backgrouns spielen und dir ein Widget a gusto aussuchen

[TG70]

@Homoran
Daaaanke dir - ich weiß nur noch nicht was ich anders gemacht habe .. ich glaub es liegt am Stil No Background den ich nicht ausgewählt hatte

[Homoran]

@TG70 sagte in Abfolge von Befehlen:

es liegt am Stil No Background den ich nicht ausgewählt hatte

dann gilt der vordefinierte Hintergrund. Erst wenn du den "entfernst" kommt der eigene durch

[TG70]

@Homoran ... ja das habe ich so versteckt im Stil nicht gefunden... ich habe mir den Wolf gesucht

[Homoran]

@TG70
ja - das sind die HQ (high quality) widgets, da gibt es verdammt viele Optionen

[TG70]

@Homoran .. ja ist krass
Wo schraubst du. wenn du die grösse des Buttons verkleinerst, dann die Schrift recht neben der Grafik steht, aber wieder nach unten soll ??

[Homoran]

@TG70
Ich mach dann das Widget größer ;-)

Versuches mal mit Bildgröße kleiner und Schriftgröße (unten unter css font) ebenfalls.

EDIT: Verified - klappt

[TG70]

@Homoran ..ja so kenne ich das auch ... mit 80px * 80 px krieg ich des einfach nicht hin...
Ist aber nicht so wichtig... setze einfach ein Text extra rein :flushed:

[Homoran]

@TG70 stay tuned

• 80x80???? für das widget?
  meins ist gerade 60x60 :joy:

[TG70]

@Homoran ... ich brech echt zam... manchmal schon der Wahnsinn... hab das die ganze Zeit mit Bildgrösse / Schriftgrösse gemacht.. bissi rumspielen, dann klappt das aber ... neeee ... hier nicht:man-shrugging:

Geschummelt mit extra Text... schau merkt keiner :)))

[Homoran]

@TG70
ehrlich. WTF

fast alle Größen gehen, aber 80x80 will es ums verrecken nicht
Habe es jetzt nach viel testen hinbekommen:

Spoiler

[{"tpl":"tplHqButton","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","oid":"nothing_selected","min":"false","max":"true","iconName":"/icons-mfd-png/scene_sleeping.png","btIconWidth":"54","offsetAuto":true,"leftOffset":"12","topOffset":"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,"pushButton":true,"usejQueryStyle":false,"styleNormal":"hq-button-no-background","caption":"INS BETT","g_leftRight":false,"timeAsInterval":"true","infoLeftFontSize":"12","infoFontRightSize":"12","infoLeftPaddingLeft":"15","infoLeftPaddingRight":"50","infoRightPaddingRight":"15","g_ccontrol":false},"style":{"left":"190px","top":"90px","border-radius":"0px","background-color":"black","color":"white","width":"79px","height":"80px","border-width":"2px","border-style":"solid","border-color":"#555555","font-size":"8pt","line-height":"","word-spacing":"","text-align":"center","font-style":"normal","font-family":"\"Courier New\", Courier, monospace","z-index":"2"},"widgetSet":"hqwidgets"}]

Breite auf 80 einstellen
Höhe ins riesige ziehen bis Bild und Text gut aussehen und untereinander stehen
Dann die untere Kante langsam hochziehen, dabei darauf achten, dass der Text die untere Linie nicht berührt sonst sprint er direkt wieder rechts neben das Bild.
Hoffen, dass es bei 80 x 80 noxh passt ;-)