As I mentioned earlier, I use the grouping mechanism of my Sonos devices, so I haven’t dealt with Roon grouping with mini-media-player yet. And yes Roon is not listed on the mini-media-player page. It would be nice if your suggestion would be implemented.
I would like to share my latest release with you. Still not perfect, but I’m slowly getting closer to the goal:
1 Like
This is looking better every iteration…but how to go about setting this up from scratch for people with a step by step walk thru would be really helpful in the future.
Yes, but it’s not quite that simple. As I mentioned above, I published the RAW code on Github (which is a bit messy in parts, especially regarding some CSS formatting). I also realized many things through the code itself, because it’s not possible via graphical interface. If someone has no experience at all with YAML, Markdown, HTML, CSS etc. it’s difficult to implement this.
YAML is very sensitive to text indentation. So don’t just copy and expect it to work.
Nevertheless I will try to explain it a little bit:
Basic requirements are:
- card-mod (Custom CSS - very important)
- Roon Integration (very important)
- Last.fm Integration
- hass-simpleicons (just to get some nice icons - not really nescessary)
- lovelace-layout-card (not essential, just to determine how many and how wide the columns should be)
- Sonos Integration (only in the case of my hardware)
Create a new dashboard.
Each of the three columns is a Vertical Stack Card. This means that cards that belong together always appear in one column (of course, this makes no sense for the left column, because there is only one column here. But I did this for the time being for reasons of unification).
Left column
The easiest part. Add a Webpage Card.
Center column
Top
Add a Picture Elements Card. I took a picture of my Akasa case, placed the Roon logo on it and made the switch work as a WOL button.
type: picture-elements
elements:
- type: image
image: /local/img/roon-moon-white.png
style:
top: 49%
left: 28%
color: white
- type: icon
tap_action:
action: toggle
entity: switch.wol_rock
name: WOL
icon: mdi:power
icon_height: 10px
show_name: true
show_state: true
show_icon: true
hold_action:
action: none
style:
top: 50%
left: 70%
color: '#3073ad'
image: /local/img/rock_akasa_case_front.jpg
Below
Markdown Card. This is a mixture of static text (information that cannot be read with Home Assistant and those where it is possible). The content of the code varies, of course, due to the fact that your entities are named differently. Parts of the CSS code I have taken over from the ROCK web interface.
A small section of the code:
- type: markdown
style:
ha-markdown:
$: |
ha-markdown-element { /* body */
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
}
h1, h2, h3, h4, h5, h6 {
font-family: inherit;
line-height: 1.1;
color: inherit;
}
h4, h5, h6 {
margin-top: 10px;
margin-bottom: 10px;
}
h1 { /* h3 */
font-size: 24px;
font-weight: 400;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 20px; /* modification */
}
h2, ha-markdown-element h2 { /* h6 */
font-size: 12px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 10px;
}
h3 { /* .statusheader */
font-size: 1.2em;
font-weight: 700;
margin-top: 40px;
margin-bottom: 0;
}
p {
margin-top: 0;
}
img { /* Pseudo image to create spaces */
height: 1.5em;
}
content: >-
# Hardware
## Intel NUC-Kit NUC8i3BEH
### Stats
Case temperature {{states('sensor.rock_temperature') }} °C.
Current power consumption {{ states('sensor.rock_current_power')
}} Watt.
{{ states('sensor.rock_total_consumption') }} kWh total power
consumption since May 10, 2021.
Right column
Top
Simple static Markdown resp. HTML.
Below
You can specify here any entities you want to monitor. In my case I specified my Roon zones, the internet connection of my router and my WLAN.
As a case study: if I’m streaming music and the music stops (which is fortunately very rare for me), I can for example monitor if my internet connection has just been disconnected or if a zone speaker has just disconnected.
Below
Again a markdown card, as already mentioned above.
Conclusion
I hope that this guide will help one or the other a little. As I mentioned before, this is not for people who don’t know how to code at all.
Maybe I forgot one or the other detail in this tutorial. Please don’t be afraid to ask, but I am neither a professional programmer nor a home assistant specialist and some things could be done better for sure.
5 Likes
I think ill just enjoy the pictures - thanks for complexity details - I’m not a coder by any stretch of the imagination sadly and maybe you lost me at YAML - I did guess that one, so probably lost me at “Yes,” hahaha
Lets hope one or the other you mentioned get a head start 
maybe if if I stop messing around with the hardware all time and play with coding I could get this…but I think I might just listed no the Music.
Glad to see you are making progress tho. 
1 Like