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

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!

outside and inside

same userid at gmail

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.

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.

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

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

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

{"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}

change the update intervals so you have time to play