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 ?

[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 :)