Dan
(Dan Demento)
1
Hi,
I try to code my first custom widget…
It is a mediaplayer widget and I want it to dynamically load items according to the selected player.
these are the props I defined
props:
parameters:
- description: Item Prefix
label: Item Prefix
name: prefix
required: true
type: TEXT
- description: Title for the Widget
label: Static Title
name: title
required: false
- context: item
description: Selection Item
label: State Item
name: selected
required: true
type: TEXT
so the item names are put together of 3 parts:
- the prefix from props.prefix (Squeeze)
- the Item state from props.selected (e.g. LivingRoom or something)
- the suffix (e.g. Cover or Artist etc.)
the prefix and suffix are nobrainers, the prefix is always “Squeeze”, the suffixes are hardcoded…
text: =items[props.prefix+... ...+"Title"].state
but how can I get the item.state (it’s a string-item which stores the selected player name)
I tried to use something like this
text: =items[props.prefix+props.selected.state+"Title"].state
text: =items[props.prefix+(props.selected).state+"Title"].state
text: =items[props.prefix+(props.selected.state)+"Title"].state
but this doesn’t work out
so maybe someone could push me in the right direction to get there…
cheers Dan
Dan
(Dan Demento)
2
Ok after playing around with the syntax I got it running
here’s the solution:
=items[props.prefix+items[props.selected].state+"Title"].state
Dan
(Dan Demento)
3
And here is what I got so far…
uid: Squeeze Control
tags:
- card
props:
parameters:
- description: Prefix for all items
label: Item prefix
name: prefix
required: true
type: TEXT
- description: Title for the widget
label: Static Title
name: title
required: false
- context: item
description: Item for selection
label: According Item
name: selected
required: true
type: TEXT
parameterGroups: []
timestamp: Jun 21, 2021, 2:47:17 AM
component: f7-card
slots:
default:
- component: f7-row
slots:
default:
- component: oh-image
config:
item: =props.prefix+items[props.selected].state+"Cover"
style:
width: 100%
height: auto
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
class:
- text-align-right
text: =items[props.prefix+items[props.selected].state+"Artist"].state
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
class:
- text-align-right
text: =items[props.prefix+items[props.selected].state+"Title"].state
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
class:
- text-align-right
text: =items[props.prefix+items[props.selected].state+"Album"].state
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
class:
- text-align-right
text: =items[props.prefix+items[props.selected].state+"Duration"].state
- component: f7-row
config:
class:
- padding-top
- padding-bottom
slots:
default:
- component: f7-col
slots:
default:
- component: oh-player-controls
config:
item: =props.prefix+items[props.selected].state+"Control"
- component: f7-row
config:
class:
- padding-top
- padding-bottom
slots:
default:
- component: f7-col
slots:
default:
- component: oh-slider
config:
item: =props.prefix+items[props.selected].state+"Volume"
min: 0
max: 100
step: 2
unit: "%"
label: true
- component: oh-button
config:
text: Stop
iconF7: stop
fill: true
color: red
action: command
actionCommand: ON
actionFeedback: Media Stopped
actionItem: =props.prefix+items[props.selected].state+"Stop"
class:
- margin-top
and it looks like this on my phone