Hi
How are you.
I just finished transferring from arduino to ESPEasy and it does works besides one thing.
The operational status is no longer beeing received:
{āroomTemperatureā:24,āoperatingā:false}
Is it normal? I had this feature in my old systems and it was very handy to mesure the system when itās in function. Thanks for your precious help
Plugin is returning the following info currently
{"roomTemperature":23.5,"wideVane":"|","power":"OFF","mode":"COOL","fan":"AUTO","vane":"5","iSee":true,"temperature":22.0}
I guess you mean
bool operating; // if true, the heatpump is operating to reach the desired temperature
This one is not currently part of ESPEasy plugin but should be easy to add ā¦
Hi
Thatās right.
The [SwiCago] arduine schema does include it and I used it for around 3 years.
bool HeatPump::getOperating() {
return currentStatus.operating;
}
Thanks for your precious help
JosƩ
Added support for operating and compressor frequency, test fw for ESP 8266, 4M1M can be downloaded here.
Sample output
{"roomTemperature":25.5,"wideVane":"|","power":"OFF","mode":"COOL","fan":"AUTO","vane":"AUTO","iSee":true,"operating":true,"compressorFrequency":5,"temperature":24.0}
Thank you for your help
I will test it tomorrow 
JosƩ Cordeiro
Hi
Thanks for your help. it works 
1 Like
@ crnjan Hi, I wonder this widget could be used for controlling Mitsubishi heat pump with Procon A1M Modbus card. I can control my Mitsubishi heat pumps with OH3 but would like to use your widget.
Hey! I guess you can use the widget above to control your HP (maybe some modifications will be required to suit your needs), but I moved to a customised version of Heating widget since `oh-knobā seems a bit to sensitive (specially when being used on a phone) and set temperature changed quite often undesirably (maybe I just got thick fingers :)) ā¦
OK, many thanks for the info. Iāll have a look at your widget and check whether I can use it. Iām also using the heating widget for controlling the underfloor heating system but I donāt know how you could use it for a HP which has different modes and the vanes.
Your widget looks really cool, I wonder whether you could share your code.
All the credits still go to the original author, I just adopted it for my needs 
Widget:
uid: widget_HeatingCSS_2.0.0
tags: []
props:
parameters:
- context: item
description: Item to control
label: Setpoint Item
name: setPointItem
required: true
type: TEXT
groupName: mainItems
- context: item
label: Item for current temperature
name: currentPointItem
required: true
type: TEXT
groupName: mainItems
- context: item
description: Humidity Item [Number-Item]
label: Humidity Item
name: humItem
required: false
type: TEXT
groupName: mainItems
- description: eg. living room
label: location and widget identifier
name: location
required: true
type: TEXT
groupName: generalSettings
- description: Minimum value
label: minTemp
name: minTemp
required: true
type: TEXT
groupName: generalSettings
- description: Maximum value
label: maxTemp
name: maxTemp
required: true
groupName: generalSettings
- description: Visual size of the control in px (default 400px), without a size the design is responsive
label: size [px]
name: size
required: false
type: TEXT
groupName: generalSettings
- description: Control item unit eg Ā°C
label: unit
name: unit
required: false
type: TEXT
groupName: generalSettings
advanced: true
- context: item
description: Heating Power Item [String-Item]
label: Heating Power Item
name: heatingPowerItem
required: false
type: TEXT
groupName: extensionItems
advanced: true
- description: Heating power strings as array eg. AUTO,MANU,OFF. The string will be send to the Heating-Power-Item [String-Item]
label: Heating Power Array
name: heatingPowerArray
required: false
type: TEXT
groupName: extensionItems
advanced: true
- context: item
description: Vane Item [String-Item]
label: Vane Item
name: vaneItem
required: false
type: TEXT
groupName: extensionItems
advanced: true
- description: Vane strings as array eg. 1,2,3,SWING,AUTO The string will be send to the Vane-Item [String-Item]
label: Vane Array
name: vaneArray
required: false
type: TEXT
groupName: extensionItems
advanced: true
- context: item
description: Heating Mode Item [String-Item]
label: Heating Mode Item
name: heatingModeItem
required: false
type: TEXT
groupName: extensionItems
advanced: true
- description: Heating mode strings as array eg. AUTO,MANU,OFF. The string will be send to the Heating-Mode-Item [String-Item]
label: Heating Mode Array
name: heatingModeArray
required: false
type: TEXT
groupName: extensionItems
advanced: true
- context: item
description: Example Mode Item [String-Item] (eg. State of heating valve)
label: Example Mode Item
name: exampleModeItem
required: false
type: TEXT
groupName: extensionItems
advanced: true
- description: Example Mode Strings as Array eg. OFF,ON,BOOST. The string will be send to the Example-Mode-Item [String-Item]
label: Example Mode Array
name: exampleModeArray
required: false
type: TEXT
groupName: extensionItems
advanced: true
- context: item
description: Valve/Alarm Item [Switch-Item] (eg. State of heating valve) for Animation in the center of the widget
label: Valve Item
name: valveItem
required: false
type: TEXT
groupName: extensionItems
advanced: true
- description: eg. default 1em
label: Custom font-size current&set-point marker
name: fontSizeMarker
required: false
type: TEXT
groupName: fonts
advanced: true
- description: eg. default 2em
label: Custom font-Size center
name: fontSizeCenter
required: false
type: TEXT
groupName: fonts
advanced: true
- description: default 1em for eg. Living Room
label: Custom font-size location label
name: fontSizeLocation
required: false
type: TEXT
groupName: fonts
advanced: true
- description: default eg. 1.8em
label: Custom font-Size buttons
name: fontSizeButtons
required: false
type: TEXT
groupName: fonts
advanced: true
- description: default 1em for Heating-Label in bottom of the widget
label: Custom font-Size footer
name: fontSizeFooter
required: false
type: TEXT
groupName: fonts
advanced: true
- label: Main-Color Thermostat
name: colorThermostat
required: false
type: TEXT
groupName: colors
advanced: true
- label: Color control ring
name: colorControlRing
required: false
type: TEXT
groupName: colors
advanced: true
- label: Color buttons
name: colorButton
required: false
type: TEXT
groupName: colors
advanced: true
- label: Color center
name: colorCenter
required: false
type: TEXT
groupName: colors
advanced: true
- label: Color Typo
name: colorTypo
required: false
type: TEXT
groupName: colors
advanced: true
- label: Color setPoint Marker
name: colorSetMarker
required: false
type: TEXT
groupName: colors
advanced: true
- label: Color currentPoint Marker
name: colorCurrentMarker
required: false
type: TEXT
groupName: colors
advanced: true
- label: Color bar linear gradient startPoint
name: colorBarStartPoint
required: false
type: TEXT
groupName: colors
advanced: true
- label: Color bar linear gradient endPoint
name: colorBarEndPoint
required: false
type: TEXT
groupName: colors
advanced: true
- description: Control if the Chart is visible
label: Chart Swtich
name: chartSwitch
required: false
type: BOOLEAN
groupName: chartSettings
- description: currently not possible -> The minimun value of axis. (eg. 10.5)
label: yAxis min
name: yAxisMin
required: false
type: TEXT
groupName: chartSettings
advanced: true
- description: currently not possible -> The maximum value of axis. (eg. 30.5)
label: yAxis max
name: yAxisMax
required: false
type: TEXT
groupName: chartSettings
advanced: true
parameterGroups:
- name: mainItems
label: Main Items (setpoint-temperature, current temperature, humidity)
- name: advancedItems
label: Advanced Items (Battery-State, ...)
- name: generalSettings
label: General Settings
- name: extensionItems
label: Extension Items
- name: moreDesign
label: More Design Options
- name: colors
label: Color Settings
- name: fonts
label: Font Settings
- name: chartSettings
label: Chart Settings
timestamp: Oct 20, 2021, 10:06:30 PM
component: f7-card
config:
stylesheet: >
.mylink {
#background-color: blue !important;
animation-name: example;
animation-duration: 4s;
} .mylink#####:hover {
text-decoration: underline !important;
transform: scale(1.5);
transition: 0.3s all;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
.thermostat {
flex-shrink: 0;
--f7-block-margin-vertical: 0px;
--f7-block-padding-vertical: 0px;
--f7-block-padding-horizontal: 0px;
padding-left: 0px;
border-radius: 50%;
box-sizing: content-box;
border: 2px solid rgb(64, 60, 77);
}
.thermostat .bar {
margin-top: 0px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
} .thermostat .bar .inner_bar {
margin-top: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100%;
z-index: 4 !important;
} .thermostat .bar .inner_bar .block {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 50%;
transform: translate(-50%);
}
title: "=(props.location) ? 'Klima ' + props.location : ''"
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
config:
class:
- justify-content-center
resizable-absolute: true
resizableFixed: true
slots:
default:
- component: f7-block
config:
class: thermostat
style:
background: "=props.colorThermostat ? props.colorThermostat : 'var(--f7-toggle-inactive-color)'"
padding-top: "=props.size ? props.size + 'px': '100%'"
width: "=props.size ? Number(props.size)+'px' : '100%'"
slots:
default:
- component: f7-block
config:
class: bar
style:
height: "=props.size ? (Number(props.size)*0.89) +'px' : '89%'"
width: "=props.size ? (Number(props.size)*0.89) +'px' : '89%'"
slots:
default:
- component: f7-block
config:
class: inner_bar
style:
background-color: "=props.colorThermostat ? props.colorThermostat : 'var(--f7-toggle-inactive-color)'"
height: "=props.size ? (Number(props.size)*0.86) +'px' : '97%'"
width: "=props.size ? (Number(props.size)*0.86) +'px' : '97%'"
slots:
default:
- component: f7-block
config:
style:
background: "='conic-gradient(transparent 0deg 160deg, ' + (props.colorThermostat ? props.colorThermostat : 'var(--f7-toggle-inactive-color)') + ' 160deg 200deg, transparent 200deg 360deg)'"
bottom: "=props.size ? '-7px' : '-7px'"
- component: f7-block
config:
class: hold left
style:
background-color: rgb(58, 55, 73)
border-radius: 100%
clip-path: "=props.size ? 'inset(0px 0px 0px ' + (Number(props.size)*0.89/2) + 'px)' : 'inset(0% 0% 0% 50%)'"
height: 100%
margin-top: 0px
position: absolute
width: 100%
slots:
default:
- component: f7-block
config:
class: fill fill1
style:
background: "=props.colorBarStartPoint && props.colorBarEndPoint ? '-webkit-linear-gradient(top, ' + props.colorBarEndPoint + ' 20%,' + props.colorBarEndPoint + ' 100%)' : '-webkit-linear-gradient(top, rgb(255, 73, 0) 20%,rgb(255, 73, 0) 100%)'"
border-radius: 100%
clip-path: "=props.size ? 'inset(0px ' + (Number(props.size)*0.89/2) + 'px 0px 0px)' : 'inset(0% 50% 0% 0%)'"
height: 100%
margin-top: 0px
position: absolute
transform: "=(items[props.setPointItem].state.split(' ')[0] >= (((Number(props.maxTemp) - Number(props.minTemp)) / 2) + Number(props.minTemp)) && items[props.setPointItem].state.split(' ')[0] <= Number(props.maxTemp) ? 'rotate('+(320/(Number(props.maxTemp)-Number(props.minTemp))*(items[props.setPointItem].state.split(' ')[0]-Number(props.minTemp))-160)+'deg)' : (items[props.setPointItem].state.split(' ')[0] > Number(props.maxTemp)) ? 'rotate(180deg)' : '')"
transition: transform 0.6s
width: 100%
z-index: 1 !important
- component: f7-block
config:
class: hold right
style:
background-color: rgb(58, 55, 73)
border-radius: 100%
clip-path: "=props.size ? 'inset(0px 0px 0px ' + (Number(props.size)*0.89/2) + 'px)' : 'inset(0% 0% 0% 50%)'"
height: 100%
margin-top: 0px
position: absolute
transform: rotate(180deg)
width: 100%
z-index: 3 !important
slots:
default:
- component: f7-block
config:
class: fill
style:
animation: right 1s linear both
border-radius: 100%
height: 100%
margin-top: 0px
position: absolute
transition: transform 0.6s
width: 100%
z-index: 3 !important
- component: f7-block
config:
class: fill fill2
style:
background: "=props.colorBarStartPoint && props.colorBarEndPoint ? '-webkit-linear-gradient(top, ' + props.colorBarEndPoint + ' 40%,' + props.colorBarStartPoint + ' 100%)' : '-webkit-linear-gradient(top, rgb(255, 73, 0) 40%,rgb(255, 158, 35) 100%)'"
border-radius: 50%
clip-path: "=props.size ? 'inset(0px '+ (Number(props.size)*0.89/2) + 'px 0px 0px)' : 'inset(0% 50% 0% 0%)'"
height: 100%
margin-top: 0px
position: absolute
transform: "=(items[props.setPointItem].state.split(' ')[0] <= (((Number(props.maxTemp) - Number(props.minTemp)) / 2) + Number(props.minTemp)) && items[props.setPointItem].state.split(' ')[0] >= Number(props.minTemp) ? 'rotate('+(320/(Number(props.maxTemp)-Number(props.minTemp))*(items[props.setPointItem].state.split(' ')[0]-Number(props.minTemp))+20)+'deg)' : (items[props.setPointItem].state.split(' ')[0] > (((Number(props.maxTemp) - Number(props.minTemp)) / 2) + Number(props.minTemp))) ? 'rotate(180deg)' : '')"
width: 100%
z-index: 3 !important
- component: f7-block
config:
class: span
style:
bottom: 0px
color: "=props.colorTypo ? props.colorTypo : 'rgb(87, 84, 95)'"
font-size: "=props.fontSizeFooter ? props.fontSizeFooter : '1em'"
font-weight: "=props.size ? (Number(props.size)*2) +'px' : 'calc(var(--f7-list-item-title-font-weight)*2)'"
margin-top: 0px
position: absolute
text-align: center
text-transform: uppercase
width: "=props.size ? (Number(props.size)*0.89) +'px' : '100%'"
z-index: 99 !important
slots:
default:
- component: Label
config:
style:
color: white
text: Heating
- component: f7-block
config:
class: shadow
style:
animation: shadow 1.4s ease-out both
height: 86%
left: 50%
margin-top: 0px
position: absolute
text-align: center
top: 50%
transform: "=(items[props.setPointItem].state.split(' ')[0] >= Number(props.minTemp) && items[props.setPointItem].state.split(' ')[0] <= Number(props.maxTemp) ? 'translate(-50%, -50%) rotate('+(320/(Number(props.maxTemp)-Number(props.minTemp))*(items[props.setPointItem].state.split(' ')[0]-Number(props.minTemp))-160)+'deg)' : 'translate(-50%, -50%) rotate(0deg)')"
transition: 0.7s ease
width: "=props.size ? (Number(props.size)*0.0625) +'px' : '6.25%'"
slots:
default:
- component: f7-block
config:
class: shadow-cube
style:
box-shadow: "=props.size ? '0 0 ' + (Number(props.size)*0.1125) +'px ' + (Number(props.size)*0.0325) + 'px ' + (props.colorSetMarker ? props.colorSetMarker : 'rgba(255, 158, 35, 0.5)'): '0 0 45px 13px rgba(255, 158, 35, 0.5)'"
height: 0px
margin-top: 0px
position: absolute
top: 0
width: "=props.size ? (Number(props.size)*0.0625) +'px' : '100%'"
- component: f7-block
config:
class: markerContainer
style:
height: 100%
left: 50%
margin-top: 0px
opacity: 1
pointer-events: none
position: absolute
text-align: center
top: 50%
transform: "=(items[props.currentPointItem].state.split(' ')[0] >= Number(props.minTemp) && items[props.currentPointItem].state.split(' ')[0] <= Number(props.maxTemp) ? 'translate(-50%, -50%) rotate('+(320/(Number(props.maxTemp)-Number(props.minTemp))*(items[props.currentPointItem].state.split(' ')[0]-Number(props.minTemp))-160)+'deg)' : 'translate(-50%, -50%) rotate(0deg)')"
transition: 0.7s ease
width: "=props.size ? (Number(props.size)*0.1) +'px' : '10%'"
z-index: 99 !important
slots:
default:
- component: f7-block
config:
class: markerCurrent
style:
background: "=props.colorCurrentMarker ? props.colorCurrentMarker : 'rgb(33, 150, 243)'"
border-radius: 0% 50% 50% 50%
box-shadow: 0 0 5px 1px rgb(48, 46, 56)
height: "=props.size ? (Number(props.size)*0.1) +'px' : ''"
left: 50%
margin-top: 0px
padding-top: "=props.size ? '' : '100%'"
position: absolute
top: "=props.size ? (Number(props.size)*0.14) +'px' : '15%'"
transform: translate(-50%,-50%) rotate(45deg)
width: "=props.size ? (Number(props.size)*0.1) +'px' : '100%'"
slots:
default:
- component: f7-block
config:
class: number
style:
left: 50%
margin-top: 0px
position: absolute
text-align: center
top: 50%
transform: translate(-50%, -50%) rotate(-45deg)
slots:
default:
- component: Label
config:
style:
color: white
font-size: "=props.fontSizeMarker ? props.fontSizeMarker : '1em'"
font-weight: bold
text: =items[props.currentPointItem].state.split(' ')[0]
- component: f7-block
config:
class: markerContainer
style:
height: 100%
left: 50%
margin-top: 0px
opacity: 1
pointer-events: none
position: absolute
text-align: center
top: 50%
transform: "=(items[props.setPointItem].state.split(' ')[0] >= Number(props.minTemp) && items[props.setPointItem].state.split(' ')[0] <= Number(props.maxTemp) ? 'translate(-50%, -50%) rotate('+(320/(Number(props.maxTemp)-Number(props.minTemp))*(items[props.setPointItem].state.split(' ')[0]-Number(props.minTemp))-160)+'deg)' : 'translate(-50%, -50%) rotate(0deg)')"
transition: 0.7s ease
width: "=props.size ? (Number(props.size)*0.1) +'px' : '10%'"
z-index: 99 !important
slots:
default:
- component: f7-block
config:
class: markerSet
style:
background: "=props.colorSetMarker ? props.colorSetMarker : 'rgb(230, 74, 25)'"
border-radius: 50% 50% 50% 0
box-shadow: 0 0 5px 1px rgb(48, 46, 56)
height: "=props.size ? (Number(props.size)*0.1) +'px' : ''"
left: 50%
margin-top: 0px
padding-top: "=props.size ? '' : '100%'"
position: absolute
top: "=props.size ? (Number(props.size)*Number(-0.0125)) +'px': '-2%'"
transform: translate(-50%,-50%) rotate(-45deg)
width: "=props.size ? (Number(props.size)*0.1) +'px' : '100%'"
z-index: 100 !important
slots:
default:
- component: f7-block
config:
class: number
style:
left: 50%
margin-top: 0px
position: absolute
text-align: center
top: 50%
transform: translate(-50%, -50%) rotate(45deg)
slots:
default:
- component: Label
config:
style:
color: white
font-size: "=props.fontSizeMarker ? props.fontSizeMarker : '1em'"
font-weight: bold
text: =items[props.setPointItem].state.split(' ')[0]
- component: f7-block
config:
class: center
style:
background: "=props.colorControlRing ? props.colorControlRing : 'rgb(227, 228, 237)'"
border-radius: 50%
box-shadow: 0px 15px 35px 11px rgba(46, 44, 58,0.60)
height: "=props.size ? (Number(props.size)*0.65) +'px' : '65%'"
left: 50%
margin-top: 0px
position: absolute
top: 50%
transform: translate(-50%, -50%)
width: "=props.size ? (Number(props.size)*0.65) +'px' : '65%'"
slots:
default:
- component: f7-block
config:
class: page
style:
background: transparent
border-radius: 50%
height: 100%
left: 50%
margin-top: 0px
position: absolute
top: 50%
transform: translate(-50%, -50%)
width: 100%
slots:
default:
- component: f7-block
config:
class: buttonContainer
style:
display: "=props.heatingPowerItem ? '' : 'none'"
height: 100%
left: 50%
margin-top: 0px
opacity: 1
position: absolute
text-align: center
top: 50%
transform: translate(-50%, -50%)
transition: 0.7s ease
width: "=props.size ? (Number(props.size)*0.15) +'px' : '15%'"
z-index: 99 !important
slots:
default:
- component: oh-button
config:
popoverOpen: ='.' + props.location + '.popoverPowerMode'
style:
bottom: 0%
color: "=props.colorButton ? props.colorButton + ' !important': ''"
height: 20%
left: 50%
position: absolute
transform: translate(-50%)
width: 100%
slots:
default:
- component: f7-icon
config:
color: '=items[props.heatingPowerItem].state == "ON" ? "green" : "red"'
f7: power
style:
font-size: "=props.fontSizeButtons ? props.fontSizeButtons : '2em'"
margin-top: auto
position: absolute
top: 50%
transform: translate(-50%, -50%)
- component: f7-popover
config:
class: =props.location + ' popoverPowerMode'
slots:
default:
- component: f7-card
config:
action: variable
actionVariable: myVar
actionVariableValue: success
class:
- popover-close
clearVariable: true
noShadow: true
slots:
default:
- component: f7-row
config: {}
slots:
default:
- component: f7-col
slots:
default:
- component: oh-repeater
config:
containerStyle:
width: 100%
for: buttonlabel
in: =props.heatingPowerArray.split(",")
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =loop.buttonlabel
actionItem: "=props.heatingPowerItem ? props.heatingPowerItem : ''"
active: "=props.heatingPowerItem ? (items[props.heatingPowerItem].state === loop.buttonlabel ? true : false) : ''"
class: margin
color: "=props.colorButton ? props.colorButton : ''"
outline: true
text: =loop.buttonlabel
- component: oh-button
config:
popoverOpen: ='.' + props.location + '.popoverVane'
style:
color: "=props.colorButton ? props.colorButton + ' !important': ''"
height: 20%
left: 50%
position: absolute
top: 0%
transform: translate(-50%)
width: 100%
slots:
default:
- component: f7-icon
config:
f7: wind
style:
font-size: "=props.fontSizeButtons ? props.fontSizeButtons : '2em'"
margin-top: auto
position: absolute
top: 50%
transform: translate(-50%, -50%)
- component: f7-popover
config:
class: =props.location + ' popoverVane'
slots:
default:
- component: f7-card
config:
action: variable
actionVariable: myVar
actionVariableValue: success
class:
- popover-close
clearVariable: true
noShadow: true
slots:
default:
- component: f7-card-header
config: {}
slots:
default:
- component: Label
config:
text: VANE
- component: f7-row
config: {}
slots:
default:
- component: f7-col
slots:
default:
- component: oh-repeater
config:
containerStyle:
width: 100%
for: buttonlabel
in: =props.vaneArray.split(",")
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =loop.buttonlabel
actionItem: "=props.vaneItem ? props.vaneItem : ''"
active: "=props.vaneItem ? (items[props.vaneItem].state === loop.buttonlabel ? true : false) : ''"
class: margin
color: "=props.colorButton ? props.colorButton : ''"
outline: true
text: =loop.buttonlabel
- component: f7-block
config:
class: buttonContainer
style:
display: "=props.heatingModeItem ? '' : 'none'"
height: 100%
left: 50%
margin-top: 0px
opacity: 1
position: absolute
text-align: center
top: 50%
transform: "=props.exampleModeItem ? 'translate(-50%, -50%) rotate(40deg)' : 'translate(-50%, -50%)'"
transition: 0.7s ease
width: "=props.size ? (Number(props.size)*0.15) +'px' : '15%'"
z-index: 99 !important
slots:
default:
- component: oh-button
config:
popoverOpen: ='.' + props.location + '.popoverHeatingMode'
style:
bottom: 0%
color: "=props.colorButton ? props.colorButton + ' !important': ''"
height: 20%
left: 50%
position: absolute
transform: translate(-50%)
width: 100%
slots:
default:
- component: f7-icon
config:
f7: "=props.heatingModeItem ? (items[props.heatingModeItem].state == props.heatingModeArray.split(',')[0] ? 'thermometer_sun' : items[props.heatingModeItem].state == props.heatingModeArray.split(',')[1] ? 'thermometer_snowflake' : items[props.heatingModeItem].state == props.heatingModeArray.split(',')[2] ? 'wind' : items[props.heatingModeItem].state == props.heatingModeArray.split(',')[3] ? 'drop' : 'arrow_2_circlepath') : ''"
style:
font-size: "=props.fontSizeButtons ? props.fontSizeButtons : '2em'"
margin-top: auto
position: absolute
top: 50%
transform: translate(-50%, -50%)
- component: f7-popover
config:
class: =props.location + ' popoverHeatingMode'
slots:
default:
- component: f7-card
config:
action: variable
actionVariable: myVar
actionVariableValue: success
class:
- popover-close
clearVariable: true
noShadow: true
slots:
default:
- component: f7-card-header
config: {}
slots:
default:
- component: Label
config:
text: MODE
- component: f7-row
config: {}
slots:
default:
- component: f7-col
slots:
default:
- component: oh-repeater
config:
containerStyle:
width: 100%
for: buttonlabel
in: =props.heatingModeArray.split(",")
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =loop.buttonlabel
actionItem: "=props.heatingModeItem ? props.heatingModeItem : ''"
active: "=props.heatingModeItem ? (items[props.heatingModeItem].state === loop.buttonlabel ? true : false) : ''"
class: margin
color: "=props.colorButton ? props.colorButton : ''"
outline: true
text: =loop.buttonlabel
- component: f7-block
config:
class: buttonContainer
style:
display: "=props.exampleModeItem ? '' : 'none'"
height: 100%
left: 50%
margin-top: 0px
opacity: 1
position: absolute
text-align: center
top: 50%
transform: "=props.heatingModeItem ? 'translate(-50%, -50%) rotate(-40deg)' : 'translate(-50%, -50%)'"
transition: 0.7s ease
width: "=props.size ? (Number(props.size)*0.15) +'px' : '15%'"
z-index: 99 !important
slots:
default:
- component: oh-button
config:
popoverOpen: ='.' + props.location + '.popoverExampleMode'
style:
bottom: 0%
color: "=props.colorButton ? props.colorButton + ' !important': ''"
height: 20%
left: 50%
position: absolute
transform: translate(-50%)
width: 100%
slots:
default:
- component: f7-block
config:
style:
font-size: "=props.fontSizeButtons ? props.fontSizeButtons : '2em'"
margin-top: auto
position: absolute
top: 50%
transform: translate(-50%, -50%)
slots:
default:
- component: oh-icon
config:
icon: "=props.exampleModeItem ? (items[props.exampleModeItem].state == props.exampleModeArray.split(',')[0] ? 'iconify:mdi:fan-speed-1' : items[props.exampleModeItem].state == props.exampleModeArray.split(',')[1] ? 'iconify:mdi:fan-speed-2' : items[props.exampleModeItem].state == props.exampleModeArray.split(',')[2] ? 'iconify:mdi:fan-speed-3' : items[props.exampleModeItem].state == props.exampleModeArray.split(',')[3] ? 'iconify:mdi:fan' : items[props.exampleModeItem].state == props.exampleModeArray.split(',')[4] ? 'iconify:mdi:fan-auto' : 'iconify:mdi:fan-off') : ''"
- component: f7-popover
config:
class: =props.location + ' popoverExampleMode'
slots:
default:
- component: f7-card
config:
action: variable
actionVariable: myVar
actionVariableValue: success
class:
- popover-close
clearVariable: true
noShadow: true
slots:
default:
- component: f7-card-header
config: {}
slots:
default:
- component: Label
config:
text: FAN
- component: f7-row
config: {}
slots:
default:
- component: f7-col
slots:
default:
- component: oh-repeater
config:
containerStyle:
width: 100%
for: buttonlabel
in: =props.exampleModeArray.split(",")
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =loop.buttonlabel
actionItem: "=props.exampleModeItem ? props.exampleModeItem : ''"
active: "=props.exampleModeItem ? (items[props.exampleModeItem].state === loop.buttonlabel ? true : false) : ''"
class: margin
color: "=props.colorButton ? props.colorButton : ''"
outline: true
text: =loop.buttonlabel
- component: oh-button
config:
action: command
actionCommand: "=Number(items[props.setPointItem].state.split(' ')[0]) > Number(props.minTemp) ? Number(items[props.setPointItem].state.split(' ')[0]) - 1 : ''"
actionItem: =props.setPointItem
style:
color: "=props.colorButton ? props.colorButton : ''"
height: 50%
left: 10%
margin-top: 0px
position: absolute
top: 50%
transform: translate(-50%, -50%)
width: 30%
slots:
default:
- component: f7-icon
config:
f7: arrow_turn_left_down
style:
font-size: "=props.fontSizeButtons ? props.fontSizeButtons : '2em'"
margin-top: auto
position: absolute
top: 50%
transform: translate(-50%, -50%)
- component: oh-button
config:
action: command
actionCommand: "=Number(items[props.setPointItem].state.split(' ')[0]) < Number(props.maxTemp) ? Number(items[props.setPointItem].state.split(' ')[0]) + 1 : ''"
actionItem: =props.setPointItem
style:
color: "=props.colorButton ? props.colorButton : ''"
height: 50%
left: 90%
margin-top: 0px
position: relative
top: 50%
transform: translate(-50%, -50%)
width: 30%
slots:
default:
- component: f7-icon
config:
f7: arrow_turn_right_up
style:
font-size: "=props.fontSizeButtons ? props.fontSizeButtons : '2em'"
margin-top: auto
position: absolute
top: 50%
transform: translate(-50%, -50%)
- component: f7-block
config:
class: valveAnimation
style:
animation: skeleton-effect-fade 2s linear infinite
background: "=props.colorSetMarker ? 'radial-gradient(' + props.colorSetMarker +' 30%, transparent 50%)' : 'radial-gradient(var(--f7-theme-color) 30%, transparent 50%)'"
border-radius: 50%
display: "=(props.valveItem && items[props.valveItem].state == 'ON' )? '' : 'none'"
height: 100%
left: 50%
margin-top: 0px
pointer-events: none
position: absolute
top: 50%
transform: translate(-50%, -50%)
width: 100%
z-index: -100 !important
- component: f7-block
config:
class: small
style:
animation: bound-in-small 0.6s ease forwards
background: "=props.colorCenter ? props.colorCenter : 'rgb(248, 249, 250)'"
border-radius: 50%
box-shadow: 0px 5px 10px 5px rgba(96, 93, 111,0.19)
height: "=props.size ? (Number(props.size)*0.375) +'px' : '57.6%'"
left: 50%
margin-top: 0px
position: absolute
text-align: center
top: 50%
transform: translate(-50%, -50%)
width: "=props.size ? (Number(props.size)*0.375) +'px' : '57.6%'"
z-index: 100 !important
slots:
default:
- component: f7-block
config:
class: heat
style:
color: "=props.colorTypo ? props.colorTypo : 'rgb(87, 84, 95)'"
font-size: "=props.fontSizeLocation ? props.fontSizeLocation : '1em'"
font-weight: 300
left: 50%
margin-top: 10%
transform: translate(-50%)
slots:
default:
- component: Label
config:
text: =props.location
- component: f7-swiper
config:
params:
autoplay:
delay: 1500
disableOnInteraction: false
direction: vertical
mousewheel: true
slidesPerView: 1
scrollbar: false
style:
border-radius: 50%
height: 100%
left: 50%
position: absolute
top: 50%
transform: translate(-50%, -50%)
width: 100%
slots:
default:
- component: f7-swiper-slide
config:
style:
display: "=props.humItem ? '' : 'none'"
slots:
default:
- component: f7-block
config:
class: heat
style:
color: "=props.colorTypo ? props.colorTypo : 'rgb(87, 84, 95)'"
display: flex
font-size: "=props.fontSizeCenter ? props.fontSizeCenter : '2em'"
font-weight: 300
left: 50%
margin-top: 0
position: absolute
top: 50%
transform: translate(-50%,-50%)
slots:
default:
- component: Label
config:
text: =items[props.humItem].state.split(' ')[0]
- component: Label
config:
style:
font-size: "=props.fontSizeCenter ? 'calc(' + props.fontSizeCenter + ' * 0.2 )' : '0.6em'"
vertical-align: top
text: =items[props.humItem].state.split(' ')[1]
- component: f7-swiper-slide
config:
style:
display: "=props.currentPointItem ? '' : 'none'"
slots:
default:
- component: f7-block
config:
class: heat
style:
color: "=props.colorTypo ? props.colorTypo : 'rgb(87, 84, 95)'"
display: flex
font-size: "=props.fontSizeCenter ? props.fontSizeCenter : '2em'"
font-weight: 300
left: 50%
margin-top: 0
position: absolute
top: 50%
transform: translate(-50%,-50%)
slots:
default:
- component: Label
config:
text: =Number(items[props.currentPointItem].state.split(' ')[0]).toFixed(1)
- component: Label
config:
style:
font-size: "=props.fontSizeCenter ? 'calc(' + props.fontSizeCenter + ' * 0.2 )' : '0.6em'"
vertical-align: top
text: "=props.unit ? props.unit : items[props.currentPointItem].state.split(' ')[1]"
Usage:
- component: widget:widget_HeatingCSS_2.0.0
config:
currentPointItem: gFF_EvaRoom_AC_RoomTemperature
exampleModeArray: 1,2,3,4,AUTO,QUIET
exampleModeItem: gFF_EvaRoom_AC_Fan
heatingModeArray: HEAT,COOL,FAN,DRY,AUTO
heatingModeItem: gFF_EvaRoom_AC_Mode
heatingPowerArray: OFF,ON
heatingPowerItem: gFF_EvaRoom_AC_Power
humItem: gFF_EvaRoom_Hygrometer_Humidity
location: Eva
maxTemp: 31
minTemp: 16
setPointItem: gFF_EvaRoom_AC_SetTemperature
vaneArray: 1,2,3,4,5,SWING,AUTO
vaneItem: gFF_EvaRoom_AC_Vane
1 Like
Great, many thanks.
For some reason the icons for mode, fan and vane are missing but I need to check correct settings for my heat pump. It seems that the arrays in my case are slightly different.
Widget is highly tailored (=not generalised) for my needs so youāll probably need to tweak it a bit ā¦
icon: "=props.exampleModeItem ? (items[props.exampleModeItem].state == props.exampleModeArray.split(',')[0] ? 'iconify:mdi:fan-speed-1' : items[props.exampleModeItem].state == props.exampleModeArray.split(',')[1] ? 'iconify:mdi:fan-speed-2' : items[props.exampleModeItem].state == props.exampleModeArray.split(',')[2] ? 'iconify:mdi:fan-speed-3' : items[props.exampleModeItem].state == props.exampleModeArray.split(',')[3] ? 'iconify:mdi:fan' : items[props.exampleModeItem].state == props.exampleModeArray.split(',')[4] ? 'iconify:mdi:fan-auto' : 'iconify:mdi:fan-off') : ''"
For icons please check&adopt lines like above ā¦
I am now trying to tweak the widget. I can see the vane icon but I noticed one potential problem with my vane item. As I am using Procon A1M Modbus interface I have to send e.g. the vane position as a number to the Modbus interface but your widget assumes that the vane item is a string. Now I am wondering whether I would need to create a second vane item which is a string, i.e. convert the first vane item to a string. I have same potential issue with fan and mode items. Iām not seeing the popup windows either even though I have defined the arrays. I am also wondering what is the Heating Power Item, is this the switch to switch on/off the heat pump. Your widget is really cool so it would be nice to get it working.
I am having strange problems with this widget. At first I setup all the parameters but I noticed that when clicking any of the buttons (except the temperature decrease/increase) the widget quitted and OH resumed the previous page. Then I tried to remove all the buttons except the PowerItem. I copied the code from above and pasted it as a new widget. Still the widget crashed. I then made a new page, added this new widget and setup only the PowerItem. The widget crashed again. Any ideas?
@ crnjan, I have now managed to get your HP widget working. Main issue (after realising that location prop canāt have spaces) was to convert the string items to numbers because my Modbus interface requires numerical input data. I found a solution in this post. Many thanks for your help.
Yeah, just remembered the space issue, i stumbled upon that too - and others also - Heating widget - #41 by RowanS
EDIT - just seen I actually posted about this, totally forgot about it - Heating widget - #86 by crnjan
Glad you got it working!