MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    MMM-Fireworks

    Scheduled Pinned Locked Moved Entertainment
    15 Posts 4 Posters 1.7k Views 4 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C Offline
      chrisfr1976
      last edited by

      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

      MMM-Fireworks

      Have fun and take care :-)
      Chris.

      Regards, Chris.

      S C 2 Replies Last reply Reply Quote 3
      • S Offline
        sdetweil @chrisfr1976
        last edited by

        @chrisfr1976 awesome

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • C Offline
          chrisfr1976 @chrisfr1976
          last edited by

          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.

          Regards, Chris.

          C 1 Reply Last reply Reply Quote 0
          • C Offline
            chrisfr1976 @chrisfr1976
            last edited by

            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!

            Regards, Chris.

            C 1 Reply Last reply Reply Quote 1
            • plainbrokeP Offline
              plainbroke
              last edited by

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

              Slow learner. But trying anyways.

              1 Reply Last reply Reply Quote 0
              • C Offline
                com1cedric @chrisfr1976
                last edited by

                @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

                S C 2 Replies Last reply Reply Quote 0
                • S Offline
                  sdetweil @com1cedric
                  last edited by

                  @com1cedric what position did you set it to?

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • C Offline
                    chrisfr1976 @com1cedric
                    last edited by

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

                    Regards, Chris.

                    S 1 Reply Last reply Reply Quote 0
                    • S Offline
                      sdetweil @chrisfr1976
                      last edited by

                      @chrisfr1976 why would you want it in the past?

                      oh, and NOW is impossible to catch

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      C 1 Reply Last reply Reply Quote 0
                      • C Offline
                        chrisfr1976 @sdetweil
                        last edited by

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

                        Regards, Chris.

                        S 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy