If you like you can support my work.

### # Installation

How do I install this theme?

This not a python or anything else coded software but just a code.

This is hard because I don't have any code knowledge.

Don't worry. I have a manual for setup. Everything is explained there and it is super easy to install.

**Where are the codes ? **

Everything you need is in this wiki page. 🎉

**I don't have the multimedia files you used. ? **

Well they are included as well. Just check below. 🎉

Why they are boarders appearing on the page ?

Use it with Mushroom Shadow theme in order to get rid of the borders.

Page Properties:

• Room Presence. Start the music in your last entered room
• Media Player controls
• Music Follow. Let the music follow you around the house automatically.
• Spotify Card integrated. Start your playlist from the card.
• Exclusively designed for Spotify control.
• Ambilight animations.
• Browser Mode integration.
• Minimalistic design. You can hide media players and spotify playlist.
• See which media player is currentlu playing
• Rewind - Forward your music.
• Developed on the basis of Amazon Echo devices but you can also use it with any other media player type.
• Can easily be installed with the given manual

Before we start, we need some third party tools from Hacs:

• Swipe card
• Card Mod
• Stack in Card
• Mini Media Player
• Spotify Playlist Card
• Spotcast
• Mushroom Card

You will also need the Spotify integration to be installed in Home Assistant. Link:

Screenshots:

Download Multimedia files:

• Files are located at: Multimedia files

Page Code:

• To install the page you need this code: Page Code

Manual:

Okay this is a minimalist Spotify Card. Let's start with code explanation and go line by line.

Line 3.

I used a swipe card here to navigate between my media players. Media Players are starting at line 29 and going until line 336.

Hide - Show Spotify Card:

The first one at line 29 activates Spotify Card at the bottom of the page (code starting from line 610). So I used a conditional card for activating the Spotify - Card.

The name of the boolean for displaying the Spotify Card is "input_boolean.modern_dashboard_spotify_card".

As you can see when you tap the playlist chip once it activates the Spotify card. If you tap it again it hides the card.

The conditional card is used here with the boolean I created.

Hide - Show Media Players:

There is also another tapping feature in this "Playlist chip"

In line 46 I created another boolean named "input_boolean.modern_dashboard_spotify_card_hide_media_players". This helps the chip to display a double tap feature. When you tap it twice it hides all the media players at the top bar.

To reactivate the media player chips just click song name twice.

Media Player Chips:

Media player Chip codes are starting from line 66. They all have some basic features. If you have "Spotcast" service installed from hacs, you can start a music straight away with the clicked media player.

In line 77 a single tap action starts music on my Echo dot at living room(salon). A force start feature is also implemented.

A double tap also stops the media player from playing the music.

With the card mod I also added some css styles.

In line 98 the css code lets the media player chip to feature a box shadow and changes inner color to black if its status is currently "playing".

Spotify Cover:

If there is nothing currently playing a welcome screen will activate.

The codes for this screen starts from line 337.

There is one important conditional card rule here. To let the page understand that spotify card is not playing anything we have to create a boolean and use an automation for that. The boolean I used is named "input_boolean.modern_dashboard_spotify_card_update_spotify_status". This boolean is only activated when Spotify is in "Paused" or "Playing" status. When it is at "idle", "unalable" or "standby" the boolean turns off.

When the boolean is on(meaning spotify is on paused or playing) the welcome screen shown above will disappear and media player screen will show on the page.

Just create this automation. Link is below.

Spotify Status Update Automation

One little note:

This automation lets the boolean to track spotify status. But sometimes Spotify will not not update it straight away. Sometimes it might be laggy. If you run into any trouble like this just create another automation to force Spotify update its status in every 3 seconds. Link is below for this automation

Force Spotify to update it's status

Welcome Screen background animation:

I used a welcome screen background animation. Css code for this animation starts from line 355. The basics of this css is quite simple actually. It creates a blurred image behind the real image and animates according to it. To see that clearly just go to line 364 and change "blur(100)px" to "blur(10)px". You shall now see the shadow of the behind picture very clearly.

It can be seen very clearly from the above pictures. When we minimize the effect the background picture can easily be seen. But with the 100 blur it transforms into a light show. In my instance the backrground picture is "background: url('/local/png/red.jpg') " on line 362. But you can also use your own background image too. just replace "red.jpg" with yours. "Saturate(200%)" gives a saturation effect to the pictures used(red.jpg). Line 363 "animation: Gradient 20s ease infinite;" is the part where "red.jpg" is animated. "Ease infinite" lets a continuous loop to the animation. If you delete this part the animation of the red background will stop and there will only be a static red background behind the picture.

Line 412 is the place of spotify post place

This is not a text but an image.

Double clicking this spotify text will also hide boolean " input_boolean.modern_dashboard_spotify_card_hide_media_players" which is related with the above media players.

Line 446 is the the place where play sign appears.

Room Presence Music:

This feature is activated with an automation. It is a simple and easy one. What it does is when it is activated through a button the automation checks the sensor and finds out the last room you entered. After that, with a help of an automation it starts to play Spotify music on that rooms media player.

To achieve that we need 3 things:

• Spotcast integration to be installed.
• A input Button named "input_button.modern_dashboard_spotify_last_room_music"
• Last Room Motion template sensor
• Last Room Music Automation

1. Ceate your button from helpers section of Home Assistant.
2. Enter template sensor code into configuration.yaml or sensor.yaml(if you have a seperate sensor.yaml section).

Reload Template entities in developers tools section of HA.

3. Create the given automation above. Don't forget to change motion sensor names with your own ones. This autoamtion is based on my setup.

Now everything is ready. When we press the play icon on the Play icon the music will automatically start on the last room we entered. Don't forget that we can also start music individually from the topbar media player icons. Just tap any media player icon you want the music to start and it will execute straight away. Double tapping the icon will also stop the media player.

Media Player:

When music starts a media player will appear in the page. That media player starts from the line 477. It will only appear when Spotify is on "Paused" or "Playing" status. This is because the media player has an album art cover. This album art cover only appears when Spotify is in "Paused" or "Playing" status. When it goes to "Idle" the album art disappears. So in my setup when it passed to idle the welcome screen will appear.

The media player has controls of play, pause,stop, next and volume. It is a mushroom based media player card.

Line 569 has the progress bar card. Due to mushroom media player has not progress bar but mini player does it is being used in here.

You can change the color of the bar in line 595. Just change "amber" to any color you like.

Card Mode animation (line 641):

The media player card has a same understanding with the welcome page. It is applied to the whole card with the help of card mode. Card mode copies album art work. It creates a second one behind the album art cover. When you change line 654 "blur(100px)" to "blur(1px)" you can easily see the album art cover behind the media player.

But when you change it back to 100px it blurs the whole image and only colors will be visible.

Since it uses the album cover, the colors on the page match perfectly with the music.

"animation: Gradient 12s linear infinite;" is where the animation starts. change 12s to your like to slow or fast movements of the background picture.

"background-size: 70% 70%;" is the size of the background picture. If you change it to a number like "100% %100" the picture will grow and this will let the lights to cover all page. Try it yourself.

Line 670 is the rotation path.

Browser Mode:

You can also use this card with browser mode.

Browser ready code is also in my page files.

Spotify-Card with Browser Mode

If you enjoy my work check out my other pojects and please star this page on github.

Enjoy....