I have a widget I made with some controls and functions included. 2 of the elements are two sliders. These are connected to an item which is basically only a variable and not part of any “Thing”. In General it does work. However, mainly direct after login or sometimes later as well, while the bar of the slider shows the correct value, the knob of the slider however sits at the zero position and is not movable. At some point usually the mistake is magically corrected and it works again. However, I could not identify any cause which makes it work or not. Also in the description of the “oh-slider” I could not find anything.
Does anyone know by what this behaviour of the sliders is possibly caused?
I feel it could be caused by some incorrect nesting of elements, but also here, it I could not determine what are the rules, limitations, do’s and don’ts with all these elements.
For those feeling masochistic enough to dig in the yaml, here it is:
uid: wolfgangWallboxControll
tags:
- custom
props:
parameters:
- description: Titel oben
label: Titel
name: titel
required: false
type: TEXT
- context: item
description: MasterSwitch
label: MasterSwitch
name: itemMasterSwitch
required: true
type: TEXT
- context: item
description: Car Charge Status
label: Charge Status
name: itemCarChargeStatus
required: false
type: TEXT
- description: Splash Bild falls Master = Off
label: Splash Bild
name: splashImage
required: false
type: TEXT
- context: item
description: Car Plugged Status
label: Car Plugged
name: itemCarPlugged
required: true
type: TEXT
- context: item
description: Max Session Energy to be charged
label: Max Session Energy
name: itemEnergySet
required: true
type: TEXT
- context: item
description: Actual Session Energy Value
label: Session Energy
name: itemEnergyValue
required: true
type: TEXT
- description: Energy Min Value of Bar
label: Energy Min
name: EnergyMin
required: false
type: TEXT
- description: Energy Max Value of Bar
label: Energy Max
name: EnergyMax
required: false
type: TEXT
- context: item
description: Override PV to charge via preset Power
label: Override PV
name: itemOverridePV
required: true
type: TEXT
- context: item
description: Manual Power for Override Mode
label: Manual Power
name: itemPowerSet
required: true
type: TEXT
- context: item
description: Actual Real Power deliverd
label: Actual Power
name: itemPowerValue
required: true
type: TEXT
- description: Power Min Value of Bar
label: Power Min
name: PowerMin
required: false
type: TEXT
- description: Power Max Value of Bar
label: Power Max
name: PowerMax
required: false
type: TEXT
- description: Color Text
label: Color Text
name: colortext
required: false
type: TEXT
- description: Color Background
label: Color Background
name: colorbg
required: false
type: TEXT
- description: Size (width including px or %)
label: width
name: sizew
required: false
type: TEXT
- description: Size (height including px or %)
label: height
name: sizeh
required: false
type: TEXT
parameterGroups:
- name: colors
label: Color-Settings
timestamp: Mar 15, 2023, 8:38:12 PM
component: f7-block
config: {}
slots:
default:
- component: f7-card-content
config:
style:
margin: 0px
padding: 0px
slots:
default:
- component: f7-row
config:
class:
- justify-content-center
resizable-absolute: true
resizableFixed: true
slots:
default:
- component: f7-block
config:
class: AutoContainer
style:
--f7-block-margin-horizontal: 0px
--f7-block-margin-vertical: 0px
--f7-block-padding-horizontal: 0px
--f7-block-padding-vertical: 0px
background: "=props.colorbg ? props.colorbg : 'var(--f7-toggle-inactive-color)'"
border-radius: 5px
flex-shrink: 0
height: "=props.sizeh ? (props.sizeh) : '500px'"
margin: 0px
overflow: hidden
padding: 20px
width: "=props.sizew ? (props.sizew) : '350px'"
slots:
default:
- component: f7-block
config:
class: SplashImage
style:
display: block
slots:
default:
- component: Label
config:
class: ""
style:
font-weight: bold
left: 0px
position: absolute
text-align: center
top: -16px
width: 100%
text: =@props.itemCarChargeStatus
- component: f7-block
config:
class: car_plugged_yes
style:
background-image: url(https://tristel.org/images/microlino_aktiv.png)
background-position: center middle
background-size: cover
display: "=items[props.itemCarPlugged].state == 'ON' ? 'block' : 'none'"
height: 80px
position: absolute
right: 0px
top: -30px
width: 100px
- component: f7-block
config:
class: car_plugged_no
style:
background-image: url(https://tristel.org/images/microlino_passiv.png)
background-position: center middle
background-size: cover
display: "=items[props.itemCarPlugged].state == 'ON' ? 'none' : 'block'"
height: 80px
position: absolute
right: 0px
top: -30px
width: 100px
- component: f7-block
config:
class: SplashImage
style:
background-image: ='url('+props.splashImage+')'
background-position: center middle
background-size: cover
bottom: 0px
display: "=items[props.itemMasterSwitch].state == 'ON' ? 'none' : 'block'"
left: 0
position: absolute
right: 0px
top: 0px
width: 100%
- component: f7-block
config:
class: AutoSwitchableContainer
style:
background: transparent
display: "=items[props.itemMasterSwitch].state == 'ON' ? 'block' : 'none'"
height: 100%
margin-top: 100px
visible: true
width: 100%
slots:
default:
- component: f7-row
config: {}
slots:
default:
- component: f7-col
config:
class: Energiezeile
style: {}
slots:
default:
- component: Label
config:
class: ""
style:
align-self: flex-end
font-weight: bold
text: kWh
- component: f7-block
config:
class: Energy-Slider-Container
style:
height: 60px
position: relative
slots:
default:
- component: f7-block
config:
class: kWh-Ist
style:
background: "#ddd"
border-color-top: "#ff0000"
display: block
height: 24px
position: absolute
top: 0px
width: 100%
slots:
default:
- component: f7-block
config:
class: kWh-Ist-Balken
style:
background: "#f00"
height: 22px
left: 0px
position: absolute
top: -15px
width: "=Math.fround((Number(items[props.itemEnergyValue].state)/1000 - (!props.EnergyMin ? 100 : Number(props.EnergyMin))) * (100 / (!props.EnergyMax ? 100 : Number(props.EnergyMax) - (!props.EnergyMin ? 0 : Number(props.EnergyMin))))) + '%'"
- component: oh-slider
config:
class: EnergySelect
item: =props.itemEnergySet
max: =props.EnergyMax
min: =props.EnergyMin
scale: true
step: "1"
style:
align-self: flex-end
color: "#ff0"
font-color: yellow
position: absolute
top: 14px
z-index: 100000
- component: Label
config:
class: EnergyValue
color: yellow
style:
align-self: flex-end
margin-right: 5px
position: absolute
right: 0px
top: 2px
text: =Math.round(@props.itemEnergyValue/10)/100 + ' kWh'
- component: f7-row
config:
style: margin-top:20px
slots:
default:
- component: f7-col
config:
class: Leistungszeile
slots:
default:
- component: Label
config:
class: ""
style:
align-self: flex-end
font-weight: bold
text: Override PV Charge
- component: oh-toggle
config:
class: ""
color: yellow
item: =props.itemOverridePV
style:
align-self: flex-end
width: 70px
- component: f7-block
config:
class: Energy-Slider-Container
style:
height: 60px
position: relative
slots:
default:
- component: f7-block
config:
class: kWh-Ist
style:
background: "#ddd"
border-color-top: "#ff0000"
display: block
height: 24px
position: absolute
top: 0px
width: 100%
slots:
default:
- component: f7-block
config:
class: kWh-Ist-Balken
style:
background: "#f00"
height: 22px
left: 0px
position: absolute
top: -15px
width: "=Math.fround((Number(items[props.itemPowerValue].state)/1000 - (!props.PowerMin ? 100 : Number(props.PowerMin))) * (100 / (!props.PowerMax ? 100 : Number(props.PowerMax) - (!props.PowerMin ? 0 : Number(props.PowerMin))))) + '%'"
- component: oh-slider
config:
class: ""
item: =props.itemPowerSet
max: =props.PowerMax
min: =props.PowerMin
scale: true
scaleSteps: 6
scaleSubSteps: 2
step: 0.5
style:
align-self: flex-end
display: "=items[props.itemOverridePV].state == 'ON' ? 'block' : 'none'"
font-color: yellow
position: absolute
top: 14px
z-index: 100000
- component: Label
config:
class: ""
color: yellow
style:
align-self: flex-end
margin-right: 5px
position: absolute
right: 0px
top: 2px
text: =Math.round(Number(items[props.itemPowerValue].state)/100)/10 + ' kW'
- component: oh-toggle
config:
color: yellow
item: =props.itemMasterSwitch
style:
left: 20px
position: absolute
top: 20px
z-index: 1