Ich betreibe openHAB auf einem Raspberry mit einem 7" Touchscreen (800 x 480 px), das an der Wand hängt...
Auf der overview-Page lasse ich die für mich wichtigsten Dinge anzeigen und schalten.
Da sich in meinem Wohnzimmer immer mehr schaltbare Objekte sammeln, die ich in meiner kleinen Übersicht anzeigen lasse, würde ich gern mein Widget für die Raumübersicht so anpassen, das nach 5 Buttons ein Zeilenumbruch eingefügt wird, damit die Buttons / Icons nicht zu klein werden.
Mein Problem dabei ist, die Buttons werden aus verschiedenen oh-repeater generiert und befinden sich in einem f7-segmented.
Hätte jemand wenigstens einen kleinen Lösungsansatz, wie ich dies realisieren kann?
Anbei ein Screenshot und Code.
Vielen Dank
Code: Alles auswählen
component: f7-card
config:
style:
margin-left: 0px
margin-right: 0px
padding-left: 0px
padding-right: 0px
width: 215px
slots:
default:
- component: f7-card-content
config:
style:
padding: 5px
padding-top: 0px
slots:
default:
...
- component: f7-segmented
slots:
default:
- component: oh-repeater
config:
for: repeat
fragment: true
in: =props.dimmerItem
slots:
default:
- component: oh-button
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =loop.repeat + '_2_LEVEL'
class:
- card-prevent-open
color: gray
iconColor: "=(items[loop.repeat + '_2_LEVEL'].state > 0 ? 'yellow' : 'gray')"
iconF7: "=(items[loop.repeat + '_2_LEVEL'].state > 0 ? 'lightbulb_fill' : 'lightbulb')"
- component: oh-repeater
config:
for: repeat
fragment: true
in: =props.leuchtenItem
slots:
default:
- component: oh-button
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =loop.repeat + '_2_STATE'
class:
- card-prevent-open
color: gray
iconColor: "=(items[loop.repeat + '_2_STATE'].state === 'ON' ? 'yellow' : 'gray')"
iconF7: "=(items[loop.repeat + '_2_STATE'].state === 'ON' ? 'lightbulb_fill' : 'lightbulb')"
- component: oh-repeater
config:
for: repeat
fragment: true
in: =props.ventItem
slots:
default:
- component: oh-button
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =loop.repeat + '_2_STATE'
class:
- card-prevent-open
color: gray
style:
vertical-align: sub
slots:
default:
- component: oh-icon
config:
color: "=(items[loop.repeat + '_2_STATE'].state === 'ON' ? 'yellow' : 'gray')"
height: 22px
icon: "=(items[loop.repeat + '_2_STATE'].state === 'ON' ? 'iconify:mdi:fan' : 'iconify:mdi:fan-off')"
style:
vertical-align: bottom
- component: oh-repeater
config:
for: repeat
fragment: true
in: =props.steckItem
slots:
default:
- component: oh-button
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =loop.repeat + '_2_STATE'
class:
- card-prevent-open
color: gray
style:
vertical-align: sub
slots:
default:
- component: oh-icon
config:
color: "=(items[loop.repeat + '_2_STATE'].state === 'ON' ? 'yellow' : 'gray')"
height: 22px
icon: iconify:mdi:power-socket-de
style:
vertical-align: bottom
- component: oh-repeater
config:
for: repeat
fragment: true
in: =props.sonderItem
slots:
default:
- component: oh-button
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =loop.repeat + '_2_STATE'
class:
- card-prevent-open
color: gray
style:
vertical-align: sub
slots:
default:
- component: oh-icon
config:
color: "=(items[loop.repeat + '_2_STATE'].state === 'ON' ? 'yellow' : 'gray')"
height: 22px
icon: "=(props.sonderSymbol ? props.sonderSymbol : 'f7:question')"
style:
vertical-align: bottom
...