• 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.3k 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.
  • S Offline
    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
                • E Offline
                  ELMAGO @wishmaster270
                  last edited by Dec 7, 2022, 6:25 PM

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

                  W 1 Reply Last reply Dec 7, 2022, 7:37 PM Reply Quote 0
                  • W Offline
                    wishmaster270 Module Developer @ELMAGO
                    last edited by Dec 7, 2022, 7:37 PM

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

                    E 1 Reply Last reply Dec 8, 2022, 6:24 AM Reply Quote 0
                    • E Offline
                      ELMAGO @wishmaster270
                      last edited by Dec 8, 2022, 6:24 AM

                      @wishmaster270
                      Hello

                      No, not al all.
                      the returned value will be “false” or “true” and I would like to replace it with “Non” or “Oui” in French.

                      W 1 Reply Last reply Dec 8, 2022, 3:57 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 3 / 5
                      • First post
                        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