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.

    Help restyling MMM-ValuesByNotification

    Scheduled Pinned Locked Moved Custom CSS
    18 Posts 3 Posters 1.6k Views 3 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.
    • BKeyportB Offline
      BKeyport Module Developer
      last edited by BKeyport

      I’m wanting to show my values by notification differently, and it’s not cooperating with any css I’m throwing at it.

      Here’s the config - commented to show how I want it to look (adjusted upon rediscovery that some values are calculated, and I’m not gonna bother with that):

      		{
      			module: "MMM-ValuesByNotification", // https://github.com/Tom-Hirschberger/MMM-ValuesByNotification
      			position: "bottom_right",
      			config: {
      				animationSpeed: 0,
      				updateInterval: 15,
      				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;
      					},
      					toDate: (num) => {
      						return new Date(num * 1000).toLocaleString('en-US', { 
      							year: 'numeric', 
      							month: '2-digit', 
      							day: '2-digit', 
      							hour: '2-digit', 
      							minute: '2-digit', 
      							second: '2-digit',
      							hour12: true
      						});
      					},
      					
      				},
      				groups: [
      				//groups should be on row next to each other. 
      				// Values next to titles unless indicated. 
      					{
      						classes: "row",
      						items: [
      							{
      								notification: "Weather",
      								values: [
      									{
      										valueTitle: " ",
      										valueUnit: "°F",
      										jsonpath: "data.conditions[0].temp",
      										valueFormat: "Number(${value}).toFixed(1)",
      										classes: "xlarge",
      									},
      								],
      							},
      						],
      					},
      					// Insert vertical rule here 
      					{
      						classes: "row medium",
      						items: [
      							{
      								notification: "Weather",
      								values: [
      									{
      										valueTitle: "Wind:",
      										valueUnit: "mph",
      										jsonpath: "data.conditions[0].wind_speed_last",
      										valueFormat: "Number(${value}).toFixed(1)",
      										unitSpace: true,
      									},
      									// same line as previous
      									{
      										valueTitle: " ",
      										jsonpath: "data.conditions[0].wind_dir_last",
      										valueTransformers: ["degToCompass"],
      										
      									},
      									// Insert <HR> here 
      									{
      										valueTitle: "Rain:",
      										valueUnit: "in", 
      										unitSpace: true,
      										jsonpath: "data.conditions[0].rainfall_daily",
      										valueFormat: "Number(${value}/100).toFixed(2)",
      									},
      									// same line as previous 
      									{
      										valueTitle: "Yearly Total",
      										valueUnit: "in",
      										unitSpace: true,
      										jsonpath: "data.conditions[0].rainfall_year" ,
      										valueFormat: "Number(${value}/100).toFixed(2)",
      									},
      								],
      							},
      						],
      					},
      					// Insert Vertical Rule here
      					{
      						classes: "row medium",
      						items: [
      							{
      								notification: "Weather",
      								values: [
      									{
      										valueTitle: "Humidity:",
      										valueUnit: "%",
      										jsonpath: "data.conditions[0].hum",
      										valueFormat: "Number(${value}).toFixed(1)",
      									},
      									// same line as previous
      									
      									{
      										valueTitle: "Feels like:",
      										valueUnit: "°F",
      										jsonpath: "data.conditions[0].thw_index",
      										valueFormat: "Number(${value}).toFixed(1)",
      									},
      									// Insert <HR> here
      									{
      										valueTitle: "Barometer",
      										valueUnit: "in Hg",
      										unitSpace: true,
      										jsonpath: "data.conditions[2].bar",
      										valueFormat: "Number(${value}).toFixed(3)",
      									},
      								],
      							},
      						],
      					},
      					// Below others. 
      					{
      						classes: "bottom small",
      						items: [
      							{
      								notification: "Weather",
      								values: [
      									{
      										valueTitle: "Conditions as of:",
      										jsonpath: "data.ts",
      										valueTransformers: ["toDate"],
      										//classes: "",
      									}
      								]
      							},
      						],
      					},
      				],
      			},
      		}, 
      

      Existing CSS modifications - and needs:

      .MMM-ValuesByNotification {
      	border-radius: 0px;
          border-style: none;
          color: black;
          background-color: white;
      }
      
      .MMM-ValuesByNotification .vbn .groupWrapper {
          border-radius: 0px;
          border-style: none;
          color: black;
          background-color: white;
      }
      
      /* vertical rule
      .vertical-rule {
          margin-top: 15px;
          margin-bottom: 15px;
          width: 1px;
          background: #e0e4e7;
          float: left;
          height: 90px;
      }
      */

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

      S BKeyportB 2 Replies Last reply Reply Quote 0
      • S Offline
        sdetweil @BKeyport
        last edited by sdetweil

        @BKeyport and when you use the developers window to select those elements and style them?

        change the update intervals so you have time to play

        Sam

        How to add modules

        learning how to use browser developers window for css changes

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

          of course. Or pause on the sources page. Same effect.

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

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

            (old) Sample data:

            {"data":{"did":"001D0A71573B","ts":1716603038,"conditions":[{"lsid":434637,"data_structure_type":1,"txid":1,"temp": 56.9,"hum":72.8,"dew_point": 48.3,"wet_bulb": 51.5,"heat_index": 56.2,"wind_chill": 56.9,"thw_index": 56.2,"thsw_index":null,"wind_speed_last":2.00,"wind_dir_last":146,"wind_speed_avg_last_1_min":2.00,"wind_dir_scalar_avg_last_1_min":157,"wind_speed_avg_last_2_min":2.00,"wind_dir_scalar_avg_last_2_min":157,"wind_speed_hi_last_2_min":5.00,"wind_dir_at_hi_speed_last_2_min":169,"wind_speed_avg_last_10_min":1.31,"wind_dir_scalar_avg_last_10_min":180,"wind_speed_hi_last_10_min":5.00,"wind_dir_at_hi_speed_last_10_min":169,"rain_size":1,"rain_rate_last":0,"rain_rate_hi":0,"rainfall_last_15_min":0,"rain_rate_hi_last_15_min":0,"rainfall_last_60_min":0,"rainfall_last_24_hr":7,"rain_storm":7,"rain_storm_start_at":1716576961,"solar_rad":null,"uv_index":null,"rx_state":0,"trans_battery_flag":0,"rainfall_daily":7,"rainfall_monthly":155,"rainfall_year":3713,"rain_storm_last":40,"rain_storm_last_start_at":1716299460,"rain_storm_last_end_at":1716433260},{"lsid":434634,"data_structure_type":4,"temp_in": 83.5,"hum_in":29.5,"dew_point_in": 48.4,"heat_index_in": 81.5},{"lsid":434633,"data_structure_type":3,"bar_sea_level":29.826,"bar_trend":-0.038,"bar_absolute":29.365}]},"error":null}
            

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

            S 1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil @BKeyport
              last edited by

              @BKeyport well pausing makes it hard to see the results.

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • S Offline
                sdetweil @BKeyport
                last edited by sdetweil

                @BKeyport remember, along the bottom edge of the elements tab view window is the selector style clauses for the selected element

                Sam

                How to add modules

                learning how to use browser developers window for css changes

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

                  @sdetweil I’m aware of everything you said, the problem is that I can’t get the CSS to cooperate. I can get 'em all to row, all to column (Default), etc, just not anything else.

                  Where I’m weakest is CSS, I have a hard time wrapping my head around it.

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

                  S wishmaster270W 2 Replies Last reply Reply Quote 0
                  • S Offline
                    sdetweil @BKeyport
                    last edited by

                    @BKeyport ok, it’s not row, column or anything else.

                    the stuff before the { is called the selector clause. it selects the elements (document wide) that the stuff inside the braces will be applied to.

                    many elements do NOT inherit settings from their parent, much less their grandparent

                    I use this cheatsheet to help me remember
                    https://www.w3schools.com/cssref/css_selectors.php

                    spaces between elements in the selector matter.

                    no space means AN element MUST have ALL the attributes. not parent child…

                    sometimes for me it is better read right to left.

                    styles are selected by the nearest specifier if there are multiples. unless you use the !important override.

                    . means class
                    # means id
                    [] means element  attribute [src...]
                    no prefix  means tag name,  table, p, div ..
                    

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

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

                      @BKeyport
                      Hi and sorry for the late reply.
                      I am not sure if I will have time to test your case the next days.

                      I think your main problem is that you try to use “normal” styling directives for the layout but I use flexbox css as the basic.

                      You can find a short tutorial at:
                      https://css-tricks.com/snippets/css/a-guide-to-flexbox/

                      Edit:
                      Had 5 minutes and did a quick check.
                      I think the following two statements are a good starting point:

                      .MMM-ValuesByNotification .vbn .groupsWrapper {
                        flex-direction: row;
                      }
                      
                      .MMM-ValuesByNotification .vbn .valueWrapper {
                        flex-direction: row;
                      }
                      
                      BKeyportB 1 Reply Last reply Reply Quote 0
                      • BKeyportB Offline
                        BKeyport Module Developer @wishmaster270
                        last edited by

                        @wishmaster270 I think the problem I’m having is figuring out where to place the classes to trigger what I want. Flex to me seems a bit erratic with how to set things.

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

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