Custom Lovelace UI

[rxritalin]

20240709105204.mp4

A custom Lovelace UI I built using the picture-elements card as the base, with a bunch of different cards both built-in and from HACS. This was made for a 13" 1920x720 touch screen I have setup on my main stereo. The UI is obviously based around Volumio's new UI with a few changes to make it more touch friendly on my display and easier to see from a distance.

If there is interest I will share the yaml for it, though there is quite a bit you would need to setup and change in your home-assistant instance.

The part that has been driving me crazy is the iFrame cards used to look at Search, Playlists, Artists, etc. I can get rid of the scrollbars on my side of the iFrame, but since I can't card_mod into an iFrame page, I cant get rid of the scrollbars built into MASS UI. Please please please devs, add some CSS styling for your scroll bars to hide them, you are looking like WinXP over here.

The link below is to a feature request I opened with some ideas on how to create these types of layouts easier, with more customization, and more options.
(https://github.com/orgs/music-assistant/discussions/2586)

[Paul-Vdp]

This looks absolutely gorgeous - both functionally and esthetically !
Can I please take you up on your offer to share the internals ?

[Reachushere]

Add me as well please :)

[wambs]

Wow, that looks really great!!
It would be really nice if that were a standard card for Music assistant.
Yes, I would like to see the YAML code.
Thxs for sharing!!!

[zakird1]

I would be interested in seeing the YAML. I am specifically looking for a way to integrate the Search function of MA into my Lovelace Dashboard but am having trouble. Looks like you figured it out.

[Gtwizzy]

As far as interest goes you have my Bow AND my Sword

[chriss10an]

Yes Please 🤩 i’d love seing this into the dashboard

[styphonthal]

I would also love the YAML for this.

[sameleff]

Chiming in to add that I'd greatly appreciate the YAML code for this. Awesome work!

btw, @rxritalin, the link in your OP points to https://github.com/orgs/music-assistant/discussions/url instead of to https://github.com/orgs/music-assistant/discussions/2586. You should also just be able to tag the discussion directly via #2586

[thewolfman56]

I would love to see the YAML for this. I'm currently redoing my dashboards using ui-lovelace-minimalist, so now would be a perfect time to integrate a nice dashboard for mass instead of using the sonos card I am using for my kid's rooms. Installed mass yesterday and it finally finished syncing my PLEX server this afternoon (lots of tracks with quite a few more CDs to finish ripping).

[rxritalin]

@thewolfman56 @Paul-Vdp @wambs @chriss10an
Thanks for your kind words.
I have not forgotten about this project, just a busy little bee over here on my end with real life work.
I decided shortly after posting this up that I wanted to rebuild this to be a bit cleaner from a code perspective.
More interestingly though I wanted to rebuild the animations for this, so its not just popping from one location to another, and instead to have smooth transitional animations for everything.

Im about 95% done, just have a few layout quirks I need to deal with.
Again this was purpose build from a layout perspective for this odd ball, small, ultrawide touchscreen I have.
Ill release the yaml for the ultrawide layout first and then start rebuilding it for standard 16x9 layouts after that.

[rxritalin]

Hey @Austin1
You need to make sure that you have the Webserver Frontend and API option turned on in Music Assistant first.
Open Music Assistant > Click Settings Gear > Click Core (engine icon) > Click Webserver Frontend and API > Turn on Expose Webserver.
Note the port number listed under the WebServer option.

So the answer would be http://my.local.ha.ip:8095 or for my case http://192.168.86.6:8095

I love having this option as it gives a REALLLY easy way to have a jukebox interface for guests at my house.
I have a DNS redirect in my router for music.com that points directly at this local address. This way guests can access Music Assistant on their phone so long as they are on my local network, and add to the playlist.

[janstadt]

Is this in some different branch? I am on the latest branch and i dont see the option to Expose Webserver. Also, am very excited to see your yaml for this. Would love an update on that! TIA!

[OzGav]

Are using the addon or docker?

[janstadt]

docker. That might explain it.

[OzGav]

Yes it will already be enabled

[seeharrison]

I would also love to see the code behind this. Thanks so much for all your efforts!

[CinPoU]

Gorgeous!

[ZeFish]

Yup, like everyone else, I want/need this in my house. UI is where everything get a bit down I would say and this bring the professional uix touch. I wouldn't mind seeing the rest of your dashboard :)

[janstadt]

@rxritalin any updates? Would love to get this implemented! Great work!

[RichieGP]

@rxritalin , I would echo the comments here. Gorgeous! I'd also be very interested in the underlying YAML if you would consider sharing. Thank you in advance!

[Karmabiker]

Beautiful work. Would love to see the YAML / Help with the project.

[janstadt]

@rxritalin Has anything changed with regard to your player (https://github.com/rxritalin/Music-Assistant-Lovelace-UI/blob/main/Music-Assistant-Lovelace-UI%20-%20Complex%20CSS.yaml)

My styling is somehow borked up. It doesnt apply height to the state-switch items and the track information is pretty weird looking now. Any ideas?

[janstadt]

Related issue for state-switch: thomasloven/lovelace-state-switch#96

[gelato]

There's like something covering play/pause button and all buttons to the left (layout-card displaying artist info) so that I can't press those buttons... I'm extremely bad at frontend thingy so maybe anyone could help me with that?

[Charlielx]

``I'm not sure if this is something people want or has already been made, but I took the Library browser portion of this dashboard and turned it into a standalone card. I am not super great at this type of thing so there's almost certainly improvements that can be made, but it's pretty functional for now. It supports height adjustments in layout and is default full-width, but you can adjust the width by adjusting the aspect ratio values.

type: vertical-stack
cards:
  - type: custom:mini-media-player
    entity: media_player.squeeze_rxstereo
    artwork: full-cover-fit
    scale: '1'
    tap_action: none
    hide:
      name: true
      icon: true
      info: true
      power: true
      source: true
      sound_mode: true
      group_button: true
      controls: false
      prev: true
      next: true
      play_pause: true
      play_stop: true
      jump: true
      volume: true
      volume_level: true
      mute: true
      progress: true
      runtime: true
      runtime_remaining: true
      artwork_boarder: true
      power_state: true
      icon_state: true
      shuffle: true
      repeat: true
      state_lable: true
    card_mod:
      style:
        ha-card: |
          div.mmp__bg {
            filter: blur(10px) grayscale(50%) brightness(0.6);
          }

  - type: custom:state-switch
    entity: user
    default: Playlists
    transition: flip-x
    states:
      Playlists:
        type: iframe
        url: http://homeassistant.local:8095/#/playlists/library/1
        aspect_ratio: 160%
      Search:
        type: iframe
        url: http://homeassistant.local:8095/#/search
        aspect_ratio: 160%
      Albums:
        type: iframe
        url: http://homeassistant.local:8095/#/albums
        aspect_ratio: 160%
      Artists:
        type: iframe
        url: http://homeassistant.local:8095/#/artists
        aspect_ratio: 160%
      Tracks:
        type: iframe
        url: http://homeassistant.local:8095/#/tracks
        aspect_ratio: 160%
      Stations:
        type: iframe
        url: http://homeassistant.local:8095/#/radios
        aspect_ratio: 160%
    card_mod:
      style: |
        :host {
          scrollbar-width: none;
          border-radius: 20px;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.30), 0 6px 20px 0 rgba(0, 0, 0, 0.20) !important;
        }

It's expecting Music Assistant to be installed as a Home Assistant addon, but that's pretty easy to adjust. By default it should display your "Liked Songs" playlist from spotify, but you can update the Playlists url value to have it go wherever.

[harobertocpf]

Good morning,

High tutorials on how to do the installation?

Thank you

[TgF2011NL]

I come this far... copied and pasted your code a milion times I guess, still only this result.

• the volume slider does not work
• the hamburger menu is a questionmark, and cannot click on in
• I got borders around the different elements on the card
• the big power button is not showing

Helpers are working I can see. IP adress from my MASS is pasted in the code, so is my media player ID.
When I start for example a Spotify song from a working card, I see the background changing and I can skip or pause the song, so those controlls on the card are working.

I have no idea where to start troubleshooting. Any help is welcome.

Nice work by the way! :-)

[jbega]

Hi @TgF2011NL

• the hamburger menu is a questionmark, and cannot click on in

• I got borders around the different elements on the card

Check that when copying and pasting helpers, you haven't created them with a duplicate 'input_boolean' (when created through the visual interface, Home Assistant automatically adds 'input_boolean', and if you copied it from a tutorial, it might be repeated)

The borders disappear with the mushroom themev active in your Home Assistant system or by setting the dashboard as a panel (which messes up the playback time bar)

[TgF2011NL]

Thanks! Many thanks! Did I say thank you?

I did have the helpers with a double input_boolean name, corrected that and set the dashboard to panel mode.

Result is good, still some tweaking to do, but it's functional for now.

[eagles2703]

Was your screen a different size. How did you tweak things to make it work on another screen?

[coughinglizard]

I ended up using this as a popup from a sidebar menu using Browser Mod. My screens are a 17" & 23" both at 1920x1080. First thing to solve the sizing issue is become overly familiar with what each card does and how the overall layout is assembled. The layout was not built dynamically so everything has to be modified per use basis on a trial and error! Most the cards have dimensions you can adjust left/right, up/down, and resized to get your desired look. I had to adjust every card to get a static layout that would fit a wide popup size. Ideally, cards should have been put into horizontal cards and wrapped inside vertical cards to make it all dynamic, and then individual cards placed by percentages. A project for another day. (:

In regards to the borders around the menu items - I ended up not using the custom theme and added the following inside every card-mod for the media player cards.

ha-card { box-shadow: none; border-style: none; }

[javixuwi]

I guess I am not the only one having problems with the iframe url. What about the url for https connections? in local mode is all working as expected. But configuring it with the https (external) url is kind impossible

[javixuwi]

reply to my self.... with the uri /d5369777_music_assistant/ingress/#/albums etc...

[coughinglizard]

To use this with https then use the api address

/api/hassio_ingress/5JacLkE ... 8-T_C2q5MlE/#/albums

and to remove the player buttons then use the iframe params

/api/hassio_ingress/5JacLkE ... 8-T_C2q5MlE/#/albums?frameless=true&targetPlayer=YOUR_PLAYER_NAME&player=YOUR_PLAYER_NAME

[Test-subj]

to get the correct ingress url:
open MA
right click
this frame
show only this frame.

It fixes https and artwork. For the MA core setting I have the exposed url set as http://127.0.0.1:8095

[wcruse92]

Followed the instructions and am struggling to get this to work! Not sure where I'm going wrong. Maybe I'm using the wrong IP address? Using the IP address of my Home Assistant. This is what I'm getting.

[dr1veblue]

Hello, unfortunately I'm too stupid to set this up myself.

Can someone set this up correctly for me via TeamViewer or something?

contact me on instagram: dr1ve_blue

THX!

[jsl2020]

Hello, I was able to get "most" of this going but am super new to this. How, where and what do I change to adapt to different screen sizes? As this was for a 13" screen, I need to adapt to few different sizes. Especially the side menu bar font size. what is the right way to do that please and thank you!

[Scooby7274]

Where do I put the Custom css.yaml? Do I create another file?

[bastgau]

Seems to be nice !

[rodrigosiviero]

I giving up, this is the best that I could achieve....

tried everything, input_bollean is working, select as well, the theme is there and selected on the horizon layout, buttons works but styling and iframes dont.

[Eldras66]

Same for me :(
I get an issue with iframe url.

[palilulac]

Hi all,
I maybe dumb but I can not solve this thing....
Where to find device_id for my media player?

Not even in the device part I do have this info, and without it I can not make this to work

Any help is appreciated

[OzGav]

You shouldn’t need it. Just use the entity id

[coughinglizard]

This took me a minute to figure out but the answer is in the instructions.

In the Automation-Hide_Menus.yaml make sure that after you paste the yaml code in you flip back from Yaml mode to UI mode and change the media_player to your own. My device id's will obviously not work for you.

[AshleyVargrand]

Its a very nice player.

Have do some tweaks for my setup, and runs fine :D

[wrighteegc]

Just wanted to say thanks for this, got mine fully working after resizing for my Surface Pro tablet. Great work thanks