Customized Displays: OK to share?

Tinkering
#70

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> -->
#71

Cheers, Joe.

#73

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

#74

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?

1 Like
#75

I would love this as well.

#76

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.

Web Display or Chromecast, what are the chances it can be customised?
#77

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

#78

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.

#79

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
#80

You can add a Feature Request.

#81

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?

#82

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…

image
image4032×3024 948 KB

Add images

#83

Is this still working?

#84

For me, yes. No changes.

#85

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

#86

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
#87

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.

#88

Have you restarted your Roon server?

#89

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

#90

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