I have created a widget which will allow me to adjust my “profiles”. In the widget-development environment, everything works properly, and if I set the props, the widget behaves exactly as it should:
Here is the code that makes it work:
uid: profile_looper
tags:
- list
props:
parameters:
- description: Title on top
label: Title
name: title
required: false
type: TEXT
- context: item
description: Profile
label: profile core item
name: profilecore
required: true
type: TEXT
filterCriteria:
- value: Group
name: type
parameterGroups: []
timestamp: Jul 31, 2022, 3:38:00 PM
component: f7-card
config:
style:
--f7-range-bar-active-bg-color: "#090909"
--f7-range-bar-bg-color: "#111111"
--f7-range-bar-border-radius: 1em
--f7-range-bar-size: 0.6em
height: 400px
position: relative
title: Profile Adjustment Widget
slots:
default:
- component: f7-block
slots:
default:
- component: f7-row
slots:
default:
- component: Label
config:
style:
font-size: 18pt
padding: 10px
text: =items[props.profilecore + "_Name"].state
- component: oh-button
config:
action: popup
actionModal: widget:profile_looper_popup
actionModalConfig:
profile: =props.profilecore
title: =props.title
color: white
iconF7: gear_alt_fill
large: true
- component: f7-block
config:
style:
display: flex
flex-direction: row
height: 100%
left: 30px
position: aboslute
top: 20px
width: 95%
slots:
default:
- component: oh-repeater
config:
filter: loop.item.type == "Number"
for: item
fragment: true
groupItem: =props.profilecore + '_val'
sourceType: itemsInGroup
slots:
default:
- component: f7-col
config:
style:
height: 200px
width: 100%
slots:
default:
- component: f7-row
config:
visible: "=(items[props.profilecore + '_Type'].state == 'Percentage') ? true : false"
slots:
default:
- component: oh-slider
config:
item: =loop.item.name
label: true
max: 100
min: 0
scale: "=(loop.item.label == '00') ? true : false"
scaleSteps: 4
step: 1
style:
--f7-range-bar-active-bg-color: "=(dayjs().format('HH') == loop.item.label) ? '#FFAF80' : '' "
--f7-range-knob-color: "=(dayjs().format('HH') == loop.item.label) ? '#FF6700' : '' "
title: =loop.item.label
vertical: 1
- component: f7-row
config:
visible: "=(items[props.profilecore + '_Type'].state == 'Temperature') ? true : false"
slots:
default:
- component: oh-slider
config:
item: =loop.item.name
label: true
max: 25
min: 5
releaseOnly: true
scale: "=(loop.item.label == '00') ? true : false"
scaleSteps: 5
step: 0.5
style:
--f7-range-bar-active-bg-color: "=(dayjs().format('HH') == loop.item.label) ? '#FFAF80' : '' "
--f7-range-knob-color: "=(dayjs().format('HH') == loop.item.label) ? '#FF6700' : '' "
title: =loop.item.label
vertical: 1
- component: f7-row
config:
visible: "=(items[props.profilecore + '_Type'].state == 'Boolean') ? true : false"
slots:
default:
- component: oh-slider
config:
item: =loop.item.name
label: true
max: 1
min: 0
scale: "=(loop.item.label == '00') ? true : false"
scaleSteps: 1
step: 1
style:
--f7-range-bar-active-bg-color: "=(dayjs().format('HH') == loop.item.label) ? '#FFAF80' : '' "
--f7-range-knob-color: "=(dayjs().format('HH') == loop.item.label) ? '#FF6700' : '' "
title: =loop.item.label
vertical: 1
- component: f7-row
slots:
default:
- component: Label
config:
style:
position: relative
top: 30px
transform: rotate(-70deg)
width: 1px
text: =loop.item.label + ":00"
visible: true
- component: Label
config:
style:
height: 1px
left: 5px
position: absolute
top: 210px
transform: rotate(-90deg)
width: 1px
text: =items[props.profilecore + "_Type"].state
Unfortunately, when I try to put this widget into a page, it does not work properly; the name shows up and the popup-menu works (and even lets me adjust settings that belong to the specific profile) but all the sliders are broken and just show NaN values for some reason despite identical config:
What’s going wrong here? Is there some limitation that prevents oh-repeater from being used in a Pages-environment?
