Great widget!!
Had to change it a little to make it work with items which are numbers. In my case, “AUTO” = 0 and that did not work correctly. And updated the way the temperature and solar power are displayed.
Updated code is below.
Thanks!
Matthijs
uid: mfh_airco
tags:
- airco
- climate
props:
parameters:
- description: Location (room) or device name
label: Title
name: title
required: false
type: TEXT
- context: item
description: Item for power channel
label: Power
name: itemPower
required: false
type: TEXT
- context: item
description: Item for indoor temperature channel
label: Indoor temperature
name: itemIndoorTemp
required: false
type: TEXT
- context: item
description: Item for outdoor temperature channel
label: Outdoor temperature
name: itemOutdoorTemp
required: false
type: TEXT
- context: item
description: Item for target temperature channel
label: Target temperature
name: itemTargetTemp
required: false
type: TEXT
- description: Set minimum target temperature (default = 0)
label: Minimum Temperature
name: MinimumTemperature
required: false
type: INTEGER
- description: Set maximum target temperature (default = 100)
label: Maximum Temperature
name: MaximumTemperature
required: false
type: INTEGER
- description: Set Target Temperature Stepsize (default = 1)
label: Target Temperature Stepsize
name: TemperatureStepsize
required: false
type: DECIMAL
- context: item
description: Item for operation mode channel
label: Operation mode
name: itemMode
required: false
type: TEXT
- context: item
description: Item for fan speed channel
label: Fan speed
name: itemFanSpeed
required: false
type: TEXT
- context: item
description: Item for swing channel
label: Swing mode
name: itemSwing
required: false
type: TEXT
- description: Hide timer button and options
label: Hide Timer Function
name: hideTimerFunction
required: false
type: BOOLEAN
- context: item
description: Switch item for timer
label: Switch Timer ON/OFF
name: itemTimerSwitch
required: false
type: TEXT
advanced: true
- context: item
description: Item for timer duration
label: Timer Duration
name: itemTimerDuration
required: false
type: TEXT
advanced: true
- description: Timer minimum duration
label: Timer minimum
name: TimerMinimum
required: false
type: DECIMAL
advanced: true
- description: Timer maximum duration
label: Timer maximum
name: TimerMaximum
required: false
type: DECIMAL
advanced: true
- description: Timer step
label: Timer step
name: TimerStep
required: false
type: DECIMAL
advanced: true
- description: Timer scale steps
label: Timer scale steps
name: TimerScaleSteps
required: false
type: DECIMAL
advanced: true
- description: Timer scale sub steps
label: Timer scale sub steps
name: TimerScaleSubSteps
required: false
type: DECIMAL
advanced: true
- description: Hide solarplant power
label: Hide Solarplant AC power measurement
name: hideSolarplant
required: false
type: BOOLEAN
- context: item
description: AC Power item for solarplant
label: Solarplant AC Power
name: itemSolarplantACPower
required: false
type: TEXT
advanced: true
parameterGroups: []
timestamp: Mar 8, 2021, 7:41:03 PM
component: f7-card
config:
title: =props.title
outline: true
class:
- no-padding
style:
--f7-theme-color: "#9C27B0"
--f7-theme-color-rgb: "156, 39, 176"
--f7-button-fill-hover-bg-color: "#9C27B0"
slots:
default:
- component: f7-row
config:
class:
- margin-top-half
- margin-left-half
- margin-right-half
- margin-bottom
slots:
default:
- component: f7-col
config:
width: "50"
large: "33"
slots:
default:
- component: f7-segmented
config:
class:
- segmented-strong
style:
--f7-segmented-strong-padding: 0px
--f7-segmented-strong-between-buttons: 5px
--f7-segmented-strong-button-font-weight: 300
--f7-segmented-strong-bg-color: transparent
--f7-segmented-strong-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), 0.07)
--f7-button-fill-hover-bg-color: var(--f7-theme-color)
--f7-button-border-radius: 4px
--f7-button-padding-vertical: 0px
--f7-button-padding-horizontal: 0px
slots:
default:
- component: oh-button
config:
outline: true
class:
- padding-top-half
- display-flex
- flex-direction-column
text: ON/OFF
action: toggle
actionItem: =props.itemPower
actionCommand: ON
actionCommandAlt: OFF
icon-f7: power
iconSize: 15
fill: "=(items[props.itemPower].state === 'ON') ? true : false"
style:
--f7-button-border-width: 1px
--f7-button-border-color: var(--f7-card-outline-border-color)
height: auto
font-size: 8px
- component: oh-button
config:
visible: =!props.hideTimerFunction
text: TIMER
action: toggle
actionItem: =props.itemTimerSwitch
actionCommand: ON
actionCommandAlt: OFF
iconF7: timer
iconSize: 15px
fill: "=(items.ac_timer_on_off.state === 'ON') ? true : false"
outline: false
class:
- display-flex
- flex-direction-column
- padding-top-half
style:
--f7-button-border-width: 1px
--f7-button-border-color: var(--f7-card-outline-border-color)
font-size: 8px
height: auto
- component: f7-col
config:
width: "33"
slots:
default:
- component: f7-row
config:
class:
- padding-right-half
slots:
default:
- component: f7-col
config:
width: "25"
slots:
default:
- component: f7-icon
config:
class:
- float-right
f7: house
size: 15
color: var(--f7-theme-color)
- component: f7-col
config:
width: "75"
slots:
default:
- component: Label
config:
class:
- float-right
text: "=(Math.round(items[props.itemIndoorTemp].state * 10) / 10) + ' °C'"
style:
white-space: nowrap
overflow: hidden
text-overflow: elipsis
font-size: 12px
- component: f7-row
config:
class:
- padding-right-half
slots:
default:
- component: f7-col
config:
width: "25"
slots:
default:
- component: f7-icon
config:
class:
- float-right
f7: tree
size: 15
color: var(--f7-theme-color)
- component: f7-col
config:
width: "75"
slots:
default:
- component: Label
config:
class:
- float-right
text: "=(Math.round(items[props.itemOutdoorTemp].state * 10) / 10) + ' °C'"
style:
white-space: nowrap
overflow: hidden
text-overflow: elipsis
font-size: 12px
- component: f7-row
config:
visible: =!props.hideSolarplant
class:
- padding-right-half
slots:
default:
- component: f7-col
config:
width: "25"
slots:
default:
- component: f7-icon
config:
class:
- float-right
f7: sun_max
size: 15
color: var(--f7-theme-color)
- component: f7-col
config:
width: "75"
slots:
default:
- component: Label
config:
class:
- float-right
text: "=(Math.round(items[props.itemSolarplantACPower].state)) + ' W'"
style:
white-space: nowrap
overflow: hidden
text-overflow: elipsis
font-size: 12px
- component: f7-row
config:
class:
- justify-content-center
slots:
default:
- component: oh-knob
config:
item: =props.itemTargetTemp
min: =props.MinimumTemperature
max: =props.MaximumTemperature
stepSize: =props.TemperatureStepsize
secondaryColor: var(--f7-card-outline-border-color)
primaryColor: var(--f7-theme-color)
responsive: false
strokeWidth: "12"
size: 150
- component: f7-segmented
config:
visible: true
class:
- margin-left-half
- margin-right-half
- margin-top
- margin-bottom-half
style:
--f7-button-font-size: 8px
--f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
--f7-button-border-radius: 4px
--f7-button-outline-border-width: 1px
--f7-button-font-weight: 300
--f7-button-padding-vertical: 0px
--f7-button-padding-horizontal: 0px
slots:
default:
- component: oh-repeater
config:
sourceType: array
for: modeRow
in:
- icon: arrow_2_squarepath
command: 0
text: AUTO
- icon: thermometer_snowflake
command: 1
text: COOL
- icon: thermometer_sun
command: 2
text: HEAT
- icon: wind
command: 3
text: FAN
- icon: drop_fill
command: 4
text: DRY
fragment: true
slots:
default:
- component: oh-button
config:
iconF7: =loop.modeRow.icon
iconSize: 15px
fill: "=(items[props.itemMode].state == loop.modeRow.command) ? true : false"
outline: true
class:
- display-flex
- flex-direction-column
- padding-top-half
style:
--f7-button-border-color: var(--f7-card-outline-border-color)
height: auto
text: =loop.modeRow.text
action: command
actionItem: =props.itemMode
actionCommand: "='' + loop.modeRow.command"
- component: oh-button
config:
iconF7: ellipsis_vertical
iconSize: 15px
action: variable
actionVariable: options
actionVariableValue: "=vars.options || vars.options === undefined ? false : true"
fill: "=vars.options || vars.options === undefined ? false : true"
outline: true
class:
- display-flex
- flex-direction-column
style:
--f7-button-border-color: var(--f7-card-outline-border-color)
height: auto
width: 50%
- component: f7-segmented
config:
visible: =vars.options === false
class:
- margin-left-half
- margin-right-half
- margin-top
- margin-bottom-half
style:
--f7-button-font-size: 8px
--f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
--f7-button-border-radius: 4px
--f7-button-outline-border-width: 1px
--f7-button-font-weight: 300
--f7-button-padding-vertical: 0px
--f7-button-padding-horizontal: 0px
slots:
default:
- component: oh-repeater
config:
sourceType: array
for: optionsRow
in:
- icon: wind ellipsis_vertical
option: fanspeed
- icon: move ellipsis_vertical
option: swing
fragment: true
slots:
default:
- component: oh-button
config:
iconF7: =loop.optionsRow.icon
iconSize: 15px
fill: "=vars[loop.optionsRow.option] || vars[loop.optionsRow.option] === undefined ? false : true"
outline: true
class:
- display-flex
- flex-direction-column
style:
--f7-button-border-color: var(--f7-card-outline-border-color)
height: auto
action: variable
actionVariable: =loop.optionsRow.option
actionVariableValue: "=vars[loop.optionsRow.option] || vars[loop.optionsRow.option] === undefined ? false : true"
- component: oh-button
config:
visible: =!props.hideTimerFunction
action: variable
actionVariable: timer_menu
actionVariableValue: "=vars.timer_menu || vars.timer_menu === undefined ? false : true"
fill: "=vars.timer_menu || vars.timer_menu === undefined ? false : true"
iconF7: timer ellipsis_vertical
iconSize: 15px
outline: true
style:
--f7-button-border-color: var(--f7-card-outline-border-color)
- component: f7-segmented
config:
visible: "=vars.fanspeed === false && vars.options === false ? true : false"
class:
- margin-left-half
- margin-right-half
- margin-top
- margin-bottom-half
style:
--f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
--f7-button-border-radius: 4px
--f7-button-outline-border-width: 1px
--f7-button-font-weight: 300
--f7-button-padding-vertical: 0px
--f7-button-padding-horizontal: 0px
slots:
default:
- component: oh-repeater
config:
sourceType: array
for: fanspeedRow
in:
- icon: arrow_2_squarepath
command: 0
- command: 1
text: 1
- command: 2
text: 2
- command: 3
text: 3
- command: 4
text: Max
fragment: true
slots:
default:
- component: oh-button
config:
iconF7: =loop.fanspeedRow.icon
iconSize: 15px
fill: "=(items[props.itemFanSpeed].state == loop.fanspeedRow.command) ? true : false"
outline: true
class:
- display-flex
- flex-direction-column
style:
--f7-button-border-color: var(--f7-card-outline-border-color)
height: auto
text: =loop.fanspeedRow.text
action: command
actionItem: =props.itemFanSpeed
actionCommand: "='' + loop.fanspeedRow.command"
- component: f7-segmented
config:
visible: "=vars.swing === false && vars.options === false ? true : false"
class:
- margin-left-half
- margin-right-half
- margin-top
- margin-bottom-half
style:
--f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
--f7-button-border-radius: 4px
--f7-button-outline-border-width: 1px
--f7-button-font-weight: 300
--f7-button-padding-vertical: 0px
--f7-button-padding-horizontal: 0px
slots:
default:
- component: oh-repeater
config:
sourceType: array
for: swingRow
in:
- command: STOPPED
text: OFF
- icon: resize_v
command: VERTICAL
- icon: resize_h
command: HORIZONTAL
- icon: view_3d
command: VERTICAL_AND_HORIZONTAL
fragment: true
slots:
default:
- component: oh-button
config:
iconF7: =loop.swingRow.icon
iconSize: 15px
fill: "=(items[props.itemSwing].state === loop.swingRow.command) ? true : false"
outline: true
class:
- display-flex
- flex-direction-column
style:
--f7-button-border-color: var(--f7-card-outline-border-color)
height: auto
text: =loop.swingRow.text
action: command
actionItem: =props.itemSwing
actionCommand: =loop.swingRow.command
- component: f7-row
config:
visible: "=vars.timer_menu === false && vars.options === false && !props.hideTimerFunction === true ? true : false"
class:
- margin-left-half
- margin-right-half
- margin-bottom-half
slots:
default:
- component: f7-col
slots:
default:
- component: oh-slider-card
config:
outline: true
item: =props.itemTimerDuration
min: =props.TimerMinimum
max: =props.TimerMaximum
step: =props.TimerStep
scaleSteps: =props.TimerScaleSteps
scaleSubSteps: =props.TimerScaleSubSteps
scale: true
unit: min
label: true