JSON request module

wishmaster270 · Nov 24, 2022, 6:08 PM

@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 · Nov 25, 2022, 2:51 PM

@wishmaster270
You are phenomenal…but I still have three problems:
1 - When I look for several values, it only shows me the first one.
2- The Celsius symbol does not seem to be accepted

3- 3- If I may abuse…is it possible to do the same formatting as this one. CSS and me…

Here is my code :

//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",
       ],
	
     },
     ]
   },
  },

{
   module: "MMM-CommandToNotification",
   disabled: false,
   config: {
    updateInterval: 60,
    commands: [
     {
      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",
         },
        ]
       },
      ]
     },
    ]
   },
  },

Once again thank you for everything.

wishmaster270 · Nov 25, 2022, 5:48 PM

@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: "&#176;C",
		jsonpath: "data",
         },
        ]
       },
	          {
        notification: "TEMPBUREAU",
        values: [
         {
          valueTitle: "BUREAU",
		valueUnit: "&#176;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 · Nov 25, 2022, 6:10 PM

This post is deleted!

ELMAGO · Nov 25, 2022, 6:45 PM

@wishmaster270 said in JSON request module:

valueTitle

I’m really sorry but I’m really bad at this.

I did this:
config:

//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_left",
		header: "TEMPERATURE MAISON",
		config: {
			updateInterval: 10,
			reuseCount: 100,
			addClassesRecursive: true,
			groups: [
				{
					items: [
						{
							notification: "TEMPSALLE",
							itemTitle: "Salle: ",
							classes: "withIcons",
							values: [
								{
									valueIcon: "fa fa-thermometer-full",
									valueUnit: "&#176;C",
									valueFormat: "Number(${value}).toFixed(2)",
									jsonpath: "data",
								},
{
									valueUnit: "%rH",
									valueFormat: "Number(${value}).toFixed(1)",
									jsonpath: "humidity",
								},
							]
						},
						{
							notification: "TEMPBUREAU",
							itemTitle: "Bureau ",
							values: [
								{
									valueUnit: "&#176;CC",
									valueFormat: "Number(${value}).toFixed(2)",
									jsonpath: "data",
								},
{
									valueUnit: "%rH",
									valueFormat: "Number(${value}).toFixed(1)",
									jsonpath: "humidity",
								},
							]
						},
					]
				},
			]
		},
	},

And use css :

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

.MMM-ValuesByNotification .vbn .itemTitle {
  min-width: 105px;
  text-decoration: none;
}

.MMM-ValuesByNotification .vbn .itemTitle.withIcons {
  margin-top: 17px;
}

.MMM-ValuesByNotification .vbn .itemWrapper.withIcons {
  line-height: 22px;
}

.MMM-ValuesByNotification .vbn .itemWrapper:not(.withIcons) {
  line-height: 10px;
}

and nothing is displayed

wishmaster270 · Nov 25, 2022, 7:01 PM

@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 · Nov 25, 2022, 7:09 PM

@wishmaster270
The custom file?

there is no problem, you help me already it is a lot.

There is nothing urgent, I just have this display to do on a whole home automation installation.

I await your return and thank you again.

sdetweil · Nov 25, 2022, 7:12 PM

@ELMAGO the CSS design is a stack, top down

css/custom.css
module_provided_css (in the module folder)
css/main.css (provided by MM).

so a search for a css setting starts with custom.css and stops at the 1st occurrence.

ELMAGO · Nov 25, 2022, 7:30 PM

@wishmaster270 @sdetweil

I correct myself, it is displayed but thus, having created the custom.css file in css:

Here is my config file:

// AFFICHAGE

{
		module: "MMM-ValuesByNotification",
		position: "top_right",
		header: "TEMPERATURE MAISON",
		config: {
			updateInterval: 10,
			reuseCount: 100,
			addClassesRecursive: true,
			groups: [
				{
					items: [
						{
							notification: "TEMPSALLE",
							itemTitle: "Salle  ",
							classes: "withIcons",
							values: [
								{
									valueUnit: " &#176;C",
									valueFormat: "Number(${value}).toFixed(2)",
									jsonpath: "data",
								},
							]
						},
						{
							notification: "TEMPBUREAU",
							itemTitle: "Bureau  ",
							values: [
								{
									valueUnit: " &#176;C",
									valueFormat: "Number(${value}).toFixed(2)",
									jsonpath: "data",
								},
							]
						},
					]
				},
			]
		},
	},

wishmaster270 · Nov 26, 2022, 5:04 PM

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