Customized Displays: OK to share?

So I’ve been hacking on the HTML/CSS/JS that provides the web-based Displays feature, to customize it for my 4K screen and my personal, minimalist preferences. I’ve been running it at 4K/60fps (using a $99 Jetson Nano for the beefy GPU), and it’s exactly what I want. Screenshot below.


My question for @danny et al. is: would it be OK to post derivatives or even just diffs on Github from the HTML/CSS/JS distributed with Roon? I recognize this code is similar to but distinct from the stuff Roon has open-sourced, and I don’t want to step on any toes.

37 Likes

That’s excellent. Can you share in very general terms how to do this? Where is the html, how do you make roon see the changes, etc.?

P.S. I recently posted a feature request for this:

3 Likes

I don’t want to open a can of support worms, so as with any files distributed with Roon, make a backup before you edit, expect your changes may be clobbered by automatic Roon updates, don’t bug support when something doesn’t work, and so on. But all of that said, on Windows, the answer is:

C:%homepath%\AppData\Local\Roon\Application\100600416\webroot

My experience is that Roon will see and serve up the changes in realtime, without a restart needed. You just need to reload the Display web page.

The main CSS is inside display_ui.html. You can do almost anything (visually) just by editing display_ui.html. The only things I needed to edit display_ui.js for were to give me a three-line display instead of a two-line display and to change how the waveform canvas is drawn.

4 Likes

Excellent. Thank you so much. I hadn’t bothered looking because I assumed roon was generating everything dynamically from an encrypted database or something.

This would be great! I’d love to get rid of all the artist photos and just have album cover and text for song, album, artist, time bar. Maybe a few other info tidbits.

Starting with what you have and comparing the original and new file would be a good start to see where to change things (though I could live easily with what you’ve shown here).

Hope you get the ok to do so. You’re the pioneer!

2 Likes

Ideally there would be a way for folks to upload their favorite configuration and others then to download and use easily (or copy and paste, if it is all HTML…). Then everyone would have a choice of display, in effect making the web display skin-able.

For those who know HTML (and I don’t), what might be the obstacles or prospects of using “crawling” text to display long composition and/or movement names?

@Joe_Gratz, thanks for your pioneering. Please report back occasionally as your knowledge evolves.

It’s completely possible. I happen to not like how it looks, but it’s pretty trivially easy using CSS animations and a very small amount of JavaScript. (For example, Roon Web Controller does exactly this when there’s an overflow.)

Well, I’m a fan of complete composition names, and all too often a portion is cut off in the present format. So I was looking for a way to accomodate out-sized names without reserving a lot of “excess” room.

Perhaps there are other solutions that don’t need crawling text. I am not a fan either.

Hi Joe,
I’m really a newbie here and a lot of your knowledge is over my head in all honesty. I love Roon and use it on my computer with great Audeze headphones and a nice DAC but I have a Home Theater with a 4K projector like you do and was hoping to have the same great experience there. I don’t know how to implement this properly (other than using an I-pad with airplay (but that’s a poor experience as I’m sure you know).
You seem to have a solution and was wondering what you might suggest for someone like myself without much experience in writing or even implementing code?
I’m happy to pay to have your assistance if that is even an option.

So, there are two parts to this – getting a Roon Display to display where you want, and getting a Roon Display to display the custom content you want.

The second one is what this thread is about. That’s unsupported, custom, could stop working any time, and so on.

The first one – getting a Roon Display to display where you want – is a lot more straightforward. The easiest path is getting a $35 Chromecast and plugging it into your home theater setup. That “just works.” The Roon page on that is here. There is no good reason to go beyond a 1080p Chromecast, unless you like tinkering with things. (I like tinkering with things.)

3 Likes

So I was thinking about that and did a bit more thinking about this:


People say great things about it and the 16GB of eMMC Internal Storage would also house my entire collection of movies and FLAC albums, as well as let me add APPS for streaming services like Netflix and Hulu, VUDU, Tidal, Etc.
I could download Roon for Android to it and I’m off to the races…
I think.
Is there a flaw in that logic anywhere that you can see?
Perhaps I should have sent this to you privately. Sorry if I hijacked the thread here but wasnt sure how to send a private message.

Sort of doubt that. Unless your entire collection is a couple of movies and a few albums. 16gb will hold about 30 albums or about three HD movies. Anyway, I second Chromecast.

1 Like

I don’t know anything about Android TV. I don’t know whether Roon for Android runs on Android TV. I suggest you get a Chromecast and see how you like it.

Running Roon Android (which is a control/endpoint version not a server) on Android variants is a mixed bagged and not officially supported, so you would be on your own to get it working and support it.

You also would not want to store music on the unit, as all music is streamed to the RoonCore first and then sent back to the endpoint for playback. This would be doubling the network traffic to the device, probably causing drop outs.

And, as an FYI, Roon Core does not run on ARM devices, so you could not use it as a RoonCore. As others have said, get a Chromecast.

1 Like

OK, yeah I was looking at that unit and reading 16GB but thinking 16TB. My mistake.
I will get a Chromecast and try it out. Can’t hurt at those prices even if I don’t like it.

You won’t get bit perfect output from Roon on Android at this time so all music would be resampled to Androids system audio preference which is 48khz.

Can you share your edits? Thanks in advance.

Continuing the discussion from Customized Displays: OK to share?:

Looks great! Like to have this on my 4k!