Since upgrading from 5.1 to 5.1.1 the widget_HeatingCSS_2.0.0 doesn’t work properly:
I realise this is an old widget that’s not supported anymore, but it worked up to 5.1.
Does anyone have an update?
Couldn’t this be yet another case of things only being broken on certain layouts/pages while working on others?
1 Like
Yes perhaps.
I have just gone back and checked that is OK on 5.1 and it is.
On 5.1.1, I’ve tried several layouts - fixed/canvas/cell/col/masonry but nothing I’ve tried works.
I do remember there were several problems with the original widget which needed to be edited. Maybe I messed something up then, but it was years ago.
The original widget is still on the marketplace I believe, of you just enable “show incompatible add-ons”. I have no idea why it’s marked as incompatible, that’s generally not a thing for widgets, but I assume that like so many other add-ons, the arbitrary version range end one must set has been its downfall.
Yes I did try that, but selecting the widget gives:
uid: 163ca178-1a1b-43b6-95e0-8469e181ffd8
tags:
- marketplace:115107
props:
parameters: []
parameterGroups: []
component: |-
<!DOCTYPE html> <html lang="en"
data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" data-a11y-animated-images="system" data-a11y-link-underlines="true"
>
<head> <meta charset="utf-8"> <link rel="dns-prefetch" href="https://github.githubassets.com"> <link rel="dns-prefetch" href="https://avatars.githubusercontent.com"> <link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com"> <link rel="dns-prefetch" href="https://user-images.githubusercontent.com/"> <link rel="preconnect" href="https://github.githubassets.com" crossorigin> <link rel="preconnect" href="https://avatars.githubusercontent.com">
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light-dac525bbd821.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light_high_contrast-56ccf4057897.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-784387e86ac0.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark_high_contrast-79bd5fd84a86.css" /><link data-color-theme="light" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light-dac525bbd821.css" /><link data-color-theme="light_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_high_contrast-56ccf4057897.css" /><link data-color-theme="light_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind-0e24752a7d2b.css" /><link data-color-theme="light_colorblind_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind_high_contrast-412af2517363.css" /><link data-color-theme="light_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia-6186e83663dc.css" /><link data-color-theme="light_tritanopia_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia_high_contrast-9d33c7aea2e7.css" /><link data-color-theme="dark" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark-784387e86ac0.css" /><link data-color-theme="dark_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_high_contrast-79bd5fd84a86.css" /><link data-color-theme="dark_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind-75db11311555.css" /><link data-color-theme="dark_colorblind_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind_high_contrast-f2c1045899a2.css" /><link data-color-theme="dark_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia-f46d293c6ff3.css" /><link data-color-theme="dark_tritanopia_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia_high_contrast-e4b5684db29d.css" /><link data-color-theme="dark_dimmed" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed-72c58078e707.css" /><link data-color-theme="dark_dimmed_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed_high_contrast-956cb5dfcb85.css" />
<style type="text/css"> :root { --tab-size-preference
config: {}
Markus, could you share the page layout type where this is working for you?
And the yaml if convenient.
it’s a standard page
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 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
- context: item
description: Extension Item 1 eg. Battery-State [Number-Item]
label: Extension Item 1
name: extensionItem1
required: false
type: TEXT
groupName: extensionItems
advanced: true
- description: Choose the F7-Icons for the Extension Item 1 as Array. ->
<battery_100,battery_25,battery_0>. 1st Icon = Value > 75, 2nd Icon =
Value > 25, 3th Icon = Value < 25
label: Extension Item 1 F7-Icon
name: extensionItem1Icon
required: false
type: TEXT
groupName: extensionItems
advanced: true
- context: item
description: Extension Item 2 eg. Battery-State [Number-Item]
label: Extension Item 2
name: extensionItem2
required: false
type: TEXT
groupName: extensionItems
advanced: true
- description: Choose the F7-Icons for the Extension Item 2 F7-Icon as Array. ->
<battery_100,battery_25,battery_0>. 1st Icon = Value > 75, 2nd Icon =
Value > 25, 3th Icon = Value < 25
label: F7-Icon for the Extension Item 2
name: extensionItem2Icon
required: false
type: TEXT
groupName: extensionItems
advanced: true
- 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
groupName: moreDesign
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: Jan 13, 2023, 4:14:48 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) ? 'Temperatur ' + 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)+'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: uppercase
width: "=props.size ? (Number(props.size)*0.89) +'px' : '100%'"
z-index: 99 !important
slots:
default:
- component: Label
config:
text: Heizung
- 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: =@props.currentPointItem.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: =@props.setPointItem.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-swiper
config:
pagination: true
params:
direction: horizontal
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:
height: 100%
width: 100%
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.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(30deg)' :
'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.heatingMo\
deArray.split(',')[\
0] ? 'hand_raised' :
items[props.heating\
ModeItem].state ==
props.heatingModeAr\
ray.split(',')[1] ?
'arrow_2_squarepath'
:
items[props.heating\
ModeItem].state ==
props.heatingModeAr\
ray.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.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(-30deg)' :
'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: 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.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.setPoint\
Item].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.setPoint\
Item].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.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
- component: Label
config:
style:
font-size: "=props.fontSizeCenter ? 'calc(' + props.fontSizeCenter + ' * 0.2 )'
: '0.6em'"
vertical-align: top
text: =items[props.humItem].displayState.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: =(@props.currentPointItem).split(' ')[0]
- component: Label
config:
style:
font-size: "=props.fontSizeCenter ? 'calc(' + props.fontSizeCenter + ' * 0.2 )'
: '0.6em'"
vertical-align: top
text: "=props.unit ? props.unit : (@props.currentPointItem).split(' ')[1]"
- component: oh-image
config:
style:
bottom: 5%
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/ori\
ginal/2X/7/7d388a86c9\
5471f89b1bb911d96d760\
9a3e3a059.svg'"
- component: f7-swiper-slide
config:
style:
display: "=props.chartSwitch ? '' : 'none'"
height: 100%
width: 100%
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: oh-chart
config:
height: 100%
period: 12h
periodVisible: false
slots:
grid:
- component: oh-chart-grid
config:
borderWidth: 0
height: 60%
left: 15%
right: 15%
show: true
top: 20%
series:
- component: oh-time-series
config:
data:
name: istTemp
gridIndex: 0
item: "=props.currentPointItem ? props.currentPointItem : ''"
lineStyle:
color: "=props.colorCurrentMarker ? props.colorCurrentMarker : 'rgb(33, 150,
243)'"
markPoint:
data:
- name: Höchsttemperatur
type: max
- name: Tiefsttemperatur
type: min
itemStyle:
color: "=props.colorCurrentMarker ? props.colorCurrentMarker : 'rgb(33, 150,
243)'"
name: Ist Temp. Indoor
smooth: true
type: line
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
gridIndex: 0
item: "=props.setPointItem ? props.setPointItem : ''"
lineStyle:
color: "=props.colorSetMarker ? props.colorSetMarker : 'rgb(230, 74, 25)'"
name: Soll Temp. Indoor
step: end
type: line
xAxisIndex: 0
yAxisIndex: 0
title:
- component: oh-chart-title
config:
bottom: 10%
left: center
text: 12h
textStyle:
fontSize: 1em
fontWeight: normal
xAxis:
- component: oh-time-axis
config:
axisLabel:
show: false
axisLine:
onZero: true
axisPointer:
label:
show: false
axisTick:
show: false
boundaryGap: false
gridIndex: 0
name: Uhrzeit
show: true
yAxis:
- component: oh-value-axis
config:
axisLabel:
formatter: "{value} °C"
gridIndex: 0
max: auto
min: auto
name: Temperatur
nameGap: 45
nameLocation: center
show: false
- component: f7-swiper-slide
config:
style:
display: "=(props.extensionItem1 || props.extensionItem2)? '' : 'none'"
height: 100%
width: 100%
slots:
default:
- component: f7-block
config:
class: page
style:
background: transparent
border-radius: 50%
font-size: "=props.fontSizeLocation ? props.fontSizeLocation : '1em'"
height: 100%
left: 50%
margin-top: 0px
position: absolute
top: 50%
transform: translate(-50%, -50%)
width: 100%
slots:
default:
- component: Label
config:
style:
margin-bottom: 5%
margin-top: 5%
text-align: center
text: Extension Items
- component: oh-repeater
config:
for: i
rangeStart: "=props.extensionItem1 ? Number(1) : (!props.extensionItem1 &&
props.extensionItem2) ?
Number(2) : ''"
rangeStop: "=(props.extensionItem1 && props.extensionItem2) ? Number(2) :
(props.extensionItem1 &&
!props.extensionItem2) ?
Number(1) : Number(2)"
sourceType: range
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-flow: row wrap
justify-content: space-evenly
padding: 0 5% 0 5%
slots:
default:
- component: f7-icon
config:
color: '=(Number.parseInt(items[props["extensionItem" + loop.i]].state) > 75) ?
"green" :
(Number.parseInt(items[props["extensionItem"
+ loop.i]].state) >
25) ? "yellow" :
"red"'
f7: '=props["extensionItem" + loop.i + "Icon"] ?
((Number.parseInt(items[props["extensionItem"
+ loop.i]].state) >
75) ?
props["extensionItem"
+ loop.i +
"Icon"].split(",")[0]
:
(Number.parseInt(items[props["extensionItem"
+ loop.i]].state) >
25) ?
props["extensionItem"
+ loop.i +
"Icon"].split(",")[1]
:
props["extensionItem"
+ loop.i +
"Icon"].split(",")[2])
: "clear"'
size: 2em
style:
line-height: 2
min-width: 40px
- component: f7-badge
config:
color: '=(Number.parseInt(items[props["extensionItem" + loop.i]].state) > 75) ?
"green" :
(Number.parseInt(items[props["extensionItem"
+ loop.i]].state) >
25) ? "yellow" :
"red"'
style:
font-size: 1em
line-height: 3
margin: 0 5px 0 5px
min-width: 30px
slots:
default:
- component: Label
config:
text: =items[props["extensionItem" + loop.i]].displayState
Thanks. I tried that on my 5.1.1 and it doesn’t work either.
I tried the OH snapshot (openHAB 5.2.0, Build #5112, Main UI Commit 1287399e)
and yours works, and so does my original.
Just one point. When I tried to save your widget, OH complained that the widget uid was invalid - a ‘.’ is not allowed.
I’m guessing that if you tried to edit your widget you would get the same - forcing a rename - and then after adjusting your page to point to the new widget it would break also.
I’m hoping the fix in 5.2 will get backported.
Thanks for your help.
The widget looks good on the 5.1.x branch, i.e. what will become the next 5.1.x patch release, so the fix you observed in 5.2 has been backported 
1 Like