Hi there,
I am experimenting with some own Widgets I try to add to the location tab.
This works actually great. But I have one issue.
In the “Editor” is set Everything up and the Preview looks fine. like here:
(The way I do it is by Selecting an Item / Equipment → Add Metadata → Listwidget.)
Now the Problem
If I go to location somehow the “actual temperature” (on the left, between the Title “Thermostat” and the state of the Valve “Open”) is missing.
- Is it covered by the label?
- am I missing something?
- is it my widget?
here is the code for the widget:
uid: widget_Thermostat
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- description: in rgba() or HEX or empty
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
label: Current Temperature
name: temp_item
required: false
type: TEXT
- context: item
label: Set Temperature
name: set_temp_item
required: false
type: TEXT
- context: item
label: Current Humidity
name: humidity_item
required: false
type: TEXT
- context: item
description: on/off item
label: Heating control item
name: heating_item
required: false
type: TEXT
parameterGroups: []
timestamp: Mar 10, 2024, 3:49:46 PM
component: f7-card
config:
expandable: false
noShadow: true
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 100px
margin-left: 0 px
margin-right: px
max-width: 100%px
min-width: 170px
noShadow: false
padding: 0px
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 0px
position: absolute
top: -10px
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 18
visible: "=props.icon ? true : false"
- component: Label
config:
style:
font-size: 14px
font-weight: 500
left: 30px
position: absolute
top: 2px
text: "=props.title ? props.title : ''"
- component: f7-block
config:
style:
bottom: -20px
flex-direction: row
left: 16px
position: absolute
slots:
default:
- component: Label
config:
style:
font-size: 22px
font-weight: 400
margin-left: 0px
margin-top: 0px
text: "=items[props.temp_item].displayState ? items[props.temp_item].displayState : items[props.temp_item].state"
- component: f7-block
config:
style:
bottom: -70px
display: flex
flex-direction: row
left: 0px
position: relative
width: "=props.set_temp_item ? 'calc(100% - 48px)' : '100%' "
slots:
default:
- component: f7-icon
config:
f7: drop
size: 18
visible: "=props.humidity_item ? true : false"
- component: Label
config:
style:
font-size: 12px
margin-left: 5px
margin-top: 0px
text: =items[props.humidity_item].displayState
visible: "=props.humidity_item ? true : false"
- component: f7-icon
config:
f7: gauge
size: 18
visible: "=props.heating_item ? true : false"
- component: Label
config:
style:
font-size: 12px
margin-left: 5px
margin-top: 0px
text: =items[props.heating_item].state
visible: "=props.heating_item ? true : false"
- component: oh-button
config:
action: command
actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
actionItem: =props.set_temp_item
iconColor: red
iconF7: chevron_up
iconSize: 35
style:
background: transparent
height: 35px
position: absolute
right: 7px
top: 5px
z-index: 999
visible: "=props.set_temp_item ? true : false"
- component: oh-button
config:
action: command
actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) - 0.5
actionItem: =props.set_temp_item
iconColor: red
iconF7: chevron_down
iconSize: 35
style:
background: transparent
height: 35px
position: absolute
right: 7px
top: 64px
z-index: 999
visible: "=props.set_temp_item ? true : false"
- component: Label
config:
style:
font-size: 17px
font-weight: bold
position: absolute
right: 8px
top: 40px
z-index: 999
text: "=items[props.set_temp_item].displayState ? items[props.set_temp_item].displayState : items[props.set_temp_item].state"
visible: "=props.set_temp_item ? true : false"
- component: f7-block
config:
style:
height: 100px
left: 15px
position: absolute
top: 15px
width: "=props.set_temp_item ? 'calc(100% - 48px)' : '100%' "
slots:
default:
- component: oh-trend
config:
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(30%)
height: 100%
left: 0px
position: absolute
top: 0px
width: 100%
z-index: 1
trendGradient:
- "#f1c232"
- "#beca5c"
- "#beca5c"
- "#45818e"
trendItem: =props.temp_item
trendSampling: 2
- component: oh-link
config:
action: analyzer
actionAnalyzerChartType: day
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =[props.temp_item, props.set_temp_item]
style:
height: 120px
left: 0px
position: absolute
top: 0px
width: 100%
Any Hints are appreciated
borderbridge