MMM-Fireworks

[plainbroke]

@sdetweil
worked on my mirror

[chrisfr1976]

I have completely reworked the MMM-Fireworks module!

New:

• It is now using the p5.js library. So it is now faster and I’ve added more config options.
• Also the timing problem ist solved. You can define a start date and time. If you need to restart your mm inbetween it continues.
• you can install it today and enjoy on next new years eve. (The JavaScript’s setTimeout is solved here (has a maximum delay roughly 2³¹–1 milliseconds - only 24.8 days)
• Added a text overlay
• runs as before in fullscreen but also “in a box” as every other module
• And the best: the explosion effect is now really nice!

[chrisfr1976]

@chrisfr1976 Hi,
maybe interesting also for others: There is a canvas opacity parameter set now. So you can can keep all your stuff visible in the background while the fireworks is dancing on your mirror. I didn’t had this feature in mind, but I got this request on GitHub. I like that, too ;-)

A picture from my playground to explain what I mean:

[chrisfr1976]

Hi,
I’ve just released an update to solve several requests and problems.

https://github.com/ChrisF1976/MMM-Fireworks

• Multiple Scheduled Events:
  • The module now accepts an array of scheduled events (each with its own start time and text message). At each event time, the fireworks start with the corresponding overlay text.
• Two separate notifications have been added:
  • NotificationStart (e.g. “FireFireFire”) starts the fireworks immediately using either the notification’s payload text or a default (textNotification).
  • NotificationStop (e.g. “StopFire”) stops the fireworks immediately if they are running.
  • When a notification is received, it overrides the scheduled events temporarily without affecting future scheduled shows.

See also updated config!

You can test the notifications with this simple module. I used it during development. I created a small start and stop button you can use.
If you want to test the notification sender module you need to change the “fullscreen_above” to any other region of the mirror. Otherwise you cannot click on the buttons because they’re “behind” the MMM-Fireworks module…

Config:

{
  module: "MMM-NotificationSender",
  position: "top_left",
  config: {
    startNotification: "FireFireFire",
    stopNotification: "StopFire",
    startText: "Test me!", //leave blank to use text from MMM-Fireworks
    stopText: "Stop Fire", //nothing happens currently - maybe not needed
  }
},

Module:

Module.register("MMM-NotificationSender", {
  // Default configuration options. These can be overwritten in config.js.
  defaults: {
    // Notification names to send. Other modules can listen to these names.
    startNotification: "START_NOTIFICATION",
    stopNotification: "STOP_NOTIFICATION",
    // Text payloads for the notifications.
    startText: "This is a start notification.",
    stopText: "This is a stop notification."
  },

  // Called when the module is started
  start: function() {
    Log.info("Starting module: " + this.name);
  },

  // Override the getDom method to create your custom UI.
  getDom: function() {
    // Create a wrapper element to contain the buttons.
    var wrapper = document.createElement("div");
    wrapper.style.textAlign = "center";

    // Create the Start button
    var startBtn = document.createElement("button");
    startBtn.innerHTML = "Start";
    startBtn.style.marginRight = "10px";
    startBtn.addEventListener("click", this.sendStartNotification.bind(this));
    wrapper.appendChild(startBtn);

    // Create the Stop button
    var stopBtn = document.createElement("button");
    stopBtn.innerHTML = "Stop";
    stopBtn.addEventListener("click", this.sendStopNotification.bind(this));
    wrapper.appendChild(stopBtn);

    return wrapper;
  },

  // Function to send the start notification
  sendStartNotification: function() {
    // Log to console and MagicMirror logs to check the button click event.
    console.log("Start button pressed. Sending start notification...");
    Log.info(
      "Sending start notification: " +
        this.config.startNotification +
        " with payload: " +
        JSON.stringify({ text: this.config.startText })
    );

    // Send the notification with the configured name and payload.
    this.sendNotification(this.config.startNotification, { text: this.config.startText });
  },

  // Function to send the stop notification
  sendStopNotification: function() {
    // Log to console and MagicMirror logs to check the button click event.
    console.log("Stop button pressed. Sending stop notification...");
    Log.info(
      "Sending stop notification: " +
        this.config.stopNotification +
        " with payload: " +
        JSON.stringify({ text: this.config.stopText })
    );

    // Send the notification with the configured name and payload.
    this.sendNotification(this.config.stopNotification, { text: this.config.stopText });
  }
});

[almightyyoshi]

@chrisfr1976 Thanks for this. I installed it in April when we were selling our house and used it as a welcome sign when people came through. Question for you: would you be able to make it so we can put in just a month and day for a start date? I was hoping to put in a list of birthdays and not have to remember to change the year.