openhab-webui
openhab-webui copied to clipboard
openhab
Cell content renders in widget editor but fails in UI page
The problem
The following widget code:
uid: sandbox:nest_cssbuild
tags: []
props:
parameters:
- context: item
description: Thermostat equipment item
label: Thermostat
name: item
required: true
type: TEXT
parameterGroups: []
timestamp: Jan 9, 2022, 3:35:59 PM
component: oh-label-cell
config:
icon: ="oh:nest-" + items[props.item + "_Status"].state.toLowerCase()
item: =props.item + "_Temperature"
header: =props.item.split('_')[1]
slots:
default:
- component: f7-block
config:
style:
aspect-ratio: 1
background-image: ='conic-gradient(from 45deg, lightgray, silver, lightgray, silver, lightgray)'
border-radius: 100%
margin: 0
font-size: 100%
slots:
default:
- component: f7-block
config:
style:
aspect-ratio: 1
padding: 0px
margin: 0
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
background-image: conic-gradient(from 135deg, lightgray, silver, lightgray, silver, lightgray)
border-radius: 100%
border-style: solid
border-color: silver
border-width: 1px
width: 98%
- component: f7-block
config:
style:
aspect-ratio: 1
padding: 0px
margin: 0
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
background-color: rgb(21,21,25)
border-radius: 100%
width: 90%
- component: f7-block
config:
style:
aspect-ratio: 1
padding: 0px
margin: 0
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
background-color: rgb(21,21,25)
border-radius: 100%
width: 90%
- component: f7-block
config:
style:
aspect-ratio: 5
padding: 0px
margin: 0
position: absolute
top: 80%
left: 50%
transform: translate(-50%, -50%)
border-radius: 100%
border-bottom-style: solid
border-width: thin
border-color: rgb(80,80,80)
width: 65%
- component: oh-button
config:
fill: true
large: true
color: '=(items[props.item + "_Status"].state.toLowerCase()=="cooling") ? "blue" : ((items[props.item + "_Status"].state.toLowerCase()=="heating") ? "orange" : "black")'
action: options
actionItem: =props.item + "_CurrentMode"
style:
aspect-ratio: 1
margin: 0
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
background-color: black
border-radius: 100%
width: 65%
height: 65%
padding-top: 18%
slots:
default:
- component: Label
config:
text: "=items[props.item + '_CurrentMode'].state + ((items[props.item + '_CurrentMode'].state != 'OFF') ? ' SET TO' : '')"
style:
font-size: 1.2em
color: white
line-height: 4em
- component: Label
config:
text: =Number(items[props.item + "_Temperature_Target"].state.split(" ")[0]).toFixed(0)
style:
font-size: 7em
color: white
- component: oh-repeater
config:
for: angle
sourceType: range
rangeStart: -145
rangeStop: 145
rangeStep: 2.5
fragment: true
slots:
default:
- component: f7-block
config:
style:
position: absolute
padding: 0
margin: 0
top: 50%
left: 50%
border-Color: "=(Math.abs(((Number(items[props.item + '_Temperature'].state.split(' ')[0]) - 70) * 8) -loop.angle) <= 1.25) ? '#bbbbbb' : '#555555'"
border-left-style: solid
border-width: 2px
transform-origin: left top
transform: ='translate(' + (30 * Math.cos((90 - Number(loop.angle)) / 180 * Math.PI)) + '%, ' + (-428.6 * Math.sin((90 - Number(loop.angle)) / 180 * Math.PI)) + '%) rotate(' + loop.angle + 'deg)'
width: 100%
height: 7%
- component: f7-block
config:
visible: =items[props.item + '_CurrentMode'].state != 'OFF'
style:
position: absolute
padding: 0
margin: 0
top: 50%
left: 50%
border-Color: white
border-left-style: solid
border-width: 4px
transform-origin: left top
transform: ='translate(' + (30 * Math.cos((90 - ((Number(items[props.item + '_Temperature_Target'].state.split(' ')[0]) - 70) * 8)) / 180 * Math.PI)) + '%, ' + (-333.3 * Math.sin((90 - ((Number(items[props.item + '_Temperature_Target'].state.split(' ')[0]) - 70) * 8)) / 180 * Math.PI)) + '%) rotate(' + (Number(items[props.item + '_Temperature_Target'].state.split(' ')[0]) - 70) * 8 + 'deg)'
width: 100%
height: 9%
- component: Label
config:
text: =Number(items[props.item + "_Temperature"].state.split(" ")[0]).toFixed(0)
style:
position: absolute
padding: 0
margin: 0
top: 50%
left: 50%
color: white
transform-origin: center center
transform: ='translate(' + (28 * Math.cos((85 - ((Number(items[props.item + '_Temperature'].state.split(' ')[0]) - 70) * 8)) / 180 * Math.PI)) + '%, ' + (-400 * Math.sin((85 - ((Number(items[props.item + '_Temperature'].state.split(' ')[0]) - 70) * 8)) / 180 * Math.PI)) + '%)'
width: 100%
height: 7%
- component: f7-segmented
config:
raised: true
style:
width: 100%
margin-top: 5%
slots:
default:
- component: oh-button
config:
iconF7: minus
action: command
actionItem: =props.item + "_Temperature_Target"
actionCommand: =(Number(items[props.item + "_Temperature_Target"].state.split(" ")[0])-1).toString() + " °F"
large: true
style:
width: 30ex
- component: oh-button
config:
iconF7: plus
action: command
actionItem: =props.item + "_Temperature_Target"
actionCommand: =(Number(items[props.item + "_Temperature_Target"].state.split(" ")[0])+1).toString() + " °F"
large: true
style:
width: 30ex
renders as expected in the widget window showing the correct cell content and with the correct behavior of the large central oh-button.
However, when the widget is included on a UI page, several of the components fail to render correctly: the large oh-button, and all the labels (the segmented oh-buttons at the bottom render fine).
It appears to be a z-index issue. The "missing" elements are rendered under the third f7-block instead of on top of it. However, if I add explicit z-index styles in the widget (2 for the button, 3 for the hash lines, and 4 for the temp label on the hashes), then everything renders correctly on the UI page, but the hash lines render incorrectly (underneath the button) in the widget editor.
I don't know if it is related, but in addition to the visible rendering issue, on the UI page, the close button on the expanded cell contents no longer works. The only way to collapse down the cell is to click outside the expanded card. This is true regardless of what z-index I set for the various widget components.
Expected behavior
Widget editor and UI pages should render widgets similarly.
Steps to reproduce
- Add the widget code, and preview the widget. Click to expand
- Add the widget to UI page. Click to expand.
Your environment
runtimeInfo:
version: 3.2.0
buildString: Release Build
locale: en-US
systemInfo:
configFolder: /openhab/conf
userdataFolder: /openhab/userdata
logFolder: /openhab/userdata/logs
javaVersion: 11.0.13
javaVendor: Azul Systems, Inc.
javaVendorVersion: Zulu11.52+13-CA
osName: Linux
osVersion: 5.4.0-91-generic
osArchitecture: amd64
availableProcessors: 4
freeMemory: 173861256
totalMemory: 937426944
Additional Info
The results are the same in chrome and firefox
Just noticed you have the same issue if you split the code editor horizontally instead of vertically. Can't figure out the difference as of yet.
