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
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
My 2 Aircons
I did change a couple of things to suit.
Work in progress
uid: Sensibo_ACcontroller
tags: []
props:
parameters:
- description: The Label at the top of the card
label: Friendly name of your aircon eg. Lounge
name: title
required: false
type: TEXT
- description: The index of your items aircon foo_targetTemperature = foo
label: The index name of your aircon
name: airconditioner
required: true
type: TEXT
parameterGroups: []
timestamp: Dec 4, 2020, 10:44:34 PM
component: f7-block
config:
style:
--f7-button-text-color: var(--f7-text-color)
--f7-button-bg-color: var(--f7-card-bg-color)
--f7-theme-color-rgb: var(--f7-color-blue-rgb)
class:
- no-padding
slots:
default:
- component: Label
config:
class:
- margin
- no-padding
text: =props.title
style:
text-align: center
height: auto
font-size: 16px
--f7-button-text-color: var(--f7-text-color)
--f7-button-bg-color: var(--f7-card-bg-color)
--f7-theme-color-rgb: var(--f7-color-blue-rgb)
- component: f7-row
config:
class:
- margin
slots:
default:
- component: f7-col
slots:
default:
- component: oh-button
config:
action: toggle
actionItem: =(props.airconditioner + "_MasterSwitch")
actionCommand: ON
actionCommandAlt: OFF
icon-f7: power
iconSize: 28
iconColor: '=(items[props.airconditioner + "_MasterSwitch"].state === "OFF") ? "red" : "green"'
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
height: auto
font-size: 12px
- component: f7-col
config:
style:
text-align: right
slots:
default:
- component: Label
config:
text: =items[props.airconditioner + "_CurrentTemperature"].state.displayState || items[props.airconditioner + "_CurrentTemperature"].state
style:
white-space: nowrap
text-overflow: elipsis
heigh: auto
font-size: 12px
- component: Label
config:
text: =items[props.airconditioner + "_CurrentHumidity"].displayState || items[props.airconditioner + "_CurrentHumidity"].state
style:
white-space: nowrap
text-overflow: elipsis
heigh: auto
font-size: 12px
- component: f7-row
config:
class:
- justify-content-center
slots:
default:
- component: oh-knob
config:
min: 18
max: 30
stepSize: 1
size: 270
item: =[props.airconditioner + '_targetTemperature']
- component: f7-row
config:
class:
- margin
slots:
default:
- component: f7-col
slots:
default:
- component: oh-button
config:
class:
- margin
- display-flex
- flex-direction-column
action: command
actionItem: =(props.airconditioner + '_mode')
actionCommand: ="auto"
icon-f7: arrow_2_circlepath
iconColor: '=(items[props.airconditioner + "_mode"].state === "auto") ? "red" : "gray"'
text: AUTO
textColor: '=(items[props.airconditioner + "_mode"].state === "auto") ? "red" : "gray"'
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
font-size: 8px
height: auto
- component: f7-col
slots:
default:
- component: oh-button
config:
class:
- margin
- display-flex
- flex-direction-column
action: command
actionItem: =(props.airconditioner + '_mode')
actionCommand: ="heat"
icon-f7: thermometer_sun
iconColor: '=(items[props.airconditioner + "_mode"].state === "heat") ? "orange" : "gray"'
text: HEAT
textColor: '=(items[props.airconditioner + "_mode"].state === "heat") ? "black" : "gray"'
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
font-size: 8px
height: auto
- component: f7-col
slots:
default:
- component: oh-button
config:
class:
- margin
- display-flex
- flex-direction-column
action: command
actionItem: =(props.airconditioner + '_mode')
actionCommand: ="dry"
icon-f7: drop
iconColor: '=(items[props.airconditioner + "_mode"].state === "dry") ? "yellow" : "gray"'
text: DRY
textColor: '=(items[props.airconditioner + "_mode"].state === "dry") ? "black" : "gray"'
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
font-size: 8px
height: auto
- component: f7-col
slots:
default:
- component: oh-button
config:
class:
- margin
- display-flex
- flex-direction-column
action: command
actionItem: =(props.airconditioner + '_mode')
actionCommand: ="fan"
icon-f7: wind
iconColor: '=(items[props.airconditioner + "_mode"].state === "fan") ? "white" : "gray"'
text: FAN
textColor: '=(items[props.airconditioner + "_mode"].state === "fan") ? "black" : "gray"'
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
font-size: 8px
height: auto
- component: f7-col
slots:
default:
- component: oh-button
config:
class:
- margin
- display-flex
- flex-direction-column
action: command
actionItem: =(props.airconditioner + '_mode')
actionCommand: ="cpp;"
icon-f7: thermometer_snowflake
iconColor: '=(items[props.airconditioner + "_mode"].state === "cool") ? "blue" : "gray"'
text: COOL
textColor: '=(items[props.airconditioner + "_mode"].state === "cool") ? "blue" : "gray"'
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
font-size: 8px
height: auto
- component: f7-row
config: {}
slots:
default:
- component: f7-col
slots:
default:
- component: oh-button
config:
action: options
actionItem: =(props.airconditioner + '_fanLevel')
class:
- margin
- display-flex
- flex-direction-column
icon-f7: chart_bar
iconColor: yellow
size: 20
text: =items[props.airconditioner + '_fanLevel'].state
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
font-size: 12px
height: auto
- component: f7-col
slots:
default:
- component: oh-button
config:
action: options
actionItem: =(props.airconditioner + '_swingMode')
class:
- margin
- display-flex
- flex-direction-column
icon-f7: arrow_up_down_circle
iconColor: green
size: 20
text: =items[props.airconditioner + '_swingMode'].state
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
font-size: 12px
height: auto