@lavolp3
PR sent
https://github.com/cowboysdude/MMM-rfacts/pull/12

It seems I have done a bit too much JS programming in recent months… Lol.

@cowboysdude have a look at it and let me know what you think.

So I did a little research and I can’t really comprehend.
I cannot find any developer being just a little rude to you at all!

“Feel free to fork the module and customize it for your own needs.”

Rude?

Only one developer suggesting (!) to you to make your own fork. While I think working with PR’s and improving the original module is better I guess you can just respect his view.

Sorry but we’re all at the beginning at some point (I am as well).
Pointing out someone as rude just because he is not interested in doing the work you suggested is a bit off.

Go ahead, learn more Javascript, do forks and send PR’s.
It’s fun!

@seann
My suggestion: Fire up the mirror UI on your browser, press F12, move the move over your module, right click -> inspect.
Then look at the styles section and play with switching styles on and off.
Then you can use whatever you need in your own css overwriting main.css in your module.

(Sorry, too tempting…)

I’d definitely donate. I love this whole project.

Please note there is a more recent module also using the buienradar API called MMM-rain-forecast.

Apart from that can you please post the config entry and confirm that you have cloned the module to the MagicMirror/modules folder and not to the MagicMirror folder itself?

As @broberg said: Freedom! You can do anything and you can use the OS itself for any further Raspbian things you would like. (A mirror as a jdownloader host? possible… Measuring temp in bath room directly using the mirror? possible…)
There are so many possibilities…

Also, you don’t necessarily have to throw any html or setup a web server. It’s all done automatically at the installation.
Yes, if you want to go forward there’s a lot to learn, but I have contributed / played with a lot of modules already and not written more than 3 lines of html (albeit lots of JS)

MMM-Comics

A module for MagicMirror2 that displays several comic strips (sources updated on demand)

Description

Based on (and forked from) andrecarluccis MMM-DailyDilbert module, this is a module for MagicMirror2 that displays the current daily or random comic strips from famous cartoons. You can choose to display a coloured or a b/w version of the comic strips (b/w does not always work that well, try it out).
Additionally you can choose a daily time frame at which the current daily comic is being shown (supported only for dilbert, dilbert_de and xkcd). For the rest of the day, or if the comic is archived, a random comic is picked.

Screenshot

Have fun!

Guys be careful with the npm vulnerabilities!
It’s not advisable to always fix all of them.
E.g. if a vulnerability wants to have a most recent version of an important dependency, fixing it might even break your working MM because MM can’t work with this new dependency.

If you’re not completely sure what you’re doing then leave them.
They are not errors after all, your modules should work with these vulnerabilities as well.

I want to have a powerwall, a solar panel and a tesla just to try out this module!

Now you have my full attention!
Sounds exciting! Good luck with development!

Do you now jasper?
“Jasper is an open source platform for developing always-on, voice-controlled applications”
https://jasperproject.github.io/
Maybe worth a look?

E.g.:
“Julius is a high-performance open source speech recognition engine. It does not need an active internet connection. Please note that you will need to train your own acoustic model, which is a very complex task that we do not provide support for. Regular users are most likely better suited with one of the other STT engines listed here.”
(from the documentation)

@Hellonoonan how about this one?
https://github.com/BKeyport/MMM-Multimonth

@steverichab there are two different ways to turn off the hdmi monitor.

vcgencmd display_power 0 turns of the hdmi controller. The monitor will go into standby mode after that.
tvservice -o is another option. It probably does the same but I’m not sure. MIght work better and send the monitor directly into sleep.
Both commands are bash commands and can be tried from an ssh shell.
if you try out the tvservice command you might need a more complex command to get the mirror GUI back.

/opt/vc/bin/tvservice -p; sudo /bin/chvt 6; sudo /bin/chvt 7

@steverichab said in “No Signal” message when PIR sensor is triggered:

The MMM-PIRSensor is working perfectly. Unfortunately when the sensor times out due to no presents detected I get a blue screen with “No Signal” on my monitor/screen. Here’s my config:

 {
		module: 'MMM-PIR-Sensor', 
		position: "top_center", // Remove this line to avoid having an visible indicator
		config: {
			sensorPin: 22,
			powerSaving: true,
			powerSavingDelay: 10, // Turn HDMI OFF after 60 seconds of no motion, until motion is detected again
			preventHDMITimeout: 1, // Turn HDMI ON and OFF again every 4 minutes when power saving, to avoid LCD/TV timeout
			supportCEC: true, 
			presenceIndicator: "fa-eye", // Customizing the indicator
			presenceOffIndicator: "fa-eye", // Customizing the indicator
			presenceIndicatorColor: "#f51d16", // Customizing the indicator
			presenceOffIndicatorColor: "#2b271c" // Customizing the indicator
		}
		},

I have enabled HDMI CEC on my monitor. I just want it to go dark. any suggestions?
Thanks in advance!!

I have the same issue, and I am sure there was a time I got the monitor turned off directly with another module.
I think there are different ways of turning the monitor off, at least for more recent Raspberry Pis and this module might be using the wrong one for us.
I wanted to look into this more, you motivated me again :-).

@lavolp3 I tried to dig a bit deeper into the rt-scraper module again and it seems the references for the elements are all different from the current page.
The output of the module is empty and therefore we only see the headlines and no content.
I don’t think I’ll be able to fix it.

@raymondjspigot Great idea! You should create a PR from that! Look here @Mykle1

@bjoern said in MMM-WeatherOrNot - Forecast:

@lavolp3 said in MMM-WeatherOrNot - Forecast:

.MMM-WeatherOrNot .someElement {
display: none;
}

Thanks a lot, but it does not work.

.MMM-WeatherOrNot .currentWeather {
  display: none;
}

i don’t know why. it’s the corect element, in my opinion

I agree, the element selector is the right one.
It sits in an iframe, that may be the reason.
I don’t know how to get to the css inside the iframe.

@bjoern If there’s nothing in the README about that, you can try to find out the elements id or class and give it display: none in your custom.css

.MMM-WeatherOrNot .someElement {
  display: none;
}

@Blauenfeldt BTW, a more efficient way to find out an elements class or id is using the browsers dev tools on your laptop.
And, this guide is very helpful
https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works?_=1603089835577

@Blauenfeldt said in Changing the colour of all text on screen:

How do i figure out what and how I change other stuff? I want to change the color like the red, as it is more like a red tint than only the red LED being lit up. I would like to change the color of the text, as it is grey and does not work well with the pictures in the background.

If you want to change ciolors of elements, you need to find out their css class or id.
Move into the module.js ( or if it exists the *.njk file which is a nunjucks template and creates the html). To every element you are searching for you will hopefully find some class or id.
In this specific case:

Here is the main .js file:
https://github.com/MichMich/MagicMirror/tree/master/modules/default/weatherforecast
You can of course also look into your local cloned folder /modules/default/weatherforecast/weatherforecast.js

Now let’s find the elements you were looking for. They are often (not always!) created in a document.createElement()function inside the getDom()-function:

Look it this

			var dayCell = document.createElement("td");
			dayCell.className = "day";
			dayCell.innerHTML = forecast.day;
			row.appendChild(dayCell);

Here you find the creation of the day cell in every forecast row. They have a class called “day”.
Now first have a look into the .css file weatherforecast.css and look if there is something referencing the .day-class.

There’s something in there:

.weatherforecast .day {
  padding-left: 0;
  padding-right: 25px;
}

But nothing about the color.
You can add the color in custom.css (it would be overwritten by custom.css if it was already in here)

.weatherforecast .day {
  color: 'green';
}

Want to give every day another color? That’s more difficult, but possible. Google for “css nth element”. You would want to give every nth element inside the forecast table some color.

Want to colorize the symbols? Can be done.
Again, look for the symbol creation part in weatherforecast.js:

			var iconCell = document.createElement("td");
			iconCell.className = "bright weather-icon";
			row.appendChild(iconCell);

			var icon = document.createElement("span");
			icon.className = "wi weathericon " + forecast.icon;
			iconCell.appendChild(icon);

Each cell gets actually a range of classes: “wi weathericon” and the name of the forecast-icon. You find the names of the forecast items at the top of the module-code.

		iconTable: {
			"01d": "wi-day-sunny",
			"02d": "wi-day-cloudy",
			"03d": "wi-cloudy",
			"04d": "wi-cloudy-windy",
			"09d": "wi-showers",
			"10d": "wi-rain",
			"11d": "wi-thunderstorm",
			"13d": "wi-snow",
			"50d": "wi-fog",
			"01n": "wi-night-clear",
			"02n": "wi-night-cloudy",
			"03n": "wi-night-cloudy",
			"04n": "wi-night-cloudy",
			"09n": "wi-night-showers",
			"10n": "wi-night-rain",
			"11n": "wi-night-thunderstorm",
			"13n": "wi-night-snow",
			"50n": "wi-night-alt-cloudy-windy"
		}
	},

Try to give the rainy ones a blue color in custom.css:

.weatherforecast .wi-rain,
.weatherforecast .wi-showers,
.weatherforecast .wi-night-showers,
.weatherforecast .wi-night-rain {
  color: 'blue';
}

Voila!

Same goes for the grey cloudy-sunny-raining icon, or is it a .png file?

The pictures are actually svg (scalable vector graphics). They can be styled as you can see above by css. They are not pictures as they get drawn in the respective element. That way you can manipulate background and color.

@boybay7

So just to confirm, even though I have edited code in like modules or custom.css for the font colour, it won’t be replaced when I update with git pull?

To have a complete answer to this, a more basic approach.

You have two things going on in your MM environment.
One is the server side, that is represented by the node_helper.js files. It is kind of a back office, fetching, progressing and forwarding data so it can be displayed in the browser / on the mirror. It does e.g. call weather or calendar APIs and fetches the data.

The server side communicates with the client side, which is represented by the module.js and module.css files (among others).
These are (mostly) responsible for building the html and css code that you finally see in the browser.

The server side is refreshed whenever you restart the mirror (e.g. by pm2 restart mm, or by restarting the Raspberry pi…)
The client side is refreshed whenever you reload a browser page (also with pm2, or - on your laptop - just by reloading the browser page!)

Meaning, you can e.g. display your mirror on your laptop (by going to http://MIRRORIP:8080), change things in custom.css or in config.js and just reload the browser page on the laptop to test these changes out.
Note however, that when you just reload the browser there may be things running on the server side, that do not understand you changes made on the client side anymore, since the server side code has not been refreshed.

The best way of keeping your mirror running and properly updating after code changes is using pm2 and above command to restart.

All of this has nothing to do with git pull.
Git pull is a synchronisation with the code on the git server.
Git pull is used to get updates on the module code from the module creator. It is comparable to updating any program on your computer.
Of course you should restart the mirror after having done git pull.

Hope that helps to understand the environment. It’s surely not easy for beginners.

BTW: If you wonder why you need both of these parallel processes:
The magic word is asynchronity. Whenever you want to fetch data from an API, which your mirror does a lot of times, you have to wait for an answer (the api call is asynchronous, its not synchronous with the rest of the code anymore, it waits…)
If you implement this into the same code that would build up your page, you would end up in a mess.

So the trick is, you have another process that just sends messages (here: notifications) to your page building code. The page building code can then react to these messages by updating what is on the mirror. It does not have to sit and wait for an answer, it can just react to a message.

I could go on for ages here, it’s really a fascinating concept for someone who has only been slightly in programming in the past. This has thrown me into kind of a programming pit. You can see that from the size of my answer