Looks great Mac
I am tech savvy in the sense I can copy. 
I would love to give this a go & may have a try over the weekend when I have the time.
Thank you. 
***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)
1 Like
@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?
Yeah man no problem! Where are you stuck?
Is your profile pic the artist rendition of DB Cooper?
Yes, it is!! The second one. 
Good eye.
I like how you got the album art centered - no artist pick - and have it sized.
Your first post where you were toying around with Firefox, I got a little. I was able to
cut the artist pick but couldn’t get any further.
Not html or java literate
Sweet! Cooper is such a fascinating case.
Well I would edit the html file in the appdata roon folder since it’s a more permanent way of editing the css/html and loads every time you activate Dsiplays. The way of editing it via firefox’s page inspector is great to see real time changes when editing but is a little inconvenient to load the css file every time you open up your browser and activate the Display. I was ignorant about editing the html file in that old thread.
Make a backup copy of the display_ui.html file in appdata -> local -> roon -> application -> 100700537 -> webroot.
It’s been a long time since I tweaked the album art so I’m not sure if these are exact instructions for that layout I had.
Open the display_ui.html file with notepad, scroll to (it’s about half way down ~ or ctrl+F to search) #albumart {, then change the position to fixed (position: fixed;) to center it and I believe it makes it as large as it allows.
Let me know if you have issues or questions!
2 Likes
Yes, yes. 
It works my friend. Good stuff.
I’ve got the album art front and center and the artists gone.
Took the banner out, too.
Next question is how did you get that kind of reflection effect
of the album art in the background behind the actual album art?
Looks that way in your photo earlier in the post. Mega-cool.
Awesome! Glad I could help!
As far as the reflection effect I honestly can’t remember. I believe it’s there by default, and remember changing the sizing and opacity of it, but I eventually completely removed it and now have a black background with a tiny bit of gradient.
I could look into it but I accidentally lost my backup html file, if there’s a way you can send me a copy I would appreciate it. If not I can reinstall roon and it will restore the html file to default.
Which reminds me… make a copy of your edited html file and store it in a different folder (ie my documents) because whenever there’s a new software update you will lose your edited file in the webroot folder.
1 Like
Sorry, no idea, I’m not familiar with linux based systems. Maybe @Joe_Gratz or someone else can help?
Thx for the help.
Good idea. I will save it in another folder.
No worries. I think I’m good now with the way it looks.
Tremendous help!!
1 Like
Roon should consider embedding some alternative layout options directly into the app settings.
4 Likes
Its not on ROCK, it I s on the computer you use as the remote. I use an iMac and it is in the Roon app package. So find the Roon application in your Applications folder, right click it and choose “show package contents” from there it is in Resources/webroot/display_ui.html
3 Likes
So I was tinkering a bit with these things as well as I would like to have an iPad to behave basically the same as a Ropieee with the Pi official display. Still working out the auto dimming (which would require a lot of external automatisation), but at least i got it full screen on mij iPhone and iPad.
So if others are interested, you can run web display without Safari tabmanager and statusbar by adding just some tags to the display_ui.html
I added these tags:
Get rid of Safari stuff:
<meta name="apple-mobile-web-app-capable" content="yes"/>
Get rid of coloured statusbar (at least on iPhone completely fullscreen)
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
Add a Roon icon for homescreen. I downloaded one through google, but you can make one yourself and put it in the webfoot folder
<link rel="apple-touch-icon" href="/homescreen_icon.png" />
This disable zooming which gets rid of scrollbars.
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no"/>
You put this in the < head > tags from line 4
Now it looks like this on my iPhone 11 pro max:
5 Likes
So I was tinkering with this some more yesterday and I found a way to remotely wake the iPad back up to the web display by doing an HTTP request to a “fake” homekit sensor.
I was looking through the code of the web display (which is actually a security reliability as it uses a very old jQuery version). I’m kinda tempted to remake one with angular or something.
I only have one question about the api. As i would like to be able for Roon to make a call to the fake sensor when a song starts playing (either from stopped/paused state or just selecting a new song). This way I can actually make a dynamic display that does not have to be on all the time and does not require a manual action. I don’t think this is actually possible, but if someone has an idea i’m open for it. Looks like a good use for an older iPad or something like that.
1 Like
So, lots of ways to do this, with varying levels of elegance vs. levels of how much of your own code you write.
High elegance: Just write a Roon extension that listens to events that happen, and when the event you want to detect happens (something starts playing in the relevant zone), it fires off the request that wakes the iPad. If you’re thinking about writing a Roon display in Angular, this would be way easier than that. 
Low elegance, no need to write your own Roon or Homebridge extensions: Use the existing Roon extension that publishes events to MQTT, use the existing Homekit extension that listens to events on MQTT, write a teeny middleware script that listens to the MQTT events from the Roon extension and publishes the relevant events that are consumed by the Homekit extension. (Or modify one or or the other of those extensions to use the message format of the other.)
Alternate possibility: forget about waking the iPad with Homekit, just modify the javascript for the web display to fade out a second or two after the new track begins, and to fade in when something starts playing, and leave the iPad display on all the time.
20 years ago we did something similar (skinning) in winamp with a couple of clicks. now we need to “github” and “webroot” and “css” and other incomprehensible things for simple users like me.
I don’t know when or where it all went wrong, I just hope it wasn’t something that I said…
6 Likes
To be fair to Roon, this is in the Tinkering section, for a feature that isn’t designed to be tinkered with from the GUI by the user.