Customized Displays: OK to share?

HeyHoh666 · February 12, 2021, 12:40pm

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

Lawshredpower · April 10, 2021, 12:34pm

Is this still working?

florib · April 10, 2021, 10:12pm

For me, yes. No changes.

Lawshredpower · April 16, 2021, 11:13am

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

florib · April 16, 2021, 3:07pm

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.

Lawshredpower · April 16, 2021, 7:42pm

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.

florib · April 16, 2021, 7:45pm

Have you restarted your Roon server?

Lawshredpower · April 16, 2021, 7:47pm

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

florib · April 16, 2021, 7:54pm

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.

florib · April 16, 2021, 8:01pm

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.

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

Lawshredpower · April 16, 2021, 8:29pm

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

florib · April 16, 2021, 8:59pm

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).

momo · April 16, 2021, 11:48pm

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.

Kai296 · May 1, 2021, 2:38pm

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.

Kai296 · May 1, 2021, 2:39pm

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>

Lawshredpower · May 1, 2021, 3:25pm

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!

Simon_Burns · May 3, 2021, 7:55am

Morning,

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

florib · May 3, 2021, 4:48pm

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.

jayrammusic · May 24, 2021, 10:53pm

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)

Jonathan_Moore · June 3, 2021, 8:03pm

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

Thanks