Help restyling MMM-ValuesByNotification

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: "&nbsp;",
										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: "&nbsp;",
										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;
}
*/

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

BKeyport

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

BKeyport

(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}

sdetweil

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

sdetweil

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

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.

sdetweil

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

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;
}

BKeyport

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

sdetweil

@BKeyport said in Help restyling MMM-ValuesByNotification:

the

if the class style affects a single element, then the style goes there

if it affects multiple items, then on their parent

and then you need to look at the style to see if it can be inherited from an ancestor

http://web.simmons.edu/~grabiner/comm244/weekfour/css-concepts.html#:~:text=In CSS%2C some styles are,tree while others are not.

BKeyport

I’ve officially given up.

I can get it to start to look right outside the magicmirror environment, and even with unsetting everything styled within the ValuesByNotification app, I can’t get it to duplicate within Magic Mirror.

This is with copying Main.css into a test environment, along with the other modules’ CSS files, and using the output HTML from MagicMirror.

Works great in test, but the moment I try to make it go live, it’s doing random things.

I hate CSS. I really do.

sdetweil

@BKeyport can you send me info on what you are trying to do

outside and inside

same userid at gmail

wishmaster270

@BKeyport Hi, can you make a screenshot of the things styled outside MagicMirror so we can see how it should look exactly?
Maybe you will need some additional classes in your module config to make it possible to select the different elements jn CSS.

BKeyport

So, after some more playing around, I’ve come to the determination that the HTML and class setup isn’t good for my use. As a result, I’ve got most of a new module set up for use, however, I’m having issues breaking down the JSON as processed through the notification.

in short, I’m unable to get the payload on the notification to flow into the array for use. I’ve determined that it’s not flowing through to an array, based on various tests.

Currently, I have this:

	notificationReceived: function(notification, payload, sender) {
		if (notification === 'Weather') {
			this.storedEvents = JSON.parse(JSON.stringify(payload))
			this.updateDom();

		}
	},

Could you provide me something better to strip down the JSON into an array?

Relevant CommandtoNotification config:

		{
						script: "/usr/bin/curl",
						args: "-X GET -H 'application/json' http://192.168.0.6:80/v1/current_conditions",
						timeout: 5000,
						sync: false,
						notifications: [
							"Weather",
						],
					}

Raw data from command:

{"data":{"did":"001D0A71573B","ts":1722493593,"conditions":[{"lsid":434637,"data_structure_type":1,"txid":1,"temp": 61.7,"hum":83.1,"dew_point": 56.5,"wet_bulb": 58.3,"heat_index": 62.0,"wind_chill": 61.7,"thw_index": 62.0,"thsw_index":null,"wind_speed_last":0.00,"wind_dir_last":0,"wind_speed_avg_last_1_min":0.00,"wind_dir_scalar_avg_last_1_min":0,"wind_speed_avg_last_2_min":0.00,"wind_dir_scalar_avg_last_2_min":0,"wind_speed_hi_last_2_min":null,"wind_dir_at_hi_speed_last_2_min":null,"wind_speed_avg_last_10_min":0.00,"wind_dir_scalar_avg_last_10_min":226,"wind_speed_hi_last_10_min":1.00,"wind_dir_at_hi_speed_last_10_min":225,"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":0,"rain_storm":0,"rain_storm_start_at":null,"solar_rad":null,"uv_index":null,"rx_state":0,"trans_battery_flag":0,"rainfall_daily":0,"rainfall_monthly":19,"rainfall_year":3902,"rain_storm_last":19,"rain_storm_last_start_at":1722266760,"rain_storm_last_end_at":1722423661},{"lsid":434634,"data_structure_type":4,"temp_in": 82.9,"hum_in":44.5,"dew_point_in": 59.1,"heat_index_in": 82.8},{"lsid":434633,"data_structure_type":3,"bar_sea_level":30.057,"bar_trend": 0.011,"bar_absolute":29.593}]},"error":null}

formatted json:

{
  "data": {
    "did": "001D0A71573B",
    "ts": 1722493593,
    "conditions": [
      {
        "lsid": 434637,
        "data_structure_type": 1,
        "txid": 1,
        "temp": 61.7,
        "hum": 83.1,
        "dew_point": 56.5,
        "wet_bulb": 58.3,
        "heat_index": 62,
        "wind_chill": 61.7,
        "thw_index": 62,
        "thsw_index": null,
        "wind_speed_last": 0,
        "wind_dir_last": 0,
        "wind_speed_avg_last_1_min": 0,
        "wind_dir_scalar_avg_last_1_min": 0,
        "wind_speed_avg_last_2_min": 0,
        "wind_dir_scalar_avg_last_2_min": 0,
        "wind_speed_hi_last_2_min": null,
        "wind_dir_at_hi_speed_last_2_min": null,
        "wind_speed_avg_last_10_min": 0,
        "wind_dir_scalar_avg_last_10_min": 226,
        "wind_speed_hi_last_10_min": 1,
        "wind_dir_at_hi_speed_last_10_min": 225,
        "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": 0,
        "rain_storm": 0,
        "rain_storm_start_at": null,
        "solar_rad": null,
        "uv_index": null,
        "rx_state": 0,
        "trans_battery_flag": 0,
        "rainfall_daily": 0,
        "rainfall_monthly": 19,
        "rainfall_year": 3902,
        "rain_storm_last": 19,
        "rain_storm_last_start_at": 1722266760,
        "rain_storm_last_end_at": 1722423661
      },
      {
        "lsid": 434634,
        "data_structure_type": 4,
        "temp_in": 82.9,
        "hum_in": 44.5,
        "dew_point_in": 59.1,
        "heat_index_in": 82.8
      },
      {
        "lsid": 434633,
        "data_structure_type": 3,
        "bar_sea_level": 30.057,
        "bar_trend": 0.011,
        "bar_absolute": 29.593
      }
    ]
  },
  "error": null
}

I already know what the path is to the various array elements (from ValuesByNotification’s config:

{
										valueTitle: "Temperature Outdoors",
										valueUnit: "°",
										jsonpath: "data.conditions[0].temp",
										//valueFormat: "Number(${value}).toFixed(2)",
										//classes: "",
									},

Should be a path something like this.storedEvents.data.conditions[0].temp

Thanks!

sdetweil

@BKeyport if you use the developers window sources tab, you can put a stop on the line after receivenotification

and examine the payload by putting the cursor over the word notification

is it a string, or is it an object already

your parse(stringify(… ))
assumes it is an object already,
my guess is curl returned a string

BKeyport

@sdetweil you’re correct. It’s a string. That started fixing it up, just gotta reset a couple of variables I forgot to capture. 😏

sdetweil

@BKeyport awesome