Hi All
I have just upgraded from OH 5.2.0-SNAPSHOT (openHAB 5.2.0
Build #5067) to OH 5.2.0.M1 and two of my widgets no longer work.
now looks like
and
now looks like
The widgest are defined as:
component: oh-cell
config:
on: true
title: ="SunSynk Summary "
slots:
background:
- component: f7-block
config:
style:
--cell-green: rgba(165,236,176,255)
--cell-red: rgba(255,156,151,255)
--cell-yellow: rgba(254,229,128,255)
height: 100%
margin: 0
padding: 0
position: absolute
width: 100%
- component: f7-block
config:
style:
bottom: 5px
left: 0px
margin: 0
padding: 0
position: absolute
width: 100%
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: visibleSunSynkPop
actionVariableValue: true
popupOpen: .sunSynk-pop
style:
height: 100%
width: 100%
text: OPEN
- component: f7-popup
config:
class: sunSynk-pop
style:
--f7-popup-tablet-height: 720px
--f7-popup-tablet-width: 360px
background-color: rgb(220,220,220)
border-radius: 30px
height: 720px
text-overflow: ellipsis
width: 360px
slots:
default:
- component: f7-block
config:
popupClose: .sunSynk-pop
style:
--f7-popup-tablet-height: 720px
--f7-popup-tablet-width: 360px
background-color: rgb(220,220,220)
border-radius: 30px
height: 720px
margin: 0
padding: 0
text-overflow: ellipsis
width: 360px
visible: =(vars.visibleSunSynkPop) == true
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: visibleSunSynkPop
actionVariableValue: false
clearVariable:
- ZZvisibleSunSynkPop
large: true
popupClose: .modal-in
style:
background: rgb(220,220,220)
color: white
display: flex
height: 30px
left: 5px
position: absolute
top: 5px
width: 30px
z-index: 999
slots:
default:
- component: f7-icon
config:
color: white
f7: clear_fill
style:
color: black
font-size: 20px
margin: auto
- component: Label
config:
style:
font-size: 25px
font-weight: 500
padding-left: 70px
width: 100%
text: SunSynk Summary
- component: f7-block
config:
style:
--f7-popup-tablet-height: 180px
--f7-popup-tablet-width: 326px
background-color: rgba(232,232,232)
border: 1px solid black
border-radius: 10px
height: 180px
left: 17px
margin: 0
padding: 0
position: absolute
width: 326px
slots:
default:
- component: oh-gauge
config:
borderBgColor: rgba(230,240,252,255)
borderColor: rgba(43,208,254,255)
borderWidth: 20
class:
- margin-top
- margin-bottom
item: SunSynk_Load_Grid
labelText: Grid
max: 8800
min: 0
size: 300
style: left:15px
type: semicircle
valueFontSize: 35
valueTextColor: rgba(84,214,138,255)
- component: f7-block
config:
style:
--f7-popup-tablet-height: 320px
--f7-popup-tablet-width: 326px
background-color: rgba(232,232,232)
border: 1px solid black
border-radius: 10px
display: flex
height: 320px
justify-content: space-around
left: 17px
margin: 0
padding: 0
position: absolute
top: 250px
width: 326px
slots:
default:
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: f7-block
config:
style:
align-items: center
border-radius: 40px
display: flex
flex-direction: column
height: 80px
justify-content: center
margin: 0
padding: 0
top: 35px
width: 80px
slots:
default:
- component: oh-icon
config:
height: 40px
icon: oh:ss_solar
- component: Label
config:
style:
font-size: 12px
text: =items.SunSynk_MPPT1_House.state
- component: oh-icon
config:
height: 40px
icon: oh:ss_solar
- component: Label
config:
style:
font-size: 12px
text: =items.SunSynk_MPPT2_Garage.state
- component: Label
config:
style:
font-size: 12px
font-weight: 800
text: =items.SunSynk_MPPT_TOTAL.state
- component: f7-block
config:
style:
align-items: center
border-radius: 40px
display: flex
flex-direction: column
height: 80px
justify-content: center
margin: 0
padding: 0
top: 140px
width: 80px
slots:
default:
- component: oh-icon
config:
height: 40px
icon: oh:ss_battery
- component: Label
config:
style:
font-size: 12px
text: =items.SunSynk_Battery_SOC.state + " " + items.SunSynk_Battery_Power.state
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
flex-grow: 1
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 80px
justify-content: center
margin: 0
padding: 0
top: 120px
width: 80px
slots:
default:
- component: oh-icon
config:
height: 70px
icon: oh:ss_inverter
- component: f7-block
config:
style:
display: flex
height: 295px
justify-content: center
margin: 0
padding: 0
top: -49px
width: 100%
slots:
default:
- component: svg
config:
preserveAspectRatio: xMidYMid slice
style:
height: auto
viewBox: 0 0 80 140
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: path
config:
d: M0,10 H25 A 10 10 45 0 1 35 20 V45
fill: none
id: solarInverter
stroke: =(items.SunSynk_MPPT_TOTAL.state != "0
W")?("orange"):("rgb(220,220,220)")
stroke-width: 2
vector-effect: non-scaling-stroke
- component: g
config:
visible: =(items.SunSynk_MPPT_TOTAL.state != "0 W")?(true):(false)
slots:
default:
- component: circle
config:
fill: orange
r: 3
strokeWidth: 10
vectorEffect: non-scaling-stroke
- component: text
config:
content: »
font-size: 8px
text-anchor: middle
x: 0
y: 2.3
- component: animateTransform
config:
attributeName: transform
attributeType: XML
dur: =Number.parseInt(Math.abs((7-Number.parseFloat(items.SunSynk_MPPT_TOTAL.state)/1000)))
keyTimes: 0;.33;.66;1
repeatCount: indefinite
type: rotate
values: 0;0;90;90
- component: animateMotion
config:
calcMode: linear
dur: =Number.parseInt(Math.abs((7-Number.parseFloat(items.SunSynk_MPPT_TOTAL.state)/1000)))
keyPoints: 0;1
keyPointsReverse: 1;0
keyTimes: 0;1
repeatCount: indefinite
slots:
default:
- component: mpath
config:
xlink:href: "#solarInverter"
- component: path
config:
d: M80,10 H55 A 10 10 45 0 0 45 20 V45
fill: none
id: gridInverter
stroke: =(items.SunSynk_Load_Grid.state != "0
W")?("orange"):("rgb(220,220,220)")
stroke-width: 2
vector-effect: non-scaling-stroke
- component: g
config:
visible: =(items.SunSynk_Load_Grid.state != "0 W")?(true):(false)
slots:
default:
- component: circle
config:
fill: orange
r: 3
strokeWidth: 10
vectorEffect: non-scaling-stroke
- component: text
config:
content: »
font-size: 8px
text-anchor: middle
x: 0
y: 2.3
- component: animateTransform
config:
attributeName: transform
attributeType: XML
dur: =Number.parseInt(Math.abs((7-Number.parseFloat(items.SunSynk_Load_Grid.state)/1000)))
keyTimes: 0;.33;.66;1
repeatCount: indefinite
type: rotate
values: =(Number.parseInt(items.SunSynk_Load_Grid.state) >
0)?('-180;-180;-270;-270'):('-90;-90;0;0')
- component: animateMotion
config:
calcMode: linear
dur: =Number.parseInt(Math.abs((7-Number.parseFloat(items.SunSynk_Load_Grid.state)/1000)))
keyPoints: =(Number.parseInt(items.SunSynk_Load_Grid.state) > 0)?('0;1'):('1;0')
keyPointsReverse: 1;0
keyTimes: 0;1
repeatCount: indefinite
slots:
default:
- component: mpath
config:
xlink:href: "#gridInverter"
- component: path
config:
d: M0,115 H25 A 10 10 45 0 0 35 105 V80
fill: none
id: batteryInverter
stroke: =(items.SunSynk_Battery_Power.state != "0
W")?("orange"):("rgb(220,220,220)")
stroke-width: 2
vector-effect: non-scaling-stroke
- component: g
config:
visible: =(items.SunSynk_Battery_Power.state != "0 W")?(true):(false)
slots:
default:
- component: circle
config:
fill: orange
r: 3
strokeWidth: 10
vectorEffect: non-scaling-stroke
- component: text
config:
content: »
font-size: 8px
text-anchor: middle
x: 0
y: 2.3
- component: animateTransform
config:
attributeName: transform
attributeType: XML
dur: =Number.parseInt(Math.abs((7-Number.parseFloat(items.SunSynk_Battery_Power.state)/1000)))
keyTimes: 0;.33;.66;1
repeatCount: indefinite
type: rotate
values: =(Number.parseInt(items.SunSynk_Battery_Power.state) >
0)?('0;0;-90;-90'):('90;90;180;180')
- component: animateMotion
config:
calcMode: linear
dur: =Number.parseInt(Math.abs((7-Number.parseFloat(items.SunSynk_Battery_Power.state)/1000)))
keyPoints: =(Number.parseInt(items.SunSynk_Battery_Power.state) >
0)?('0;1'):('1;0')
keyPointsReverse: 1;0
keyTimes: 0;1
repeatCount: indefinite
slots:
default:
- component: mpath
config:
xlink:href: "#batteryInverter"
- component: path
config:
d: M80,95 H55 A 10 10 45 0 1 45 85 V80
fill: none
id: upsInverter
stroke: =(items.SunSynk_Load_Essential.state != "0
W")?("orange"):("rgb(220,220,220)")
stroke-width: 2
vector-effect: non-scaling-stroke
- component: g
config:
visible: =(items.SunSynk_Load_Essential.state != "0 W")?(true):(false)
slots:
default:
- component: circle
config:
fill: orange
r: 3
strokeWidth: 10
vectorEffect: non-scaling-stroke
- component: text
config:
content: »
font-size: 8px
text-anchor: middle
x: 0
y: 2.3
- component: animateTransform
config:
attributeName: transform
attributeType: XML
dur: =Number.parseInt(Math.abs((7-Number.parseFloat(items.SunSynk_Load_Essential.state)/1000)))
keyTimes: 0;.10;.50;1
repeatCount: indefinite
type: rotate
values: =(Number.parseInt(items.SunSynk_Load_Essential.state) >
0)?('90;90;0;0'):('-180;-180;-90;-90')
- component: animateMotion
config:
calcMode: linear
dur: =Number.parseInt(Math.abs((7-Number.parseFloat(items.SunSynk_Load_Essential.state)/1000)))
keyPoints: =(Number.parseInt(items.SunSynk_Load_Essential.state) >
0)?('1;0'):('0;1')
keyPointsReverse: 1;0
keyTimes: 0;1
repeatCount: indefinite
slots:
default:
- component: mpath
config:
xlink:href: "#upsInverter"
- component: path
config:
d: M80,115 H50 A 10 10 40 0 1 40 105 V80
fill: none
id: homeInverter
stroke: =(Number.parseFloat(items.SunSynk_Load_NonEssential.state) >
0)?("orange"):("rgb(220,220,220)")
stroke-width: 2
vector-effect: non-scaling-stroke
- component: g
config:
visible: =(Number.parseFloat(items.SunSynk_Load_NonEssential.state) >
0)?(true):(false)
slots:
default:
- component: circle
config:
fill: orange
r: 3
strokeWidth: 10
vectorEffect: non-scaling-stroke
- component: text
config:
content: »
font-size: 8px
text-anchor: middle
x: 0
y: 2.3
- component: animateTransform
config:
attributeName: transform
attributeType: XML
dur: =(Number.parseInt(Math.abs((7-(Number.parseFloat(items.SunSynk_Load_NonEssential.state)/1000)))))
keyTimes: 0;.33;.66;1
repeatCount: indefinite
type: rotate
values: =(Number.parseFloat(items.SunSynk_Load_NonEssential.state) >
0)?('90;90;0;0'):('-180;-180;-90;-90')
- component: animateMotion
config:
calcMode: linear
dur: =(Number.parseInt(Math.abs((7-(Number.parseFloat(items.SunSynk_Load_NonEssential.state)/1000)))))
keyPoints: =(Number.parseFloat(items.SunSynk_Load_NonEssential.state) >
0)?('1;0'):('0;1')
keyPointsReverse: 1;0
keyTimes: 0;1
repeatCount: indefinite
slots:
default:
- component: mpath
config:
xlink:href: "#homeInverter"
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: f7-block
config:
style:
align-items: center
border-radius: 40px
display: flex
flex-direction: column
height: 80px
justify-content: center
margin: 0
padding: 0
top: 20px
width: 80px
slots:
default:
- component: oh-icon
config:
height: 40px
icon: oh:ss_grid
- component: Label
config:
style:
font-size: 12px
text: =items.SunSynk_Load_Grid.state
- component: f7-block
config:
style:
align-items: center
border-radius: 40px
display: flex
flex-direction: column
height: 80px
justify-content: center
margin: 0
padding: 0
top: 130px
width: 80px
slots:
default:
- component: oh-icon
config:
height: 40px
icon: oh:ss_bolt
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: =items.SunSynk_Load_Essential.state
- component: oh-icon
config:
height: 40px
icon: oh:ss_house
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: =items.SunSynk_Load_NonEssential.state
- component: f7-block
config:
style:
background-color: rgba(232,232,232)
left: 210px
margin: 0
padding: 0
position: absolute
top: 403px
width: 100px
slots:
default:
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: =items.SunSynk_inv_Total_Power_175.state
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: =items.SunSynk_inv_Current_L1_164.state
- component: f7-block
config:
style:
--f7-popup-tablet-height: 20px
--f7-popup-tablet-width: 326px
background-color: rgba(232,232,232)
border: 1px solid black
border-radius: 10px
bottom: 15px
height: 20px
left: 17px
margin: 0
padding: 0
position: absolute
width: 326px
slots:
default:
- component: Label
config:
style:
font-size: 12px
font-weight: 700
left: 10px
position: absolute
white-space: nowrap
text: '="MCU: "'
- component: Label
config:
style:
font-size: 12px
left: 45px
position: absolute
white-space: nowrap
text: =items.SunSynk_MCU.state
- component: Label
config:
style:
font-size: 12px
font-weight: 700
left: 95px
position: absolute
white-space: nowrap
text: '="COMM: "'
- component: Label
config:
style:
font-size: 12px
left: 143px
position: absolute
white-space: nowrap
text: =items.SunSynk_COMM.state
- component: Label
config:
style:
font-size: 12px
font-weight: 700
left: 185px
position: absolute
white-space: nowrap
text: '="Last: "'
- component: Label
config:
style:
font-size: 12px
left: 212px
position: absolute
white-space: nowrap
text: =items.SunSynk_FW_LastUpdate.displayState
and
component: oh-cell
config:
title: ="Mains TOTAL Energy "
slots:
background:
- component: f7-block
config:
style:
height: 25px
margin: 0
padding: 0
position: absolute
top: 12px
width: 100%
visible: =(screen.viewAreaWidth >= 1600)
slots:
default:
- component: oh-toggle
config:
item: ShellyEM_MAINS_TotalEnergy_Switch
style:
position: absolute
right: 5px
top: 2px
width: 50px
- component: Label
config:
style:
color: blue
position: absolute
right: 50px
top: 2px
text: Store
- component: f7-block
config:
style:
bottom: 36px
height: 45px
left: 0px
margin: 0
padding: 0
position: absolute
width: 100%
visible: =(screen.viewAreaWidth >= 835)
slots:
default:
- component: Label
config:
style:
color: blue
font-size: 13px
left: 5px
position: absolute
top: 0px
text: '="Was: " + (items.ShellyEM_Mains_TotalEnergy_PreviousMonth.state)'
- component: Label
config:
style:
color: blue
font-size: 13px
position: absolute
right: 5px
top: 0px
text: '= "Now: " + (items.ShellyEM_MAINS_TotalEnergy.state)'
- component: Label
config:
style:
color: blue
font-size: 13px
left: 5px
position: absolute
top: 17px
text: '="Last: " + (items.ShellyEM_MAINS_TotalEnergy_Monthly.state)'
- component: Label
config:
style:
color: blue
font-size: 13px
position: absolute
right: 5px
top: 17px
text: '="This: " +
(Math.round((Math.abs(Number.parseFloat(items.ShellyEM_MAINS_TotalEnergy.state))
-
(Number.parseFloat(items.ShellyEM_Mains_TotalEnergy_PreviousMonth.state)))
*1000) /1000) + " kWh"'
- component: f7-block
config:
bgColor: none
style:
bottom: 5px
left: 0px
margin: 0
padding: 0
position: absolute
width: 100%
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: visibleMonthlyPop
actionVariableValue: true
popupOpen: .month-pop-test
style:
height: 100%
width: 100%
text: OPEN
- component: f7-popup
config:
class: month-pop-test
style:
--f7-popup-tablet-height: 720px
--f7-popup-tablet-width: 360px
background-color: rgb(220,220,220)
border-radius: 30px
height: 720px
text-overflow: ellipsis
width: 360px
slots:
default:
- component: f7-block
config:
style:
--f7-popup-tablet-height: 720px
--f7-popup-tablet-width: 360px
background: rgb(220,220,220)
border-radius: 20px
height: 720px
margin: 0
padding: 0
position: absolute
top: 0px
width: 360px
visible: =(vars.visibleMonthlyPop)==true
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: visibleMonthlyPop
actionVariableValue: false
clearVariable:
- ZZvisibleMonthlyPop
large: true
popupClose: .modal-in
style:
background: rgb(220,220,220)
color: white
display: flex
height: 30px
left: 5px
position: absolute
top: 5px
width: 30px
z-index: 999
slots:
default:
- component: f7-icon
config:
color: white
f7: clear_fill
style:
color: black
font-size: 20px
margin: auto
- component: Label
config:
style:
font-size: 20px
font-weight: 500
padding-left: 35px
width: 100%
z-index: 999
text: Mains Consumption Comparison
- component: f7-block
config:
style:
--f7-popup-tablet-height: 350px
--f7-popup-tablet-width: 360px
--my-chart-menu-size: =(device.desktop)?(1):(.5)
height: 350px
margin: 0
padding: 0
position: absolute
top: 20px
width: 360px
stylesheet: |
.menu {
transform: Scale(var(--my-chart-menu-size));
}
slots:
default:
- component: oh-chart
config:
chartType: month
label: Mains Consumption Comparison
period: M
slots:
dataZoom:
- component: oh-chart-datazoom
config:
show: true
type: inside
grid:
- component: oh-chart-grid
config:
includeLabels: true
top: 90px
legend:
- component: oh-chart-legend
config:
bottom: 5
type: scroll
series:
- component: oh-time-series
config:
gridIndex: 0
item: ShellyEM_MAINS_TotalEnergy
name: Current
type: line
xAxisIndex: 1
yAxisIndex: 0
- component: oh-time-series
config:
gridIndex: 0
item: ShellyEM_MAINS_TotalEnergy
name: Previous
offsetAmount: 1
offsetUnit: month
type: line
xAxisIndex: 0
yAxisIndex: 0
tooltip:
- component: oh-chart-tooltip
config:
confine: true
smartFormatter: true
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
- component: oh-time-axis
config:
gridIndex: 0
verticalAlign: top
yAxis:
- component: oh-value-axis
config:
axisLabel:
align: right
fontSize: 9
hideOverlap: true
inside: false
margin: 5
rotate: 0
show: true
showMaxLabel: false
showMinLabel: false
containLabel: true
gridIndex: 0
max: dataMax
min: dataMin
name: kWh
nameGap: 30
nameLocation: start
nameTextStyle:
align: right
color: black
padding: 6
verticalAlign: top
position: left
- component: f7-block
config:
style:
--f7-popup-tablet-height: 300px
--f7-popup-tablet-width: 326px
background-color: rgba(232,232,232)
border: 1px solid black
border-radius: 10px
height: 300px
left: 17px
margin: 0
padding: 0
position: absolute
top: 360px
width: 326px
slots:
default:
- component: f7-list
config: {}
slots:
default:
- component: oh-toggle-item
config:
color: black
item: ShellyEM_MAINS_TotalEnergy_Switch
style:
--f7-toggle-height: 20px
--f7-toggle-width: 50px
background-color: rgba(232,232,232)
font-size: 13px
title: Store current EM Mains reading
- component: oh-list-item
config:
color: black
style:
background-color: rgba(232,232,232)
font-size: 13px
title: '= "Usage last Month: " +
(items.ShellyEM_MAINS_TotalEnergy_Monthly.state)'
- component: oh-list-item
config:
color: black
style:
background-color: rgba(232,232,232)
font-size: 13px
title: '= "Last Stored: " + (items.ShellyEM_Mains_LastStored.displayState) + " -
" +
dayjs(items["ShellyEM_Mains_LastStored"].state).fromNow()'
- component: oh-list-item
config:
color: black
style:
background-color: rgba(232,232,232)
font-size: 13px
title: '= "Now: " + (items.ShellyEM_MAINS_TotalEnergy.state) + " Was - " +
(items.ShellyEM_Mains_TotalEnergy_PreviousMonth.state)'
- component: oh-list-item
config:
color: black
style:
background-color: rgba(232,232,232)
font-size: 13px
title: '= "Usage this Month: " +
(Math.round((Math.abs(Number.parseFloat(items.ShellyEM_MAINS_TotalEnergy.state))
-
(Number.parseFloat(items.ShellyEM_Mains_TotalEnergy_PreviousMonth.state)))
*1000) /1000) + " kWh"'
Any suggestions would be appreciated.
I was hoping that the Chart issue in the 2nd widget had been fixed (to do with period offset and previoulsy reported)
Any advise would be appreciated.
Mark