Jump to content
CarlosLima

ANSWERED Login screen with alternating background

Recommended Posts

CarlosLima
Posted (edited)

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

Share this post


Link to post
Share on other sites
Happy2Play

Posts 320 and 324

 

@@chef do you have some ideas?

Share this post


Link to post
Share on other sites
rechigo
Posted (edited)

Something like this: 

(obviously changing alternating slower):

 

vbj.gif

Edited by rechigo
  • Like 1

Share this post


Link to post
Share on other sites
CarlosLima

That's exactly what I would like to have.

Share this post


Link to post
Share on other sites
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 2

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
CarlosLima

Not working

Share this post


Link to post
Share on other sites
rechigo

What do you see in the browser console

Share this post


Link to post
Share on other sites
Happy2Play
Posted (edited)

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

Edited by Happy2Play

Share this post


Link to post
Share on other sites
CarlosLima

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

 

Yes yes.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
rechigo

Could you possibly send your whole index.html?

 

Sent from my Galaxy S10

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
rechigo

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

 

Sent from my Galaxy S10

  • Like 1

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
CarlosLima
Posted (edited)

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

Share this post


Link to post
Share on other sites
Happy2Play

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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
CarlosLima

5ea4f17915767_Screenshot.png

 

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
CarlosLima
Posted (edited)

Hi,

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

Edited by CarlosLima

Share this post


Link to post
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...