Hi,
hopefully I get some UI design support 
Just started to remix the winux and the HUE widget from the marketplace.
The colorpicker and the scene buttons do not support clicking at the moment - but it should.
Here is the code:
uid: tw_huelightcard
tags:
- dimmer
- light
- color
- switch
props:
parameters:
- description: Item Name
name: itemname
required: true
type: TEXT
groupName: labeling
- description: Room Name
name: roomname
required: false
type: TEXT
groupName: labeling
- context: item
description: Switch Item
label: Item
name: switchitem
required: false
type: TEXT
groupName: items
- context: item
description: Dimmer Item
label: Item
name: dimmeritem
required: false
type: TEXT
groupName: items
- context: item
description: Scenes
label: Scenes
name: sceneitem
required: false
type: TEXT
groupName: items
- context: item
description: Color Item
label: Item
name: coloritem
required: false
type: TEXT
groupName: items
- description: Icon name (Dynamic icons are supported)
name: icon
required: false
type: TEXT
groupName: icons
- description: OFF = Horizontal orientation | ON = Vertical orientation.
label: Vertical toggle orientation.
name: switchorientation
required: false
type: BOOLEAN
groupName: items
- description: Card background color | "ON" state
name: bgcolorON
required: false
type: TEXT
groupName: facecolors
- description: Card background color | "OFF" state
name: bgcolorOFF
required: false
type: TEXT
groupName: facecolors
- description: Switch backround color | "ON" state
name: switchONbgcolor
required: false
type: TEXT
groupName: facecolors
- description: Switch background color | "OFF" state
name: switchOFFbgcolor
required: false
type: TEXT
groupName: facecolors
- description: Switch handle color | "ON" state
name: switchhandleONcolor
required: false
type: TEXT
groupName: facecolors
- description: Switch handle color | "OFF" state
name: switchhandleOFFcolor
required: false
type: TEXT
groupName: facecolors
- description: Slider Color
name: sliderbgcolor
required: false
type: TEXT
groupName: facecolors
- description: Slider label background color (dimmervalue background)
name: sliderlabelbgcolor
required: false
type: TEXT
groupName: facecolors
- description: Font color device name.
name: devicefontcolor
required: false
type: TEXT
groupName: fontcolors
- description: Font color room name.
name: roomfontcolor
required: false
type: TEXT
groupName: fontcolors
- description: Label font color (dimmervalue).
name: dimmerlabelfontcolor
required: false
type: TEXT
groupName: fontcolors
parameterGroups:
- name: labeling
label: Name definitions
description: Please enter a name for device and location.
- name: icons
label: Icon names.
description: Please enter an icon name, e.g., lightbulb. Move (dynamic) icons into the conf/icons/classic/ directory.
- name: items
label: Widget Items
- name: facecolors
label: Face Colors
description: Please enter color informations for the indivual face elements. No value = default widget element color. Use values like rgba(250, 0, 0, 1) for red or simply use the color name, e.g., red,blue,pink.
- name: fontcolors
label: Font/Text Colors
description: Please enter color values for the indivual text element. No value = default widget text color.
timestamp: Jan 23, 2023, 1:24:09 PM
component: f7-card
config:
style:
background: '=items[props.switchitem].state == "ON" && !props.bgcolorOFF && !props.bgcolorON ? "rgba(255, 255, 0, 0.1)" : items[props.switchitem].state == "OFF" && !props.bgcolorOFF && !props.bgcolorON ? "rgba(28,28,29,1)" : items[props.switchitem].state == "ON" && props.bgcolorOFF && props.bgcolorON ? props.bgcolorON : items[props.switchitem].state == "OFF" && props.bgcolorOFF && props.bgcolorON ? props.bgcolorOFF : items[props.switchitem].state == "OFF" && !props.bgcolorOFF && props.bgcolorON ? "rgba(28,28,29,1)" : items[props.switchitem].state == "OFF" && props.bgcolorOFF && !props.bgcolorON ? props.bgcolorOFF : items[props.switchitem].state == "ON" && !props.bgcolorOFF && props.bgcolorON ? props.bgcolorON : items[props.switchitem].state == "ON" && props.bgcolorOFF && !props.bgcolorON ? "rgba(255, 255, 0, 0.1)" : props.bgcolorOFF'
border-radius: 20px
max-height: 60px
min-height: 60px
overflow: hidden
position: relative
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
width: 50
slots:
default:
- component: oh-slider
config:
item: =props.dimmeritem
label: true
max: 100
min: 0
releaseOnly: true
scale: false
step: 1
style:
--f7-range-bar-active-bg-color: '=props.sliderbgcolor ? props.sliderbgcolor : "rgba(255,240,0,0.5)"'
--f7-range-bar-bg-color: '=!items[props.switchitem].state == "ON" ? "transparent" : "transparent"'
--f7-range-bar-border-radius: 20px
--f7-range-bar-size: 60px
--f7-range-knob-color: transparent
--f7-range-knob-size: 0px
--f7-range-label-bg-color: '=!props.sliderlabelbgcolor == "" ? props.sliderlabelbgcolor : "rgba(150,150,0,0.7)"'
--f7-range-label-border-radius: 5px
--f7-range-label-font-size: 20px
--f7-range-label-font-weight: 400
--f7-range-label-padding: 0px 2px
--f7-range-label-size: 30px
--f7-range-label-text-color: '=props.dimmerlabelfontcolor ? props.dimmerlabelfontcolor : "rgba(255,255,255,0.9)"'
height: 60px
position: relative
width: 100%
unit: "%"
visible: "=props.dimmeritem ? true : false"
- component: f7-col
config:
width: 10
slots:
default:
- component: oh-toggle
config:
class:
- '=props.switchorientation ? "large-vertical-toggle" : ""'
item: =props.switchitem
style:
--f7-theme-color: '=props.switchONbgcolor ? props.switchONbgcolor : "rgba(255,204,0,1)"'
--f7-toggle-border-color: rgba(0,0,0,0.5)
--f7-toggle-handle-color: '=items[props.switchitem].state == "OFF" && !props.switchhandleOFFcolor ? "rgba(60,60,60,1)" : items[props.switchitem].state == "OFF" && props.switchhandleOFFcolor ? props.switchhandleOFFcolor : items[props.switchitem].state == "ON" && !props.switchhandleONcolor ? "rgba(255,255,255,1)" : items[props.switchitem].state == "ON" && props.switchhandleONcolor ? props.switchhandleONcolor : items[props.switchitem].state == "OFF" && !props.switchhandleOFFcolor && !props.switchhandleONcolor ? "rgba(60,60,60,1)" : items[props.switchitem].state == "ON" && !props.switchhandleOFFcolor && !props.switchhandleONcolor ? "rgba(255,255,0,1)" : ""'
--f7-toggle-height: '=props.switchorientation ? "20px" : "30px"'
--f7-toggle-inactive-color: '=props.switchOFFbgcolor ? props.switchOFFbgcolor : "rgba(20,20,20,1)"'
--f7-toggle-width: '=props.switchorientation ? "30px" : "60px"'
position: absolute
top: '=props.switchorientation ? "calc(50% - 10px)" : "calc(50% - 15px)"'
visible: "=props.switchitem ? true : false"
- component: f7-col
config:
width: 10
slots:
default:
- component: oh-colorpicker
config:
icon: colorwheel
item: =props.color
openIn: auto
position: absolute
visible: "=props.coloritem ? true : false"
- component: f7-col
config:
width: 15
slots:
default:
- component: oh-button
config:
style: right:20%
text: Scenes
fill: true
action: options
actionItem: =props.scenes
color: blue
position: absolute
top: calc(50% - 10px)
visible: "=props.sceneitem ? true : false"
- component: f7-row
config:
style:
overflow: hidden
pointer-events: none
position: absolute
text-overflow: ellipse
top: calc(50% - 29px)
user-select: none
white-space: nowrap
width: 100%
slots:
default:
- component: f7-col
config:
style:
left: 2%
position: relative
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
min-width: 50px
width: 10
slots:
default:
- component: oh-icon
config:
height: 54
icon: '=props.icon ? props.icon : "lightbulb"'
state: "=props.dimmeritem ? items[props.dimmeritem].state : items[props.switchitem].state"
style:
left: calc(50% - 27px)
pointer-events: none
top: calc(50% - 27px)
user-select: none
- component: f7-col
config:
width: 40
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
id: itemdescfooter
slots:
default:
- component: Label
config:
style:
color: '=props.devicefontcolor ? props.devicefontcolor : "rgba(255,255,255,0.9)"'
font-size: 18px
font-weight: 400
left: 0
line-height: 30px
mix-blend-mode: brighten
padding: 0px
text-shadow: 0px 2px 15px rgba(0, 0, 0,0.2)
user-select: none
text: '=props.itemname ? props.itemname : "Bitte Namen eingeben."'
- component: f7-row
slots:
default:
- component: f7-col
config:
id: itemdescfooter
slots:
default:
- component: Label
config:
style:
color: '=props.roomfontcolor ? props.roomfontcolor : "rgba(200,200,200,0.6)"'
font-size: 16px
left: 0
line-height: 16px
mix-blend-mode: brighten
padding: 2px
pointer-events: none
text-shadow: 0px 0px 10px rgba(0, 0, 0,0.2)
user-select: none
text: '=props.roomname ? props.roomname : "Bitte Raumname (location) eintragen."'
- component: f7-col
config:
id: spacer
width: 50
slots:
default:
- component: Label
config:
style:
color: rgba(250,250,250,0.6)
font-size: 25px
left: 0
line-height: 50px
pointer-events: none
text-align: left
text-shadow: 2px 2px 5px rgba(0,0,0,0.2)
user-select: none