Customized Displays: OK to share?

Yeah, it’s a version thing; Roon updated the display files since last year. Here’s an updated diff of display_ui.html (to the one in 100700667):

2,80d1
< #background-albumart {
<     z-index: 0;
<     width: 100%;
<     height: 100%;
<     top: 0;
<     left: 0;
<     position: fixed;
< }
< 
< #background-albumart div.front,#background-albumart div.back {
<     background-size: cover;
<     background-repeat: no-repeat;
<     background-position: center center;
<     width: 100%;
<     height: 100%;
<     top: 0;
<     left: 0;
<     position: absolute;
<     animation-name: fadein;
<     animation-duration: 1s;
<     transition: opacity 1s linear;
<     will-change: opacity;
< }
< 
< #background-artistart {
<     display: block;
<     z-index: 1;
<     width: 100%;
<     height: 70%;
<     overflow: hidden;
< }
< 
< #background-artistart div {
<     background-size: cover;
<     background-repeat: no-repeat;
<     background-position: center center;
<     width: 100%;
<     height: 70%;
<     position: absolute;
<     top: 0;
<     left: 0;
<     transition: opacity 1s linear;
<     will-change: opacity;
< }
< 
< #background-gradient {
<     background-size: 100% 100%;
<     background-position: left bottom;
<     height: 22vh;
<     visibility: visible;
<     opacity:0;
<     animation-name: fadein;
<     animation-duration: 1s;
<     transition: opacity 1s linear;
<     will-change: opacity;
< }
< 
< #background-dimming {
<     background-size: cover;
<     background-repeat: no-repeat;
<     background-position: center center;
<     background-color: rgba(20,19,19,1); /* #141313, which is the same as the desktop client background dimming layer color */
<     width: 100%;
<     height: 100%;
<     top: 0;
<     left: 0;
<     position: absolute;
<     animation-name: fadein;
<     animation-duration: 1s;
<     transition: opacity 1s linear;
<     will-change: opacity;
<     z-index:2;
<     opacity:0;
< }
< 
< #background-footer {
<     background: linear-gradient(to right, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.4));
<     height: 30%;
< }
94,237d14
< #lyricscontainer {
<     opacity: 0;
<     z-index: 3;
<     width: 100%;
<     height: 70%;
<     position: fixed;
<     top: 0;
<     left: 0;
<     overflow: hidden;
<     transition: opacity 0.7s linear;
< }
< 
< #background-lyrics {
<     display: flex;
<     flex-direction: column;
<     background-color: rgba(0, 0, 0, 0.7);
<     z-index: 1;
<     width: 100%;
<     height: 100%;
<     position: absolute;
<     top: 0;
<     left: 0;
< }
< 
< #lyricscountdown {
<     display: flex;
<     flex-direction: row;
<     justify-content: center;
<     opacity: 0;
<     text-align: center;
<     font-size: 4vw;
<     font-family: "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
<     font-weight: bold;
<     transition: opacity 0.7s linear;
<     will-change: opacity;
< }
< 
< #lyricscountdown > * {
<     margin: 1.4vw;
< }
< 
< #lyricscountdown > span {
<     color: white;
<     opacity: 0.4;
<     transition: opacity 0.2s linear;
<     will-change: opacity;
< }
< 
< #lyricscountdown > span.active {
<     opacity: 1;
< }
< 
< #lyricscountdown.reducedAnimation > span {
<     transition: none;
< }
< 
< #lyricscountdownicon {
<     height: 2.5vw;
<     width: 2.5vw;
<     align-self: center;
<     background-repeat: no-repeat;
<     background-size: contain;
<     background-position: center center;
< }
< 
< #lyricsicon {
<     opacity: 0;
<     height: 2.8vh;
<     width: 2.8vh;
<     z-index: 3;
<     position: absolute;
<     right: 11.2vw;
<     bottom: 32vh;
<     background-repeat: no-repeat;
<     background-size: contain;
<     background-position: right bottom;
<     transition: opacity 1s linear;
< }
< 
< #lyricstextcontainer {
<     background-color: transparent;
<     z-index: 2;
<     width: 100%;
<     height: 100%;
<     position: absolute;
<     -webkit-mask-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 5%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 55%, rgba(0,0,0,0.00) 85%);
<     mask-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 5%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 55%, rgba(0,0,0,0.00) 85%);
< }
< 
< #lyricstextcontainer.reducedAlpha {
<     -webkit-mask-image: none;
<     mask-image: none;
< }
< 
< .lyricstext {
<     width: 80%;
<     position: absolute;
<     top: 70vh;
<     left: 10vw;
<     margin: 0px;
<     padding: 0px;
<     color: white;
<     font-size: 3.3vw;
<     font-family: "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
<     line-height: 150%;
<     font-weight: bold;
<     text-align: center;
<     user-select: none;
<     -webkit-user-select: none;
<     -moz-user-select: none;
<     transition: transform 0.7s cubic-bezier(0.70, 0, 0.30, 1);
<     will-change: transform;
< }
< 
< .lyricstext > * {
<     opacity: 0.4;
<     padding: 0px;
<     margin: 3.1vw 0px 3.1vw 0px;
<     transition: transform 0.7s linear, opacity 0.7s linear;
<     will-change: opacity;
<     transform: scale(1); /* Edge won't smoothly transition back to original size without this */
< }
< 
< #lyricstextcontainer.reducedAnimation .lyricstext > * {
<     opacity: 0.1;
< }
< 
< .lyricstext > .current {
<     opacity: 1;
<     transform: scale(1.125);
< }
< 
< #lyricstextcontainer.reducedAnimation .lyricstext > .current {
<     opacity: 1;
< }
< 
< .lyricstext > .prevnext {
<     opacity: 0.6;
< }
< 
< #lyricstextcontainer.reducedAnimation .lyricstext > .prevnext {
<     opacity: 0.4;
< }
< 
239a17
> 	position: fixed;
241,245c19,22
<     width: 22%;
<     height: 39%;
<     left: 10%;
<     bottom: 10%;
<     position: fixed;
---
> 	height: 100%;
>     width: 56%;
> 	top: 0;
> 	left: 0;
252c29
<     background-position: center bottom;
---
>     background-position: left center;
260d36
<     filter: drop-shadow(0px 0px 2.7vh rgba(0, 0, 0, 0.2));
261a38
> 
271,274c48,51
<     top: 70%;
<     left: 34%;
<     bottom: 10%;
<     right: 10%;
---
>     top: 40%;
>     left: 57%;
>     bottom: 40%;
>     right: 1%;
297c74
<     font-family: "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
---
>     font-family: "Helvetica", "Noto Sans", "Noto Sans JP", "Noto Sans KR", sans-serif;
310a88
> 	color: white;
314,315c92,93
<     height: 7vh;
<     top: 2.5%;
---
>     height: 5vh;
>     top: 0px;
321c99,104
<     top: 36%;
---
>     top: 3vh;
> }
> 
> #line3container {
>     height: 5vh;
>     top: 6vh;
323a107
> 
326c110
<     font-size: 5vh;
---
>     font-size: 2.5vh;
332c116,120
<     font-size: 3.5vh;
---
>     font-size: 2.5vh;
> }
> 
> #line3container span {
>     font-size: 2.5vh;
339c127
<     top: 59%;
---
>     bottom: 2vh;
345c133
<     font-family: "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
---
>     font-family: "Helvetica", "Noto Sans", "Noto Sans JP", "Noto Sans KR", sans-serif;
351a140
> 	color: white;
359c148
<     background-color: rgba(35, 33, 33, 0.3);
---
>     background-color: rgba(33, 33, 33, 1);
360a150
>     bottom: 6vh;
362d151
<     bottom: 1.785vh;
368a158
> 	background-color: gray;
372c162
<     background-color: #232121;
---
>     background-color: white;
382c172
<     bottom: 0.2vh;
---
>     bottom: 6vh;
384c174
<     height: 4vh;
---
>     height: 3vh;
409a200
> 
441,454d231
< <div id="background-albumart">
<     <div class="back"></div>
<     <div class="front"></div>
<     <div id="background-dimming"></div>
< </div>
< <div id="background-artistart">
<     <div class="back"></div>
<     <div class="front"></div>
< </div>
< <div id="background-split">
<     <div style="flex-grow: 1;"></div>
<     <div id="background-gradient" class="visible"></div>
<     <div id="background-footer"></div>
< </div>
456,469c233
< <div id="lyricscontainer">
<     <div id="background-lyrics">
<         <div style="flex-grow: 1;"></div>
<         <div id="lyricscountdown">
<             <span>3</span>
<             <span>2</span>
<             <span>1</span>
<             <div id="lyricscountdownicon" class="lyricsicon"></div>
<         </div>
<         <div style="flex-grow: 1;"></div>
<     </div>
<     <div id="lyricstextcontainer" class="reducedAlphaAvailable reducedAnimationAvailable">
<     </div>
< </div>
---
> 
479,482c243,245
<     <div id="infoicon"></div>
<     <div id="progresstimecontainer" style="display: flex; flex-direction: row;">
<         <p id="progresstime" class="progresstime"></p>
<         <p id="totaltime" class="progresstime"></p>
---
> 	<div class="linecontainer" id="line3container">
>         <span class="back"></span>
>         <span class="front"></span>
492a256,259
> 	<div id="progresstimecontainer" style="display: flex; flex-direction: row;">
>         <p id="progresstime" class="progresstime"></p>
>         <p id="totaltime" class="progresstime"></p>
>     </div>
494c261
< <div id="lyricsicon" class="lyricsicon"></div>
---
> <!-- <div id="lyricsicon" class="lyricsicon"></div> -->

Cheers, Joe.

Is it possible to customise the “now playing” screen at all?

Hi guys, is it possible to have the current bit rate and sample rate also display on the now playing via chromecast or web display?

2 Likes

I would love this as well.

Heeey Joe. The display in the OP was totally rad, good job. Do you mind sharing the full code for it? I should be able to copy paste from the instructions in this tread.

For the noobs in the roon room :slight_smile: Where does one put this file in order to get the updated display page working? I’m using a nucleus if that makes a difference.

Thanks

You don’t, it goes in the client folder. So, it needs to be setup on each individual system. AND will be wiped out the minute there is a Roon update.

Please keep in mind this is not supported and if you mess things up you are on your own to fix.

Thanks, so how can we get this an officially supported option? Shouldn’t be that hard to add the extra meta data since it’s already there and just needs to be displayed.

1 Like

You can add a Feature Request.

Sadly this does nothing when using a Nucleus as the web display is coming from the nucleus IP address so not sure why modifying the display_ui file on my mac where I load the display would have any effect. Anyone have any ideas?

1 Like

Hi guys,

So after reading that all I assume it isn’t possible to change the content of chromecast displays, correct? Only webdisplays can be fiddled with?

I was hoping there is a way to change the chromecast display…

Add images

Is this still working?

For me, yes. No changes.

And is it possible to do the same with chromecast? The casting has its own js file.

If you are not using ROCK, it is possible to modify the file /RoonServer/Appliance/webroot/display_ui.html inside your Roon Server folder, which should also affect the Chromecast display.

1 Like

Sorry, I’m not getting something because it’s not working here for me.

I’ve copied all that and replace the contents of my display_ui with that. I did not work. I do not know what a diff is. Isn’t that just copy and paste? Is there something else to it? Thanks.

Have you restarted your Roon server?

Yes. The display only shows index.html, not the modified display_ui

Because I am currently working with ROCK, I cannot reproduce or try this problem at the moment. But I remember that it once worked on my AndroidTV with Chromecast.

1 Like