Alternative Roon display layouts

Would it be possible to add some alternative Roon display layout options? For me personally I would love to be able to have the actual album art take up most of the screen rather than an artist picture as these are quite often not great and for me less important than the art.

Thanks for all the great work so far, Roon is awesome!

Do you mean on the now playing screen or the web display?

Sorry I mean the display that is used on a chrome cast which I assume is the same as the web display?

1 Like

I doubt Roon will offer any alternatives, at least not in the short term, but it is possible to change the display. Take a look at this thread for further details.

Just wanted to say thanks for the link. Turns out it’s very easy to locate the display files on the server and hack together some css to better suit what I’m after. Very pleased with my massive album art now! Cheers

1 Like

Chris… Please tell me how you did this? Are you using Windows or a MAC. I looked at the link you mentioned, but it just looks like it is windows. This is exactly what I have been wanting to do as well…

If you want to edit the Roon display on a Mac the file you need to modify is …

/Applications/RoonServer.app/Contents/Resources/webroot/display_ui.html

Thank you! I have gotten into this folder and page source, however I do not know anything about html. Can you or somebody share the script? There are like 504 lines…

I’d be happy to share the code I’ve used, but mine is optimised for display on a Google Hub so wouldn’t work too well if you displayed it on a TV. Mine looks like this …

If I were you, I’d go through the thread I linked previously, see if you can find an alternative layout you like, then ask the author if s/he would mind sharing.

You are more than welcome to use the bit of css I added to get that layout. As DaveN mentioned you will need to update that display_ui.html file. I’ve uploaded my changes to GitHub here:

You said you weren’t familiar with HTML stuff so I’ve uploaded the entire html file and it should just be a case of copying all the code in that link and replacing the contents of your display_ui.html file on your server. Obviously make a copy of the original file before overriding just in case you run into any issues. Might need to give the server a reboot after saving and then hopefully you should be good to go with the Chromecast display!

I also updated the web display file to use the same styles in the index.html file. My changes for this are also in that GitHub repo if you are interested.

1 Like

Make sure you copy the code from GitHub and not the preview here! You will need all 567 lines

Thank you so much Chris! I will give it a shot sometime tomorrow…

1 Like

Thank you Dave!

1 Like

Everyone feel free to download my versions for use with a 16:9 display in portrait or landscape view.
Have fun…

2 Likes

This is all well and good, but I would love to be able to edit the Roon layout itself (either the now playing screen or the album page), not just the web display. If I could do that I’d make a few changes, including getting it to show front and rear album art side by side.

Thank you.