Customized Displays: OK to share?

This is tremendous. It’s wonderful to have another display option.

Is there scope for adding brand new pieces of information or does Roon need to expose those somehow such that any custom html could pick it up? I’m thinking of a few things e.g. the current display shows time elapsed and time remaining on the current track only. I’d love to be able to also see total queue time remaining and the number of queued items in the queue left to play after the current track. I’m sure a whole load of other stuff could be added to that list, e.g. being able to look one or even more items ahead in the queue so that the display could show a sneak-preview of the next track in whatever level of detail was deemed desirable (e.g. just artist name, artist name & track title, artist and/or album thumbnails, etc, etc). There’s also some basic system stuff that some people, including me, might like to be able to incorporate into a custom display e.g. the current time and/or date.

Disclaimer - I show my display on a 55" TV which is maybe why I’d like to be able to create a quite information-rich display. I realise that some of my wishes might not be be practical from a layout/aesthetic point of view on smaller display devices.

1 Like

Hi folks! Awesome!

I am looking to tweak the visuals on my Google Home Hub to increase e.g. font to make it readable from far distance.

Is this also possible on every core e.g. Sonictransporter, Nuc etc?

Maybe we could collect some views as screenshot and html code in order to make things more easy :slight_smile:

This looks awesome! How can I increase the font size?

My Sonictransporter haven’t arrived yet, but I have the chance to test it via my Mac. Unfortunately no display_ui or similar could be found. I also unmasked all hiding files, searched manually through it and couldn’t find it…
The Mac is not so much important, but hopefully it will work on the sonictransporter and some similar file is available.

PS: I think I missed something on the Mac, because it should be somewhere …

This is super cool!

Actually I posted how to customize certain elements in a web browser back when Displays was launched: Album art only on cast display
I wasn’t aware of editing the html file in the Roon folder on Windows, so that saves me from having to open my custom css file every time I launch the Display feature via web browser, so thank you for bringing this to my attention.

Since the roon team hasn’t offered a way to customize the default display, I agree that having pre-configured display layout files available for download is the way to go. As long as people back up the original file I don’t see any issues happening, but then again I don’t know quite enough about this kind of stuff.

The quickest and easiest way I know of (especially since discovering this thread) is to edit the html file on a computer where your core is installed. I’m only familiar with Windows so I’m not sure how to go about it on a NUC, Mac, etc. Which way are you using Displays?

1 Like

I’m surprised there’s not more interest in this and more tweaking going on!

Here’s my current display:

@Joe_Gratz: any idea how to permanently replace the roon icon with a white one? I’ve tried replacing it but it always defaults back to black after a refresh.

8 Likes

Wow ,nice…

Im sure there is no issue to post the page code for interested tweakers and some steps on where to place it :slight_smile:

You replace webroot/img/display_roon_icon.svg with a white version of the logo and it turns back to black? That is very odd.

At any rate, should be able to just invert the colors by styling that element’s CSS, as described here: https://stackoverflow.com/questions/39761120/invert-svg-image-using-css .

1 Like

Ah that’s what I was looking for! Thank you. I was changing it via firefox’s style editor which was not the correct way to do it.

Hello! I know I’m wayy late here, but what you did looks awesome! Trying to do the same thing. Just can’t figure out how to edit the display to use your code. Is there a simple explanation? Thanks

Same for me, need some more hints…
the Display of @Mac_Rebant is very nice! Can you provide the files or code?
Thanks.

1 Like

Not sure how tech savvy you are so please excuse me if I’m over-explaining it:

Copy the code you wish to use (highlight code, then right-click, then copy, or ctrl+C)

then on your PC where your core is installed, go to C:%homepath%\AppData\Local\Roon\Application\100600416\webroot

then in the webroot folder find the file called display_ui.html then right-click and open with notepad.

then paste the code then file -> save. Be sure to delete and replace the default code with the new code (ctrl+A then ctrl+V is an easy way). Make sure you create a copy of the original display_ui.html file before you make any changes (right-click the file and select copy, then paste in the folder or just ctrl+V).

Let me know if you have any issues or questions.

1 Like

Glad you like it! I certainly can, but keep in mind I tweaked this using my laptop with its aspect ratio as the display, so I can’t be sure it’ll look the same on your monitor or tv.

I can PM you a link to a text file with the code if you want?

Hi @Mac_Rebant

Yes please, would be nice to try with your design!
Thanks a lot. Best regards.

Looks great Mac

I am tech savvy in the sense I can copy. :laughing:

I would love to give this a go & may have a try over the weekend when I have the time.

Thank you. :sunglasses:

***Oh, I assume I should save the default code, in case your code doesn’t work on my laptop.

where is the display_ui.html file for roon rock? (file location please)

@Mac_Rebant thx for the comment. This display is exactly what I’m looking for. I’ve read some of the posts but can’t seem to get things to work right. Can you help me get this on a pc?

@Jared_Beasley

Yeah man no problem! Where are you stuck?

Is your profile pic the artist rendition of DB Cooper?