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.

    MMM-ValuesByNotification, CSS Advice...

    Scheduled Pinned Locked Moved Custom CSS
    8 Posts 2 Posters 410 Views
    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.
    • BKeyportB
      BKeyport Module Developer
      last edited by BKeyport

      I can’t seem to figure this out.

      I currently have the following display set up:

      f194a04b-640b-493b-99de-451a73cdae16-image.png

      What I want is something more like this, ignoring the lines and font size (Excel)
      806f98a0-c218-46c2-9aac-16ff71619ab1-image.png

      Can anyone help figure this out? ( @wishmaster270 tagged as author )

      Existing CSS changes in custom.css:

      /* ValuesByNotification */
      
      .MMM-ValuesByNotification .vbn .groupWrapper {
          border-radius: 0px;
          border-style: none;
      }
      
      .MMM-ValuesByNotification .vbn .groupsWrapper, .MMM-ValuesByNotification .vbn .groupWrapper, .MMM-ValuesByNotification .vbn .itemsWrapper, .MMM-ValuesByNotification .vbn .valueWrapper{
          flex-direction: row;
          column-gap: 20px; 
          flex-grow: 1; 
      }
      
      .MMM-ValuesByNotification .vbn .groupsWrapper {
          column-gap: 10px; 
      }
      
      .MMM-ValuesByNotification .vbn .groupsWrapper {
      }
      
      
      .MMM-ValuesByNotification .vbn .itemsWrapper {
      	row-gap: 0px;
      	column-gap: 0px;
      	flex-direction: column;     
      }
      
      .MMM-ValuesByNotification .vbn .itemTitle {
          text-decoration: none;
          margin: 0px;
      }
      
      .MMM-ValuesByNotification .vbn .valuesWrapper {
      	flex-direction: column;
      	gap: 0px;
      	row-gap: 0px;
      	column-gap: 0px;
      }
      

      Thanks!

      The "E" in "Javascript" stands for "Easy"

      wishmaster270W 2 Replies Last reply Reply Quote 0
      • wishmaster270W
        wishmaster270 Module Developer @BKeyport
        last edited by wishmaster270

        @BKeyport Hi and sure I will try to help.
        I think a possible way would be to set some min-width.
        Can you share your module config?
        It’s easier for me to setup a test environment with it.

        1 Reply Last reply Reply Quote 0
        • wishmaster270W
          wishmaster270 Module Developer @BKeyport
          last edited by wishmaster270

          @BKeyport Hi,

          tested some things. You want it to look something like this, right:
          ValuesByNotification-2Column.png

          I used these special config options:

          • As you do not display any group or item title i set the positions to “e” only. Which means only elements, nothing else.
          • As the titles of the first and second column are very different (the second column has shorter titles) i decided to add the classes “col1” and “col2” to the items.
          • As i did not want to setup a complete environment i set the “naValue” of each value to the values of your screenshot. Please skip that step!
          {
          			module: "MMM-ValuesByNotification",
          			position: "top_center",
          			//header: "Module-1",
          			config: {
          				updateInterval: 3600,
          				groupPositions: "e",
          				itemPositions: "e",
          				unitSpace: true,
          				groups: [
          					{
          						items: [
          							{
          								notification: "TEST1",
          								classes: "col1",
          								values: [
          									{
          										valueTitle: "Temperature Outdoors",
          										naValue: "68.60",
          										valueUnit: "°"
          									},
          								]
          							},
          							{
          								notification: "TEST2",
          								classes: "col2",
          								values: [
          									{
          										valueTitle: "Indoor Humidity",
          										naValue: "26.8",
          										valueUnit: "%"
          									},
          								]
          							},
          							{
          								notification: "TEST3",
          								classes: "col1",
          								values: [
          									{
          										valueTitle: "My Office Temperature",
          										naValue: "77.59",
          										valueUnit: "°"
          									},
          								]
          							},
          							{
          								notification: "TEST4",
          								classes: "col2",
          								values: [
          									{
          										valueTitle: "Outdoor Humidity",
          										naValue: "58.4",
          										valueUnit: "%"
          									},
          								]
          							},
          							{
          								notification: "TEST5",
          								classes: "col1",
          								values: [
          									{
          										valueTitle: "CPU Case Temperature",
          										naValue: "87.15",
          										valueUnit: "°"
          									},
          								]
          							},
          							{
          								notification: "TEST6",
          								classes: "col2",
          								values: [
          									{
          										valueTitle: "Wind Speed",
          										naValue: "0",
          										valueUnit: "MPH"
          									},
          								]
          							},
          							{
          								notification: "TEST7",
          								classes: "col1",
          								values: [
          									{
          										valueTitle: "Utility Room Temperature",
          										naValue: "92.50",
          										valueUnit: "°"
          									},
          								]
          							},
          							{
          								notification: "TEST8",
          								classes: "col2",
          								values: [
          									{
          										valueTitle: "Wind Direction",
          										naValue: "N",
          										valueUnit: " "
          									},
          								]
          							},
          						]
          					},
          				]
          			},
          		},
          

          I then set the following custom.css options:

          .MMM-ValuesByNotification{
            width: 700px;
          }
          
          .MMM-ValuesByNotification .vbn .groupWrapper {
            border-radius: 0px;
            border-style: none;
          }
          
          .MMM-ValuesByNotification .vbn .itemsWrapper {
            flex-direction: row;
            flex-wrap: wrap;
            column-gap: 30px;
          }
          
          .MMM-ValuesByNotification .vbn .itemWrapper {
            flex-direction: row;
            justify-content: unset;
          }
          
          .MMM-ValuesByNotification .vbn .valueWrapper {
            flex-direction: row;
            column-gap: 10px;
            justify-content: unset;
          }
          
          .MMM-ValuesByNotification .vbn .col1 .valueWrapper {
            min-width: 277px;
          }
          
          .MMM-ValuesByNotification .vbn .col2 .valueWrapper {
            min-width: 213px;
          }
          
          .MMM-ValuesByNotification .vbn .valueTitle {
            text-align: left;
          }
          
          .MMM-ValuesByNotification .vbn .col1 .valueTitle {
            min-width: 210px;
          }
          
          .MMM-ValuesByNotification .vbn .col2 .valueTitle {
            min-width: 150px;
          }
          
          BKeyportB 1 Reply Last reply Reply Quote 0
          • BKeyportB
            BKeyport Module Developer @wishmaster270
            last edited by BKeyport

            eeec7ded-005b-469f-9575-35d3d210ef89-image.png

            CSS in custom.css is exactly as you did, with the exception of having the overall display “inline-flex” with other modules to have the top bar fill horizontally rather than vertically.

            Here’s my config as present.

            	{
            			module: "MMM-ValuesByNotification", // https://github.com/Tom-Hirschberger/MMM-ValuesByNotification
            			position: "top_bar",
            			config: {
            				animationSpeed: 0,
            				updateInterval: 15,
            				groupPositions: "e",
            				itemPositions: "e", 
            				reuseCount: 99,
            				transformerFunctions: {
            					degToCompass: (num) => {
            						val = ((num/22.5)+.5) | 0;
            						arr = ["N","NNE","NE","ENE","E","ESE", "SE", "SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"];
            						res = arr[(val % 16)];
            						return res;
            					},
            				},
            				groups: [
            					{
            						items: [
            							{
            								notification: "WeatherLink",
            								classes: "col1",
            								values: [
            									{
            										valueTitle: "Temperature Outdoors",
            										valueUnit: "°",
            										jsonpath: "data.conditions[0].temp",
            										valueFormat: "Number(${value}).toFixed(2)",
            									},
            								],
            							},
            							{
            								notification: "TempRoom",
            								classes: "col1",
            								values: [
            									{
            										valueTitle: "My Office Temperature",
            										valueUnit: "°",
            										jsonpath: "temperature_f",
            										valueFormat: "Number(${value}).toFixed(2)",
            									},
            								],
            							},
            							{
            								notification: "TempCase",
            								classes: "col1", 
            								values: [
            									{
            										valueTitle: "CPU Case Temperature",
            										valueUnit: "°",
            										jsonpath: "temperature_f",
            										valueFormat: "Number(${value}).toFixed(2)",
            									},
            								],
            							},
            							{
            								notification: "WeatherLink",
            								classes: "col1",
            								values: [
            									{
            										valueTitle: "Utility Room Temperature",
            										valueUnit: "°",
            										jsonpath: "data.conditions[1].temp_in",
            										valueFormat: "Number(${value}).toFixed(2)",
            									},
            								],
            							},
            							{
            								notification: "WeatherLink",
            								classes: "col2",
            								values: [
            									{
            										valueTitle: "Indoor Humidity",
            										valueUnit: "%",
            										jsonpath: "data.conditions[1].hum_in",
            									},
            									{
            										valueTitle: "Outdoor Humidity",
            										valueUnit: "%",
            										jsonpath: "data.conditions[0].hum",
            									},
            									{
            										valueTitle: "Wind Speed",
            										valueUnit: "MPH",
            										jsonpath: "data.conditions[0].wind_speed_last",
            										unitSpace: true,
            									},
            									{
            										valueTitle: "Wind Direction",
            										jsonpath: "data.conditions[0].wind_dir_last",
            										valueTransformers: ["degToCompass"],
            									},
            								]
            							},
            						],
            					},
            				],
            			},
            		}, 
            

            The "E" in "Javascript" stands for "Easy"

            wishmaster270W 1 Reply Last reply Reply Quote 0
            • wishmaster270W
              wishmaster270 Module Developer @BKeyport
              last edited by wishmaster270

              @BKeyport Hi,

              thank you for the config. There was a main difference in yours and mine. You added the last four values in one item, i had single items.
              There was a problem with the column definitions in you config, but i think i figured the things out.
              Its a little bit messy but i think it will work:

              custom.css

              .MMM-ValuesByNotification{
                width: 700px;
              }
              
              .MMM-ValuesByNotification .vbn .groupWrapper {
                border-radius: 0px;
                border-style: none;
              }
              
              .MMM-ValuesByNotification .vbn .itemsWrapper {
                flex-direction: row;
                flex-wrap: wrap;
                column-gap: 30px;
                justify-content: space-around;
              }
              
              .MMM-ValuesByNotification .vbn .itemWrapper {
                flex-direction: row;
                justify-content: unset;
              }
              
              .MMM-ValuesByNotification .vbn .valueWrapper {
                flex-direction: row;
                column-gap: 10px;
                justify-content: unset;
              }
              
              .MMM-ValuesByNotification .vbn .col1 .valueWrapper {
                min-width: 290px;
              }
              
              .MMM-ValuesByNotification .vbn .col2 .valueWrapper {
                min-width: 260px;
              }
              
              .MMM-ValuesByNotification .vbn .wrap1 {
                justify-content: flex-start;
              }
              
              .MMM-ValuesByNotification .vbn .valueTitle {
                text-align: left;
              }
              
              .MMM-ValuesByNotification .vbn .col1 .valueTitle {
                min-width: 210px;
              }
              
              .MMM-ValuesByNotification .vbn .col2 .valueTitle {
                min-width: 200px;
              }
              
              

              config.js:

              {
              	module: "MMM-ValuesByNotification", // https://github.com/Tom-Hirschberger/MMM-ValuesByNotification
              	position: "top_center",
              	config: {
              		animationSpeed: 0,
              		updateInterval: 15,
              		groupPositions: "e",
              		itemPositions: "e", 
              		reuseCount: 99,
              		transformerFunctions: {
              			degToCompass: (num) => {
              				val = ((num/22.5)+.5) | 0;
              				arr = ["N","NNE","NE","ENE","E","ESE", "SE", "SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"];
              				res = arr[(val % 16)];
              				return res;
              			},
              		},
              		groups: [
              			{
              				items: [
              					{
              						notification: "WeatherLink",
              						classes: "col1",
              						values: [
              							{
              								valueTitle: "Temperature Outdoors",
              								valueUnit: "°",
              								jsonpath: "data.conditions[0].temp",
              								valueFormat: "Number(${value}).toFixed(2)",
              							},
              						],
              					},
              					{
              						notification: "TempRoom",
              						classes: "col2",
              						values: [
              							{
              								valueTitle: "My Office Temperature",
              								valueUnit: "°",
              								jsonpath: "temperature_f",
              								valueFormat: "Number(${value}).toFixed(2)",
              							},
              						],
              					},
              					{
              						notification: "TempCase",
              						classes: "col1", 
              						values: [
              							{
              								valueTitle: "CPU Case Temperature",
              								valueUnit: "°",
              								jsonpath: "temperature_f",
              								valueFormat: "Number(${value}).toFixed(2)",
              							},
              						],
              					},
              					{
              						notification: "WeatherLink",
              						classes: "col2",
              						values: [
              							{
              								valueTitle: "Utility Room Temperature",
              								valueUnit: "°",
              								jsonpath: "data.conditions[1].temp_in",
              								valueFormat: "Number(${value}).toFixed(2)",
              							},
              						],
              					},
              					{
              						notification: "WeatherLink",
              						classes: "col1",
              						values: [
              							{
              								valueTitle: "Indoor Humidity",
              								valueUnit: "%",
              								jsonpath: "data.conditions[1].hum_in",
              							},
              						]
              					},
              					{
              						notification: "WeatherLink",
              						classes: "col2",
              						values: [
              							{
              								valueTitle: "Outdoor Humidity",
              								valueUnit: "%",
              								jsonpath: "data.conditions[0].hum",
              							},
              						]
              					},
              					{
              						notification: "WeatherLink",
              						classes: "col1",
              						values: [
              							{
              								valueTitle: "Wind Speed",
              								valueUnit: "MPH",
              								jsonpath: "data.conditions[0].wind_speed_last",
              								unitSpace: true,
              							}
              						]
              					},
              					{
              						notification: "WeatherLink",
              						classes: "col2",
              						values: [
              							{
              								valueTitle: "Wind Direction",
              								jsonpath: "data.conditions[0].wind_dir_last",
              								valueTransformers: ["degToCompass"],
              							},
              						]
              					},
              				],
              			},
              		],
              	},
              }
              

              Edit: Maybe i have time to search for an easier solution at the weekend.

              BKeyportB 1 Reply Last reply Reply Quote 0
              • BKeyportB
                BKeyport Module Developer @wishmaster270
                last edited by

                @wishmaster270 Getting closer, now just out of order, but much better organized.

                Screenshot 2023-07-18 at 9.59.47 PM.png

                It is also not sharing the top bar the way I like on the test screen, haven’t had time to go check the real display.

                The "E" in "Javascript" stands for "Easy"

                wishmaster270W 1 Reply Last reply Reply Quote 0
                • wishmaster270W
                  wishmaster270 Module Developer @BKeyport
                  last edited by wishmaster270

                  @BKeyport Hi and sorry, my fault.
                  I added the items in the wrong order to the group.

                  The main idea is that all items are in a row. Every time the space on the right side is not enough to display the next item a new line starts.
                  As the maximum width of the module is set to 700px only two items fit in a row. Thats why we get two columns here but the order of the items in the config matters.

                  In the config i additionally add the classes col1 and col2 to the items. This way i can set the width of the titles in the first column different to the ones of the second column.

                  I re-arranged the items to the structure of the initial post and increased the width of the titles a little bit:

                  {
                  	module: "MMM-ValuesByNotification", // https://github.com/Tom-Hirschberger/MMM-ValuesByNotification
                  	position: "top_center",
                  	config: {
                  		animationSpeed: 0,
                  		updateInterval: 3600,
                  		groupPositions: "e",
                  		itemPositions: "e", 
                  		reuseCount: 99,
                  		transformerFunctions: {
                  			degToCompass: (num) => {
                  				val = ((num/22.5)+.5) | 0;
                  				arr = ["N","NNE","NE","ENE","E","ESE", "SE", "SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"];
                  				res = arr[(val % 16)];
                  				return res;
                  			},
                  		},
                  		groups: [
                  			{
                  				items: [
                  					{
                  						notification: "WeatherLink",
                  						classes: "col1",
                  						values: [
                  							{
                  								valueTitle: "Temperature Outdoors",
                  								valueUnit: "°",
                  								jsonpath: "data.conditions[0].temp",
                  								valueFormat: "Number(${value}).toFixed(2)",
                  							},
                  						],
                  					},
                  					{
                  						notification: "WeatherLink",
                  						classes: "col2",
                  						values: [
                  							{
                  								valueTitle: "Indoor Humidity",
                  								valueUnit: "%",
                  								jsonpath: "data.conditions[1].hum_in",
                  							},
                  						]
                  					},
                  					{
                  						notification: "TempRoom",
                  						classes: "col1",
                  						values: [
                  							{
                  								valueTitle: "My Office Temperature",
                  								valueUnit: "°",
                  								jsonpath: "temperature_f",
                  								valueFormat: "Number(${value}).toFixed(2)",
                  							},
                  						],
                  					},
                  					{
                  						notification: "WeatherLink",
                  						classes: "col2",
                  						values: [
                  							{
                  								valueTitle: "Outdoor Humidity",
                  								valueUnit: "%",
                  								jsonpath: "data.conditions[0].hum",
                  							},
                  						]
                  					},
                  					{
                  						notification: "TempCase",
                  						classes: "col1", 
                  						values: [
                  							{
                  								valueTitle: "CPU Case Temperature",
                  								valueUnit: "°",
                  								jsonpath: "temperature_f",
                  								valueFormat: "Number(${value}).toFixed(2)",
                  							},
                  						],
                  					},
                  					{
                  						notification: "WeatherLink",
                  						classes: "col2",
                  						values: [
                  							{
                  								valueTitle: "Wind Speed",
                  								valueUnit: "MPH",
                  								jsonpath: "data.conditions[0].wind_speed_last",
                  								unitSpace: true,
                  							}
                  						]
                  					},
                  					{
                  						notification: "WeatherLink",
                  						classes: "col1",
                  						values: [
                  							{
                  								valueTitle: "Utility Room Temperature",
                  								valueUnit: "°",
                  								jsonpath: "data.conditions[1].temp_in",
                  								valueFormat: "Number(${value}).toFixed(2)",
                  							},
                  						],
                  					},
                  					{
                  						notification: "WeatherLink",
                  						classes: "col2",
                  						values: [
                  							{
                  								valueTitle: "Wind Direction",
                  								jsonpath: "data.conditions[0].wind_dir_last",
                  								valueTransformers: ["degToCompass"],
                  							},
                  						]
                  					},
                  				],
                  			},
                  		],
                  	},
                  }
                  
                  .MMM-ValuesByNotification{
                    width: 700px;
                  }
                  
                  .MMM-ValuesByNotification .vbn .groupWrapper {
                    border-radius: 0px;
                    border-style: none;
                  }
                  
                  .MMM-ValuesByNotification .vbn .itemsWrapper {
                    flex-direction: row;
                    flex-wrap: wrap;
                    column-gap: 30px;
                    justify-content: space-around;
                  }
                  
                  .MMM-ValuesByNotification .vbn .itemWrapper {
                    flex-direction: row;
                    justify-content: unset;
                  }
                  
                  .MMM-ValuesByNotification .vbn .valueWrapper {
                    flex-direction: row;
                    column-gap: 10px;
                    justify-content: unset;
                  }
                  
                  .MMM-ValuesByNotification .vbn .col1 .valueWrapper {
                    min-width: 310px;
                  }
                  
                  .MMM-ValuesByNotification .vbn .col2 .valueWrapper {
                    min-width: 285px;
                  }
                  
                  .MMM-ValuesByNotification .vbn .wrap1 {
                    justify-content: flex-start;
                  }
                  
                  .MMM-ValuesByNotification .vbn .valueTitle {
                    text-align: left;
                  }
                  
                  .MMM-ValuesByNotification .vbn .col1 .valueTitle {
                    min-width: 220px;
                  }
                  
                  .MMM-ValuesByNotification .vbn .col2 .valueTitle {
                    min-width: 210px;
                  }
                  
                  BKeyportB 1 Reply Last reply Reply Quote 0
                  • BKeyportB
                    BKeyport Module Developer @wishmaster270
                    last edited by BKeyport

                    @wishmaster270 Great start, now to adjust to fit… 🤣

                    Edit: here I am adjusting it and trying to figure out why it wouldn’t move up to the bar, then I realized, you had it in Top Center. 😞😞😞😞😖😖😖😖

                    The "E" in "Javascript" stands for "Easy"

                    1 Reply Last reply Reply Quote 0
                    • 1 / 1
                    • 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