MMM-Fireworks

sdetweil

@chrisfr1976 awesome

chrisfr1976

Hello,

a short update since time is running out :)

I’ve modified the code a little. In my set up I had some performance problems with the animation.

So I put all other modules in the “Hide” during the animation is running. Afterwards everything will come back (so the plan).

I don’t know if everybody likes or needs this. So I show the modified code just here.

Replace the complete code in “MMM-Fireworks.js” with this:

Module.register("MMM-Fireworks", {
    defaults: {
        startDateTime: "2024-12-31T23:59:00", // ISO format
        duration: 60000, // Duration in milliseconds
    },

    start: function () {
        this.fireworksActive = false;
    },

    getDom: function () {
        const wrapper = document.createElement("div");
        wrapper.id = "fireworksContainer";
        return wrapper;
    },

    notificationReceived: function (notification, payload, sender) {
        if (notification === "DOM_OBJECTS_CREATED") {
            this.scheduleFireworks();
        }
    },

    scheduleFireworks: function () {
        const startTime = new Date(this.config.startDateTime).getTime();
        const currentTime = Date.now();
        const delay = startTime - currentTime;

        if (delay > 0) {
            setTimeout(() => this.startFireworks(), delay);
        } else {
            console.warn("Fireworks start time has already passed.");
        }
    },

    startFireworks: function () {
        this.fireworksActive = true;
        const container = document.getElementById("fireworksContainer");
        container.classList.add("fullscreen");

        const canvas = document.createElement("canvas");
        canvas.id = "fireworksCanvas";
        container.appendChild(canvas);

        this.sendNotificationToModules("HIDE"); // Module ausblenden

        const fireworks = new Fireworks(canvas);
        fireworks.start();

        setTimeout(() => {
            this.stopFireworks(fireworks, container);
        }, this.config.duration);
    },

    stopFireworks: function (fireworks, container) {
        fireworks.stop();
        container.innerHTML = ""; // Clear the canvas
        this.fireworksActive = false;
        this.sendNotificationToModules("SHOW"); // Module wieder einblenden
    },

    sendNotificationToModules: function (action) {
        MM.getModules().enumerate((module) => {
            if (module.name !== "MMM-Fireworks") {
                if (action === "HIDE") {
                    module.hide(500); // Mit Animation ausblenden
                } else if (action === "SHOW") {
                    module.show(500); // Mit Animation einblenden
                }
            }
        });
    },

    getStyles: function () {
        return ["MMM-Fireworks.css"];
    },

    getScripts: function () {
        return ["fireworks.js"];
    }
});

Party on!

Cheers Chris.

chrisfr1976

Hello,

unfortunately even more optimizations were necessary. So I update the repository.

New:

hides all modules during animation
suspends all modules during animation

Reduced effects:

createExplosion(x, y) {
        const particleCount = 25; // was 50

this.particles.forEach((p) => {
            p.x += p.vx;
            p.y += p.vy;
            p.vy += 0.01; // less gravity
            p.alpha -= 0.01;
        });

    setup() {
        this.canvas.width = this.width*0.95 //reduced width 
        this.canvas.height = this.height*0.95 //reduced height
        window.addEventListener("resize", () => this.resize());
    }

And updated CSS to be in the middle of the screen again.

Hopefully you’ll celebrate this, too!

plainbroke

Worked for me earlier when I tested it this afternoon.
Nice module…

com1cedric

@chrisfr1976

Hello!

great idea, you module !

but does it really work ? it does not appear on my mirror, after installing it.

Can you please re-check on your side ?

Thanks in advance and have a good evening,

Cédric

sdetweil

@com1cedric what position did you set it to?

chrisfr1976

@com1cedric see my answer on GitHub. It only starts if the start time is exactly now or in the future.

sdetweil

@chrisfr1976 why would you want it in the past?

oh, and NOW is impossible to catch

chrisfr1976

@sdetweil no, the start time is relevant. If the start time is in the past and the effect time may be stll okay like 3652460601000, the effect does not start. This could be the problem here. So you really need to wait for the defined time in the config.
I‘ve spent several minutes with waiting….

sdetweil

@chrisfr1976 if the start time is in the past and the event time is in the future, then the start time should be now. (however that gets calculated, literal or adjusted offset…)

I am not looking at the doc or code