yaya
April 2, 2024, 6:44am
1
Platform information:
Hardware: x86 vCPU / 4GB RAM / 32GB Storage
OS: debian 12.5
Java Runtime Environment: openJDK 17.0.9
openHAB version: 4.1.2
Issue of the topic: Spotify Widget
actually there are a lot of widgets for OH3 - I managed to take a note of some.
but once I am turning over to the widget, the given information is not available.Spotify_Widget_by_Andi
anyone managed to run this on OH4?
JustinG
April 2, 2024, 2:54pm
2
Your items do not all follow the naming scheme used by this widget. For example, the widget expects the Active Devices item to be the bridge name + _ActiveDevices, but your item is the bridge name + _Active_Devices.
Widgets do not really have the ability to detect items automatically. The method this widget uses of expecting all relevant item names to follow a specific pattern is the most common method in publically shared widget. So when you use a widget like this you have to have a match between your naming pattern and the widget’s pattern.
You will either need to recreate your items to have names that match the names used by the widget, or you will have to modify the widget code to use the item names you have.
yaya
April 2, 2024, 3:28pm
3
thank you @JustinG - I already had the same idea.
Let me show an example:
uid: Spotify
tags: []
props:
parameters:
- description: Spotify
label: Static Title
name: title
required: false
type: TEXT
- context: item
label: Select a 'Spotify_Player_Bridge' (Spotify_Player_Bridge)
name: prefix
required: false
type: TEXT
parameterGroups: []
timestamp: Apr 1, 2024, 8:34:54 PM
component: f7-card
config:
title: =props.title
style:
min-width: 270px
slots:
default:
- component: f7-row
config:
class: = (items[props.prefix+"_Active_Device_Name"].state !== "NULL")?"display-none":"display-flex justify-content-center"
slots:
default:
- component: Label
config:
text: This Spotify Bridge is Unavailable
- component: f7-row
config:
class: = (items[props.prefix+"_Active_Device_Name"].state === "NULL")?"display-none":"display-flex justify-content-left"
slots:
default:
- component: Label
config:
text: "KĂĽnstler:"
style:
font-size: 10px
with this config this should apply - doesn’t it?
still I got no results with this
EDIT:
rlkoshak
April 2, 2024, 3:42pm
4
This is something that is likely to trip a lot of users of older widgets. At some point (I’m not sure when) the automatic naming of Items in “add equipment to model” et. al. changed from camel case to underscores. I had to update a couple of my widgets for this too.
1 Like
yaya
April 2, 2024, 4:18pm
5
all right - for all beginners out there (like me) - this works for me, can play/pause/shuffle/next/…
Happy to share the widget:
uid: Spotify
tags: []
props:
parameters:
- description: Spotify
label: Static Title
name: title
required: false
type: TEXT
- context: item
label: Select a 'Spotify_Player_Bridge' (Spotify_Player_Bridge)
name: prefix
required: false
type: TEXT
parameterGroups: []
timestamp: Apr 2, 2024, 5:59:29 PM
component: f7-card
config:
title: =props.title
style:
min-width: 270px
slots:
default:
- component: f7-row
config:
class: = (items["Spotify_Player_Bridge_Active_Device_Name"].state !== "NULL")?"display-none":"display-flex justify-content-center"
slots:
default:
- component: Label
config:
text: This Spotify Bridge is Unavailable
- component: f7-row
config:
class: = (items["Spotify_Player_Bridge_Active_Device_Name"].state === "NULL")?"display-none":"display-flex justify-content-left"
slots:
default:
- component: Label
config:
# text: "KĂĽnstler:"
style:
font-size: 10px
- component: f7-row
config:
style:
position: relative
top: 0px
class: = (items["Spotify_Player_Bridge_Active_Device_Name"].state === "NULL")?"display-none":"display-flex justify-content-center"
slots:
default:
- component: Label
config:
text: =(items["Spotify_Player_Bridge_Kunstler"].state || "-") +" (" +(items["Spotify_Player_Bridge_Album_Name"].state || "-")+")"
style:
white-space: nowrap
overflow: hidden
font-size: 18px
font-weight: bold
font-style: normal
- component: f7-row
config:
height: 11px
class: = (items["Spotify_Player_Bridge_Active_Device_Name"].state === "NULL")?"display-none":"display-flex justify-content-left"
slots:
default:
- component: Label
config:
# text: "Titel:"
style:
font-size: 10px
- component: f7-row
config:
style:
position: relative
top: 0px
class: = (items["Spotify_Player_Bridge_Active_Device_Name"].state === "NULL")?"display-none":"display-flex justify-content-center"
slots:
default:
- component: Label
config:
text: =items["Spotify_Player_Bridge_Titel"].state || "-"
style:
white-space: nowrap
overflow: hidden
font-size: 26px
font-weight: bold
- component: f7-row
config:
class: = (items["Spotify_Player_Bridge_Active_Device_Name"].state === "NULL")?"display-none":"display-flex justify-content-left"
slots:
default:
- component: Label
config:
# text: "Album:"
style:
font-size: 10px
- component: f7-row
config:
style:
position: relative
top: -10px
class: = (items["Spotify_Player_Bridge_Active_Device_Name"].state === "NULL")?"display-none":"display-flex justify-content-center"
slots:
default:
- component: Label
config:
# text: =items["Spotify_Player_Bridge_Album_Name"].state || "-"
style:
white-space: nowrap
overflow: hidden
font-size: normal
font-style: italic
- component: f7-row
config:
class: '=(items["Spotify_Player_Bridge_AlbumImage"].state === "NULL")?"display-none" : "- margin-vertical - justify-content-center"'
slots:
default:
- component: oh-image
config:
item: ="Spotify_Player_Bridge_AlbumImage"
style:
width: 70%
- component: f7-row
config:
style:
position: relative
top: -10px
height: 20px
class:
- justify-content-center
slots:
default:
- component: f7-card
config:
noShadow: true
class: margin display-flex align-items-center
style:
fontSize: 12px
width: calc(100% - 80px)
slots:
default:
- component: Label
config:
text: = items["Spotify_Player_Bridge_Track_Progress_mss"].state
- component: f7-progressbar
config:
color: teal
style:
height: +2px
item: Spotify_Player_Bridge_Track_Progress_mss
progress: = 100 * items["Spotify_Player_Bridge_Track_Progress_mss"].state / items["Spotify_Player_Bridge_TrackDurationms"].state
- component: Label
config:
text: = items["Spotify_Player_Bridge_Track_Duration_mss"].state
- component: f7-row
config:
class:
- justify-content-space-around
- display-flex
- align-items-center
- align-content-stretch
- margin-top
style:
position: relative
top: -0px
slots:
default:
- component: f7-icon
config:
f7: '=("Spotify_Player_Bridge_Active_Device_Shuffle") ? "shuffle" : ""'
size: 20
color: '=(items["Spotify_Player_Bridge_Active_Device_Shuffle"].state === "ON") ? "green" : ""'
style:
position: relative
left: +7%
slots:
default:
- component: oh-button
config:
action: command
actionItem: = "Spotify_Player_Bridge_Active_Device_Shuffle"
actionCommand: '=(items["Spotify_Player_Bridge_Active_Device_Shuffle"].state !== "ON") ? "ON" : "OFF"'
style:
position: absolute
width: 100%
height: 100%
top: 0px
- component: oh-player-item
config:
style:
width: 150px
item: Spotify_Player_Bridge_Fernbedienung
class:
- display-flex
- margin-
- align-content-stretch
- align-items-center
- justify-content-space-around
- component: f7-icon
config:
f7: '=("Spotify_Player_Bridge_Repeat_Mode") ? (items["Spotify_Player_Bridge_Repeat_Mode"].state === "context") ? "repeat" : (items["Spotify_Player_Bridge_Repeat_Mode"].state === "track") ? "repeat_1" : "repeat" : ""'
size: 20
color: '=(items["Spotify_Player_Bridge_Repeat_Mode"].state === "context") ? "green" : (items["Spotify_Player_Bridge_Repeat_Mode"].state === "track") ? "green" : ""'
style:
position: relative
left: -8%
slots:
default:
- component: oh-button
config:
action: command
actionItem: = "Spotify_Player_Bridge_Repeat_Mode"
actionCommand: '=(items["Spotify_Player_Bridge_Repeat_Mode"].state === "context") ? "track" : (items["Spotify_Player_Bridge_Repeat_Mode"].state === "track") ? "off": "context"'
style:
position: absolute
width: 100%
height: 100%
top: 0px
- component: f7-row
config:
style:
position: relative
top: 0px
class:
- justify-content-space-around
- display-flex
- align-items-center
- align-content-stretch
- margin-top
slots:
default:
- component: f7-card
config:
noShadow: true
class: margin display-flex align-items-center
style:
height: 20px
fontSize: 20px
width: calc(100% - 80px)
slots:
default:
- component: f7-icon
config:
f7: speaker_3
class: margin-horizontal margin
size: 25
- component: oh-slider
config:
label: true
style:
width: calc(100% - 30px)
min: 0
item: ="Spotify_Player_Bridge_Lautstarke"
- component: f7-row
config:
class: -justify-content-space-around -align-items-center -align-content-stretch
style:
position: relative
top: -20px
slots:
default:
- component: f7-col
config:
noShadow: true
class: resizable
style:
fontSize: 20px
overflow: hidden
slots:
default:
- component: oh-label-card
config:
background: "#3333"
icon: f7:hifispeaker
iconSize: 25
action: options
actionItem: ="Spotify_Player_Bridge_Active_Devices"
item: ="Spotify_Player_Bridge_Active_Devices"
style:
height: 100%
top: -10px
fontSize: medium
- component: f7-col
config:
noShadow: true
class: resizable
medium: 50
style:
fontSize: 25px
overflow: hidden
slots:
default:
- component: oh-label-card
config:
background: "#3333"
icon: f7:music_note_list
iconSize: 25
action: options
actionItem: ="Spotify_Player_Bridge_Playlists"
item: ="Spotify_Player_Bridge_Playlists"
style:
height: 100%
fontSize: medium
Result:
Now trying to find a solution to select my sonos devices within the device list (they do not appear for now)
JustinG
April 2, 2024, 6:20pm
6
I suggest you take a look at this recent thread about widgets and how to use their props.
The top of the widget you are looking at (and, in deed, the top of 99.99999% of widgets) contains a list of the widget properties, or props.
uid: SMA_widget
tags: []
props:
parameters:
- context: item
label: Netzeinspeisung
name: netzeinspeisung
required: true
type: TEXT
- context: item
label: Netzbezug
name: netzbezug
required: true
type: TEXT
+ many more
These can call be configured to whatever values you like. In the widget editor …
1 Like
yaya
April 2, 2024, 7:55pm
7
thank you @JustinG - this is more clear now.
one more point I was not really able to solve:
I can not select my sonos devices from the devices:
anyone managed to solve this already?
yaya
April 16, 2024, 5:22pm
8
no idea guys?
JustinG
April 16, 2024, 7:11pm
9
I know nothing about the spotify binding. That button expects your active devices to have a set of options that list these devices. I don’t know if this list is automatically populated by the binding or if you are expected to create it yourself.
If you do not see a list of options when you click on the button then one of two things is wrong:
The button is not configured to use the correct item either due to improper configuration or some modification to the code
That item does not have the correct options list set. This is related to the binding and item configuration not the widget.
yaya
April 16, 2024, 7:16pm
10
the List is automatically generated, I did not add the soundbar.
anyone else managed to work with sonos?
brianlay
April 16, 2024, 11:12pm
11
Spotify binding has a mem leak when I tried it a while back. Took it out and haven’t tried since
