• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

JSON request module

Scheduled Pinned Locked Moved Solved Requests
41 Posts 3 Posters 12.4k Views 4 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • E Offline
    ELMAGO @wishmaster270
    last edited by 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: "°C",
    									valueFormat: "Number(${value}).toFixed(2)",
    									jsonpath: "data",
    								},
    {
    									valueUnit: "%rH",
    									valueFormat: "Number(${value}).toFixed(1)",
    									jsonpath: "humidity",
    								},
    							]
    						},
    						{
    							notification: "TEMPBUREAU",
    							itemTitle: "Bureau ",
    							values: [
    								{
    									valueUnit: "°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

    W 1 Reply Last reply Nov 25, 2022, 7:01 PM Reply Quote 0
    • W Offline
      wishmaster270 Module Developer @ELMAGO
      last edited by 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.

      E 2 Replies Last reply Nov 25, 2022, 7:09 PM Reply Quote 0
      • E Offline
        ELMAGO @wishmaster270
        last edited by 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.

        S 1 Reply Last reply Nov 25, 2022, 7:12 PM Reply Quote 0
        • S Away
          sdetweil @ELMAGO
          last edited by sdetweil Nov 25, 2022, 7:12 PM 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.

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • E Offline
            ELMAGO @wishmaster270
            last edited by Nov 25, 2022, 7:30 PM

            @wishmaster270 @sdetweil

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

            c70503d5-7fdd-4bcf-aff4-0be3fdc8537d-image.png

            08393d06-6cfc-4d4b-a59a-d588f2c700cd-image.png

            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: " °C",
            									valueFormat: "Number(${value}).toFixed(2)",
            									jsonpath: "data",
            								},
            							]
            						},
            						{
            							notification: "TEMPBUREAU",
            							itemTitle: "Bureau  ",
            							values: [
            								{
            									valueUnit: " °C",
            									valueFormat: "Number(${value}).toFixed(2)",
            									jsonpath: "data",
            								},
            							]
            						},
            					]
            				},
            			]
            		},
            	},
            
            
            W 1 Reply Last reply Nov 26, 2022, 5:04 PM Reply Quote 0
            • W Offline
              wishmaster270 Module Developer @ELMAGO
              last edited by 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…
              example.png

              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.

              E 1 Reply Last reply Nov 26, 2022, 7:58 PM Reply Quote 0
              • E Offline
                ELMAGO @wishmaster270
                last edited by 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

                E 1 Reply Last reply Nov 26, 2022, 8:49 PM Reply Quote 0
                • E Offline
                  ELMAGO @ELMAGO
                  last edited by 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.

                  04655c32-b4d0-4180-a5f4-9724b5cc27f0-image.png

                  Thank you very much for your help

                  W 1 Reply Last reply Nov 26, 2022, 9:22 PM Reply Quote 0
                  • W Offline
                    wishmaster270 Module Developer @ELMAGO
                    last edited by Nov 26, 2022, 9:22 PM

                    @ELMAGO
                    Do you mean something like this…
                    example.png

                    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;
                    }
                    
                    E 2 Replies Last reply Nov 26, 2022, 10:33 PM Reply Quote 0
                    • E Offline
                      ELMAGO @wishmaster270
                      last edited by Nov 26, 2022, 10:33 PM

                      @wishmaster270

                      Re Goodnight

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

                      Thank you so much.

                      b3cb1a61-c845-4689-91a3-53944fca4ee8-image.png

                      1 Reply Last reply Reply Quote 1
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 2 / 5
                      2 / 5
                      • First post
                        20/41
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy