DIY Retro looking record player UI using mostly standard Lovelace cards

Share your Projects! Dashboards & Frontend
1

Hi, just wanna share a little project I did a few days ago.

record_player_ui
record_player_ui2000×1200 1.04 MB

See it in action:

Spent a few hours last weekend on my new Lovelace dashboard template. There’s nothing special about it, just the usual sidebar + button design, but I was having a hard time finding a media player card I want to use, so I end up making one myself.

My original concept was to have a vinyl record or CD image on the edge of the dashboard mimicking the real thing, with the album cover artwork in the center. I am no expert in coding so the goal was to achieve the above using just existing Lovelace cards and tools/methods provided by the Home Assistant package.

I broke down the problem into smaller problems:

  1. Test and see if CSS animation is possible.

  2. Link the animation with an entity state change.

  3. Extract the artwork image from the media player.

  4. Wrap up and add control elements.

And I did the following:

  1. I use card-mod (https://github.com/thomasloven/lovelace-card-mod) to enable CSS support on Lovelace cards. The CSS animation works without any issue, one problem solved.

  2. I use a template with the is_state() function to check the media player’s “playing” state, if validated true, it then injects the CSS animation code to start the animation.

  3. With the Developer Tools, I was able to find the property holding the link to the cached artwork image (entity_picture). But for some reasons I can’t use that link directly in a Picture card, so I end up using the Markdown card and display the image using the HTML “img” tag. The artwork is rectangular so I use the CSS clip-path to create a masked round version and then place it on top of the vinyl image (which is wrapped in a Picture card, with transparent background) using the CSS z-index property.

  4. With all the major problems solved, I overlaid a simplified media control UI on top of the image layers and this is the final result.

There are still a lot of improvements that can be done, but I hope you enjoyed my little project.

If you need more details on this project, please visit the project page.

10 Likes
2

Very nicely done !

1 Like
3

Which Beauty!!

1 Like
4

I followed your post on Facebook!..this looks great! :+1:

I’m definitely going to have a play around with this.

1 Like
5

Where can I find the disc.png? Looking forward to testing this

7

I purchased a base image from Adobe Stock, then modify the image in Photoshop (remove background, layer separation, other enhancements…etc)

You may use Google image search to find a usable one then use some free software to remove the background.

8

Amazing work! Can you share the code? The link to the project page is broken :frowning:

9

Hi @edwinwang
Sorry for popping back up an old topic, but is there any documentation saved anywhere on this project? The automata.id link doesn’t work anymore.
Thank you.

1 Like