About Login screen with alternating background

[Guest]

 

Hi,
This image shows the layout of the login screen of my embyserver 4420. I remember reading here on the forum (I can't find the topic) where @@Luke commented that it is possible to have dynamic backgroud images, that is, having the login screen, the automatic exchange of images, so that they alternate. That would be spectacular.

Can anyone help with this topic?

Thank you very much since now.

Edited July 19, 2022 by CarlosLima

[Happy2Play 9442]

Posts 320 and 324

 

@@chef do you have some ideas?

[rechigo 294]

Something like this: 

(obviously changing alternating slower):

 

Edited April 25, 2020 by rechigo

[Guest]

That's exactly what I would like to have.

[rechigo 294]

sorry for taking so long, been dockerizing my server...

 

i slightly tweaked it from my original screenshot, it now includes some transitions to transition between backgrounds and preloads the images for smoother transition

 

code (babelified for compatibility):

simply place it in index.html after the apploader: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js"></script>

    <script>
        (async function () {
            var backgroundList = ["https://i.memester.xyz/u/s7f.jpg", "https://i.memester.xyz/u/5fw.jpg", "https://i.memester.xyz/u/0xb.jpg", "https://i.memester.xyz/u/ada.jpg"];
            var backgroundChangeIntervalSeconds = 5;
            
            // promisify image loading
            var loadImage = function loadImage(source) {
                return new Promise(function (resolve) {
                var image = new Image();
                image.src = source;

                image.onload = function () {
                    return resolve();
                };
                });
            };

            var setBackground = function setBackground() {
                // create an array from the nodeList of loginPages
                var loginPages = Array.from(document.querySelectorAll("#loginPage")); // only proceed if there are login pages that are visible               

                if (loginPages.filter(function (page) {
                return page.classList.contains("hide");
                }).length < loginPages.length) {
                // go through each login page and apply the styling
                loginPages.forEach(function (page) {
                    return page.style = "\n                            background: url(".concat(backgroundList[Math.floor(Math.random() * backgroundList.length)], ") no-repeat center center fixed; \n                            -webkit-background-size: cover; \n                            -moz-background-size: cover; \n                            -o-background-size: cover; \n                            transition: background-image 0.5s ease-in-out; \n                            -webkit-transition: background-image 0.5s ease-in-out;\n                        ");
                });
                }
            };

            document.arrive("#loginPage", setBackground); // preload all images

            for (var _i = 0, _backgroundList = backgroundList; _i < _backgroundList.length; _i++) {
                var backgroundImg = _backgroundList[_i];
                await loadImage(backgroundImg);
            } // update via interval we set 


            setInterval(setBackground, backgroundChangeIntervalSeconds * 1000);
            })();
    </script>

change this to how often you want the background to change:

var backgroundChangeIntervalSeconds = 2;

add as many images as you want into here:

var backgroundList = ["url1", "url2", "url3"];

[Guest]

Hi,

Thank you very much for your commitment.

This image is from the file INDEX.HTML. Should your code be applied on line number 69?

Thanks

 

[rechigo 294]

Hi,

 

Thank you very much for your commitment.

 

This image is from the file INDEX.HTML. Should your code be applied on line number 69

yes

[Guest]

Not working

[rechigo 294]

What do you see in the browser console

[Happy2Play 9442]

Did you clear your browser cache to load the new code?  Did you apply page id?

Edited April 26, 2020 by Happy2Play

[Guest]

Did you clear your browser cache to load the new code?  Did you apply page id?

 

Yes yes.

[Happy2Play 9442]

Yes yes.

I just applied page id (id="loginPage") to login.html and manuallogin.html, and that script to index.html and had no issue.

[rechigo 294]

Could you possibly send your whole index.html?

 

Sent from my Galaxy S10

[Guest]

Hi,
Thanks for the effort and patience.
I think I found 'my mistake'.
Can the login.html and manuallogin.html file have both IDs?
id = "loginPage" id = "manualloginPage" ???
is that I already had id = "manualloginPage" in both.
When applying id = "loginPage" I realized that I have overridden some CSS that I use, like hiding buttons Please, Enter and the Remember me box.
Apart from those small problems, yes, now it worked.

[rechigo 294]

Yeah that's the problem, elements can only have one ID

 

Sent from my Galaxy S10

[Guest]

Yeah that's the problem, elements can only have one ID

 

Sent from my Galaxy S10

 

 

Understand.

Too bad, but I forgot the idea.

Very grateful for all the effort and time dedicated.

[rechigo 294]

I can tweak it to use manualloginPage instead of loginPage if you's like

 

Sent from my Galaxy S10

[Guest]

I can tweak it to use manualloginPage instead of loginPage if you's like

 

Sent from my Galaxy S10

 

Oh great.

That would definitely be fantastic.

 

I do not use the login screen, as all users are hidden.

So my emby always starts directly on the manual login screen.

Thank you very much.

Edited April 26, 2020 by CarlosLima

[Happy2Play 9442]

Isn't is as easy as appling your page id into the script?  So change "#loginPage" to "#manualloginPage".

[Guest]

I already have the ID = "manualloginPage" in the login.html and manuallogin.html files and that way it didn't work for me.

[rechigo 294]

Isn't is as easy as appling your page id into the script? So change "#loginPage" to "#manualloginPage".

yes

 

Sent from my Galaxy S10

[Happy2Play 9442]

I already have the ID = "manualloginPage" in the login.html and manuallogin.html files and that way it didn't work for me.

 

So you apply that id in the script, there are two references to "#loginPage" change to "#manualloginPage".

[Guest]

 

Doubt of layman.
Should I change these two locations to manualloginPage ??

[Happy2Play 9442]

 

Doubt of layman.

Should I change these two locations to manualloginPage ??

 

Yes those need to reflect the page id you are targeting.

[Guest]

Hi,

I changed it to "#manualloginPage" and it worked perfect now. Thank you very much.

Edited April 26, 2020 by CarlosLima