Jump to content

About Login screen with alternating background


CarlosLima
Go to solution Solved by rechigo,

Recommended Posts

CarlosLima

5ea30551611db_cloudpromo2020semlogos.jpg

 

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 by CarlosLima
Link to comment
Share on other sites

rechigo

Something like this: 

(obviously changing alternating slower):

 

vbj.gif

Edited by rechigo
  • Like 1
Link to comment
Share on other sites

  • Solution
rechigo

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"];
  • Like 3
Link to comment
Share on other sites

CarlosLima

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

 

5ea4366cd3082_Anotao20200425100536.png

Link to comment
Share on other sites

rechigo

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

Link to comment
Share on other sites

Happy2Play

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

Edited by Happy2Play
Link to comment
Share on other sites

CarlosLima

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

 

Yes yes.

Link to comment
Share on other sites

Happy2Play

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.

Link to comment
Share on other sites

CarlosLima

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.

Link to comment
Share on other sites

CarlosLima

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.

Link to comment
Share on other sites

rechigo

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

 

Sent from my Galaxy S10

  • Like 1
Link to comment
Share on other sites

CarlosLima

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 by CarlosLima
Link to comment
Share on other sites

Happy2Play

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

Link to comment
Share on other sites

CarlosLima

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

Link to comment
Share on other sites

rechigo

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

yes

 

Sent from my Galaxy S10

  • Like 1
Link to comment
Share on other sites

Happy2Play

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

  • Like 1
Link to comment
Share on other sites

CarlosLima

5ea4f17915767_Screenshot.png

 

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

Link to comment
Share on other sites

Happy2Play

5ea4f17915767_Screenshot.png

 

Doubt of layman.

Should I change these two locations to manualloginPage ??

 

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

Link to comment
Share on other sites

CarlosLima

Hi,

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

Edited by CarlosLima
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...