dastrix80
September 29, 2021, 5:40am
3
Certainly, sorry!
uid: Dimmer
tags: []
props:
parameters:
- context: item
description: An item to control
label: Island
required: false
type: TEXT
timestamp: Sep 29, 2021, 2:45:41 PM
component: f7-card
config:
noShadow: false
class:
- padding
style:
box-shadow: 0px 0px 0px hsl(0,0%,90%)
border-radius: 12px
height: 5em
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: '=(props.dimmeritem) ? props.dimmeritem : " Set Dimmer"'
style:
color: var(--card-text-color)
font-size: 15px
line-height: 30px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
position: absolute
top: 0.5em
- component: oh-toggle
config:
style:
position: absolute
top: 1.2em
left: calc(100% - 60px)
color: green
item: =props.dimmeritem
- component: f7-row
slots:
default:
- component: f7-col
slots:
default:
- component: f7-icon
config:
style:
font-size: 12px
line-height: 15px
color: grey
position: absolute
top: 3em
left: 1.2em
f7: rays
- component: f7-col
slots:
default:
- component: Label
config:
text: =items[props.dimmeritem].displayState || items[props.dimmeritem].state
style:
position: absolute
top: 3em
left: 3em
color: grey
font-size: 12px
line-height: 15px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
- component: oh-slider
config:
item: =props.dimmeritem
max: 100
Padding: 500px
label: false
color: green
scale: false
noShadow: true
outline: false
min: 0
unit: "%"
style:
width: calc(100% - 2em)
position: absolute
top: 4.5em
left: 1em
hmerk
September 29, 2021, 7:26am
4
Shouldn’t this be
text: '=(props.dimmeritem) ? items[props.dimmeritem].label : " Set Dimmer"'
Mark_VG
September 29, 2021, 9:53am
5
Hi
Looks like your props does not contain a name:
props:
parameters:
- context: item
description: An item to control
label: Island
required: false
type: TEXT
timestamp: Sep 29, 2021, 2:45:41 PM
So props.dimmeritem is not defined?
Should be:
props:
parameters:
- context: item
description: An item to control
label: Island
name: dimmeritem
required: false
type: TEXT
timestamp: Sep 29, 2021, 2:45:41 PM
hmerk
September 29, 2021, 10:52am
6
No, it then should show the alternative text.
dastrix80:
props.dimmeritem
Will only return the configuration parameter for the widget, whereas
will return the given label for that item.
dastrix80
September 29, 2021, 10:57am
7
The entire name has disappeared now
Mark_VG
September 29, 2021, 11:03am
8
Yes, it does that on mine - however the toggle will also have no item defined as the props section does not have a props.dimmeritem configured.
hmerk
September 29, 2021, 11:08am
9
Ups, sorry, I was wrong about the label, see here :
You can’t get the label in the traditional way it’s defined. But I think you can set a label by setting the “State representation” metadata on the Item. Then you can use =items[props.propItem].displayState. Note, if you don’t have the metadata defined that will generate an error. So it might be good to use a ternary operation to check if that is defined and if not fall back to just show state.
hmerk
September 29, 2021, 2:46pm
11
and here is a workaround :
uid: Dimmer
tags: []
props:
parameters:
- context: item
description: An item to control
label: Dimmer Item
name: dimmeritem
required: true
type: TEXT
timestamp: Sep 29, 2021, 4:44:28 PM
component: f7-card
config:
noShadow: false
class:
- padding
style:
box-shadow: 0px 0px 0px hsl(0,0%,90%)
border-radius: 12px
height: 5em
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
slots:
default:
- component: oh-repeater
config:
for: dimmeritem
sourceType: itemsWithTags
itemTags: Light
filter: loop.dimmeritem.name.includes(props.dimmeritem)
slots:
default:
- component: Label
config:
text: =loop.dimmeritem.label
style:
color: var(--card-text-color)
font-size: 15px
line-height: 30px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
position: absolute
top: 0.5em
2 Likes
dastrix80
September 29, 2021, 8:40pm
12
hmerk:
uid: Dimmer
tags: []
props:
parameters:
- context: item
description: An item to control
label: Dimmer Item
name: dimmeritem
required: true
type: TEXT
timestamp: Sep 29, 2021, 4:44:28 PM
component: f7-card
config:
noShadow: false
class:
- padding
style:
box-shadow: 0px 0px 0px hsl(0,0%,90%)
border-radius: 12px
height: 5em
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
slots:
default:
- component: oh-repeater
config:
for: dimmeritem
sourceType: itemsWithTags
itemTags: Light
filter: loop.dimmeritem.name.includes(props.dimmeritem)
slots:
default:
- component: Label
config:
text: =loop.dimmeritem.label
style:
color: var(--card-text-color)
font-size: 15px
line-height: 30px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
position: absolute
top: 0.5em
Beautiful. It works
splatch
October 20, 2021, 9:08pm
14
Looking at the workaround (as I was caught by same issue) I have serious concerns. I believe it will work cause repeater is only one place in current UI which work with actual item instance and not its state.
Going to test my deployments now.
hmerk
October 21, 2021, 3:48am
15
No, please note that in my example the dimmerItem is defined in props and repeater is just using that item ( for: dimmerItem).
narf27
November 11, 2021, 2:48pm
16
coming from here and after having some trouble with loading times with oh-repeater / sourceType: tags i’d like to add that this solution may not be ideal if you have a lot of items.
hmerk
November 11, 2021, 4:21pm
17
No, it should only check the item defined in props for tags.
narf27
November 12, 2021, 9:06am
18
Hi!
uid: widget_list_f7_repeaterTagFilter
props:
parameters:
- description: The title for the widget
label: Title
name: title
required: false
type: TEXT
- description: prefix for items
label: Tag
name: tag
required: true
type: TEXT
- context: item
description: Item Filter
label: Item
name: item
required: true
type: TEXT
parameterGroups: []
timestamp: Nov 12, 2021, 8:47:30 AM
component: f7-card
config:
style:
noShadow: false
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
margin: 1px
title: "=props.title ? props.title : 'set props!'"
slots:
default:
- component: oh-list
config: {}
slots:
default:
- component: oh-repeater
config:
fragment: true
for: listItem
sourceType: itemsWithTags
itemTags: tRS_EG
filter: loop.listItem.name.includes(props.item)
slots:
default:
- component: f7-row
config:
color: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
class:
- display-flex
style:
align-items: center
padding: 2px 15px
slots:
default:
- component: f7-col
config:
style:
flex: 4
text-align: left
margin-top: 0px
slots:
default:
- component: Label
config:
text: =loop.listItem.label
style:
padding-top: 5px
- component: f7-col
config:
style:
flex: 1
slots:
default:
- component: oh-toggle
config:
item: =loop.listItem.name + '_auto'
color: lightblue
style:
padding-top: 2px
- component: f7-col
config:
style:
flex: 2
text-align: center
slots:
default:
- component: oh-link
config:
action: popup
popupOpen: ='.' + loop.listItem.name + 'popUpRS'
style:
margin-top: 10px
slots:
default:
- component: f7-popup
config:
class: =loop.listItem.name + 'popUpRS'
swipeToClose: true
style:
--f7-popup-tablet-width: 60%
--f7-popup-tablet-height: 129px
slots:
default:
- component: widget:Popup_Rollershutter
config:
item: =loop.listItem.name + '_lm'
title: =loop.listItem.label
popupClass: ='.' + loop.listItem.name + 'popUpRS'
- component: oh-icon
config:
icon: "=(items[loop.listItem.name + '_lm'].state > 89) ? 'blades_80_' + themeOptions.dark : (items[loop.listItem.name + '_lm'].state > 79) ? 'blades_80_' + themeOptions.dark : (items[loop.listItem.name + '_lm'].state > 69) ? 'blades_70_' + themeOptions.dark : (items[loop.listItem.name + '_lm'].state > 59) ? 'blades_60_' + themeOptions.dark : (items[loop.listItem.name + '_lm'].state > 49) ? 'blades_50_' + themeOptions.dark : (items[loop.listItem.name + '_lm'].state > 39) ? 'blades_40_' + themeOptions.dark : (items[loop.listItem.name + '_lm'].state > 29) ? 'blades_30_' + themeOptions.dark : (items[loop.listItem.name + '_lm'].state > 19) ? 'blades_20_' + themeOptions.dark : (items[loop.listItem.name + '_lm'].state > 9) ? 'blades_10_' : 'blades_00_' + themeOptions.dark "
style:
width: 20px
align-items: center
- component: f7-col
config:
style:
flex: 1
slots:
default:
- component: oh-button
config:
iconF7: arrowtriangle_up
iconSize: 20
action: command
actionItem: =loop.listItem.name
actionCommand: UP
- component: f7-col
config:
style:
flex: 1
slots:
default:
- component: oh-button
config:
iconF7: stop
iconSize: 20
action: command
actionItem: =loop.listItem.name
actionCommand: STOP
- component: f7-col
config:
style:
flex: 1
slots:
default:
- component: oh-button
config:
iconF7: arrowtriangle_down
iconSize: 20
action: command
actionItem: =loop.listItem.name
actionCommand: DOWN
and here you can see the loading behaviour of a page with this widget (tab RS_TagFilter) and the loading behaviour of a page with the same widget but with sourceType: array where i manually have to configure every single item and label (tab RS_Arr):
i have also made the test with your code (adjusted only the Tag) and also here the loading es noticable:
hmerk
November 12, 2021, 9:41am
19
Ok, I can see your misunderstanding.
Only this item is used in my repeater example:
So in fact, the repeater will only check this one item for the tags.
narf27
November 12, 2021, 10:25am
20
in my first example i use “item” instead on “dimmeritem” and it’s used in oh-repeater:
filter: loop.listItem.name.includes(props.item)
and in the second example i used exactly your code, adapted the “tag” and set one of my dimmer lights as prop.
hmerk
November 12, 2021, 10:30am
21
You see the difference ?
narf27
November 12, 2021, 11:04am
22
i really don’t understand why they must be the same and it doesn’t really change anything:
uid: widget_list_f7_repeaterTagFilter
props:
parameters:
- description: The title for the widget
label: Title
name: title
required: false
type: TEXT
- description: prefix for items
label: Tag
name: tag
required: true
type: TEXT
- context: item
description: Item Filter
label: Item
name: dimmeritem
required: true
type: TEXT
parameterGroups: []
timestamp: Nov 12, 2021, 11:55:26 AM
component: f7-card
config:
style:
noShadow: false
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
margin: 1px
title: "=props.title ? props.title : 'set props!'"
slots:
default:
- component: oh-list
config: {}
slots:
default:
- component: oh-repeater
config:
fragment: true
for: dimmeritem
sourceType: itemsWithTags
itemTags: tRS_EG
filter: loop.dimmeritem.name.includes(props.dimmeritem)
slots:
default:
- component: f7-row
config:
color: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
class:
- display-flex
style:
align-items: center
padding: 2px 15px
slots:
default:
- component: f7-col
config:
style:
flex: 4
text-align: left
margin-top: 0px
slots:
default:
- component: Label
config:
text: =loop.dimmeritem.label
style:
padding-top: 5px
- component: f7-col
config:
style:
flex: 1
slots:
default:
- component: oh-toggle
config:
item: =loop.dimmeritem.name + '_auto'
color: lightblue
style:
padding-top: 2px
- component: f7-col
config:
style:
flex: 2
text-align: center
slots:
default:
- component: oh-link
config:
action: popup
popupOpen: ='.' + loop.dimmeritem.name + 'popUpRS'
style:
margin-top: 10px
slots:
default:
- component: f7-popup
config:
class: =loop.dimmeritem.name + 'popUpRS'
swipeToClose: true
style:
--f7-popup-tablet-width: 60%
--f7-popup-tablet-height: 129px
slots:
default:
- component: widget:Popup_Rollershutter
config:
item: =loop.dimmeritem.name + '_lm'
title: =loop.dimmeritem.label
popupClass: ='.' + loop.dimmeritem.name + 'popUpRS'
- component: oh-icon
config:
icon: "=(items[loop.dimmeritem.name + '_lm'].state > 89) ? 'blades_80_' + themeOptions.dark : (items[loop.dimmeritem.name + '_lm'].state > 79) ? 'blades_80_' + themeOptions.dark : (items[loop.dimmeritem.name + '_lm'].state > 69) ? 'blades_70_' + themeOptions.dark : (items[loop.dimmeritem.name + '_lm'].state > 59) ? 'blades_60_' + themeOptions.dark : (items[loop.dimmeritem.name + '_lm'].state > 49) ? 'blades_50_' + themeOptions.dark : (items[loop.dimmeritem.name + '_lm'].state > 39) ? 'blades_40_' + themeOptions.dark : (items[loop.dimmeritem.name + '_lm'].state > 29) ? 'blades_30_' + themeOptions.dark : (items[loop.dimmeritem.name + '_lm'].state > 19) ? 'blades_20_' + themeOptions.dark : (items[loop.dimmeritem.name + '_lm'].state > 9) ? 'blades_10_' : 'blades_00_' + themeOptions.dark "
style:
width: 20px
align-items: center
- component: f7-col
config:
style:
flex: 1
slots:
default:
- component: oh-button
config:
iconF7: arrowtriangle_up
iconSize: 20
action: command
actionItem: =loop.dimmeritem.name
actionCommand: UP
- component: f7-col
config:
style:
flex: 1
slots:
default:
- component: oh-button
config:
iconF7: stop
iconSize: 20
action: command
actionItem: =loop.dimmeritem.name
actionCommand: STOP
- component: f7-col
config:
style:
flex: 1
slots:
default:
- component: oh-button
config:
iconF7: arrowtriangle_down
iconSize: 20
action: command
actionItem: =loop.dimmeritem.name
actionCommand: DOWN
loading behaviour / speed is unchanged.
dastrix80
November 29, 2021, 10:25pm
23
Further to this, is there a way to override the name by placing it into the actual page item, rather than into the Widget configuration?
Ie label might be Island Light, but I’d rather just Island because its smaller and formats better on Phones.
despite my items having labels
Thank you Hans!
