JSON request module

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.

ELMAGO · Nov 26, 2022, 7:58 PM

@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 · Nov 26, 2022, 8:49 PM

@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