I am currently trying to create a module that will display snow falling on the screen. I’m sure I am missing something but, from what I can tell the module is loading in the logs, just not displaying the snow falling. Any help would be appreciated.

MMM-SnowFlakes.js

Module.register("MMM-Snowflakes", {
        // Default configuration options
        defaults: {
                totalSnowflakes: 50, // Number of snowflakes
        },

        // Start method
        start: function () {
                Log.info("Starting module: " + this.name);
        },

        // Override the getDom method to provide the HTML content
        getDom: function () {
                const wrapper = document.createElement("div");
                wrapper.className = "initial-snow"; // The main container for the snowflakes
                return wrapper;
        },

        // Load the CSS and external JS file
        getStyles: function () {
                return ["MMM-Snowflakes.css"];
        },

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

        // Pass configuration to the client-side script
        getConfig: function () {
                return this.config;
        },
});

snowflakes.js

document.addEventListener("DOMContentLoaded", () => {
        const snowContainer = document.querySelector(".initial-snow");
        const totalSnowflakes = window.ModuleConfig.totalSnowflakes || 50; // Fallback if config is not loaded

        // Snowflake variants
        const snowflakeVariants = ["❄", "❅", "❆"];

        for (let i = 0; i < totalSnowflakes; i++) {
                const snowflake = document.createElement("span");
                snowflake.classList.add("snowflake");

                // Randomly pick a snowflake variant
                const variantIndex = Math.floor(Math.random() * snowflakeVariants.length);
                snowflake.innerHTML = snowflakeVariants[variantIndex];

                // Randomize size, position, and animation duration
                const size = Math.random() * 0.8 + 0.2; // Size between 0.2 and 1
                const left = Math.random() * 100; // Random horizontal position
                const duration = Math.random() * 5 + 5; // Duration between 5s and 10s
                const blur = Math.random() < 0.3 ? "blur(1px)" : "none";

                snowflake.style.fontSize = `${size}em`;
                snowflake.style.left = `${left}vw`;
                snowflake.style.animationDuration = `${duration}s`;
                snowflake.style.filter = blur;
                snowflake.style.setProperty("--start-x", `${Math.random() * 10 - 5}vw`);
                snowflake.style.setProperty("--end-x", `${Math.random() * 10 - 5}vw`);

                // Append to the container
                snowContainer.appendChild(snowflake);
        }
});

MMM-Snowflakes.css

.initial-snow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
}

.snowflake {
        position: absolute;
        top: -5vh;
        color: white;
        animation: snowfall linear infinite;
        transform: translate3d(var(--start-x), 0, 0);
}

/* Keyframes for snowfall animation */
@keyframes snowfall {
        0% {
                transform: translate3d(var(--start-x), 0, 0);
        }
        100% {
                transform: translate3d(var(--end-x), 110vh, 0);
        }
}

config.js

                  {
                    module: "MMM-Snowflakes",
                    position: "fullscreen_above", 
                    config: {
                        totalSnowflakes: 50
                    }
                  },

@Piranha1605 Yeah dude I took a gander at your github and then set everything to my needs. I appreciate it!

NVM I figured it out. Here is what I needed to do. I had to really think about what you were saying. thanks for pointing me in the right direction. I will post this on github for everyone to use.

Module.register("MMM-Snowflakes", {
    defaults: {
        totalSnowflakes: 50 // Default number of snowflakes
    },

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

    // Called when MagicMirror DOM is created
    notificationReceived: function(notification, payload, sender) {
        if (notification === 'MODULE_DOM_CREATED') {
            this.createSnowflakes();
        }
    },

    // Create snowflakes in the DOM
    createSnowflakes: function () {
        const snowContainer = document.querySelector(".initial-snow");
        if (!snowContainer) {
            Log.error("Snowflakes: Container not found!");
            return;
        }

        const totalSnowflakes = this.config.totalSnowflakes; // Get from config
        const snowflakeVariants = ["❄", "❅", "❆"]; // Snowflake symbols

        for (let i = 0; i < totalSnowflakes; i++) {
            const snowflake = document.createElement("span");
            snowflake.classList.add("snowflake");

            // Randomly pick a snowflake variant
            const variantIndex = Math.floor(Math.random() * snowflakeVariants.length);
            snowflake.innerHTML = snowflakeVariants[variantIndex];

            // Randomize size, position, and animation duration
            const size = Math.random() * 0.8 + 0.2; // Size between 0.2 and 1
            const left = Math.random() * 100; // Random horizontal position
            const duration = Math.random() * 5 + 5; // Duration between 5s and 10s
            const blur = Math.random() < 0.3 ? "blur(1px)" : "none";

            snowflake.style.fontSize = `${size}em`;
            snowflake.style.left = `${left}vw`;
            snowflake.style.animationDuration = `${duration}s`;
            snowflake.style.filter = blur;
            snowflake.style.setProperty("--start-x", `${Math.random() * 10 - 5}vw`);
            snowflake.style.setProperty("--end-x", `${Math.random() * 10 - 5}vw`);

            // Append snowflake to the container
            snowContainer.appendChild(snowflake);
        }
    },

    // Generate DOM for this module
    getDom: function() {
        const wrapper = document.createElement("div");
        wrapper.className = "initial-snow"; // Container for snowflakes
        return wrapper;
    },

    // Load CSS for the module
    getStyles: function() {
        return ["MMM-Snowflakes.css"];
    }
});

@sdetweil Thank you for the reply and I really appreciate your help with this. To be honest I had some help with chatGPT as I don’t quite understand JS very well. Can you explain more about what I need to do exactly for this to work? Do I need to take the snowflake.js contents and place them in the MMM-Snowflake.js when it is being registered and use the notificationReceived function? Again, thanks for the help.

I am currently trying to create a module that will display snow falling on the screen. I’m sure I am missing something but, from what I can tell the module is loading in the logs, just not displaying the snow falling. Any help would be appreciated.

MMM-SnowFlakes.js

Module.register("MMM-Snowflakes", {
        // Default configuration options
        defaults: {
                totalSnowflakes: 50, // Number of snowflakes
        },

        // Start method
        start: function () {
                Log.info("Starting module: " + this.name);
        },

        // Override the getDom method to provide the HTML content
        getDom: function () {
                const wrapper = document.createElement("div");
                wrapper.className = "initial-snow"; // The main container for the snowflakes
                return wrapper;
        },

        // Load the CSS and external JS file
        getStyles: function () {
                return ["MMM-Snowflakes.css"];
        },

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

        // Pass configuration to the client-side script
        getConfig: function () {
                return this.config;
        },
});

snowflakes.js

document.addEventListener("DOMContentLoaded", () => {
        const snowContainer = document.querySelector(".initial-snow");
        const totalSnowflakes = window.ModuleConfig.totalSnowflakes || 50; // Fallback if config is not loaded

        // Snowflake variants
        const snowflakeVariants = ["❄", "❅", "❆"];

        for (let i = 0; i < totalSnowflakes; i++) {
                const snowflake = document.createElement("span");
                snowflake.classList.add("snowflake");

                // Randomly pick a snowflake variant
                const variantIndex = Math.floor(Math.random() * snowflakeVariants.length);
                snowflake.innerHTML = snowflakeVariants[variantIndex];

                // Randomize size, position, and animation duration
                const size = Math.random() * 0.8 + 0.2; // Size between 0.2 and 1
                const left = Math.random() * 100; // Random horizontal position
                const duration = Math.random() * 5 + 5; // Duration between 5s and 10s
                const blur = Math.random() < 0.3 ? "blur(1px)" : "none";

                snowflake.style.fontSize = `${size}em`;
                snowflake.style.left = `${left}vw`;
                snowflake.style.animationDuration = `${duration}s`;
                snowflake.style.filter = blur;
                snowflake.style.setProperty("--start-x", `${Math.random() * 10 - 5}vw`);
                snowflake.style.setProperty("--end-x", `${Math.random() * 10 - 5}vw`);

                // Append to the container
                snowContainer.appendChild(snowflake);
        }
});

MMM-Snowflakes.css

.initial-snow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
}

.snowflake {
        position: absolute;
        top: -5vh;
        color: white;
        animation: snowfall linear infinite;
        transform: translate3d(var(--start-x), 0, 0);
}

/* Keyframes for snowfall animation */
@keyframes snowfall {
        0% {
                transform: translate3d(var(--start-x), 0, 0);
        }
        100% {
                transform: translate3d(var(--end-x), 110vh, 0);
        }
}

config.js

                  {
                    module: "MMM-Snowflakes",
                    position: "fullscreen_above", 
                    config: {
                        totalSnowflakes: 50
                    }
                  },

I am posting to hopefully solve the problem and some headache of changing the color or size to all the components for the default weather module. Below are all the sections with a short description of what they are. Make sure to place this code in the custom CSS file. Enjoy!

.dimmed {
color: DarkSlateGrey;  /* Feels like Temp section */
}

.module-header {
color: DarkSlateGrey; /* Waether Forecase City, State section */
}

.dimmed.wi-strong-wind + span {
color: DarkSlateGrey; /* text for the wind symbol */
}

.dimmed.wi-strong-wind {
color: DarkSlateGrey; /* Wind symbol */
}

.weather .wi-sunset + span {
color: DarkSlateGrey; /* sunset time */
}

.weather .wi-sunset {
color: DarkOrange; /* sunset symbol */
}

.weather .wi-sunrise + span 
color: DarkSlateGrey; /* sunrise time */
}

.weather. .wi-sunrise {
color: DarkYellow; /* sunrise symbol */
}

.weather .day {
color: DarkSlateGray; /* days list */ 
}

.weather .weathericon + span {
color: DarkSlateGray; /* current temp */
}

.weather .weathericon {
color: DarkSlateGray; /* icon nect to current temp (sets all icons the same color) */
}

.weather .min-temp {
color: DarkSlateGray; /* minimum temp */
}

.weather .max-temp {
color: DimGray; /* maximum temp */
}

@Piranha1605 Yeah dude I took a gander at your github and then set everything to my needs. I appreciate it!

@xTITUS-MAXIMUSx nvm… after reviewing my mistakes I actually got it working

Module.register("MMM-CSSswitch", {
      
    defaults: {
	morning_start: 5,
        morning_stop: 12,
	noon_start: 12,
        noon_stop: 23,
    },    

    //Do I still need to load the custom.css?
    getStyles: function() {
        return ["MMM-CSSswitch.css"];
    },

    // Define start sequence.
    start: function() {
	Log.info("Starting module: " + this.name);



	// Schedule update interval.
	var self = this;
        self.updatecssswitch();
	setInterval(function() {
	self.updatecssswitch();
	}, 5000);
    },
    
    updatecssswitch: function() {
        var currentTime = new Date().getHours();
        var body = document.querySelector('morning');

        if ( currentTime >= this.config.morning_start && currentTime < this.config.morning_end ) {
            document.body.className = "morning";       
        }
		
	else if ( currentTime >= this.config.noon_start && currentTime < this.config.noon_stop ) {
            document.body.className = "noon";
        }

        else {
             document.body.className = "night";       
        }
    }
});

CSS

.morning {
  background-image: url("morning.png");
  margin: 0; 
  height: 100%;
  width: 100%;
}

.noon {
  background-image: url("noon.jpg");
  margin: 0; 
  height: 100%;
  width: 100%;
}

.night {
  background-image: url("night.jpg");
  margin: 0; 
  height: 100%;
  width: 100%;
}

Big thanks to @Piranha1605 and his github for a template.

@Piranha1605 Cool! how would one do that? Still a noob.

@Piranha1605

Not exactly what I am looking for. I tried to take @I_Am_Anthony code and tweak it to my needs but, no success. maybe you’ll review my code? :)

I know this is an old topic but did you get this module finished? if do you have a git hub?

Hi! Sooo defiantly new to all this module jazz and I am trying to build a module that sets the background based on the time of the day. What I have so far is this.

Module.register("MMM-Background", {

    defaults: {
	morning_start: 6,
        morning_stop: 11,
	noon_start: 12,
        noon_stop: 16,
        morning_background: "morning.jpg",
        noon_background: "noon.jpg",
	night_background: "night.jpg"
    },
	
	//CSS file
	getStyles: function() {
        return ["MMM-Background.css"];
    },

    // Define start sequence.
    start: function() {
	Log.info("Starting module: " + this.name);



	// Schedule update interval.
	var self = this;
        self.updateBackground();
	setInterval(function() {
		self.updateBackground();
	}, 600000);
    },

    updateBackground: function() {
        var currentTime = new Date().getHours();
        var body = document.querySelector('body');

        if ( currentTime >= this.config.morning_start && currentTime =< this.config.morning_stop )  {
            body.className = this.config.morning_background;
        }

        else if ( currentTime >= this.config.noon_start && currentTime =< this.config.noon_stop )  {
            body.className = this.config.noon_background;
        }
		
		else { 
			body.className = this.config.night_background;
		}
    }
});

CSS file

.morning_background {
  margin: 0; 
  height: 100%;
  width: 100%;
}

.noon_background {
  margin: 0;
  height: 100%;
  width: 100%;
}

.night_background {
  margin: 0;
  height: 100%;
  width: 100%;
}

Any guidance would be appreciated. I noticed on some other users modules they use a node-js helper? do I need that here?