I just want to share my first more advanced widget for Xiaomi V2 Gateway.
It works as expected. The background represents the current light color.
Clicking on widget - changes color to random.
And hue slider allows changing color to a specific one.
Do you guys have any comments/ideas/improvements?
Widget code:
uid: toggle_with_current_color_display
tags: []
props:
parameters:
- context: item
label: HSL Color
name: HSLColor
required: false
type: TEXT
- context: item
label: Set Color item
name: SetColor
required: false
type: TEXT
- label: Random color rule id
name: RuleId
required: false
type: TEXT
parameterGroups: []
timestamp: Jun 1, 2021, 11:52:02 AM
component: f7-card
config:
style:
noShadow: false
class:
- padding
background-color: ="hsl(" + items[props.HSLColor].state + ")"
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: var(--f7-card-expandable-box-shadow)
height: 8.5em
max-width: 400px
slots:
default:
- component: f7-chip
config:
bgColor: white
text: = "(" + items[props.HSLColor].state + ")"
style:
color: black
position: absolute
top: 0
left: 0
margin: 0.5em 0 0 1em
- component: f7-chip
config:
bgColor: white
style:
z-index: 2
display: inline-block
height: auto
width: 90%
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
slots:
default:
- component: oh-colorpicker
config:
item: =props.SetColor
modules:
- hue-slider
- component: f7-icon
config:
f7: shuffle
size: 20
style:
color: black
margin-right: 0.25em
position: absolute
margin-bottom: 0.25em
bottom: 0
right: 0
- component: oh-link
config:
action: rule
actionRule: =props.RuleId
style:
z-index: 1
position: absolute
width: 100%
height: 100%
top: 0
left: 0
Color convert rule:
triggers:
- id: "1"
configuration:
itemName: XiaomiGateway_Color
state: ""
type: core.ItemStateChangeTrigger
conditions: []
actions:
- inputs: {}
id: "2"
configuration:
type: application/vnd.openhab.dsl.rule
script: >-
var hsbValue = XiaomiGateway_Color.state as HSBType;
val hsbHue = hsbValue.hue.floatValue;
val hsbSat = hsbValue.saturation.floatValue;
val hsbBrt = hsbValue.brightness.floatValue;
val hue = hsbHue.intValue;
val l = (2 - hsbSat / 100) * hsbBrt / 2;
var saturation = 0;
if(l < 50){
saturation = (hsbSat * hsbBrt / (l * 2)).intValue;
}
else{
saturation = (hsbSat * hsbBrt / (200 - l * 2)).intValue;
}
val lightness = (hsbBrt / 2.0).intValue;
XiaomiGateway_HSLColor.sendCommand(hue + ", " + saturation + "%, " + lightness + "%");
type: script.ScriptAction
Rule to cache gateway brightness
triggers:
- id: "1"
configuration:
itemName: XiaomiGateway_Brightness
type: core.ItemStateChangeTrigger
conditions: []
actions:
- inputs: {}
id: "2"
configuration:
type: application/vnd.openhab.dsl.rule
script: >-
if(XiaomiGateway_Brightness.state != 0){
XiaomiGateway_Brightness_Cached.postUpdate(XiaomiGateway_Brightness.state)
}
type: script.ScriptAction