After watching Yannick in the Virtual Meetup I got excited to change my widget to be easier to setup. I experienced different renderings of the widget.
Develop Widget
Selected as standalone widget its is not grouping in rows.
Looking good here
Home page looks good.
Have I made a mistake?
here is the yaml
uid: Sensibo_ACcontroller_test
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
parameterGroups: []
timestamp: Dec 6, 2020, 3:05:47 AM
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.item + "_MasterSwitch")
actionCommand: ON
actionCommandAlt: OFF
icon-f7: power
iconSize: 28
iconColor: '=(items[props.item + "_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.item + "_CurrentTemperature"].state.displayState || items[props.item + "_CurrentTemperature"].state
style:
white-space: nowrap
text-overflow: elipsis
heigh: auto
font-size: 12px
- component: Label
config:
text: =items[props.item + "_CurrentHumidity"].displayState || items[props.item + "_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.item + '_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.item + '_mode')
actionCommand: ="auto"
icon-f7: arrow_2_circlepath
iconColor: '=(items[props.item + "_mode"].state === "auto") ? "red" : "gray"'
text: AUTO
textColor: '=(items[props.item + "_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.item + '_mode')
actionCommand: ="heat"
icon-f7: thermometer_sun
iconColor: '=(items[props.item + "_mode"].state === "heat") ? "orange" : "gray"'
text: HEAT
textColor: '=(items[props.item + "_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.item + '_mode')
actionCommand: ="dry"
icon-f7: drop
iconColor: '=(items[props.item + "_mode"].state === "dry") ? "yellow" : "gray"'
text: DRY
textColor: '=(items[props.item + "_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.item + '_mode')
actionCommand: ="fan"
icon-f7: wind
iconColor: '=(items[props.item + "_mode"].state === "fan") ? "white" : "gray"'
text: FAN
textColor: '=(items[props.item + "_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.item + '_mode')
actionCommand: ="cool"
icon-f7: thermometer_snowflake
iconColor: '=(items[props.item + "_mode"].state === "cool") ? "blue" : "gray"'
text: COOL
textColor: '=(items[props.item + "_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.item + '_fanLevel')
class:
- margin
- display-flex
- flex-direction-column
icon-f7: chart_bar
iconColor: yellow
size: 20
text: =items[props.item + '_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.item + '_swingMode')
class:
- margin
- display-flex
- flex-direction-column
icon-f7: arrow_up_down_circle
iconColor: green
size: 20
text: =items[props.item + '_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