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

MMM-ValuesByNotification, CSS Advice...

Scheduled Pinned Locked Moved Custom CSS
8 Posts 2 Posters 530 Views 2 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.
  • B Offline
    BKeyport Module Developer
    last edited by BKeyport Jul 16, 2023, 6:14 AM Jul 16, 2023, 5:41 AM

    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"

    W 2 Replies Last reply Jul 16, 2023, 8:18 AM Reply Quote 0
    • W Offline
      wishmaster270 Module Developer @BKeyport
      last edited by wishmaster270 Jul 16, 2023, 8:18 AM Jul 16, 2023, 8:18 AM

      @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
      • W Offline
        wishmaster270 Module Developer @BKeyport
        last edited by wishmaster270 Jul 16, 2023, 10:16 AM Jul 16, 2023, 9:38 AM

        @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;
        }
        
        B 1 Reply Last reply Jul 17, 2023, 1:09 AM Reply Quote 0
        • B Offline
          BKeyport Module Developer @wishmaster270
          last edited by BKeyport Jul 17, 2023, 1:12 AM Jul 17, 2023, 1:09 AM

          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"

          W 1 Reply Last reply Jul 17, 2023, 5:26 PM Reply Quote 0
          • W Offline
            wishmaster270 Module Developer @BKeyport
            last edited by wishmaster270 Jul 17, 2023, 5:58 PM Jul 17, 2023, 5:26 PM

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

            B 1 Reply Last reply Jul 19, 2023, 5:03 AM Reply Quote 0
            • B Offline
              BKeyport Module Developer @wishmaster270
              last edited by Jul 19, 2023, 5:03 AM

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

              W 1 Reply Last reply Jul 19, 2023, 7:26 PM Reply Quote 0
              • W Offline
                wishmaster270 Module Developer @BKeyport
                last edited by wishmaster270 Jul 19, 2023, 7:49 PM Jul 19, 2023, 7:26 PM

                @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;
                }
                
                B 1 Reply Last reply Jul 20, 2023, 7:37 PM Reply Quote 0
                • B Offline
                  BKeyport Module Developer @wishmaster270
                  last edited by BKeyport Jul 20, 2023, 7:48 PM Jul 20, 2023, 7:37 PM

                  @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
                  1 / 1
                  • First post
                    5/8
                    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