Hey,
I wanted to share my version of this widget.
…If you click the 3 dots in the corner:
I designed this for Shelly RGBW which is having just 4 physical channels therefore I have White and Gain to control brightness based on whether I am using it as a ‘normal’ white light or I’m using it with a certain color set.
First of all i needed a ‘boolean’ to decide in which mode I’m in so I created an Item which then I assigned in the model hierarchy to the proper place:
Then I created a rule like this:
rule "RGBWLedStripDiningRoom Mode Change"
when
Item RGBWLedStripDiningRoom_ColorMode changed
then
if (RGBWLedStripDiningRoom_ColorMode.state == ON) {
RGBWLedStripDiningRoom_White.sendCommand(0)
RGBWLedStripDiningRoom_Gain.sendCommand(100)
}
if (RGBWLedStripDiningRoom_ColorMode.state == OFF) {
RGBWLedStripDiningRoom_Gain.sendCommand(0)
RGBWLedStripDiningRoom_White.sendCommand(100)
}
end
Then I have the helper widget for the popup:
uid: colorpickerPopup
tags: []
props:
parameters:
- context: item
description: An item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Feb 12, 2021, 8:20:49 PM
component: f7-page
config:
style:
position: relative
-ms-user-select: none
-moz-user-select: none
-webkit-user-select: none
user-select: none
background: rgba(42,48,78,1)
--f7-card-bg-color: none
backdrop-filter: none
padding: 0
margin: 0
slots:
default:
- component: oh-colorpicker-card
config:
item: =props.item
noBorder: true
noShadow: true
modules:
- hs-spectrum
- brightness-slider
…And the widget itself:
uid: Shelly_RGBW
tags: []
props:
parameters:
- description: Title
label: Title
name: title
required: false
type: TEXT
- context: item
description: Power item for the widget
label: Power
name: power
required: true
type: TEXT
- context: item
description: Color item for the widget
label: Color
name: color
required: true
type: TEXT
- context: item
description: Gain item for the widget
label: Gain
name: gain
required: true
type: TEXT
- context: item
description: White item for the widget
label: White
name: white
required: true
type: TEXT
- context: item
description: Name of the switch for the Color Mode
label: Color Mode
name: colormode
required: true
type: TEXT
parameterGroups: []
timestamp: Feb 16, 2021, 5:18:47 PM
component: f7-card
config:
style:
border-radius: 20px
slots:
content:
- component: f7-row
config:
class:
- justify-content-center
slots:
default:
- component: oh-toggle
config:
item: =props.power
actionCommand: ON
actionCommandAlt: OFF
style:
position: absolute
margin-top: 10px
left: 0
font-weight: 600
z-index: 99
margin-left: 20px
- component: Label
config:
text: =props.title
- component: oh-button
config:
colorTheme: white
color: white
iconMaterial: more_horiz
iconSize: 20px
action: popup
actionModal: widget:colorpickerPopup
actionModalConfig:
item: =props.color
style:
position: absolute
margin-top: 0px
margin-right: 20px
right: 0
font-weight: 600
z-index: 99
- component: f7-row
config:
class:
- margin-left
- margin-right
- padding-top
style:
margin-top: 10px
slots:
default:
- component: oh-slider
config:
visible: =(items[props.colormode].state === "OFF")
item: =props.white
min: 0
max: 100
unit: "%"
- component: oh-slider
config:
visible: =(items[props.colormode].state === "ON")
item: =props.gain
min: 0
max: 100
unit: "%"
- component: f7-row
config:
class:
- padding
slots:
default:
- component: oh-button
config:
text: Color Mode
fill: '=(items[props.colormode].state === "OFF") ? false : true'
outline: true
action: toggle
actionItem: =props.colormode
actionCommand: ON
actionCommandAlt: OFF
style:
width: 100%
I am pretty new to OH, been using HA for a while now so there might be easier solutions - I’m still exploring. This is my first Widget and along with that I am aware that my UI design skills really suck, but I needed something to be able to control my lights based on Shelly RGBW so here it is. Hope it will be useful for someone 
