@Rags Hi and correct.
The screen save module has a counter that will be counted to zero. If zero is reached the monitor will be shut off.
If the GPIO is triggered (because of the motion sensor) it sends a notification to the screen module. If the monitor is turned off it will be set on and the timer is reset. If it is on only the timer is resetted.

@Rags Hi, I don’t use the Pir module you mentioned so do not know if there is a option to control the behaviour.
You can use my GPIO module in combination with my screensaver module to do the job. I wrote a howto to do this https://github.com/Tom-Hirschberger/MMM-GPIO-Notifications/blob/master/examples/HC-SR501/HC-SR501-GPIO4-README-EN.md.

@Xilef Hi, the list sounds good. I use old mobile chargers to power the boards. I have heard that some had problems with mobile chargers but I had no problems for years now.

@Xilef
You need a ESP32 ( I use a D1 Mini but nearly everyone should be fine)
You need a Temperature and Humidity Sensor (BME280 and HTU21 are a lot more accurate and use I2c to communicate with the controller.
A Power supply with 5V 1A should be more than enough.

That’s how I display my values…

The first three are ESP32 the others my thermostats.

@Xilef
ESP8266 is a good choice. I prefer ESP32 cause it has more power but does not need that much more energy. You have a lot more GPIOs with a ESP32 than a with the ESP8266.

I can provide you a ESP32 sketch which is ready to flash and only needs the Wifi-SSID, Wifi-Password and the MQTT parameters configured.
I use the Arduino IDE to flash the boards.

@ELMAGO
Do you mean something like this…

We first define a width for the most outer wrapper. I choose 200px but can adjust it to the value you want:

.MMM-ValuesByNotification .vbn .groupsWrapper{
  width: 200px;
}

Then we configure the next two deeper wrappers to expand to the maximum width:

.MMM-ValuesByNotification .vbn .groupWrapper,
.MMM-ValuesByNotification .vbn .itemsWrapper {
  width: 100%;
}

And we tell the itemWrapper to expand to maximum width and justify its content by putting space around the items equally:

.MMM-ValuesByNotification .vbn .itemWrapper {
  flex-direction: row;
  line-height: 1.0;
  width: 100%;
  justify-content: space-between;
}

The rest stays the same as before:

.MMM-ValuesByNotification .vbn .itemTitle {
  margin-top: 0px;
  margin-bottom: 0px;
  min-width: 60px;
  text-decoration: unset;
  color: white;
}

.MMM-ValuesByNotification .vbn .groupWrapper {
  border-style: none;
}

@ELMAGO
Today, with my notebook ready things are getting easier.
I styled the module like the example you provided…

Let’s look at the steps to do this now:

First we tell the itemWrapper? to display the items in rows and not columns and set the line height to the regular value 1.0` to avoid a great space in between:

.MMM-ValuesByNotification .vbn .itemWrapper {
  flex-direction: row;
  line-height: 1.0;
}

Next we tell the itemsWrapper to set a small space of 5px between the rows:

.MMM-ValuesByNotification .vbn .itemsWrapper:first-child,
.MMM-ValuesByNotification .vbn .itemsWrapper
{
  gap: 5px;
}

We then remove some margins of the title if items, remove the underlining and set the min-with to 60px to get a straight lining of the values:

.MMM-ValuesByNotification .vbn .itemTitle {
  margin-top: 0px;
  margin-bottom: 0px;
  min-width: 60px;
  text-decoration: unset;
  color: white;
}

If you do not like the gray border around the items you can remove it with:

.MMM-ValuesByNotification .vbn .groupWrapper {
  border-style: none;
}

If you copy all these contents to the MagicMirror/css/custom.css file and restore the original valuesByNotification.css you should the style of above.

@Xilef
Hi,
did a lot of research to this topic in the last view years.

Things depend heavily on your needs.
Do you plan to power the devices with a power supply or do they need to run on battery?

I can`t suggest Tuya devices as they changed the firmware in newer devices to do not allow local connections anymore. Most of the modules i found need to connect directly to the devices which is blocked now.
Last week i replaced two of my Tuya smart plugs with ones of Shelly cause they are not supported by tuyalib anymore and a was not able to integrate integrate them into my installation.

Personally i ended up providing the temperature and humidity values with BME280 or HTU21 sensor connected to ESP8266 or ESP32 micro controllers.
My MMM-Temperature module contains some examples and i can provide some more if needed.
The easiest way is to start a webserver on the ESP controller that sends the data as JSON string if somebody connects. The main disadvantage is that the controller needs to run all the time and wait for new connections. It is hard to realize authentication mechanism, too.
I suggest to use a MQTT-Broker (like Mosquitto) and send the data via MQTT to the broker which forwards the data to the mirror. You then can use my MMM-ValuesByNotification the sensor data and much more.
If needed the ESP controller fall a sleep for some time and i.e. send data only every 30 minutes. There are a lot of possibilities and i tried a lot of them.

I provide scripts to send the data of Miflora flower sensors (which provide temperature as well) to a MQTT broker, too. The scripts (MMM-CommandToNotification script or system service read the data via bluetooth and send it to the broker.

As a third alternative you can sensors that are supported of Zigbee2MQTT, buy a supported Zigbee usb stick like this one and configure Zigbee2MQTT to send the data to the MQTT broker.

@ELMAGO
Great to see the data beeing displayed. We get the styling, too.
Please do not edit files in the module folder. You can modify/override all css in the custom.css file in the css directory of MagicMirror.
The examples only overrides the things needed.
Currently I only have my mobile and can not test any things. Maybe I can look at it tomorrow.

@ELMAGO Step by Step closer to the goal😉
1: You can/need to use one instance of the command module to fetch the data of the to urls.
2: I use the Celsius sign in my setup without any problems but it may depend of the encoding of your operating system and Browser. You can try to use the html encoding ° instead.

//TEMPERATURE MAISON

{
   module: "MMM-CommandToNotification",
   disabled: false,
   config: {
    updateInterval: 60,
    commands: [
     {
      script: "/usr/bin/curl",
      args: "-s  http://192.168.100.244:3000/TEMPSALLE",
      timeout: 5000,
      notifications: [
       "TEMPSALLE",
       ],
     },

     {
           script: "/usr/bin/curl",
           args: "-s  http://192.168.100.244:3000/TEMPBUREAU",
           timeout: 5000,
           notifications: [
            "TEMPBUREAU",
            ],
          },
     ]
   },
  },

// AFFICHAGE

{
   module: "MMM-ValuesByNotification",
   position: "top_right",
   header: "TEMPERATURE MAISON",
   config: {
    groups: [
     {
      items: [
       {
        notification: "TEMPSALLE",
        values: [
         {
          valueTitle: "SALLE A MANGER",
		valueUnit: "°C",
		jsonpath: "data",
         },
        ]
       },
	          {
        notification: "TEMPBUREAU",
        values: [
         {
          valueTitle: "BUREAU",
		valueUnit: "°C",
		jsonpath: "data",
         },
        ]
       },
      ]
     },
    ]
   },
  },

3: I provided a lot examples with screenshots in the modules doc directory (screenshots). You will find the corresponding config and css of each screenshot in the configs. Maybe there is a styling included you like. If not feel free to ask again.

@ELMAGO
Sorry, took me a moment to set up a test environment…
I think if your webserver is not very very fast you need to increase the timeout value in the command module.
The timeout is in milliseconds and you configured 5. I guess it should be 5000.
This config works fine in my development environment.

                 {
			module: "MMM-CommandToNotification",
			disabled: false,
			config: {
			 updateInterval: 60,
			 commands: [
			  {
			   script: "/usr/bin/curl",
			   args: "-s http://192.168.100.244:3000/TEMPSALLE",
			   timeout: 5000,
			   notifications: [
				"TEMPSALLE",
				],
			  },
			  ]
			},
		},
		 
		{
			module: "MMM-ValuesByNotification",
			position: "top_right",
			header: "TEMPERATURE MAISON",
			config: {
			 groups: [
			  {
			   items: [
				{
				 notification: "TEMPSALLE",
				 itemTitle: "TEMPSALLE",
				 values: [
				  {
				   valueTitle: "TEMPSALLE",
				 valueUnit: "C",
				 jsonpath: "data",
				  },
				 ]
				},
			   ]
			  },
			 ]
			},
		},

Edit: I increased the updateInterval to 60

@ELMAGO
Sorry, my fault.
Can you please remove the v option of the curl command. It needs to be curl -s ....

@ELMAGO Hi, no problem let’s dive deeper. Can you please run the curl command manually on the console and paste the result here, please.

@Rags Hi,

I use this type of sensor for motion detection. Currently not connect to the mirror directly but I used it for years as PIR replacement.
It should work out-of-the-box with any PIR module.

@ELMAGO You can NOT enter the url directly into the Command module. You need to call a valid Shell Command.
In your case I will suggest curl.

The full command will be:

curl -vs  http://192.168.100.244:3000/TEMPSALLE2

So the command configuration should be something like:

{
   module: "MMM-CommandToNotification",
   disabled: false,
   config: {
    updateInterval: 10,
    commands: [
     {
      script: "/usr/bin/curl",
      args: "-vs  http://192.168.100.244:3000/TEMPSALLE2",
      timeout: 5,
      notifications: [
       "TEMPSALLE",
       ],
     },
     ]
   },
  },

As a result the output of the curl command will be send as notification “TEMPSALE”.

You can test the curl command in a terminal.

@ELMAGO Hi,

You can use a simple curl command to fetch the data and get the data send as notification with my MMM-CommandToNotification module. The module supports to call commands periodically.
As you do have the data as payload of a notification then you can use my MMM-ValuesByNotification module to display it. This module is very powerful, allows parsing the payload as Json, selecting values in the Json with JSONPath syntax and even reformatting.

@tanvir586
Hi,

first of all: Please do not edit any files in the module folder. You will get into problems with the next update. All CSS of the module can be overridden by copying the things you want to change to custom.css and edit it there.
second: Please use the ```YOUR CODE``` notation when pasting code.

Now to your problem :beaming_face_with_smiling_eyes:
The size of the controlWrapper depends of the buttons in it and their margin. So instead of changing the controlWrapper you could reduce the size of the buttons instead:

.mradio .controlWrapper .button {
    height: 30px;
    width: 30px;
    margin-left: 5px;
    margin-right: 5px;
}

If you want to reduce the size of the space between the stations and the buttons this is mostly the field where the stream information will be displayed (if provided and you are using mplayer to play, which you do not as i remember).
If do not want the stream information to be displayed you can set the the option showStreamInfo to false in the module configuration.

MMM-MQTTbridge

https://github.com/Tom-Hirschberger/MMM-MQTTbridge

MMM-MQTTbridge allows you to integrate your MagicMirror into your smart home system via MQTT protocol and manage MagicMirror via MQTT messages by converting them into MM Notifications and vise verse - listen to your MM’s Notifications and convert them into MQTT mesages.

So, this module for MagicMirror does the following:

Listens to MQTT messages from your MQTT broker and, if mqtt-message arrives, module sends MM Notifications based on the pre-configured mqtt-to-notification Dictionary rules.
Listens to the MM Notifications within your MagicMirror environment. If Notification arrives, module sends MQTT message based on the preconfigured notification-to-mqtt Dictionary rules.

Download:

MMM-MQTTbridge

---

Version 2.2.4:

• updated jsonpath-plus and mqtt dependency

Version 2.2.3:

• bumped version of jsonpath-plus library to 10.1.0

Version 2.2.2:

• added a postinstall script which creates a copy of the imported JSONPath library cause MagicMirror only imports files with ending js and not cjs to fix JSONPath

Version 2.2.1:

• bumped jsonpath-plus library to version 10.0.1
• bumped mqtt library to version 5.10.1
• only print each event (received notification or received mqtt message) on console if debug is enabled, now

Version 2.2.0:

• fixed incl condition
• introducing two new conditions time to suppress messages / notifications if they happen to quickly after each other and tdiff to send messages / notifications only if they changed or there is enough time gap between the last one
• it is possible to configure notifications / messages which should be send after the module connected and subscribed successfully now

Version 2.1.0:

• it is possible the parse the input of MQTT messages as JSON now
• the JSON content of MQTT messages now can be filtered with JSONPath-Plus
• the payload of MQTT messages or notifications now can be formatted with a format string before further processing happens
• it is possible to configure complex conditions (equal, lower than, lower equal, greater, greater equal, includes, matches) for message and notification processing now

Version 2.0.0:

:information_source: This is the first release after the ownership of the module changed to Tom-Hirschberger
:warning: There are breaking changes in the notiDictionary.js and mqttDictionary.js with this release. Make sure to save the two dict files before updating. The files will be ignored with future releases and there is no need to be careful with them after version 2.0.0! Please read the two sections in the Readme about the dictionaries.

The following things changed:

• The way of how to configure how to ignore the payload of notifications and MQTT messages changed
• The way of how to configure how to send the payload of notifications as MQTT messages and the payload of MQTT messages as payload of notifications changed
• It is now possible to configure a “last will” message and define if you like a clean MQTT session (see http://www.steves-internet-guide.com/mqtt-clean-sessions-example/ for details) or any other of MQTT.js supported connection option
• It is now possible to configure a QoS value, the retain flag and any other of MQTT.js supported option for published MQTT messages (either in general or individual for single messages)
• It is now possible to configure a QoS value and any other of MQTT.js supported option for subscribed MQTT messages (either in general or individual for single topics)
• The paths of the dictionary files can be configured now and the dictionary files in the “dict” directory will be ignored during updates.
• If one of the dictionary files is missing or has syntax errors a warning is printed but the module starts with empty configuration (and does not crash the whole mirror anymore)
• The speed of the notification and message filter has been increased

@Serge Hi,
as i am unable to modify the first post to announce new release i will start a new thread. Maybe you can link to it in the first post.

@Mogli-0

The fading is hard coded to the template of the module.
As it is not configured in the modules CSS file you need to modify the template or make a issue at the modules github page and let the developer do it for you.

Edit:
You need to change line 42 in “templates/MMM-Fuel.njk”

from:

            {% set fadeStyle = loop.index0 | fade(loop.length) %}

to:

            {% set fadeStyle = 1 %}

But be aware that you will get into problems the next time you want to update the module!

Edit:
I opened a issue at the modules github page with a suggestion to the developer of how to realize the fading with CSS instead of the hard coded part.
If he accepts the change things can be controlled in the custom.css in the future