Hi!
I would like to present my first widget based on widget “Thermostat” found on community.
This improved widget allow you to monitor and control the AC device seting it to Cool mode, Heat mode, Dry mode and Fan mode.
When Cool or Heat mode are selected, it show the control buttons to set Setpoint temperature.
When Dry or Fan mode are selected, it shows FAN speed (actually doesn’t work in this release, I’m looking on how make it work.)
If Trendline is defined on props, it become clickable to show graph of temperature trend.
I would thank for users that give me this idea, and if anyone have suggestions, just tell me. I’m always looking for new ideas!
Screenshots
Default view when Conditioner is OFF:
View of Conditioner ON with Dehumidifier Mode in action:
View when Conditioner ON with Cool mode selected. This mode allow to control also Set Point temperature on the right.
Trendline is clickable to show graph in different ways:
Version 2.0
Changelog
Version 2.0
- Completely restyled
- Added settings to control FAN DIRECTION and FAN SPEED
- Recolored all values to improve readability
- Aded auto adapt to Light/Dark mode
Version 0.3
- trendline color based on MODE in use. White when conditioner is OFF. (thanks to JustinG)
Version 0.2
- translated all MODES to english
- added support for FAN speed (thanks to JustinG)
- changed trandline color to red gradient
- when OFF, MODES icons are invisible
Version 0.1
- initial release
Resources
YAML Code:
uid: Conditioner Card for Daikin AC
tags:
- MadeByEvil
props:
parameters:
- description: Color
label: color
name: color
required: false
type: TEXT
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- default: snow
description: Icon on top of the card ( only f7 icons without "f7:" )
label: Icon
name: icon
required: false
type: TEXT
- context: item
description: Item to show CURRENT TEMPERATURE of the room
label: Temperature Item
name: temp_item
required: false
type: TEXT
- context: item
description: Item to manage FAN speed
label: Fan Item
name: set_speed_item
required: false
type: TEXT
- context: text
description: "value=label - Example: LEVEL_1=Fan Speed 1"
label: Array
name: tArray
required: false
type: TEXT
multiple: true
- context: item
description: Item to manage SET POINT temperature
label: SetPoint Item
name: set_temp_item
required: false
type: TEXT
- context: item
description: Item to turn ON/OFF conditioner
label: Power ON/OFF Item
name: power
required: false
type: TEXT
- context: item
description: Item to manage the MODE (HEAT,COLD,DEHUMIDIFIER,FAN)
label: Mode Item
name: heating_item
required: false
type: TEXT
- context: item
description: Trendline item
label: Trendline
name: widgettrend
required: false
type: TEXT
parameterGroups:
- name: widgetAction
context: action
label: Action
description: Action to perform when the element is clicked
timestamp: Aug 21, 2022, 5:31:40 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)
height: 200px
margin-left: 5px
margin-right: 5px
slots:
default:
- component: oh-link
config:
actionPropsParameterGroup: widgetAction
color: white
class:
- no-padding
- no-margin
style:
max-height: 192px
width: 80%
height: 80%
position: absolute
top: 0
left: 0
z-index: 98
content:
- component: f7-block
config:
style:
position: absolute
top: -10px
left: 10px
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: 20px
font-weight: 400
margin-left: 0px
margin-top: 0px
color: '=items[props.temp_item].state >= "22" ? "red" : items[props.temp_item].state <= "20" ? "blue" :"white"'
- component: oh-button
config:
visible: '=items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "true" : items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "true" : "false"'
iconColor: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "red" : items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].state == "FAN" && items[props.power].state == "ON" ? "orange" : "gray"'
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: 40px
right: 0px
height: 33px
background: transparent
z-index: 98
- component: oh-button
config:
visible: '=items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "true" : items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "true" : "false"'
iconColor: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "red" : items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].state == "FAN" && items[props.power].state == "ON" ? "orange" : "gray"'
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: 104px
right: 0px
height: 33px
background: transparent
z-index: 98
- component: Label
config:
visible: '=items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "true" : items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "true" : "false"'
text: '=items[props.set_temp_item].state == "UNDEF" ? " " : items[props.set_temp_item].state'
style:
font-size: 12px
position: absolute
right: 8px
top: 80px
- component: oh-button
config:
visible: "=props.set_speed_item && items[props.power].state == 'ON' ? true : false"
iconColor: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "red" : items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].state == "FAN" && items[props.power].state == "ON" ? "orange" : "gray"'
iconF7: arrow_up_circle
iconSize: 35
action: command
actionItem: =props.set_speed_item
actionCommand: =props.tArray[Math.min(props.tArray.join('').substring(0,props.tArray.join('').search(items[props.set_speed_item].state)).split('=').length,props.tArray.length-1)].split('=')[0]
style:
position: absolute
top: 40px
right: 40px
height: 35px
background: transparent
z-index: 98
- component: oh-button
config:
visible: "=props.set_speed_item && items[props.power].state == 'ON' ? true : false"
iconColor: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "red" : items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].state == "FAN" && items[props.power].state == "ON" ? "orange" : "gray"'
iconF7: arrow_down_circle
iconSize: 35
action: command
actionItem: =props.set_speed_item
actionCommand: =props.tArray[Math.max(props.tArray.join('').substring(0,props.tArray.join('').search(items[props.set_speed_item].state)).split('=').length-2,0)].split('=')[0]
style:
position: absolute
top: 104px
right: 40px
height: 35px
background: transparent
z-index: 98
- component: Label
config:
visible: "=props.set_speed_item && items[props.power].state == 'ON' ? true : false"
text: "=((items[props.set_speed_item].state) ? props.tArray[props.tArray.join('').substring(0,props.tArray.join('').search(items[props.set_speed_item].state)).split('=').length-1].split('=')[1] : 'Push a button')"
style:
color: red
font-size: 12px
position: absolute
right: 58px
top: 80px
- component: f7-block
config:
style:
position: absolute
top: 50px
left: 15px
width: "=props.set_temp_item ? 'calc(100% - 55px)' : '100%' "
height: 120px
slots:
default:
- component: oh-trend
config:
trendItem: =props.widgettrend
trendGradient: =[(items[props.heating_item].state == 'FAN' && items[props.power].state == "ON")?('orange'):(items[props.heating_item].state == 'COLD' && items[props.power].state == "ON")?('blue'):(items[props.heating_item].state == 'HEAT' && items[props.power].state == "ON")?('red'):(items[props.heating_item].state == 'DEHUMIDIFIER' && items[props.power].state == "ON")?('yellow'):('white'),('#6A6A6A')]
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: 15px
z-index: 1
footer:
- component: oh-toggle
config:
item: =props.power
color: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "red" : items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].state == "FAN" && items[props.power].state == "ON" ? "orange" : "gray"'
style:
--f7-toggle-height: 20px
--f7-toggle-width: 40px
font-size: 100%
top: 125px
- component: oh-button
config:
visible: '=items[props.power].state == "ON" ? true : false'
iconColor: '=items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "blue" : "gray"'
iconF7: snow
iconSize: 25
action: command
actionItem: =props.heating_item
actionCommand: COLD
style:
position: absolute
top: 133px
left: 25%
height: 35px
background: transparent
z-index: 98
- component: oh-button
config:
visible: '=items[props.power].state == "ON" ? true : false'
iconColor: '=items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "red" : "gray"'
iconF7: flame
iconSize: 20
action: command
actionItem: =props.heating_item
actionCommand: HEAT
style:
position: absolute
top: 133px
left: 45%
height: 35px
background: transparent
z-index: 98
- component: oh-button
config:
visible: '=items[props.power].state == "ON" ? true : false'
iconColor: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power].state == "ON" ? "yellow" : "gray"'
iconF7: drop
iconSize: 20
action: command
actionItem: =props.heating_item
actionCommand: DEHUMIDIFIER
style:
position: absolute
top: 133px
left: 65%
height: 35px
background: transparent
z-index: 98
- component: oh-button
config:
visible: '=items[props.power].state == "ON" ? true : false'
iconColor: '=items[props.heating_item].state == "FAN" && items[props.power].state == "ON" ? "orange" : "gray"'
iconF7: wind
iconSize: 20
action: command
actionItem: =props.heating_item
actionCommand: FAN
style:
position: absolute
top: 133px
left: 85%
height: 35px
background: transparent
z-index: 98
Conditioner Card for Daikin AC_V2
uid: Conditioner Card for Daikin AC_V2
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title_item
required: false
type: TEXT
- context: item
description: Item to show CURRENT TEMPERATURE of the room
label: Temperature Item
name: temp_item
required: false
type: TEXT
- context: item
description: Item to manage FAN SPEED
label: Fan Speed Item
name: fanspeed_item
required: false
type: TEXT
- context: item
description: Item to manage FAN DIRECTION
label: Fan Direction Item
name: fandirection_item
required: false
type: TEXT
- context: item
description: Item to manage SET POINT temperature
label: SetPoint Item
name: set_temp_item
required: false
type: TEXT
- context: item
description: Item to turn ON/OFF conditioner
label: Power ON/OFF Item
name: power_item
required: false
type: TEXT
- context: item
description: Item to manage the MODE (AUTO,HEAT,COLD,DEHUMIDIFIER,FAN)
label: Mode Item
name: heating_item
required: false
type: TEXT
- default: "false"
description: Show/Hide shadow for the widget card
label: Widget shadow
name: boxshadow
required: false
type: BOOLEAN
parameterGroups:
- name: widgetAction
context: action
label: Action
description: Action to perform when the element is clicked
timestamp: Oct 19, 2022, 4:15:45 PM
component: f7-card
config:
noShadow: false
padding: false
style:
background: "=themeOptions.dark === 'dark' ? rgb(35, 35, 35) : rgb(240, 240, 240)"
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: "=props.boxshadow === true ? (themeOptions.dark === 'dark' ? '5px 5px 15px 1px rgba(240,240,240,0.5)' : '5px 5px 15px 1px rgba(35,35,35,0.5)') : '0px 0px 0px 0px rgba(0,0,0,0)'"
height: auto
min-height: 200px
margin-left: 5px
margin-right: 5px
padding: 0px
slots:
content:
- component: f7-card-content
config:
style:
height: auto
slots:
default:
- component: oh-icon
config:
icon: iconify:lucide:sun-snow
style:
color: rgb(33, 150, 243)
position: absolute
top: 25px
width: 40px
- component: Label
config:
style:
color: "=themeOptions.dark === 'dark' ? rgb(35, 35, 35) : rgb(240, 240, 240)"
font-size: 15px
font-weight: 500
margin-left: 50px
text: =props.title_item
- component: oh-toggle
config:
color: blue
item: =props.power_item
style:
position: absolute
right: 3%
top: 20px
--f7-toggle-height: 20px
--f7-toggle-inactive-color: red
--f7-toggle-width: 40px
z-index: 98
- component: f7-row
config: {}
slots:
default:
- component: f7-chip
config:
style:
font-size: 13px
color: '=items[props.temp_item].state >= "21" ? "red" : items[temp_item].state >= "19" ? "black" : rgb(33, 150, 243)'
font-weight: 600
left: 65px
position: absolute
text: "=items[props.temp_item].state ? items[props.temp_item].state : items[props.temp_item].displayState"
- component: f7-chip
config:
font-size: 13px
visible: '=items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "true" : "false"'
style:
background: transparent
color: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power_item].state == "ON" ? "yellow" : items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "red" : items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "rgb(89, 220, 111)" : items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "rgb(33, 150, 243)" : items[props.heating_item].state == "FAN" && items[props.power_item].state == "ON" ? "orange" : "gray"'
font-weight: 600
left: 130px
position: absolute
text: '=items[props.set_temp_item].displayState ? items[props.set_temp_item].displayState : items[props.set_temp_item].state == "UNDEF" ? "Not set" : items[props.set_temp_item].state'
- component: oh-button
config:
action: command
actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
actionItem: =props.set_temp_item
iconColor: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power_item].state == "ON" ? "yellow" : items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "red" : items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "green" : items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "blue" : items[props.heating_item].state == "FAN" && items[props.power_item].state == "ON" ? "orange" : "gray"'
iconF7: arrow_up_circle
iconSize: 25
style:
background: transparent
height: 33px
position: absolute
right: 1%
top: 60px
z-index: 98
visible: '=items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "true" : "false"'
- component: oh-button
config:
action: command
actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) - 0.5
actionItem: =props.set_temp_item
iconColor: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power_item].state == "ON" ? "yellow" : items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "red" : items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "green" : items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "blue" : items[props.heating_item].state == "FAN" && items[props.power_item].state == "ON" ? "orange" : "gray"'
iconF7: arrow_down_circle
iconSize: 25
style:
background: transparent
height: 33px
position: absolute
right: 1%
margin-top: 90px
z-index: 98
visible: '=items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "true" : "false"'
- component: f7-row
config: {}
slots:
default:
- component: f7-col
config:
style:
width: 75%
slots:
default:
- component: oh-trend
config:
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(100%)
margin-left: 40px
margin-top: 10px
height: 120px
z-index: 98
trendGradient:
- orange
- rgb(33, 150, 243)
trendItem: =props.temp_item
- component: f7-block
config:
visible: '=items[props.power_item].state == "ON" ? true : false'
style:
display: flex
width: 100%
justify-content: space-between
slots:
default:
- component: oh-link
config:
visible: '=items[props.power_item].state == "ON" ? true : false'
action: command
actionItem: =props.heating_item
actionCommand: AUTO
slots:
default:
- component: oh-icon
config:
height: 20px
icon: iconify:ic:outline-auto-fix-high
style:
color: '=items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "rgb(89, 220, 111)" : "gray"'
- component: oh-link
config:
visible: '=items[props.power_item].state == "ON" ? true : false'
action: command
actionItem: =props.heating_item
actionCommand: COLD
slots:
default:
- component: oh-icon
config:
height: 20px
icon: iconify:iconoir:snow-flake
style:
color: '=items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "rgb(33, 150, 243)" : "gray"'
- component: oh-link
config:
visible: '=items[props.power_item].state == "ON" ? true : false'
action: command
actionItem: =props.heating_item
actionCommand: HEAT
slots:
default:
- component: oh-icon
config:
height: 20px
icon: iconify:material-symbols:mode-heat-outline
style:
color: '=items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "red" : "gray"'
- component: oh-link
config:
visible: '=items[props.power_item].state == "ON" ? true : false'
action: command
actionItem: =props.heating_item
actionCommand: DEHUMIDIFIER
slots:
default:
- component: oh-icon
config:
height: 20px
icon: iconify:entypo:drop
style:
color: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power_item].state == "ON" ? "rgb(204, 204, 0)" : "gray"'
- component: oh-link
config:
visible: '=items[props.power_item].state == "ON" ? true : false'
action: command
actionItem: =props.heating_item
actionCommand: FAN
slots:
default:
- component: oh-icon
config:
height: 20px
icon: iconify:la:fan
style:
color: '=items[props.heating_item].state == "FAN" && items[props.power_item].state == "ON" ? "rgb(191, 0, 255)" : "gray"'
- component: f7-block
config:
visible: =items[props.power_item].state == "ON
slots:
default:
- component: Label
config:
visible: '=items[props.power_item].state == "ON" ? true : false'
text: "Fan options:"
style:
margin-top: 25px
color: red
- component: oh-link
config:
visible: '=items[props.power_item].state == "ON" ? true : false'
action: options
actionItem: =props.fanspeed_item
slots:
default:
- component: oh-icon
config:
height: 20px
icon: iconify:material-symbols:mode-fan
style:
color: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power_item].state == "ON" ? "rgb(204, 204, 0)" : items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "red" : items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "rgb(89, 220, 111)" : items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "rgb(33, 150, 243)" : items[props.heating_item].state == "FAN" ? "rgb(191,0,255)" : "gray"'
margin-left: 15px
- component: oh-link
config:
visible: '=items[props.power_item].state == "ON" ? true : false'
action: options
actionItem: =props.fandirection_item
slots:
default:
- component: oh-icon
config:
height: 20px
icon: iconify:gis:direction
style:
color: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power_item].state == "ON" ? "rgb(204, 204, 0)" : items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "red" : items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "rgb(89, 220, 111)" : items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "rgb(33, 150, 243)" : items[props.heating_item].state == "FAN" ? "rgb(191,0,255)" : "gray"'
margin-top: 10px
margin-bottom: 10px
margin-left: 35px
default:
- component: oh-link
config:
actionPropsParameterGroup: widgetAction
class:
- no-padding
- no-margin
color: white
style:
height: 70%
left: 0
max-height: 192px
position: absolute
top: 0
width: 80%
z-index: 999
Thanks all for your feedbacks!