@Xoni Find me an API and I’ll integrate it for you :-D

I would search for an npm progress bar module(there’s one for sure).
Then install it via npm.
Include it in your code via the getScript() method.
Use it in your code as described in the npm module.
From my point of view it’s the easiest way in this environment without doing all on your own.

@openPhiL
Well, suggest a better solution then. Maybe in a more constructive way.
Or just go ahead find something else.

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

@did said in MMM-GoogleCast ne fonctionne plus:

ps: this forum is very cool. Bravo

and it even magically edits your posts :-)

All,
anyone volunteering to do some beta testing?

I have pushed a new branch new_api including the IEX API. You would need an IEX API key (as described in the README) in ADDITION to the alphavantage key.
Then you will have up-to-date quotes in table, ticker, and grid.
Unfortunately I cannot switch completely to IEX, since fetching historical data is too expensive and would blow the free quota limit.

git fetch
git checkout new_api
git pull

Let me know if you are going to test this and if the results are satisfying.
I will also look for another API to include all. Suggestions much appreciated!

@thymon as a follow-up explanation:
The reason for what you have shown is that the table expands beyond its given width: 400 limit because … well tables don’t behave.
Setting a smaller font (classes: 'xsmall') OR using less table headers (to make the table thinner) OR setting a larger width would only solve this.

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

Okay another question, I want to change the colour on weather forecast. Currently it’s red and blue, but I want it to go blue (min temp) and then red (max temp), so how would I do that? Appreciate all the help

That’s a bit more complicated, but can be done via styling.

Without explaining too much, put that in your custom.css

.weatherforecast tr.colored .min-temp {
  color: 'green';  
}

.weatherforecast tr.colored .max-temp {
  color: 'red';  
}

or use hex codes (like ‘#00ff00’) for any color you like.

@boybay7 The only files you should change are config.js and custom.css.
These are also disregarded in the updating procedure, so will remain as they are. Everything else will be checked against its version on the servers.

Usually there’s nothing to be done in the module folders as long as you don’t want to manipulate module code.

For all styling options you should use custom.css, e.g. like advised above

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

Also I couldn’t remove the fade off the weather forecast for some reason?

For that you need to have a look at the module docs
https://docs.magicmirror.builders/modules/weather.html#weather-forecast-options
The weather module is a “stock module”, the docs for all stock modules are placed in the official MagicMirror docs. Any 3rd party modules have their own docs on the respective github site.

At the above link you find the fade: option. Set that to false in your config.js
Or set the fadepoint to a higher value: fadePoint: 0.5

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

Also I’m still confused with how to update the magicmirror, I think you need to use git stash? I don’t know

You only need git stash when you have made changes to the source code that you want to keep while updating. So don’t worry about that for now.

The usual update procedure is

git pull
npm install

inside the MagicMirror folder.

As a newbie you might want to check out @sdetweil 's scripts. Lots of automation in there.
https://github.com/sdetweil/MagicMirror_scripts