[NodeBB] Welcome Message with an automatic footer logo change cycle

[DownPW]

Hi @phenomlab

As discussed in PM, I put the request here that will serve everyone.

At my demand, we already have the Welcome Message script with a change of footer logo that works very well for each time period (here for reference) :

https://sudonix.com/topic/233/nodebb-welcome-message-with-logo-footer-change/

I submit another idea which is the following (resume of PM with you Mark):

–> The same script as actually with the addition
of a cycle of different/several logo with automaticaly change every XX seconds/minutes for each period without refresh the page.

• In the end, we would have as many cycles as there are periods of time.

• 1 cycle = 1 time period (0h-6h, 6h-8h etc.) with different logos each time that would change every X minutes/seconds automatically.

• an animation, like fade, scroll, etc for the images, or should they just be replaced. Like you want Mark

• Increase CPU usage on the client, so we have to add pauses periodically to prevent the visiting user browser taking too much RAM and CPU.

[phenomlab]

@DownPW As JavaScript (unless it’s server side) has no access to the file system, we can’t use a native NodeJS function like the below to list the files

const testFolder = '/home/nodebb/nodebb/public/customlogo/afternoon';
const fs = require('fs');

fs.readdir(testFolder, (err, files) => {
  files.forEach(file => {
    console.log(file);
  });
});

It’s pretty simple to do this with PHP, and then pass back the variables to JS for client side processing. However, if you don’t have PHP installed, then of course this won’t work. However, it is possible to form an array in jQuery and use that with a timer to change the image. This is actual working code designed in your test environment

NB - this is a proof of concept, and is not the completed script. The idea is to test the functionality, and then if it works as desired, we increase the scope, and implement across the original code we already have

// ------------------------------------------
// Rotate footer images at 60 second interval
// ------------------------------------------
    // Provide a list of the files we need, less the .png extension as we add this automatically
    var files = ['01', '02', '03'];
    // Set the path where the images are stored
    var thepath = "/assets/customlogo/cycle/evening/";
    // Timer starting point
    var offset = 0;
    // Loop through each array item (files), and after 60 seconds, replace the current image with the next index in the array.
    // We fade out the image first, then fade in the new one (0.4 seconds)
    $(files).each(function(logo, index) {
        setTimeout(function() {
            $("#thislogo").fadeOut('slow', function() {
                $('#thislogo').on('load', function() {
                    $('#thislogo').fadeIn(400);
                }).attr("src", thepath + index + '.png');
            });
            // Place a log in the console so we can see that the script is active
            console.log("Switching footer image to " + thepath + index + ".png");
        }, 60000 + offset);
        // Add another 60 seconds and restart the loop on the next array index
        offset += 60000;
        // Once the file array is exhausted, exit
    });

This initially loads the selected image according to the previous code I provided, then waits 60 seconds, and changes to the next in the cycle, so 01, 02, 03 etc until it reaches the end where it will exit.

Important

• The script will start again and add the default image selected for that time period if the page is reloaded, or the home logo / text is clicked, as this is the equivalent of reloading the site.
• The script does not care what you are doing at the time of change, as it uses it’s own timer outside of any callback functions in NodeBB - it will execute regardless
• The exit is graceful, and designed not to chew the CPU or memory of the visiting host. The recommendation would be to take the time period, divide it by the number of images you have, and then alter the 60 second value (denoted as 60000) to the value you land up with.
• The interval is recorded in milliseconds (see below for calculation)

So, based on this from the previous script

	if (thehours >= 0 && thehours < 6) {
		themessage = night; 
		theicon = "fa-solid fa-moon";
		thelogo = "/assets/customlogo/night/pw_night.png";
}

Note that an additional } has been added here for cosmetic purposes, and does not appear in the original script

6 hours (or 360,000ms = 60 minutes x 6 = 360) with 4 images would equate to 60000 x 60 = 3600000 / 4 meaning your interval period would be 900000 milliseconds or 15 minutes.

My advice would be to play with this first to get yourself familiar with the concept, and then we can factor into the previously provided code to make the one function

[DownPW]

– yeah Mark @phenomlab , I understand the method of calcul for CPU/mem Host.

– One question, why millisecond and not seconds for example?

– For this:

var files = ['01', '02', '03'];

–> I noticed that I have obliged to mark all the files to the script.
If I have 10 images, I am obliged to indicate them:

var files = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10',];

–> Possible to change that or not ? Not a big deal if it’s not possible

– I also noticed that once arrived on the last image, there is no loop that redirects to the first image.

–> It would be really cool to add a loop.

[DownPW]

EDIT:

if I understand correctly the code: no loop, just calcul off how many times logo appears for each period time. With this = no loop

But it will be very cool if we have a loop if we want to make them cycle a little faster

[phenomlab]

@DownPW

why millisecond and not seconds for example?

It’s always been that way - not sure why, but it has

If I have 10 images, I am obliged to indicate them:

Yes, because of this point I made in the very first post

As JavaScript (unless it’s server side) has no access to the file system

For security reasons, access will always be denied. Imagine a situation where client side JS did in fact have access to the server’s file system - you could easily bring down a server by simply planting a malicious payload.

I also noticed that once arrived on the last image, there is no loop that redirects to the first image.

This is intentional. The reason for this is that when the standard setInterval function fires (example below)

setInterval(function () {
        console.log('seems to work');
    },30000);

It will require the issuance of clearInterval in order to stop it - by default, setInterval will run in a loop and will run forever, and if you reload the page, you then have two processes running because the first was never stopped. Once each time period has passed, you’d also need to fire clearInterval to stop it. Another issue here is that this may not stop other rogue processes launched by browser reloads etc - essentially, you land up with a mess, and unreliable rotation of images.

It’s for this reason that I provided the below formulae as an example to ensure you get a graceful shutdown of the running process

6 hours (or 360,000ms = 60 minutes x 6 = 360) with 4 images would equate to 60000 x 60 = 3600000 / 4 meaning your interval period would be 900000 milliseconds or 15 minutes.

It would be really cool to add a loop.

If you still want to do this, you can, but I wouldn’t honestly recommend it for the reasons I’ve provided above.

[DownPW]

@phenomlab said in [NodeBB] Welcome Message with an automatic footer logo change cycle:

@DownPW

why millisecond and not seconds for example?

It’s always been that way - not sure why, but it has

Ok I understand. In JS, it’s like that. Ok

If I have 10 images, I am obliged to indicate them:

Yes, because of this point I made in the very first post

As JavaScript (unless it’s server side) has no access to the file system

It’s Logical

For security reasons, access will always be denied. Imagine a situation where client side JS did in fact have access to the server’s file system - you could easily bring down a server by simply planting a malicious payload.

I also noticed that once arrived on the last image, there is no loop that redirects to the first image.

This is intentional. The reason for this is that when the standard setInterval function fires (example below)

setInterval(function () {
        console.log('seems to work');
    },30000);

It will require the issuance of clearInterval in order to stop it - by default, setInterval will run in a loop and will run forever, and if you reload the page, you then have two processes running because the first was never stopped. Once each time period has passed, you’d also need to fire clearInterval to stop it. Another issue here is that this may not stop other rogue processes launched by browser reloads etc - essentially, you land up with a mess, and unreliable rotation of images.

It’s for this reason that I provided the below formulae as an example to ensure you get a graceful shutdown of the running process

6 hours (or 360,000ms = 60 minutes x 6 = 360) with 4 images would equate to 60000 x 60 = 3600000 / 4 meaning your interval period would be 900000 milliseconds or 15 minutes.

It’s better for perf and kill all process and avoid too much process on the broswer client side on any reload on any host.

I thought I understood the calculation but I don’t feel like it in the end.
If I understand correctly, your result is for 1 hour? Each image appears every 15min in 1 hours. so each image appears 6 times ?

can you better explain this calculation please ?

It would be really cool to add a loop.

If you still want to do this, you can, but I wouldn’t honestly recommend it for the reasons I’ve provided above.

I trust you 100%.
If you say that it’s not advised side perf = No problem

[DownPW]

@phenomalb

Example 1

period of Time (evening) = 4h
we have 4 images

1h= 3 600 000 Mlliseconds
3 600 000 / 4 images = 900 000 Milliseconds = 15 min

each images appears every 15 minutes for 1 hours
each images appears 4 times for 4 hours

/ Place a log in the console so we can see that the script is active
            console.log("Switching footer image to " + thepath + index + ".png");
        }, 900000 + offset);
        // Add another 60 seconds and restart the loop on the next array index
        offset += 900000;
        // Once the file array is exhausted, exit
    });

Example 2

period of Time (afternoon) = 6h
we have 13 images

1h= 3 600 000 Mlliseconds
3 600 000 / 13 images = 276923,07 Milliseconds = 4.615383 min

each images appears every 4.615383 minutes
each images appears 6 times for 6 hours

/ Place a log in the console so we can see that the script is active
            console.log("Switching footer image to " + thepath + index + ".png");
        }, 276923,07 + offset);
        // Add another 60 seconds and restart the loop on the next array index
        offset += 276923,07;
        // Once the file array is exhausted, exit
    });

[phenomlab]

@DownPW Yes, this is pretty much it. Whilst I appreciate that this isn’t fully what you wanted, with the script I already provided, this is the only way. It doesn’t need to be one hour either. If you had a 6 hour window, then

36000000 x 6 = 216000000 which is the full 6 hours, then divided by the amount of images, so if you had 13 images, you’d land up with

216000000 / 13 = 16615384.615384615 which isn’t exactly easy on the math, but would have to be this way to fit into the time period being defined. If you wanted them to cycle fully every hour, then the calculation you provided is correct.

We could try this with a loop and attempt to kill at each time period change, but in my view, this would prove problematic for the reasons I already stated - unless we issue a kill .onload which in turn would [sic] kill all running processes on page load and restart them dependent on the time period of the day.

Overall, this is quite complex and could land up locking your site or the user’s browser if not coded correctly. In all honesty, for the cosmetic goal or benefit, I really don’t think it’s palatable from experience perspective.

[DownPW]

@phenomlab

ok so what would be next step?
We just have to change the cycles automatically according to each period ?

or add the script as many times as there are periods by changing the variable?

var thepath = “/assets/customlogo/cycle/afternoon/”;

I think it is possible to achieve the goal, I have already seen this kind of thing on a site without any perf problems.

[phenomlab]

@DownPW

We just have to change the cycles automatically according to each period ?

Yes, this is by far the safest

I think it is possible to achieve the goal, I have already seen this kind of thing on a site without any perf problems.

It’s certainly possible, but not without issues or impact to performance (in my view)