JSON request module

wishmaster270

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

ELMAGO

@wishmaster270

There she is

wishmaster270

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

ELMAGO

@wishmaster270

It’s same

//TEMPERATURE MAISON

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


// AFFICHAGE

{
   module: "MMM-ValuesByNotification",
   position: "top_right",
   header: "TEMPERATURE MAISON",
   config: {
    groups: [
     {
      items: [
       {
        notification: "TEMPSALLE",
        itemTitle: "TEMPSALLE",
        values: [
         {
          valueTitle: "TEMPSALLE",
		valueUnit: "C",
		jsonpath: "data",
         },
        ]
       },
      ]
     },
    ]
   },
  },

wishmaster270

@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

@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

@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

This post is deleted!

ELMAGO

@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

@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

@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

@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

@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

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

ELMAGO

@wishmaster270
good evening
thank you for your return, for the config file I put back yours or mine is good? I would test this tomorrow morning, tonight it’s rugby.
good evening and thank you again

ELMAGO

@ELMAGO

Good evening,

I couldn’t wait…it’s almost great, I just have to find how to align the text on the left and the temperatures on the right.

Thank you very much for your help

wishmaster270

@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

@wishmaster270

Re Goodnight

It’s awesome, it’s exactly what I wanted.

Thank you so much.

ELMAGO

@wishmaster270

Hello

sorry to bother you again but is it possible to display an answer following the answer of the request.

example :
The JSON request returns false I would like to display “NON”

wishmaster270

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