Today i tried to get familiar with this “new” openHAB UI. I found some example here [OH3] Main UI Examples - #22 by Integer and these are realy nice widget. First i tested Lights and it didn’t worked with the floorplan. Got a vertical bar and overlap on the bottom.
So i modified it and its now working for me with the flooplan. Just add a second f7-card-content with a slider.
uid: Cell_Light_Card_1
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Header big sized
label: Header
name: header
required: false
type: TEXT
- default: lightbulb
description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- description: rgba or HEX
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
description: Item to control on/off
label: Item
name: item_schalter
required: false
type: TEXT
- context: item
description: Item to control brightness
label: Item
name: item_brightness
required: false
type: TEXT
parameterGroups: []
timestamp: Aug 7, 2022, 7:36:21 PM
component: f7-card
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : 'var(--f7-card-bg-color)'"
padding: var(--f7-card-content-padding-horizontal) var(--f7-card-content-padding-vertical) var(--f7-card-content-padding-horizontal) var(--f7-card-content-padding-vertical)
min-width: 120px
slots:
default:
- component: f7-card-content
config:
style:
flex-direction: row
display: flex
#background-color: red
padding: 0px
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 18
visible: "=props.icon ? true : false"
- component: Label
config:
text: "=props.title ? props.title : 'Title'"
style:
font-size: 12px
margin-left: 10px
- component: oh-toggle
config:
item: =props.item_schalter
style:
position: absolute
right: 0px
- component: f7-card-content
config:
style:
#background-color: purple
padding: 0px
slots:
default:
- component: Label
config:
text: "=props.header ? props.header : 'Set Props'"
style:
font-size: 17px
font-weight: 600
padding: 10px 5px 10px 5px
- component: f7-card-content
config:
style:
#background-color: green
padding: 0px 10px 0px 10px
slots:
default:
- component: oh-slider
config:
item: =props.item_brightness
min: 0
step: 10
max: 100
label: true
unit: "%"
style:
--f7-range-bar-size: 8px
--f7-range-bar-border-radius: 8px
--f7-range-knob-size: 20px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)