Openhab 3 - Layout - how to add a „squeezebox favorite selection"

rayb · July 18, 2021, 1:10pm

Platform information:
- Hardware: PI 4, 4GB Ram
- OS: debian / buster
- Java Runtime Environment: openjdk version “11.0.11” 2021-04-20
  version_
- openHAB version: 3.1.0

Hello,

I am working on the migration of my OH2 installation to OH3. I have some Squeezebox player running and integrated in openhab. 1:1 migration is finished. With the old style sitemap I can access the player.

With OH3 I will use a layout page for some player. But i have no idea, how to integrate the „playFavorite“ element in the page.

Can someone give me an example how to integrate a squeezebox „playFavorite“ element?

Best regards

Ralf

squeezebox.sitemap

sitemap squeezebox label="Squeeze"
{
                Frame label="Boom" {
                    Default item=SPBoomControl
                    Slider item=SPBoomVolumen
                    Selection item=SPBoomPlayFavorite
                }
}

squeezebox.items

Group gSQBox                "SQ Music Server"   <player>                ["Equipment"]
Group   gSQPlayerBoom       "SQ Player Boom"            <player>    (gSQBox)    ["Equipment"]
Switch  SPBoomPlay          "Boom Pause/Play"           <player>    (gSQPlayerBoom,gSqueezebox) ["Point"] {channel="squeezebox:squeezeboxplayer:badsrv:boom:playPause"}
Switch  SPBoomStop          "Boom Stop"                 <player>    (gSQPlayerBoom,gSqueezebox) ["Point"] {channel="squeezebox:squeezeboxplayer:badsrv:boom:stop"}
Player  SPBoomControl       "Boom Control"              <player>    (gSQPlayerBoom,gSqueezebox) ["Point"] {channel="squeezebox:squeezeboxplayer:badsrv:boom:control"}
Dimmer  SPBoomVolumen       "Boom Volumen [%d %%]"      <player>    (gSQPlayerBoom,gSqueezebox) ["Point"] {channel="squeezebox:squeezeboxplayer:badsrv:boom:volume"}
String  SPBoomSource        "Boom Source [%s]"          <player>    (gSQPlayerBoom,gSqueezebox) ["Point"] {channel="squeezebox:squeezeboxplayer:badsrv:boom:source"}
String  SPBoomTitle         "Boom Title [%s]"           <player>    (gSQPlayerBoom,gSqueezebox) ["Point"] {channel="squeezebox:squeezeboxplayer:badsrv:boom:title"}
String  SPBoomAlbum         "Boom Album [%s]"           <player>    (gSQPlayerBoom,gSqueezebox) ["Point"] {channel="squeezebox:squeezeboxplayer:badsrv:boom:album"}
String  SPBoomCoverArt      "Boom CoverArt [%s]"        <player>    (gSQPlayerBoom,gSqueezebox) ["Point"] {channel="squeezebox:squeezeboxplayer:badsrv:boom:coverart"}
String  SPBoomPlayFavorite  "Boom Play Favorite [%s]"   <player>    (gSQPlayerBoom,gSqueezebox) ["Point"] {channel="squeezebox:squeezeboxplayer:badsrv:boom:playFavorite"}
Image   SPBoomCoverArtData  "Boom CoverArt"             <player>    (gSQPlayerBoom,gSqueezebox) ["Point"] {channel="squeezebox:squeezeboxplayer:badsrv:boom:coverartdata"}
String  SPBoomFavoritesList "Boom Favorites list"       <player>    (gSQPlayerBoom,gSqueezebox) ["Point"] {channel="squeezebox:squeezeboxplayer:badsrv:boom:favoritesList"}

squeezebox.things

Bridge squeezebox:squeezeboxserver:badsrv   "SB Server" @ "Bad"             [ ipAddress="192.168.1.30", webport=9000, cliport=9090 ]
{
    Thing squeezeboxplayer wohnzimmer    "SB Wohnzimmer " @ "Wohnzimmer"    [ mac="74:da:38:58:30:32" , notificationTimeout=30, notificationVolume=50 ] // Wohnzimmer
    Thing squeezeboxplayer mobile        "SB Mobile" @ "Mobile"             [ mac="00:00:00:00:00:00" , notificationTimeout=30, notificationVolume=50 ] // Mobile - WLAN dongle
    Thing squeezeboxplayer bad           "SB Bad" @ "Bad"                   [ mac="b8:27:eb:73:c0:bf" , notificationTimeout=30, notificationVolume=50 ] // Bad 
    Thing squeezeboxplayer display       "SB Display" @ "Kueche"            [ mac="b8:27:eb:95:28:71" , notificationTimeout=30, notificationVolume=50 ] // Display
    Thing squeezeboxplayer schlafzimmer  "SB Boxen" @ "Schlafz"             [ mac="ac:ab:13:64:58:57" , notificationTimeout=30, notificationVolume=50 ] // WHITE
    Thing squeezeboxplayer boom          "SB Boom" @ "Boom"                 [ mac="c0:28:8d:f0:f9:87" , notificationTimeout=30, notificationVolume=50 ] // BOOM
    Thing squeezeboxplayer jbl           "SB JBL" @ "JBL"                   [ mac="04:fe:a1:01:1c:df" , notificationTimeout=30, notificationVolume=50 ] // JBL 
    Thing squeezeboxplayer kueche        "SB Technisat" @ "Kueche"          [ mac="40:ef:4c:17:dc:dd" , notificationTimeout=30, notificationVolume=50 ] // Kueche
}

The squeeze Sitemap is working

A selection in the sitemap is fine

The layout:

JustinG · July 18, 2021, 5:04pm

I believe with the squeezebox channels the favorites are predefined. So this means that you can choose whichever widget you prefer that has the set of actions options. Set the action property to options and the actionItem to your favorites item (e.g., SPBoomPlayFavorite) and when you click on the widget you will be presented with a popup that lists all the available options for that item.

From your layout it seems that you might just want to use a label card (see the action options for a label card here) but you could just use a button or icon or any number of other choices. Many of the default widgets, cards , and cells have this functionality available.

One note if you use one of the predefined cell widgets: When you select the action option, a 3-dot context button will appear in the upper-right corner of the card (pressing this gives you access to the expanded card).

If you do not want this you must edit the cell’s YAML and add expandable: false to the config.

rayb · July 18, 2021, 8:46pm

Hi Justin,
it look like, i am on track

That’s the current code:

component: oh-label-card
config:
  title: Favorite
  label: Select
  expandable: false
  action: options
  actionItem: SPMobilePlayFavorite
slots: null

But a nice improvement would be, to have a abbreviation or the first 10 character of the current selected favorite displayed in the middle of the box.

Any idea about it?

JustinG · July 19, 2021, 2:41am

You can use javascript string methods on any strings in the expressions of the widget properties. So in this case if instead of Favorite in the title of the card you could use the state of the favorite item items.SPMobilePlayFavorite.state and add the slice method to that from first character index (0) to the tenth character index (9):

title: =items.SPMobilePlayFavorite.state.slice(0,9)

rayb · July 19, 2021, 11:20am

Java script here is a big tool. With the code you post, I can only display a number. The number is the position of favorite list. If I switch to another favorite, the number change

Because I am not a java script expert and without knowledge about “item” tables, I would like to know to access the field which contain the “name” of the favorite.

JustinG · July 19, 2021, 7:31pm

Ah, sorry I don’t use squeezebox so I asssumed that as the favorite channel as a string format it actually held the name of the favorite. If you navigate to the item page for this item, do you see the number or the Name at the top of the item page?

rayb · July 19, 2021, 7:45pm

In the overview, I can see a number. If I klick into the item details, I can see the let say “display name”. Number 2 is “WDR 2 Ostwestfalen-Lippe”. Or Number 4 is “WDR 4” and so on…
Another option is an alternativ text. Can I define a alternative text via Javascript to display ?

JustinG · July 19, 2021, 7:47pm

In that case try displayState instead of state in the expression:

title: =items.SPMobilePlayFavorite.displayState.slice(0,9)

rayb · July 19, 2021, 8:33pm

Cool - thank you very much

that’s the code:

              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-label-card
                      config:
                        title: Favorite
                        label: =items.SPMobilePlayFavorite.displayState.slice(0,9)
                        expandable: false
                        action: options
                        actionItem: SPMobilePlayFavorite