opnhab7373
(Joshua A)
November 14, 2021, 12:05am
1
Continuing the discussion from [OH3] Main UI Examples : Thank you @Integer for sharing your UI widgets. I would like to add the ability to:
set the operating mode on your heating_item label to an options command, allowing the user to select the operating mode. This is my attempt that is not working. I have taken the oh-link out of the code for now to allow for the abiltiy to click what is now set_temp_mode
component: Label
config:
action: options
actionItem: set_temp_mode
actionOptions: 2=Cool,1=Heat,0=Off
visible: "=props.set_temp_mode ? true : false"
text: =items[props.set_temp_mode].state
style:
font-size: 12px
margin-left: 5px
margin-top: 0px
hide components based on state of set_temp_mode This enable/disable the setpoints based on the operating mode of the thermostat 2=Cool,1=Heat,0=Off I don’t know how to make the expressions for each component. Here’s the gist with triple Square brackets to make them esily seen
visible: items.set_temp_mode.state === "HEAT" && =props.set_temp_heat ? true : false
Here’s the modified code.
uid: Cell_Temp_Card_1
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- description: in rgba() or HEX or empty
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
label: Current Temperature
name: temp_item
required: false
type: TEXT
- context: item
label: Cooling Temperature Setpoint
name: set_temp_cool
required: false
type: TEXT
- context: item
label: Heating Temperature Setpoint
name: set_temp_heat
required: false
type: TEXT
- context: item
label: Current Humidity
name: humidity_item
required: false
type: TEXT
- context: item
description: Options Item
label: HVAC Mode
name: set_temp_mode
required: false
type: TEXT
parameterGroups: []
timestamp: Nov 13, 2021, 2:03:45 PM
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 120px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 18
style:
margin-right: 10px
visible: "=props.icon ? true : false"
- component: Label
config:
text: "=props.title ? props.title : ''"
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -20px
left: 16px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=items[props.temp_item].displayState ? items[props.temp_item].displayState : items[props.temp_item].state"
style:
font-size: 22px
font-weight: 400
margin-left: 0px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -40px
left: 12px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: drop
size: 18
visible: "=props.humidity_item ? true : false"
- component: Label
config:
visible: "=props.humidity_item ? true : false"
text: =items[props.humidity_item].displayState
style:
font-size: 12px
margin-left: 5px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -63px
left: 12px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
visible: items.set_temp_mode.state === "HEAT"
f7: flame
size: 18
- component: f7-icon
config:
visible: items.set_temp_mode.state === "COOL"
f7: snow
size: 18
- component: Label
config:
action: options
actionItem: set_temp_mode
actionOptions: 2=Cool,1=Heat,0=Off
visible: "=props.set_temp_mode ? true : false"
text: =items[props.set_temp_mode].state
style:
font-size: 12px
margin-left: 5px
margin-top: 0px
- component: oh-button
config:
visible: items.set_temp_mode.state === "HEAT" && =props.set_temp_heat ? true : false
iconColor: red
iconF7: arrow_up_circle
iconSize: 35
action: command
actionItem: =props.set_temp_heat
actionCommand: =Number(items[props.set_temp_heat].state.split(' ')[0]) + 1
style:
position: absolute
top: 12px
right: 10px
height: 35px
background: transparent
- component: oh-button
config:
visible: items.set_temp_mode.state === "HEAT" && =props.set_temp_heat ? true : false
iconColor: red
iconF7: arrow_down_circle
iconSize: 35
action: command
actionItem: =props.set_temp_heat
actionCommand: =Number(items[props.set_temp_heat].state.split(' ')[0]) - 1
style:
position: absolute
top: 74px
right: 10px
height: 35px
background: transparent
- component: Label
config:
visible: items.set_temp_mode.state === "HEAT" && =props.set_temp_heat ? true : false
text: =items[props.set_temp_heat].state
style:
font-size: 12px
position: absolute
right: 15px
top: 50px
- component: oh-button
config:
visible: items.set_temp_mode.state === "COOL" && =props.set_temp_cool ? true : false
iconColor: blue
iconF7: arrow_up_circle
iconSize: 35
action: command
actionItem: =props.set_temp_cool
actionCommand: =Number(items[props.set_temp_cool].state.split(' ')[0]) + 1
style:
position: absolute
top: 12px
right: 10px
height: 35px
background: transparent
- component: oh-button
config:
visible: items.set_temp_mode.state === "COOL" && =props.set_temp_cool ? true : false
iconColor: blue
iconF7: arrow_down_circle
iconSize: 35
action: command
actionItem: =props.set_temp_cool
actionCommand: =Number(items[props.set_temp_cool].state.split(' ')[0]) - 1
style:
position: absolute
top: 74px
right: 10px
height: 35px
background: transparent
- component: Label
config:
visible: items.set_temp_mode.state === "COOL" && =props.set_temp_cool ? true : false
text: =items[props.set_temp_cool].state
style:
font-size: 12px
position: absolute
right: 15px
top: 50px
- component: f7-block
config:
style:
position: absolute
top: 15px
left: 15px
width: "=props.set_temp_heat ? 'calc(100% - 55px)' : '100%' "
height: 120px
slots:
default:
- component: oh-trend
config:
trendItem: =props.temp_item
trendGradient:
- "#aa2b1d"
- "#cc561e"
- "#ef8d32"
- "#beca5c"
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(30%)
position: absolute
width: 100%
height: 100%
top: 0px
left: 0px
z-index: 1
Thank you for any assistance.
Here is my weather widget
Thankyou again for doing this.
I have adapted this for my aircons as I have two I still have some changes to make when I have time.
I created items using a model - Create Equipment from thing
[image]
You can see all it creates all the item names with a prefix of BedroomAircon
So to setup widget you only need this props and all the others are crated dynamically.
I also added a label
[image]
My 2 Aircons
[image]
I did change a couple of things to suit.
Work in progress
uid: Sensibo_A…
I managed to get what I wanted by removing the trend line.
uid: Cell_Temp_Card_1
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- description: in rgba() or HEX or empty
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
label: Current Temperature
name: temp_item
required: false
type: TEXT
- context: item
label: Set Temperature Heat Setpoint
name: heat_temp_item
required: false
type: TEXT
- context: item
label: Set Temperature Cool Setpoint
name: cool_temp_item
required: false
type: TEXT
- context: item
label: Current Humidity
name: humidity_item
required: false
type: TEXT
- context: item
description: on/off item
label: Heating control item
name: heating_item
required: false
type: TEXT
parameterGroups: []
timestamp: Nov 17, 2021, 9:24:56 PM
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 120px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 18
style:
margin-right: 10px
visible: "=props.icon ? true : false"
- component: Label
config:
text: "=props.title ? props.title : ''"
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -20px
left: 16px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=items[props.temp_item].displayState ? items[props.temp_item].displayState : items[props.temp_item].state"
style:
font-size: 22px
font-weight: 400
margin-left: 0px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -40px
left: 12px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: drop
size: 18
visible: "=props.humidity_item ? true : false"
- component: Label
config:
visible: "=props.humidity_item ? true : false"
text: =items[props.humidity_item].displayState
style:
font-size: 12px
margin-left: 5px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -63px
left: 12px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
visible: "=props.heating_item ? true : false"
f7: '=(items[props.heating_item].state == "HEAT") ? "thermometer_sun" : (items[props.heating_item].state == "COOL") ? "thermometer_snowflake" : (items[props.heating_item].state == "AUTO") ? "thermometer" : (items[props.heating_item].state == "OFF") ? "power" : "multiply_circle"'
color: '=(items[props.heating_item].state == "HEAT") ? "red" : (items[props.heating_item].state == "COOL") ? "blue" : (items[props.heating_item].state == "AUTO") ? "black" : (items[props.heating_item].state == "OFF") ? "black" : "gray"'
size: 18
- component: oh-button
config:
action: options
outline: false
actionOptions: 2=Cool,1=Heat,0=Off
actionItem: =props.heating_item
item: =props.heating_item
text: =items[props.heating_item].state
fontSize: "22"
icon: f7:thermometer
style:
position: absolute
bottom: -4px
left: 23px
- component: oh-button
config:
visible: '=(items[props.heating_item].state == "HEAT") ? true : false'
iconColor: red
iconF7: arrow_up_circle
iconSize: 35
action: command
actionItem: =props.heat_temp_item
actionCommand: =Number(items[props.heat_temp_item].state.split(' ')[0]) + 1
style:
position: absolute
top: 12px
right: 10px
height: 35px
background: transparent
- component: oh-button
config:
visible: '=(items[props.heating_item].state == "COOL") ? true : false'
iconColor: blue
iconF7: arrow_up_circle
iconSize: 35
action: command
actionItem: =props.cool_temp_item
actionCommand: =Number(items[props.cool_temp_item].state.split(' ')[0]) + 1
style:
position: absolute
top: 12px
right: 10px
height: 35px
background: transparent
- component: oh-button
config:
visible: '=(items[props.heating_item].state == "HEAT") ? true : false'
iconColor: red
iconF7: arrow_down_circle
iconSize: 35
action: command
actionItem: =props.heat_temp_item
actionCommand: =Number(items[props.heat_temp_item].state.split(' ')[0]) - 1
style:
position: absolute
top: 74px
right: 10px
height: 35px
background: transparent
- component: oh-button
config:
visible: '=(items[props.heating_item].state == "COOL") ? true : false'
iconColor: blue
iconF7: arrow_down_circle
iconSize: 35
action: command
actionItem: =props.cool_temp_item
actionCommand: =Number(items[props.cool_temp_item].state.split(' ')[0]) - 1
style:
position: absolute
top: 74px
right: 10px
height: 35px
background: transparent
- component: Label
config:
visible: '=(items[props.heating_item].state == "HEAT") ? true : false'
text: =items[props.heat_temp_item].state
style:
font-size: 12px
position: absolute
right: 15px
top: 50px
- component: Label
config:
visible: '=(items[props.heating_item].state == "COOL") ? true : false'
text: =items[props.cool_temp_item].state
style:
font-size: 12px
position: absolute
right: 15px
top: 50px
waspie
(scott dee)
November 22, 2021, 8:13pm
4
I played with this and kept the trend line but removed the ability to click it. same concept you were going for, i think.
Do you know how to display different text for the heating mode? I use 0=off, 1= on,2=auto so my states show up 1,2,3 but I would prefer they show as on/off/auto. Anyway, here’s my widget if this helps you any
uid: Cell_Temp_Card_1
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- description: in rgba() or HEX or empty
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
label: Current Temperature
name: temp_item
required: false
type: TEXT
- context: item
label: Set Temperature
name: set_temp_item
required: false
type: TEXT
- context: item
label: Current Humidity
name: humidity_item
required: false
type: TEXT
- context: item
description: on/off item
label: Heating control item
name: heating_item
required: false
type: TEXT
parameterGroups: []
timestamp: Nov 22, 2021, 3:05:06 PM
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 120px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 18
style:
margin-right: 10px
visible: "=props.icon ? true : false"
- component: Label
config:
text: "=props.title ? props.title : ''"
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -20px
left: 16px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=items[props.temp_item].displayState ? items[props.temp_item].displayState : items[props.temp_item].state"
style:
font-size: 22px
font-weight: 400
margin-left: 0px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -40px
left: 12px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: drop
size: 18
visible: "=props.humidity_item ? true : false"
- component: Label
config:
visible: "=props.humidity_item ? true : false"
text: =items[props.humidity_item].displayState
style:
font-size: 12px
margin-left: 5px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -63px
left: 12px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
visible: "=props.heating_item ? true : false"
f7: flame
color: '=(items[props.heating_item].state == "0") ? "red" : (items[props.heating_item].state == "1") ? "green" : (items[props.heating_item].state == "2") ? "blue"'
size: 18
- component: oh-button
config:
action: options
outline: false
actionOptions: 2=Auto,1=On,0=Off
actionItem: =props.heating_item
item: =props.heating_item
text: =items[props.heating_item].state
fontSize: "22"
icon: f7:thermometer
style:
position: absolute
bottom: -5px
left: 35px
- component: oh-button
config:
visible: "=props.set_temp_item ? true : false"
iconColor: red
iconF7: arrow_up_circle
iconSize: 35
action: command
actionItem: =props.set_temp_item
actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
style:
position: absolute
top: 12px
right: 10px
height: 35px
background: transparent
- component: oh-button
config:
visible: "=props.set_temp_item ? true : false"
iconColor: red
iconF7: arrow_down_circle
iconSize: 35
action: command
actionItem: =props.set_temp_item
actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) - 0.5
style:
position: absolute
top: 74px
right: 10px
height: 35px
background: transparent
- component: Label
config:
visible: "=props.set_temp_item ? true : false"
text: =items[props.set_temp_item].state
style:
font-size: 12px
position: absolute
right: 15px
top: 50px
- component: f7-block
config:
style:
position: absolute
top: 15px
left: 15px
width: "=props.set_temp_item ? 'calc(100% - 55px)' : '100%' "
height: 90px
slots:
default:
- component: oh-trend
config:
trendItem: =props.temp_item
trendGradient:
- "#aa2b1d"
- "#cc561e"
- "#ef8d32"
- "#beca5c"
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(50%)
position: absolute
width: 100%
height: 100%
top: 0px
left: 0px
z-index: 1
My Item is mapped via transform so that the state is shown in text rather than the number value. Therefore, the command is still 0,1,or 2 and the state will show as Off,On,or Auto
actionOptions: 2=Auto,1=On,0=Off
actionItem: =props.heating_item
item: =props.heating_item
text: =items[props.heating_item].state
1 Like
nikos7179
(nikos7179)
November 29, 2021, 8:35pm
6
Nice widget. Can this be done with a repeater ? I mean just assigned a group with all the thermostats and build a page with all the thermostats with this nice widget?
I have 2 of these widgets on a page. 1 for upstairs and the other for down. I guess you can have a setpoint group to change all the thermostat setpoints at once. As well as a temperature group with an average of thermostat temps.
I’m not sure what you are asking.
nikos7179
(nikos7179)
December 1, 2021, 4:53pm
8
i have 8 thermostats. if i want a page with all my Thermostats with this widget, i must setup 8 times the widget, correct? its not possible someone that know Beter than me yaml to modify the widget with repeater function? just enter your group item of all your thermostat and then the widget will produce 8 different widget. sorry if my English dont help me to clarify exact what i mean.
I think 8 different widgets is the way to go as not to clutter any one particular widget.
On the Group reference I was thinking you could set the group to allow you to control all eight at once.
i.e. Changing the value of the group will change all of the group items.
Group TstatAllMode ["All Thermostat Mode Controller"]
will have the following items
Number Tstat1Mode "Thermostat 1 Mode" (TstatAllMode)
Number Tstat2Mode "Thermostat 2 Mode" (TstatAllMode)
Number Tstat3Mode "Thermostat 3 Mode" (TstatAllMode)
Number Tstat4Mode "Thermostat 4 Mode" (TstatAllMode)
Number Tstat5Mode "Thermostat 5 Mode" (TstatAllMode)
mode.map
0=Off
1=Heat
2=Cool
3=Auto