CarlosLima 148 Posted April 24, 2020 Share Posted April 24, 2020 (edited) 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 Link to comment Share on other sites More sharing options...
Happy2Play 8139 Posted April 24, 2020 Share Posted April 24, 2020 Posts 320 and 324 @@chef do you have some ideas? Link to comment Share on other sites More sharing options...
rechigo 293 Posted April 25, 2020 Share Posted April 25, 2020 (edited) Something like this: (obviously changing alternating slower): Edited April 25, 2020 by rechigo 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted April 25, 2020 Author Share Posted April 25, 2020 That's exactly what I would like to have. Link to comment Share on other sites More sharing options...
Solution rechigo 293 Posted April 25, 2020 Solution Share Posted April 25, 2020 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"]; 3 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted April 25, 2020 Author Share Posted April 25, 2020 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 Link to comment Share on other sites More sharing options...
rechigo 293 Posted April 25, 2020 Share Posted April 25, 2020 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 More sharing options...
CarlosLima 148 Posted April 25, 2020 Author Share Posted April 25, 2020 Not working Link to comment Share on other sites More sharing options...
rechigo 293 Posted April 25, 2020 Share Posted April 25, 2020 What do you see in the browser console Link to comment Share on other sites More sharing options...
Happy2Play 8139 Posted April 26, 2020 Share Posted April 26, 2020 (edited) Did you clear your browser cache to load the new code? Did you apply page id? Edited April 26, 2020 by Happy2Play Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted April 26, 2020 Author Share Posted April 26, 2020 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 More sharing options...
Happy2Play 8139 Posted April 26, 2020 Share Posted April 26, 2020 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 More sharing options...
rechigo 293 Posted April 26, 2020 Share Posted April 26, 2020 Could you possibly send your whole index.html? Sent from my Galaxy S10 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted April 26, 2020 Author Share Posted April 26, 2020 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 More sharing options...
rechigo 293 Posted April 26, 2020 Share Posted April 26, 2020 Yeah that's the problem, elements can only have one ID Sent from my Galaxy S10 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted April 26, 2020 Author Share Posted April 26, 2020 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 More sharing options...
rechigo 293 Posted April 26, 2020 Share Posted April 26, 2020 I can tweak it to use manualloginPage instead of loginPage if you's like Sent from my Galaxy S10 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted April 26, 2020 Author Share Posted April 26, 2020 (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 April 26, 2020 by CarlosLima Link to comment Share on other sites More sharing options...
Happy2Play 8139 Posted April 26, 2020 Share Posted April 26, 2020 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 More sharing options...
CarlosLima 148 Posted April 26, 2020 Author Share Posted April 26, 2020 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 More sharing options...
rechigo 293 Posted April 26, 2020 Share Posted April 26, 2020 Isn't is as easy as appling your page id into the script? So change "#loginPage" to "#manualloginPage".yes Sent from my Galaxy S10 1 Link to comment Share on other sites More sharing options...
Happy2Play 8139 Posted April 26, 2020 Share Posted April 26, 2020 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". 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted April 26, 2020 Author Share Posted April 26, 2020 Doubt of layman.Should I change these two locations to manualloginPage ?? Link to comment Share on other sites More sharing options...
Happy2Play 8139 Posted April 26, 2020 Share Posted April 26, 2020 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 More sharing options...
CarlosLima 148 Posted April 26, 2020 Author Share Posted April 26, 2020 (edited) Hi,I changed it to "#manualloginPage" and it worked perfect now. Thank you very much. Edited April 26, 2020 by CarlosLima Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now