@TK421_VT Hi,

i setup a quick dev environment and tried to add the URL. You are right the page forbids embedding.
If a activate the Requestly extension in my Firefox and remove the response headers “X-Frame-Options”, “Content-Security-Policy”, “X-Content-Security-Policy” the site can be embedded. I am pretty sure if you follow the instructions in this tutorial you can embed the site into a MagicMirror instance that is running in server mode and is displayed within Firefox or Chrome.

The question is if you are running MagicMirror in sever mode and display it in a local browser. If not you use the electron browser and you do not need any extensions but can use webview to embed the site.
You will need to enable webview in the electronOptions as described in the Readme of the module and you need to set embedElementType: "webview" in the module configuration.

@khayfer Perfect. Have fun with the module

@codac Hi,
i setup a quick dev environment to test the possibilities. You are right. Please keep the align-items option set to flex-start.

There are different ways to move the warnings to the right. Depending what you want it to be you can either set:

1: Reduce the module width

.MMM-DWD-WarnWeather .wrapper {
  width: 280px;
}

Which will look like
Screenshot 1

2: Only the description to the right

.MMM-DWD-WarnWeather .description {
  width: 100%;
  text-align: right;
}

Which will look like
Screenshot 2

3: Or you can move the warnings totally to the right

.MMM-DWD-WarnWeather .warning {
  justify-content:flex-end; 
}

Which looks like
Screenshot 3

@codac Hi and perfect.
You can try replacing

align-items: flex-start;

with

align-items: flex-end;

@codac Hi, i think the problem is caused of the CSS settings of MMM-DWD-WarnWeather.
I already forked the module and tried to change some things. Currently i do not have time to make a proper pull request to get the changes merged to the original module but i will do this in the future.

If you want to give it a try you can use my fork and following settings in your custom.css:

.MMM-DWD-WarnWeather .wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 320px;
  gap: 5px;
}

.MMM-DWD-WarnWeather .warning {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 0px;
}

.MMM-DWD-WarnWeather .status {
  margin-top: 0px;
}

.MMM-DWD-WarnWeather .description {
  padding-left: 0px;
  margin-left: 0px;
}

.MMM-DWD-WarnWeather .small-icon{
  float: unset;
  zoom: unset;
  -moz-transform: unset;
  -moz-transform-origin: unset;
  width: 46px;
  height: 46px;
  position: relative;
}

@khayfer Hi,

there is an example included showing the config and css of how to do this in the module folder or online.

Edit: Sorry for the short answer. Was a little bit short of time and only had my mobile present…

If you want all embedded elements to have the same size you can use the example below and set width and height to your needs in your custom.css file:

.MMM-EmbedURL .embed .embeded {
    width: 800px;
    height: 400px;
}

Additionally you can set the size of the page within the embedded elements with the attributes configuration of the module:

{
  module: "MMM-EmbedURL",
  position: "top_center",
  header: "Embed-URL",
  config: {
    attributes: [
        "frameborder=0",
        "width=600px",
        "height=700px",
    ],
    embed: [
        "https://magicmirror.builders/"
    ]
  },
},

The example provided with the module is more advanced:

{
    module: "MMM-EmbedURL",
    position: "top_center",
    config: {
        updateInterval: 60*30,
        embed: [
            {
                title: "Kap-Arkona",
                classes: "videos",
                attributes: [
                    "frameborder=0",
                    "width=600px",
                    "height=700px",
                    "scrolling=no"
                ],
                embed: [
                    "https://kap-arkona.panomax.com/vitt?fbclid=IwAR1szX2TAt_HazyeF8dR1fwg5HjqhLiZSdtmbxWLCgWDpUVnPyIomQE3lrQ",
                ]
            },
        ]
    },
},

A webcam with a custom title “Kap-Arkona” and the additional classes “videos” is added with a width, height and the attribute scrolling=no set.

The class “videos” is used in the css to select only this specific embedded element:

.MMM-EmbedURL .embed .videos.embededSubWrapper1 {
    width    : 600px;
    height   : 400px;
    overflow : hidden;
    position : relative;
}
  
.MMM-EmbedURL .embed .embeded.videos {
    position : absolute;
    top: -138px;
    height: 750px;
    max-height: 750px;
}

and to position the website within the embedded element. This way elements at the top of the website are hidden.

@ELMAGO As valueFormat settings further down in the hierarchy override setting further up you only have to much valueFormat settings.

This config should do the trick:

	{
		module: "MMM-ValuesByNotification",
		position: "top_right",
		header: "INFORMATION MÉGANE",
		config: {
			updateInterval: 300,
			reuseCount: 100,
			addClassesRecursive: true,
			groups: [
				{
					items: [
						
						{
							notification: "AUTBATTMEGANE",
							itemTitle: "Autonomie  ",
							values: [
								{
									valueUnit: " Km",
									valueFormat: "Number(${value}).toFixed(2)",
									jsonpath: "data",
								},
							]
						},
						{
							notification: "BATTMEGANE",
							itemTitle: "Charge batterie  ",
							values: [
								{
									valueUnit: " %",
									valueFormat: "Number(${value}).toFixed(2)",
									jsonpath: "data",
								},
							]
						},
						{
							notification: "PLUGMEGANE",
							itemTitle: "Voirture branchée ",
							classes: "withIcons",
							values: [
								{
									valueFormat: "\"${value}\".replace(\"false\",\"Non\").replace(\"true\",\"Oui\")",
									jsonpath: "data",
								},
							]
						},
						
					]
				},
			]
		},
	},

@ELMAGO
I added some to the [documentation] (https://github.com/Tom-Hirschberger/MMM-ValuesByNotification/blob/main/doc/value.md) of the module.
As there can be used any build-in JavaScript function in valueFormat there are nearly endless possibilities.

@ELMAGO
You can use valueFormat for this purpose.

valueFormat: "\"${value}\".replace(\"false\",\"Non\").replace(\"true\",\"Oui\")",

This will convert the value to a string (if needed) and replaces all “false” with “Non” and “true” with “Oui”.

@ELMAGO Sorry, but i do not understand exactly what you mean. You can override the “na” value which is the one displayed if no value could be parsed in the JSON.

The config option is:

naValue: "NON"

There might also be a chance to do add a valueFormat which checks for the “false” value in the JSON but that would be a little more complex and i need to know the exact format of the output.

@digied Hi,
the gray square with camera symbol indicates that the module was not able to fetch the url from the nas.
Make sure that the user you are using has permission to access for the Survalliance Station application.
Does the log show any output?

@crown
Hi,

i use MMM-Touch with my 10 inch touch screen and it is working very well.
BUT i do not use MMM-pages but MMM-ProfileSwitcher with MMM-ProfileControl instead. MMM-ProfileControl provided me more flexability with modules like MMM-CalenderExt2. Nearly all of my modules do provide profile support and display/hide stuff depending of the current profile.

In my case i do have 9 horizontal profiles (which are basically pages) and one vertical profile. I configured MMM-ProfileSwitcher to start at “pageC” (my center page) and can switch 4 pages to the left or right from this point.
The profiles can be selected either by pressing the “bubble” of the profile in MMM-ProfileControl or i can swipe left/right to change to the next one. I configured MMM-Touch to send “USER_PRESENCE” notifications for all other gestures to prevent my screensave module of shutting off the screen.
The following configuration shows my setup. I left the configuration of clock as you can see how modules can be configured to be visible at specific profiles.

{
    module: "clock",
    position: "top_center",
    classes: "pageC pageL1"
},
{
    module: "MMM-ProfileControl",
    position: "bottom_center",
    config: {
        profiles: [["pageL4"], ["pageL3"], ["pageL2"], ["pageL1"], ["pageC"], ["pageR1"], ["pageR2_1", "pageR2_2"], ["pageR3"], ["pageR4"]],
        zeroVerticalIndexOnHorziontalChange: true,
        showSeparator: false,
        showVerticalIndicator: false,
        sendPresenceNotificationOnAction: true
    },
    classes: "pageL4 pageL3 pageL2 pageL1 pageC pageR1 pageR2_1 pageR2_2 pageR3 pageR4"
},
{
    module: "MMM-ProfileSwitcher",
    config: {
        defaultClass: "pageC",
        ignoreModules: [
            "MMM-Touch"
        ],
        leaveMessages: false,
        enterMessages: false
    }
},
{
    module: "MMM-Touch",
    position: "bottom_center",
    config: {
        debug: true,
        useDisplay: false,
        defaultMode: "default",
        gestureCommands: {
            default: {
                TAP_1: (commander) => {
                    commander.sendNotification("USER_PRESENCE", true);
                },
                PRESS_1: (commander) => {
                    commander.sendNotification("USER_PRESENCE", true);
                },
                SWIPE_UP_1: (commander) => {
                    commander.sendNotification("USER_PRESENCE", true);
                },
                SWIPE_DOWN_1: (commander) => {
                    commander.sendNotification("USER_PRESENCE", true);
                },
                SWIPE_LEFT_1: (commander) => {
                    commander.sendNotification("PROFILE_INCREMENT_HORIZONTAL", null);
                },
                SWIPE_RIGHT_1: (commander) => {
                    commander.sendNotification("PROFILE_DECREMENT_HORIZONTAL", null);
                }
            }
        }
    }
},

Be aware that CSS z-index is a very powerful weapon if you use touch cause overlapping modules may overlap things you want to press. Sometimes playing around with different z-index settings is necessary to find the right order for the modules.

I ended up configuring a z-index of -1 for all module that is hidden (cause it is not visible in the current profile) in my custom.css:

.module.MMM-Bring.hidden,
.module.MMM-TouchButton.hidden,
.module.MMM-SynologySurveillance.hidden,
.module.MMM-EmbedURL.hidden
 {
  z-index: -1;
}

and add a “normal” z-index to it if it is visible:

.module.MMM-Bring:not(.hidden),
.module.MMM-TouchButton:not(.hidden),
.module.MMM-SynologySurveillance:not(.hidden),
.module.MMM-EmbedURL:not(.hidden) {
  z-index: 500;
}

I also added a very high z-index for the components of MMM-ProfileControl to make sure to be able to control my profiles in all situations:

.MMM-ProfileControl {
  z-index: 2000;
}

.MMM-ProfileControl .indicator {
  z-index: 2005;
}

@Xilef Perfect.
Yes, the ValuesByNotification module is very powerful but the configuration can be get complex very quickly. You will need my other module CommandToNotification, too.

@Xilef Perfect. One step further.

You only need one instance of the module. So your config will look something like:

		{
			module: "MMM-Temperature",
			position: "middle_center",
			config: {
				sensors: [
					{
					    name: "test",
					    script: "/bin/nc",
					    args: "-w3 192.168.178.106 80"
                    			},
					{
					    name: "test2",
					    script: "/bin/nc",
					    args: "-w3 192.168.178.108 80"
                    			},
				]
			},
		},

@Xilef
You will need the MMM-Temperature module and not the Embed module as you do not want to display a website but parse the JSON data object and display its contents.
The config will look something like:

		{
			module: "MMM-Temperature",
			position: "bottom_right",
			config: {
				sensors: [
					{
					    name: "ESP",
					    script: "/bin/nc",
					    args: "-w3 192.168.178.106"
                    			},
				]
			},
		},

But you will need to fix the missing sensor first.

Can you please check your wiring and use this sketch instead of the other one. I only removed one line which i do not think is the problem but i can not test the sketch at the moment.

#include <WiFi.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

const char* ssid     = "##ADD_WIFI_SSID_HERE";
const char* password = "##ADD_WIFI_PASSWORD_HERE";

//ENTER STATIC IP OF THE ESP32 BOARD HERE
IPAddress local_IP(192, 168, 0, 2);
IPAddress gateway(192, 168, 0, 1);
IPAddress subnet(255, 255, 255, 0);
IPAddress primaryDNS(192, 168, 0, 1);
IPAddress secondaryDNS(8, 8, 8, 8);

Adafruit_BME280 bme;

WiFiServer server(80);

void setup()
{
  Serial.begin(115200);

  if (!WiFi.config(local_IP, gateway, subnet, primaryDNS, secondaryDNS)) {
    Serial.println("STA Failed to configure");
  }

  Serial.print("Connecting to ");
  Serial.println(ssid);

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected!");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  Serial.print("ESP Mac Address: ");
  Serial.println(WiFi.macAddress());
  Serial.print("Subnet Mask: ");
  Serial.println(WiFi.subnetMask());
  Serial.print("Gateway IP: ");
  Serial.println(WiFi.gatewayIP());
  Serial.print("DNS: ");
  Serial.println(WiFi.dnsIP());

  if (!bme.begin(0x76)) {
    Serial.println("Couldn't find sensor!");
    while (1);
  }

  server.begin();
}

void loop()
{
  float temp = bme.readTemperature();
  float tempf = temp * 1.8 + 32;
  float rel_hum = bme.readHumidity();

  WiFiClient client = server.available();
  if (client) {
    Serial.println("New Client."); 
    client.println("{");
    client.print("  \"temperature_c\": ");
    client.print(temp);
    client.println(",");
    client.print("  \"temperature_f\": ");
    client.print(tempf);
    client.println(",");
    client.print("  \"humidity\": ");
    client.print(rel_hum);
    client.println(",");
    client.println("  \"error\": false");
    client.println("}");
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
  delay(100);
}

@Xilef
Sorry, my fault. You need to change line 52 to:

if (!bme.begin(0x76)) {

Copy&Paste mistake of me

@Xilef
Perfect. This is the right setting.

You need to replace the ##, too.
It will look something like:

const char* ssid     = "MY_WIFI_NETWORK";
const char* password = "123ABC456";

IPAddress local_IP(192, 168, 178, 106);
IPAddress gateway(192, 168, 178, 1);
IPAddress subnet(255, 255, 255, 0);
IPAddress primaryDNS(192, 168, 178, 1);
IPAddress secondaryDNS(8, 8, 8, 8);

To check if everything is set up correctly you can run:

/bin/nc -w3 192.168.178.106 80

@Xilef
You can but do not have to set the ip in the router. You either need a free address in the range that is NOT used by your routers DHCP server or maybe there is a setting to provide the device always with the same IP in your router. You then can set this IP for the ESP (as it is not used for any other DHCP device in the future then.

• the local_ip in the sketch is the IP you choose for the ESP (attention the numbers are separated with , and NOT ..
• the gateway is the IP of your router
• the subnet depends on your network but 255,255,255,0 will be fine in the most cases
• the primaryDNS is usually the IP of you router

yes the “include …” part is the one to be flashed to the ESP.

After you flashed the new Sketch to the ESP and booted it you can use the nc command to fetch the data from the shell of the mirror. The temperature module uses this command to get the data so you can make sure to see if it works without the need to install the module first.

@sdetweil Hi Sam, i was to slow with editing my post. The Sketch i provided does exactly that.

@Xilef
Hi,
thats great news.
The screenshot shows that you setup the ESP32 and the sensor correctly.
The main problem is that the ESP now displays a webpage.
There are two possible ways now. Either you embed the webpage (as it is) into the mirror with a module like MMM-EmbedURL or to get the ESP to display the data machine readable.
Maybe the sketch you flashed to the ESP already contains a way to read the data in a different format? Which one did you use?

Edit: I think it is this one, am i right? Then there is no easy way.
I think i can provide a sketch that is more “mirror friendly” but you will need to set a static IP for the ESP. Is this ok for you?

You will need to change to your needs:

• ##ADD_WIFI_SSID_HERE
• ##ADD_WIFI_PASSWORD_HERE
• IPAddress local_IP(192, 168, 0, 2);
• IPAddress gateway(192, 168, 0, 1);
• IPAddress subnet(255, 255, 255, 0);
• IPAddress primaryDNS(192, 168, 0, 1);

#include <WiFi.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

const char* ssid     = "##ADD_WIFI_SSID_HERE";
const char* password = "##ADD_WIFI_PASSWORD_HERE";

//ENTER STATIC IP OF THE ESP32 BOARD HERE
IPAddress local_IP(192, 168, 0, 2);
IPAddress gateway(192, 168, 0, 1);
IPAddress subnet(255, 255, 255, 0);
IPAddress primaryDNS(192, 168, 0, 1);
IPAddress secondaryDNS(8, 8, 8, 8);

Adafruit_BME280 bme;

WiFiServer server(80);

void setup()
{
  Wire.begin();
  Serial.begin(115200);

  if (!WiFi.config(local_IP, gateway, subnet, primaryDNS, secondaryDNS)) {
    Serial.println("STA Failed to configure");
  }

  Serial.print("Connecting to ");
  Serial.println(ssid);

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected!");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  Serial.print("ESP Mac Address: ");
  Serial.println(WiFi.macAddress());
  Serial.print("Subnet Mask: ");
  Serial.println(WiFi.subnetMask());
  Serial.print("Gateway IP: ");
  Serial.println(WiFi.gatewayIP());
  Serial.print("DNS: ");
  Serial.println(WiFi.dnsIP());

  if (!bme.begin(0x76);) {
    Serial.println("Couldn't find sensor!");
    while (1);
  }

  server.begin();
}

void loop()
{
  float temp = bme.readTemperature();
  float tempf = temp * 1.8 + 32;
  float rel_hum = bme.readHumidity();

  WiFiClient client = server.available();
  if (client) {
    Serial.println("New Client."); 
    client.println("{");
    client.print("  \"temperature_c\": ");
    client.print(temp);
    client.println(",");
    client.print("  \"temperature_f\": ");
    client.print(tempf);
    client.println(",");
    client.print("  \"humidity\": ");
    client.print(rel_hum);
    client.println(",");
    client.println("  \"error\": false");
    client.println("}");
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
  delay(100);
}

You can use netcat to fetch the data:

/bin/nc -w3 THE_IP_OF_THE_ESP 80

And the result will be something like:

{
   "humidity": 32.61236572265625,
   "temperature_c": 25.50150878906249, 
   "temperature_f": 77.9027158203125, 
   "error": false
}

This kind of JSON object then can be read by my MMM-Temperature module.