Customized Displays: OK to share?

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

Maybe you can post your code sometime. I will try to find a possible error. But I don’t want to make a promise. I am in music and beer mode. :grinning:

Edit:
If you don’t have an AndroidTV, but an external Chromecast device you’ll have to do a restart?

1 Like

Yes, I restarted my Chromecast. Still nothing.

What do you mean by post my code? I’ve just copied and pasted what’s here Customized Displays: OK to share? - #70 by Joe_Gratz into display_ui.html

Was I supposed to do something different? My display_ui is literally the code in that post

Sometimes there are character set problems when copying codes (believe me, I’ve had my experiences. Sometimes it’s just a small thing, like a wrong space or a missing semicolon).

Hey I just this on my Chromecast Ultra and it does use my custom display_ui.html and display_ui.js (I posted a screenshot earlier in this thread). The index.html file was customized as well but that does not appear to be used when using Chromecast.

Here are the contents of my /RoonServer/Appliance/webroot folder:

I modified the index.html, display_ui.html, and display_ui.js files. Keep in mind that Roon will replace anything missing. The files get replaced by the originals on every update as well and it’s possible that if there’s a problem with the code that it may replace it then as well (not sure about this though).

Looking at the cast.js file it seems like it only cares about display_ui.html and display_ui.js and that’s all it uses to produce the display for Chromecast.

With that being said, if you’re still having problems it might be best to post the files you’ve modified so we can take a look and see what’s wrong.

1 Like

The code Joe_Gratz posted didn´t work for me either. I created my own, by changing the display_ui step by step. And it worked out well. At least with the Roon weblink (I have no experience with chromecast). Design examples to be found here.

But: It only works, if it is the display_ui on a Win10 PC, and this same PC is the one, that is used as Roon core. It does NOT work on Nucleus or ROCK, because the folder with the display_ui is not user-accessible.

1 Like

This is the code I am using:

<style type="text/css">
#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-gradient {
    background-size: 100% 100%;
    background-position: left bottom;
    height: 22vh;
}

#albumart {
    background-color: transparent;
    z-index: 3;
    width: 80%;
    height: 70%;
    left: 10%;
    bottom: 15%;
    position: fixed;
}

#albumart div {
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    width: 100%;
    height: 100%;
    top: 15;
    left: 15;
    position: absolute;
    animation-name: fadein;
    animation-duration: 1s;
    filter: drop-shadow(0px 0px 2.7vh rgba(0, 0, 0, 0,2));
    transition: opacity 1s linear;
}

#albumart.reducedAlpha div {
    filter: none;
}

#infocontainer {
    position: absolute;
    z-index: 4;
    top: 0%;
    left: 2%;
    bottom: 2%;
    right: 2%;
}

.linecontainer {
    display: block;
    overflow: hidden;
    width: 100%;
    position: absolute;
    left: 0;
}

.linecontainer span {
    font-family: "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
    font-weight: normal;
    color: grey;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 1s ease-out;
}

#line1container {
    height: 3vh;
    top: 1%;
    margin-right: 5vh;
}

#line2container {
    height: 3vh;
    top: 4%;
}

#line1container span {
    box-sizing: border-box;
    font-size: 2vh;
    padding-right: 5vh;
}

#line2container span {
    font-size: 2vh;
    font-weight: bold;
}

#progresstimecontainer {
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 97.1%;
    left: 0;
    width: 100%;
}

.progresstime {
    font-family: "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
    color: grey;
    font-weight: normal;
    flex-grow: 1;
    font-size: 1.5vh;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

#totaltime {
    text-align: right;
}

#progressbg {
    background-color: #656363;
    position: absolute;
    left: 4%;
    bottom: 0vh;
    width: 92%;
    height: 0.5vh;
    border-radius: 0vh;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1s linear;
}

#progressbar {
    background-color: #d3d2d2;
    width: 0%;
    height: 100%;
    transition: width 1s linear;
    will-change: width;
}

#waveformcontainer {
    position: absolute;
    top: 98.8%;
    left: 4%;
    bottom: 0%;
    width: 92%;
    height: 2%;
    opacity: 0;
    transition: opacity 1s linear;
}

#waveformprogresscontainer {
    position: absolute;
    overflow: hidden;
    top: 0%;
    left: 0%;
    width: 0%;
    height: 100%;
    transition: width 1s linear;
    will-change: width;
}

.waveform {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#waveformbg {
    z-index: 0;
}

#waveform {
    z-index: 1;
}

.front {
    z-index: 1;
    opacity: 1;
}

.back {
    z-index: 0;
    opacity: 0;
}

.dead {
    opacity: 0;
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}

</style>
<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>
<div id="infocontainer">
    <div class="linecontainer" id="line1container">
        <span class="back"></span>
        <span class="front"></span>
    </div>
    <div class="linecontainer" id="line2container">
        <span class="back"></span>
        <span class="front"></span>
    </div>
    <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>
    <div id="progressbg">
        <div id="progressbar"></div>
    </div>
    <div id="waveformcontainer">
        <canvas id="waveformbg" class="waveform" width="716" height="32"></canvas>
        <div id="waveformprogresscontainer">
            <canvas id="waveform" class="waveform" width="716" height="32"></canvas>
        </div>
    </div>
</div>
<div id="albumart" class="reducedAlphaAvailable">
    <div class="back"></div>
    <div class="front"></div>
</div>
1 Like

Working like a charm! Thanks a lot! Much better…

I’ll check that thread you mentioned. Oh and btw: my core is on Mac. No issues!

2 Likes

Morning,

just checking I’m reading the above correctly - this won’t work if you are using ROCK?

With ROCK it is not possible to modify the corresponding files. I have helped myself by using the browser extension Stylus. Of course, this does not work with a Chromecast display.

1 Like

Would like this too.
Oddly enough, my NAD M33 HDMI out automatically displays on my TV the currently playing album cover if I stream to it via Roon and that actually has some icons on it, like the Roon logo and the MQA badge.
Seems odd that the Roon display to Chromecast doesn’t have much information like bit rate and sample rate along with info like MQA and source (Tidal, Qubuz etc)

These customs screens look great! Can someone post a simple description of how to do this? For someone without web design/ coding experience

Thanks

2 Likes

Could you let me know how to style the waveform? I’ve managed to sort out the rest of the page elements to my liking, but can’t seem to get the waveform to change colour.

Hi @DaveN,

it also took me some time to figure this out, but as far as I can remember, I added the following code to display_ui.html:

#waveformcontainer {
[...]
    transition: opacity 1s linear;
    filter:  invert(60%) sepia() hue-rotate(150deg) saturate(180%);
    -webkit-filter: invert(60%) sepia() hue-rotate(150deg) saturate(180%);
}

This may not be a “clean” solution, but it works for me.

For more details, see here:

Thanks, I didn’t think to use ‘invert’ - that’s done the trick :slight_smile:

1 Like

Thanks again. I started with your code, made a couple of tweaks, and ended up disabling the waveform - I’m only using a Nest Hub for the display so thought the progress bar looked better on the small screen.

And in case anyone’s wondering, I’m displaying the initial screen in chrome and casting to the Nest Hub, hence the web page image below.

1 Like

The waveform is one of the things I like most about the display. But in your case it’s probably more practical without it.
By the way, thanks to you I discovered an error in my code for the color of the progressbar for streamed songs, which I have since corrected.

1 Like

If you’re still interested I can help you! How are you currently using/connecting the roon display and what is your core?

This layout I like I found the display_ui.html on my mac. And can edit it whit atom. But where can I find the code for the 4k layout? And when I edit the file on my mac and display it on apple tv should that change the layout? I am running roonserver on top of ubuntuserver. In the server therr is no display_ui.html

I’d like to see something like this built-in to the app. Just basic customisations like lyrics/no lyrics, band photo/no band photo, changing the colour of the bottom bar. I think it looks a lot worse with the band photo than it does without. No idea if there’s an easy fix anyone can share to not show band artist images.

I like the design in Joe_Gratz’s original post but I have no idea if that’s possible to download or install anymore.