@sdetweil Thnx, and figures. I guess its a fringe case anyway, having one global language and doing another for this (its a birthday message module Im working on). Ill just settle for using the global settings for now.

/C

Im trying to make a module that displays a message. I’ve made translated language files, eg en.json, sv.json, uk.json etc. They work properly and is set by the global setting in config.js.

However I would like the language setting in the modules own config.js section to override global. Eg I want to be able to have global setting=sv and module setting =en (as example).

When I do that, console reports that it is using the module setting, but the display always gives me the global setting. Eg, the language of the message the module displays always shows in the langauge set in global setting.

Is there any way to change this?

And I just want to add here that I’m running it on a Raspberry Pi with a 7-inch screen, so there’s not much screen space to work with. I don’t have room for the weather module with the ‘current’ option as well. However, after testing, it seems to work perfectly fine to keep the module ‘hidden’ by simply omitting a location in the config.js file

I’m considering making the rain direction controlled by the wind direction from the Weather module. If it’s possible, it would look pretty neat.

I dont think PM2 shows module-specific broadcasts unless explicitly logged, but Im no expert. Maybe @sdetweil knows?

To test it I just bascially found locations with rain or snow, and set that in config.js.

@reilley I just realized I experienced something similar, but I was preoccupied with other tasks and didn’t take the time to investigate.

Here’s a screenshot for reference:
https://github.com/cgillinger/MMM-WeatherEffects/blob/main/screenshots/rich.png

Based on my screenshots (as mentioned, I was focused on tweaking the module and only noticed it afterward), it seems to be intermittent.

I’m using api-free providers, eg SMHI.

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 here are the precipitation words used by the different providers:

openMeteo showers, Rain, Snow, Showers, sleet, drizzle, precipitation, hail, rain, Precipitation, snow
overrideWrapper
pirateWeather rain, sleet, snow
smhi showers, Rain, Snow, sleet, Drizzle, precipitation, rain, drizzle, snow
ukMetOffice showers, sleet, hail, rain, snow
ukMetOfficeDataHub showers, sleet, hail, rain, Precipitation, snow
weatherBit rain, sleet, snow
weatherFlow snow
weatherGov showers, Snow, Rain, Showers, Drizzle, precipitation, rain, snow
yr rain, sleet, precipitation, snow

I did notice a lot of just plain “precipitation” and one future fix might be combining a broadcast of “precipitation” and negative degrees centigrades, as that would also indicate snow.

Also thinking of adding rain functionality, after testing the module more.

@sdetweil I think I actually managed to implement it—so now snow falls whenever “Current conditions” report any of the various “snow” messages.

I renamed the module and uploaded it as a standalone: “MMM-DynamicSnow”

👉 https://github.com/cgillinger/MMM-DynamicSnow

It should work with all weather providers. I created a separate dictionary for it, but so far, I’ve only had time to test it with Swedish SMHI. Also not easy to test during this mild winter, but I did finally manage to find a place where it snowed up north here in Sweden.

@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!

Hi!

Im trying to build a “Important message to the public”-module, based of an API here in Sweden. I want the module to be at the top of the screen, showing important messages across the entire screen.

However, I cant get it to actually cross the screen. No matter how I format the css I get the text bunched wrong. This is the closest I’ gotten:

What do I need to do?

And think I got it going, after reworking the module yesterday.

@OliWer I’ll fix this, this is one of my first modules, so I’ve done quite a few errors when it comes to following the frame work standard. And I think the flake count is because I sort of panicked when I realised that my Raspberry Pi almost choked on my first iteration, and I speed fixed the performance part. Ill look into it.

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.

@sdetweil I had no idea this could be done. Thank you!

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

Oh, nice. I was looking at the api-solution for SMHI (being a swede and also, the SMHI api requires no key), but that sounds even better. I’ll definately look into that.

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

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

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/

@extec said in Weatherstation using MagicMirror+Rasp3b+7inch touchscreen:

Hello Mr. cgillinger,

first of all thank you very much for posting.

I just got myself into RPis and would’ve loved to have a Weatherstation just like yours.
My Display is 5", 800x480. More than enough for the beginning.

Now Maybe you are able to help me out. I have a fresh install of RPi OS with NodeJS 20.11 and Magic Mirror installed.
I was able to modify some modules and change the color of the restart buttons.

However I was not able to integrate the Weather Icons or change the color of them. Also how did you manage to resize the “Forecast” module?

Any help would be appreciated.

Many greetings,
extec

attachment: this is what it looks like now.

I just entered the colors in the “custom.css” file, located in the MagicMirror/css folder. And if I remember correctly it was a bit sensitive to location. Let me just paste my entire custom.css, and see if that works on your PI:

/* MagicMirror² Custom CSS Sample
 *
 * Change color and fonts here.
 *
 * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;'
 *
 * MIT Licensed.
 */

/* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */

:root {
  --color-text: #EEEEEE;
  --color-text-dimmed: #666;
  --color-text-bright: #fff;
  --color-background: black;

  --font-primary: "Roboto Condensed";
  --font-secondary: "Roboto";
  
  --font-size: 20px;
  --font-size-small: 0.75rem;

  --gap-body-top: 60px;
  --gap-body-right: 60px;
  --gap-body-bottom: 60px;
  --gap-body-left: 60px;
  
  --gap-modules: 30px;
}

#module_4_weather header {
    font-size: 30px !important; /* Forces the font size, overriding other rules */
}

/* Weather Icon Size */
.weather .weather-icon .wi {
    font-size: 50x; /* Adjust as needed */
}

.wi-cloudy {
    color: #ADD8E6; /* Light blue color */
}

/* Add more rules for each icon */


.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 */


/* 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 */
}

Getting the size of the weather icons right was a lot of fiddling to find out the name of the class.

Now, I use the standard Weather module, but for my location I use swedish SMHI as provider:

{
			module: "weather",
			position: "bottom_left",
	
			//initialLoadDelay: "500",
			config: {
				weatherProvider: "smhi",
				type: "current",
				location:"Stockholm",
				lat: "XXXXXXXX",
				lon: "XXXXXXX",
				windUnits: "metric",
				degreeLabel: "true",
				howPrecipitationAmount: "true",
				showPrecipitationProbability: "true",
				colored: "True",
				
			}
		},

And for forecast I use Norweigan, Yr:

{
			module: "weather",
			position: "top_right",
			header: "Väderprognos",
			
			config: {
				weatherProvider: "yr",
				initialLoadDelay: "500",
				type: "hourly",
				location:"Stockholm",
				lat: "XXXXXXXX",
				lon: "XXXXXXXX",
				maxEntries: "9",
				fade: "false",
				fadePoint: "1",
				colored: "true",
				degreeLabel: "true",
				//showPrecipitationAmount: "true",
				//showPrecipitationProbability: "true",
			//maxNumberOfDays: "10",
		
			}
		},

Hope this helps, otherwise I’ll have to dig deeper.