text: =items[props.currentPointItem].displayState
Shall I paste the entire widget code? Sorry I’m a bit tired from running after my kid today so I may be misunderstanding something, my bad.
Oh, and I’m using the 2.0.1 widget from the store, so no changes to it.
Screenshot of what I’m seeing (sorry I’m on the smartphone)
I know it’s hard to see but all of the items show the same message.
openHAB does not show the widget anymore in the store, and when I trick it to open its page, trying to add it shows a popup that tells that the addon has been unpublished:
I’m using openHAB 4.2.2.
Does anyone know why is this happening? Is it incompatible with OH 4?
Couldn’t find info in the post, and there were no results for “unpublished” when searching the topic.
Widgets posted here in the marketplace only show up by default if they have the published tag added to them. This widget does not (It may actually have been posted on the forums before the marketplace went live and was only moved over afterwards). So the only way you will see the widget is if you check “Show Unpublished” in the marketplace settings. The warning you see it just that: a warning that it is possible the author of this widget does not think it is suitable for use by others yet.
Hi Pedro,
I had the same problem. I found the problem in the code.
You have to change this slot:
slots:
default:
- component: Label
config:
text: =Number(items[props.currentPointItem].state).toFixed(1)
- component: Label
config:
text: "=props.unit ? props.unit : items[props.currentPointItem].displayState.split(' ')[1]"
style:
font-size: "=props.fontSizeCenter ? 'calc(' + props.fontSizeCenter + ' * 0.2 )' : '0.6em'"
vertical-align: top
To this one:
slots:
default:
- component: Label
config:
text: =items[props.currentPointItem].numericState
- component: Label
config:
text: "=props.unit ? props.unit : items[props.currentPointItem].unit"
style:
font-size: "=props.fontSizeCenter ? 'calc(' + props.fontSizeCenter + ' * 0.2 )' : '0.6em'"
vertical-align: top
For me its working now 
Sorry if I am being stupid, but I’ve spend days trying to find this, and I can’t. I can only find the April 2021 2.0.0 release in GitHub as linked at the top of the thread. I saw the comment below about published status, but I couldn’t find where that is either. I’ve been using this widget prior to upgrading to 4.2.2 and it seems there is a lot to adjust to unbreak it.
Thanks
I use OH 4.2.2.
After changing the code of my widget to the one Manni51 posted in Nov. 2023 here, my NaN-issues disappeared 
Can someone please post the latest working and complete code of the widget. I still have these issues when changing the set point temperature, too:
cheers
Andreas
Using the widget in OH 4.3.0 makes the UI unresponsive. The widget doesn’t even show.
Anyone else expieriencing this ?
Hi to all. Having a problem with this very nice widget.
HVAC mode with my KNX termostat i have to use numbers to change HVAC mode, but i would like to see the words Comfort, Standby, Economy, Protection on the buttons.How do i get this instead of 0,1,2,3
Yes, I confirm, that the widget doesn’t work properly.
openHAB 4.3.3 Main UI Commit 1cc0b830
Hello Peter - that looks great!!
Could you post the code for it?
best
Heiko
Hello Heiko,
even if there are no changes since the first post (I think), here again the Yaml-Code of the widget:
Yaml-Code:
uid: Heating-Control_1-8-1_v5
tags:
- 1 Window-Sensor (Contact OPEN/CLOSED no AJAR)
- 2 Battery-Items (Switch ON/OFF) for Window and Thermostat
- 4 visible Corner Items - more Infos
- Background - Multicolor - Fantasy-Colors
- ON/OFF Switch
- Original from Nico Version V.1.8.1
- Pimps from Peter
- Thermostat-Widget
- flexible Corners
- https://community.openhab.org/t/heating-widget/115107
props:
parameters:
- description: eg. living room
label: location and widget identifier
name: location
required: true
type: TEXT
- default: "350"
description: Visual size of the control in px (default 350px), without a size
the design is responsive
label: size [px]
name: size
required: false
type: TEXT
- description: Minimum value
label: minTemp
name: minTemp
required: true
type: TEXT
- description: Maximum value
label: maxTemp
name: maxTemp
required: true
- context: item
description: Item to set/control target temperatur
label: Set point Item
name: setPointItem
required: true
type: TEXT
- context: item
label: Item for current temperature
name: currentPointItem
required: true
type: TEXT
- description: Control item unit eg °C
label: unit
name: unit
required: false
type: TEXT
- description: URL or path to a Image (if you use a local img eg. ->
http://local-IP-Adress:8080/static/folder/img.svg )
label: URL or path to image
name: imgUrl
required: false
type: TEXT
advanced: true
- description: Device modes as array eg. MANUAL,AUTOMATIC,VACATION.
label: Device Mode Array
name: deviceModeArray
required: false
type: TEXT
advanced: true
- description: Heating modes of the thermostate as array eg.
ECO,COMFORT,BOOST,ON,OFF,WINDOW_OPEN.
label: Heating Mode Array
name: heatingModeArray
required: false
type: TEXT
advanced: true
- context: item
description: Device Mode Item [String-Item] - readonly
label: Device Mode Item
name: deviceModeItem
required: false
type: TEXT
advanced: true
- context: item
description: Heating Mode Item [String-Item] (eg. value of heating Item -
corresponds also with setpoint )
label: Heating Mode Item
name: heatingModeItem
required: false
type: TEXT
advanced: true
- context: item
description: Valve Item [Switch-Item] (eg. State of heating valve) for Animation
label: Valve Item
name: valveItem
required: false
type: TEXT
advanced: true
- context: item
label: Item to display window state
name: windowItem
required: false
type: TEXT
- context: item
description: Item to display low-state of the battery of the thermostat (Switch
ON/OFF)
label: Low-state thermostat-battery (Switch ON/OFF)
name: batteryItem
required: false
type: TEXT
- context: item
description: Item to display low-state of the battery of the window-sensor(s)
(Switch ON/OFF Group Item is possible)
label: Low-state window-sensor(s)-battery (Switch ON/OFF)
name: batteryItem1
required: false
type: TEXT
- label: Custom font-size current&set-point marker (eg. 1em)
name: fontSizeMarker
required: false
type: TEXT
groupName: fonts
advanced: true
- label: Custom font-Size center (eg. 2em)
name: fontSizeCenter
required: false
type: TEXT
groupName: fonts
advanced: true
- label: Custom font-Size buttons (eg. 1.8em)
name: fontSizeButtons
required: false
type: TEXT
groupName: fonts
advanced: true
- label: Custom font-Size footer (eg. 1em)
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
- context: item
description: Top Left Item to show Information
label: Top Left Item
name: tl_item
required: false
type: TEXT
groupName: outeritems
advanced: true
- description: Top Left Icon to show Information
label: Top Left Icon
name: tl_icon
required: false
type: TEXT
groupName: outeritems
advanced: true
- context: item
description: Top Right Item to show Information
label: Top Right Item
name: tr_item
required: false
type: TEXT
groupName: outeritems
advanced: true
- description: Top Right Icon to show Information
label: Top Right Icon
name: tr_icon
required: false
type: TEXT
groupName: outeritems
advanced: true
- context: item
description: Bottom Left Item to show Information
label: Bottom Left Item
name: bl_item
required: false
type: TEXT
groupName: outeritems
advanced: true
- description: Bottom Left Icon to show Information
label: Bottom Left Icon
name: bl_icon
required: false
type: TEXT
groupName: outeritems
advanced: true
- context: item
description: Bottom Right Item to show Information
label: Bottom Right Item
name: br_item
required: false
type: TEXT
groupName: outeritems
advanced: true
- description: Bottom Right Icon to show Information
label: Bottom Right Icon
name: br_icon
required: false
type: TEXT
groupName: outeritems
advanced: true
- description: Widgetbackground e.g. "transparent" or "blue" or
"linear-gradient(to bottom right,#B0E0E6 20%,#1E90FF 30%,#FFC0CB 60%)"
label: Background
name: background1
required: false
type: TEXT
groupName: layout
advanced: true
- description: Corners/Edges from top-left to bottom left e.g. 15% 5% 8% 3%
label: Corners
name: corners
required: false
type: TEXT
groupName: layout
advanced: true
parameterGroups:
- name: colors
label: Color-Settings
- name: fonts
label: Font-Settings
- name: outeritems
label: Outer-Items
- name: layout
label: Widget-Layout
timestamp: Nov 5, 2024, 5:52:42 PM
component: f7-card
config:
border: no
style:
--f7-card-box-shadow: none
--relVer: Rel_1.8.1_v5
background: '=(props.background1) ? props.background1 : "linear-gradient(122deg,
rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)"'
background-position: down
background-repeat: no-repeat
background-size: cover
border-radius: '=(props.corners) ? props.corners : "0%"'
font-size: medium
height: auto
margin: 5px
noShadow: true
padding: 0px
width: '=(props.size) ? (props.size) * 1.23 + "px": "400px"'
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-col
config:
style:
align-items: flex-start
display: '=(props.item) ? "flex" : "flex"'
flex-direction: column-reverse
justify-content: flex-start
left: 10px
margin-left: 02px
margin-top: 5px
padding: 10px
position: absolute
top: 5px
z-index: 2
slots:
default:
- component: oh-icon
config:
icon: =props.tl_icon
style:
bottom: 0%
height: "=props.size ? (Number(props.size)/10) +'px' : '65%'"
left: 0%
transform: translate(-20%,-0%)
- component: Label
config:
style:
font-size: "=props.size ? (Number(props.size)/17) +'px' : '15px'"
text: =(items[props.tl_item].displayState) || (items[props.tl_item].state)
- component: f7-col
config:
style:
align-items: flex-end
display: flex
flex-direction: column-reverse
justify-content: flex-end
margin-right: 5px
padding: 10px
position: absolute
right: 10px
top: 10px
z-index: 2
slots:
default:
- component: oh-icon
config:
icon: =props.tr_icon
style:
bottom: 0%
height: "=props.size ? (Number(props.size)/10) +'px' : '65%'"
left: 0%
transform: translate(-0%,-0%)
- component: Label
config:
style:
font-size: "=props.size ? (Number(props.size)/17) +'px' : '15px'"
text: =(items[props.tr_item].displayState) || (items[props.tr_item].state)
- component: f7-row
config:
class:
- justify-content-center
resizable-absolute: true
resizableFixed: true
slots:
default:
- component: f7-block
config:
class: thermostat
style:
--f7-block-margin-vertical: 0px
--f7-block-padding-horizontal: 0px
--f7-block-padding-vertical: 0px
background: "=props.colorThermostat ? props.colorThermostat :
'var(--f7-toggle-inactive-color)'"
border: 2px solid rgb(64, 60, 77)
border-radius: 50%
box-sizing: content-box
flex-shrink: 0
padding-left: 0px
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:
border-radius: 50%
height: "=props.size ? (Number(props.size)*0.89) +'px' : '89%'"
left: 50%
margin-top: 0px
position: absolute
top: 50%
transform: translate(-50%, -50%)
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)'"
border-radius: 100%
height: "=props.size ? (Number(props.size)*0.86) +'px' : '97%'"
left: 50%
margin-top: 0
position: absolute
top: 50%
transform: translate(-50%, -50%)
width: "=props.size ? (Number(props.size)*0.86) +'px' : '97%'"
z-index: 4 !important
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'"
content: ""
display: block
height: 100%
left: 50%
position: absolute
transform: translate(-50%)
width: 100%
- 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)+'de\
g)' :
(items[props.setPointItem].state.spli\
t(' ')[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.spli\
t(' ')[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: capitalize
width: "=props.size ? (Number(props.size)*0.89) +'px' : '100%'"
z-index: 99 !important
slots:
default:
- component: Label
config:
style:
font-size: "=props.size ? (Number(props.size)/25) +'px' : '12px'"
text: "Rel.: 1.8.1_v5"
- 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.s\
plit(' ')[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: oh-icon
config:
icon: "=(items[props.batteryItem].state === 'OFF') ? 'lowbattery1-off' :
'lowbattery1-on'"
item: =props.batteryItem
style:
bottom: 32%
height: 48%
left: 76%
position: absolute
transform: translate(-55%,-48%) rotate(-140deg)
width: 15%
visible: "=props.batteryItem ? true : false"
- component: oh-icon
config:
icon: "=(items[props.batteryItem1].state === 'OFF') ? 'lowbattery1-off' :
'lowbattery1-on'"
item: =props.batteryItem1
style:
bottom: 32%
height: 48%
left: 25%
position: absolute
transform: translate(-55%,-48%) rotate(-39deg)
width: 15%
visible: "=props.batteryItem1 ? true : false"
- component: oh-icon
config:
icon: "=(items[props.windowItem].state === 'OPEN') ? 'window-open' :
'window-closed'"
style:
bottom: 40%
height: 50%
left: 50%
position: absolute
transform: translate(-50%,-50%)
width: 20%
visible: "=props.windowItem ? true : false"
- component: f7-block
config:
class: buttonContainer
style:
display: "=props.deviceModeItem ? '' : '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 + '.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.deviceModeItem ? (items[props.deviceModeItem].state
== props.deviceModeArray.split('\
,')[0] ? 'hand_raised' :
items[props.deviceModeItem].state
==
props.deviceModeArray.split(',')[\
1] ? 'arrow_2_squarepath' :
items[props.deviceModeItem].state
==
props.deviceModeArray.split(',')[\
2] ? 'airplane' : 'thermometer') :
''"
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-row
config: {}
slots:
default:
- component: f7-col
slots:
default:
- component: oh-repeater
config:
containerStyle:
width: 100%
for: buttonlabel
in: =props.deviceModeArray.split(",")
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =loop.buttonlabel
actionItem: "=props.deviceModeItem ? props.deviceModeItem : ''"
active: "=props.deviceModeItem ? (items[props.deviceModeItem].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.deviceModeItem ? '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-icon
config:
f7: "=props.heatingModeItem ? (items[props.heatingModeItem].state
== props.heatingModeArray.split(\
',')[0] ? 'thermometer' :
items[props.heatingModeItem].state
==
props.heatingModeArray.split(',')\
[1] ? 'thermometer_sun' :
items[props.heatingModeItem].state
==
props.heatingModeArray.split(',')\
[2] ? 'rocket' :
items[props.heatingModeItem].state
==
props.heatingModeArray.split(',')\
[3] ? 'gauge' :
items[props.heatingModeItem].state
==
props.heatingModeArray.split(',')\
[4] ? 'gauge_badge_minus' :
'wrench') : ''"
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 + ' popoverExampleMode'
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.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: oh-button
config:
action: command
actionCommand: "=Number(items[props.setPointItem].state.split(' ')[0]) >
Number(props.minTemp) ?
Number(items[props.setPointItem].state.split('
')[0]) - 0.5 : ''"
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]) + 0.5 : ''"
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.size ? (Number(props.size)*0.0375) +'px' : '14px'"
font-weight: 300
slots:
default:
- component: Label
config:
text: =props.location
- component: f7-block
config:
class: heat
style:
color: "=props.colorTypo ? props.colorTypo : 'rgb(87, 84, 95)'"
font-size: "=props.fontSizeCenter ? props.fontSizeCenter : '2em'"
font-weight: 300
slots:
default:
- component: Label
config:
text: "=props.unit ? items[props.setPointItem].state.split(' ')[0] + '' +
props.unit :
items[props.setPointItem].state.s\
plit(' ')[0]"
- component: oh-image
config:
style:
left: 50%
position: absolute
transform: translate(-50%)
width: 40%
url: "=props.imgUrl ? props.imgUrl :
'https://community-openhab-org.s3-eu-centra\
l-1.amazonaws.com/original/2X/7/7d388a8\
6c95471f89b1bb911d96d7609a3e3a059.svg'"
- component: f7-icon
config:
f7: power
style:
bottom: -30%
color: '=(items[props.valveItem].state == "OFF") ? props.colorButton : "red"'
font-size: "=props.fontSizeButtons ? props.fontSizeButtons : '2em'"
left: 50%
position: absolute
transform: translate(-50%)
width: 40%
visible: "=props.valveItem ? true : false"
- component: oh-button
config:
action: command
actionCommand: '=(props.valveItem && items[props.valveItem].state == "OFF") ?
"ON" : "OFF"'
actionItem: =props.valveItem
style:
--f7-button-fill-hover-bg-color: transparent
--f7-button-hover-bg-color: transparent
bottom: -30%
left: 50%
position: absolute
transform: translate(-50%)
width: 40%
visible: "=props.valveItem ? true : false"
- component: f7-row
config:
style:
color: '=(props.textcolor1) ? props.textcolor1 : "darkgreen"'
display: true
font-size: 10px
height: 5px
justify-content: flex-end
slots:
default:
- component: f7-col
config:
style:
align-items: flex-start
bottom: 5px
display: flex
flex-direction: column
justify-content: flex-start
left: 5px
margin-left: 10px
padding: 10px
position: absolute
z-index: 2
slots:
default:
- component: oh-icon
config:
icon: =props.bl_icon
style:
bottom: 0%
height: "=props.size ? (Number(props.size)/10) +'px' : '65%'"
left: 0%
transform: translate(-20%,-0%)
- component: Label
config:
style:
font-size: "=props.size ? (Number(props.size)/17) +'px' : '15px'"
text: =(items[props.bl_item].displayState) || (items[props.bl_item].state)
- component: f7-col
config:
style:
align-items: flex-end
bottom: 5px
display: flex
flex-direction: column
justify-content: flex-end
margin-right: 10px
padding: 10px
position: absolute
right: 5px
z-index: 2
slots:
default:
- component: oh-icon
config:
icon: =props.br_icon
style:
bottom: 0%
height: "=props.size ? (Number(props.size)/10) +'px' : '65%'"
left: 0%
transform: translate(-0%,-0%)
- component: Label
config:
style:
font-size: "=props.size ? (Number(props.size)/17) +'px' : '15px'"
text: =(items[props.br_item].displayState) || (items[props.br_item].state)
and the Yaml-Code of the Configuration-SetUp for 1 Widget (Büro) as there are a lot of Parameters 
:
Configuration-Yaml:
component: widget:Heating-Control_1-8-1_v5
config:
background1: linear-gradient(122deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)
batteryItem: radiator_valve_01_Battery
batteryItem1: gBaWiBu
bl_icon: pressure
bl_item: aqtherm_01_pressure
br_icon: carbondioxide
br_item: esp32v3_02_smoke1
colorBarEndPoint: darkorange
colorBarStartPoint: yellow
colorButton: teal
colorCenter: lightcyan
colorControlRing: powderblue
colorCurrentMarker: lightseegreen
colorSetMarker: salmon
colorThermostat: lightblue
colorTypo: green
corners: 5% 15% 0%
currentPointItem: radiator_valve_01_Temp
deviceModeArray: MANUAL,AUTOMATIC,VACATION
deviceModeItem: radiator_valve_01_ModeX
fontSizeButtons: 1.5em
fontSizeCenter: 1.5em
fontSizeFooter: 0.6em
fontSizeMarker: 0.9em
heatingModeArray: ECO,COMFORT,BOOST,ON,OFF,WINDOW_OPEN
heatingModeItem: radiator_valve_01_Mode
imgUrl: /static/picture/OpenHAB_logo_2.svg
location: Büro
maxTemp: "30"
minTemp: "6"
setPointItem: radiator_valve_01_Set
size: "270"
tl_icon: snzb02
tl_item: aqtherm_01_temperature
tr_icon: humidity
tr_item: aqtherm_01_humidity
unit: °C
windowItem: gWindowOffice
My actual OH-Release is 4.3.3. The Widget is based/forked of the Custom-Version 1.8.1
If there are further questions, feel free to ask.
Cheers, Peter
@Nico_R The reason it doesn’t work to install this from the marketplace is that the last link in the first (it’s the only one actually used by the marketplace) doesn’t link to the “raw” file. If you replace the link with
https://raw.githubusercontent.com/NRquadrat/oh3-widgetHeating/refs/tags/2.0.0/oh3-widgetHeating.yaml
..people will be able to simply “add” it from within OH.
Hi to everybody .
I’ve been using this widget since oh3 , upgrading to oh5.0 changed the widget (moved) the buttons slighlty to the left , using devtools i managed to repair it .
After upgrading to 5.1.1 inner swiper element is just a mess . I even tried to employ github copilot in vs code to use it for correcting the issue but he “cant see” the changes it makes and it’s just pain copy pasting code just to see different garbage result and im lost in browser dev tools can’t seem to find what needs to be addresed .
Has anyone maybe solved the rendering with this change or can give some pointers what to do or which tool to use to make widget usable again . I’m good at arduino coding but this one escapes me . And I would very much like to continue using it since in one “small image” ther’s a plethora of switches displays info etc… just beautiful and useful (otherwise would need half a page of standard widgets) and I don’t want downgrading oh to 4.x.
Thank you .
I have the same problem - the heating widget appears completly messed up since upgrading to 5.1.1
I’d appreciate any help/hint on how to fix this…
Before:
After:
I managed to make it usable again but without center “swiper” element . As in , inner most white circle can’t be swiped to the left to access second and third page .
I’ll edit the post tomorrow to add GitHub link with yaml.
Making swiper work is for now beyond my knowledge.
EDIT : This is my version OH-5.X.X-Heating-widget/yaml at main · yuguar/OH-5.X.X-Heating-widget · GitHub
The swiper problem could be related to this and this might be fixed already in the next bugfix release:
