MMM-Fireworks

[chrisfr1976]

Hi,

I’ve created a quick module for New Year’s Eve or other events you’d like to highlight on your mirror.

The MMM-Fireworks module brings a visually stunning fireworks display to your MagicMirror, designed to celebrate special occasions. The fireworks animation runs best in the fullscreen_above region, creating an immersive experience. The start time and duration of the display are configurable via the config.js file.

MMM-Fireworks

Have fun and take care :-)
Chris.

[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….