I got inspired by MMM-Fireworks and decided to make a birthday module with fireworks and confetti. Its not a “birthday reminder” module, rather it sits quietly, and only erupts when someone has a birthday:

At that time a message is presented in the middle of the screen, fireworks and confetti is displayed.

Its somewhat multilingual (machine translated) and has a few different messages to pick from.

Things I haven’t solved: Currently there is a timer, that is per default set to “infinite” - because its of no use if its invisible. It would probably make sense to make some sortof “off button”, but my main display has no touch or input. So as of now it is as default showed until the day ends.

Here it is: https://github.com/cgillinger/MMM-Birthday

Hi!

So, I’m using MagicMirror to power a basic Weather Station for the family and I thought I’d share the work and configs I’ve used. So, this is not a MagicMirror!

First, hardware: I’m using a Rasperry Pi 3b+ with a 7 inch touchscreen I bought off Amazon. I wanted the Weather Station to be able to show time, local current weather and the next ten to twelve hours.

I’m currently using four modules: The standard Clock, The standard Weather module set to “current”, The standard Weather module set to “forecast” and Eben Kouaos “SmartTouch”-module: https://github.com/EbenKouao/MMM-SmartTouch

(I have a fifth module that I think will replace the “current”-module: The CFenner Netatmo module (https://github.com/CFenner/MMM-Netatmo), but I had a bit of trouble getting it to work (but have succeeded now, so will implement it when I get the time). I really want to use my Netatmo hardware. )

I’ll add the code at the end of this write-up.

Customization
Since I’m not using it as a mirror I did a bit of configuring. First I found that having everything in shades of gray made it a bit dull. So first thing I did was to add color. And I should add here that I suck at coding, so I had ChatGPT do all the heavy lifting, including picking colors, because there are a gazillion icons to pick for. The icons are easy to find (https://erikflowers.github.io/weather-icons/), and then I just had ChatGPT suggest colors for each of them. It turned out beautiful, imho.

Secondly the letters are a tad small on the tiny 7-inch screen, so after a bit of tinkering, I managed to enlarge both icons and text of the Weather module. This involed using the developer tools from Chrome to find the correct elements to change. I also changed the text from the standard gray, to more of a white shade.

Third, I wanted the “Reboot” and “Shutdown” buttons from SmartTouch to be clearer, so I added colors to those too, red for “shutdown” and yellow for “reboot”.

And here is the result(screenshot) (as you can see language is set to swedish) :

And of the entire frame with horrible glare and all:

I have a few more things I want to do: Replacing standard weather module with the Netatmo one, and I’d like the SmartTouch button for “hiding modules” to instead just dim the screen.

And code:
To change colors of icons (added in MagicMirrors “custom.css”):

.wi-day-sunny { color: #FFD700; } /* Bright Yellow */
.wi-night-clear { color: #FFD27F; } /* Moon Yellow */
.wi-day-cloudy { color: #87CEEB; } /* Sky Blue */
.wi-night-alt-cloudy { color: #1E90FF; } /* Dark Blue */
.wi-day-cloudy-gusts { color: #A9BACD; } /* Gray Blue */
.wi-night-alt-cloudy-gusts { color: #4169E1; } /* Twilight Blue */
.wi-day-cloudy-windy { color: #ADD8E6; } /* Light Blue */
.wi-night-alt-cloudy-windy { color: #191970; } /* Midnight Blue */
.wi-day-fog { color: #D3D3D3; } /* Light Gray */
.wi-night-fog { color: #C0C0C0; } /* Silver */
.wi-day-hail { color: #ACE5EE; } /* Ice Blue */
.wi-night-hail { color: #4682B4; } /* Steel Blue */
.wi-day-lightning { color: #FFA500; } /* Bright Orange */
.wi-night-alt-lightning { color: #FFD700; } /* Gold */
.wi-day-rain { color: #0000FF; } /* Blue */
.wi-night-alt-rain { color: #483D8B; } /* Dark Slate Blue */
.wi-day-rain-mix { color: #6495ED; } /* Cornflower Blue */
.wi-night-alt-rain-mix { color: #4169E1; } /* Royal Blue */
.wi-day-rain-wind { color: #1E90FF; } /* Dodger Blue */
.wi-night-alt-rain-wind { color: #0000CD; } /* Medium Blue */
.wi-day-showers { color: #00BFFF; } /* Deep Sky Blue */
.wi-night-alt-showers { color: #6A5ACD; } /* Slate Blue */
.wi-day-sleet { color: #778899; } /* Light Slate Gray */
.wi-night-alt-sleet { color: #A9A9A9; } /* Dark Gray */
.wi-day-snow { color: #FFFFFF; } /* White */
.wi-night-alt-snow { color: #DCDCDC; } /* Gainsboro */
.wi-day-sprinkle { color: #B0C4DE; } /* Light Steel Blue */
.wi-night-alt-sprinkle { color: #ADD8E6; } /* Light Blue */
.wi-day-storm-showers { color: #FF8C00; } /* Dark Orange */
.wi-night-alt-storm-showers { color: #B8860B; } /* Dark Goldenrod */
.wi-day-sunny-overcast { color: #EEE8AA; } /* Pale Goldenrod */
.wi-night-alt-cloudy-high { color: #87CEFA; } /* Light Sky Blue */
.wi-day-light-wind { color: #B0E0E6; } /* Powder Blue */
.wi-night-alt-partly-cloudy { color: #00CED1; } /* Dark Turquoise */
.wi-cloudy {
    color: #ADD8E6; /* Light blue color */
}
.wi-cloud { color: #D3D3D3; } /* Light Gray */
.wi-cloudy { color: #A9BACD; } /* Gray Blue */
.wi-cloudy-gusts { color: #4682B4; } /* Steel Blue */
.wi-cloudy-windy { color: #87CEEB; } /* Sky Blue */
.wi-fog { color: #C0C0C0; } /* Silver */
.wi-hail { color: #ACE5EE; } /* Ice Blue */
.wi-rain { color: #0000FF; } /* Blue */
.wi-rain-mix { color: #6495ED; } /* Cornflower Blue */
.wi-rain-wind { color: #1E90FF; } /* Dodger Blue */
.wi-showers { color: #00BFFF; } /* Deep Sky Blue */
.wi-sleet { color: #778899; } /* Light Slate Gray */
.wi-snow { color: #FFFFFF; } /* White */
.wi-sprinkle { color: #B0C4DE; } /* Light Steel Blue */
.wi-storm-showers { color: #FF8C00; } /* Dark Orange */
.wi-thunderstorm { color: #FFD700; } /* Gold */
.wi-snow-wind { color: #DCDCDC; } /* Gainsboro */
.wi-smog { color: #FFFFE0; } /* Light Yellow */
.wi-smoke { color: #BC8F8F; } /* Rosy Brown */
.wi-lightning { color: #FFA500; } /* Bright Orange */
.wi-raindrops { color: #5F9EA0; } /* Cadet Blue */
.wi-raindrop { color: #ADD8E6; } /* Light Blue */
.wi-dust { color: #F0E68C; } /* Khaki */
.wi-snowflake-cold { color: #F0FFFF; } /* Azure */
.wi-windy { color: #F08080; } /* Light Coral */
.wi-strong-wind { color: #00008B; } /* DarkBlue */
.wi-sunrise { color: #FFD700; } /* Bright Yellow */
.wi-sunset { color: #FF8C00; } /* Sunset Orange */

To change color of the SmartTouch “Reboot” and “Standby” (added in "mmm-smarttouch.css):

/* Style for Shutdown button text and icon */
.st-container__main-menu > ul > li:nth-child(1),
.st-container__main-menu > ul > li:nth-child(1) .fa {
  color: red; /* Changes the text and icon color to red */
}

/* Style for Reboot button text and icon */
.st-container__main-menu > ul > li:nth-child(2),
.st-container__main-menu > ul > li:nth-child(2) .fa {
  color: #ffcc00; /* Changes the text and icon color to yellow */
}

To change color of text overall (edited into “custom.css”)

:root {
  --color-text: #EEEEEE; /* Almost white, but not as bright as pure white */
  --color-text-dimmed: #666;
  --color-text-bright: #fff;
  --color-background: #000;
  /* ... other variables ... */
}

To change size of text and icons in the weather module (added in the “custom.css” file):

/* Weather Icon Size */
#module_4_weather .weather-icon .wi {
    font-size: 40px; /* Adjust the icon size as needed */
}

/* Temperature Text Size */
.weather .align-right.bright {
    font-size: 26px;
}
    
 .weather .day {
    font-size: 26px !important; /* Forces the font size, overriding other rules */
}

My daughter is really interested in birds, so I thought it would be fun to create something bird-related for her. I came across a great API that provides bird facts and images, and decided to make a simple “Bird of the Day” module for MagicMirror². 🐦

The module displays a random bird at a set interval using the Nuthatch API (https://nuthatch.lastelm.software/). The API is free, and you just need an API key to get started.

Here’s an example of how it looks:

You can customize the interval (weekly, daily, or hourly) and choose which bird facts to display, such as name, region, conservation status, or scientific name.

If this sounds like something you’d enjoy, you can find the project on GitHub:
👉 https://github.com/cgillinger/MMM-BirdOfTheDay/

Earlier, I shared a module that makes it snow on MagicMirror — as soon as you start it, snowflakes begin to fall. When I first created it, I thought it would be cool if it only showed snow when it was actually snowing.

@sdetweil gave me the idea that MagicMirror’s default weather module broadcasts notifications, so you can let the module pick up its notification using the following code:

if (this.weatherProvider.currentWeather()) {
	this.sendNotification("CURRENTWEATHER_TYPE", { type: this.weatherProvider.currentWeather().weatherType.replace("-", "_") });
}

So, I experimented a bit and got it to work! While I was at it, I also added rain. That is, if the weather module reports rain, raindrops will fall on the MagicMirror screen as well.

I should mention that so far, I’ve only tested this with the Swedish weather provider SMHI, but it should work with the others too.

I’ve tried to ensure that the annotations in the script and CSS make it reasonably easy to follow and understand if someone wants to tweak it themselves.

Screenshot:
Rich snow

Light snow (for Raspberry Pies etc)

Rain

Also, for obvious reasons this module requires the standard weather module to be active issuing “CurrentWeather” statuses.

https://github.com/cgillinger/MMM-WeatherEffects

And this is my second module, again for the entertainment of my daughters. This one just adds a nice snow fall across the screen - for the winter festivities.

I made it on a Linux computer, but realised when testing it on my Raspberry Pi 3B, that the Pi really struggled with it. So it now has two settings: light and “rich” - the latter for more powerful platforms.

This is a part of me trying to learn how to make modules, so any input is welcome.

Next: Im thinking of connecting it to one of the providers from the Weather module, to maybe make it snow when the temperature is freezing, or if the forcast warns of snow.

But for now, just a simple snowfall on your MagicMirror.

https://github.com/cgillinger/MMM-SnowEffect

@sdetweil Ah, thnx, I found the error, using the dev console. I hadn’t fully understood the regions of the screen. Got it to work now!

@CFenner And just to report back here as well: Now the module works for me again! Thnx!

@KristjanESPERANTO Added to the module list, and working on a screenshot ( I cleared my MM installtion of modules to test this, so I have to re add them, otherwise its just a black image with snow icons on them…)

@KristjanESPERANTO Ah, didn’t know there was a list! Will do asap, thnx!

And now cleaned the Github repo up a bit, also updated the module with some minor tweaks that I wanted to have (eg, position of text) and also added screenshots, the proper way.