[MMM-ValuesByNotification] Display the payloads of notifications with titles and icons

Cr4z33

@wishmaster270 soooo I gave a deep reading at your readme, but I am not quite sure whether I can already insert my MQTT based power meter with your first release or not? :slightly_smiling_face:

wishmaster270

@Cr4z33
Hi,
the short answer: Yes it can, maaayyyybee?
Does your powermeter send the data via MQTT already?
Do you have the MMM-MQTTbridge module configured to connect to your MQTT broker, subscribe for the topic(s) and send the data via notification?
How does the data look like? Is it plain text or is it a JSON object?
If it is JSON how is the data structured and which values do you want to display?

Cr4z33

@wishmaster270 said in [MMM-ValuesByNotification] Display the payloads of notifications with titles and icons:

Does your powermeter send the data via MQTT already?

Yes

Do you have the MMM-MQTTbridge module configured to connect to your MQTT broker, subscribe for the topic(s) and send the data via notification?

Nope, but I will set it up as soon as I finish posting this reply! :thumbs_up_light_skin_tone:

How does the data look like? Is it plain text or is it a JSON object?

I’ve got Zigbee2MQTT running in a Docker and if I look at its logs it shows lines like

Zigbee2MQTT:info  2022-10-04 15:45:08: MQTT publish: topic 'zigbee2mqtt/BTicino F20T60A', payload '{"device":{"applicationVersion":0,"dateCode":" \u000020180829\u0000\u0000\u0000\u0000\u0000","friendlyName":"BTicino F20T60A","hardwareVersion":1,"ieeeAddr":"0x000474000089a3e4","manufacturerID":4129,"manufacturerName":" Legrand\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000","model":"412015","networkAddress":16238,"powerSource":"Mains (single phase)","softwareBuildID":"016\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000 \u0002\u0000\u0001\u0000 \u0002\u0000\u0002\u0000!\u0012\u0000\u0000\u0000\u0000  \u0003\u0000\u0010\u0002\u0001\u0004\u0000\u0018\u0002\u0000  !","stackVersion":64,"type":"Router","zclVersion":2},"linkquality":90,"power":645,"power_alarm":null,"power_alarm_active":true,"power_alarm_active_value":2}'

Zigbee2MQTT:info  2022-10-04 15:45:10: MQTT publish: topic 'zigbee2mqtt/BTicino F20T60A', payload '{"device":{"applicationVersion":0,"dateCode":" \u000020180829\u0000\u0000\u0000\u0000\u0000","friendlyName":"BTicino F20T60A","hardwareVersion":1,"ieeeAddr":"0x000474000089a3e4","manufacturerID":4129,"manufacturerName":" Legrand\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000","model":"412015","networkAddress":16238,"powerSource":"Mains (single phase)","softwareBuildID":"016\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000 \u0002\u0000\u0001\u0000 \u0002\u0000\u0002\u0000!\u0012\u0000\u0000\u0000\u0000  \u0003\u0000\u0010\u0002\u0001\u0004\u0000\u0018\u0002\u0000  !","stackVersion":64,"type":"Router","zclVersion":2},"linkquality":90,"power":610,"power_alarm":null,"power_alarm_active":true,"power_alarm_active_value":2}'

If it is JSON how is the data structured and which values do you want to display?

I want to display the power value.

wishmaster270

@Cr4z33
Should be no problem:

MMM-MQTTbridge/dict/mqttDictionary.js:

var mqttHook = [
  {
    mqttTopic: "zigbee2mqtt/BTicino F20T60A",
    mqttPayload: [
      {
        payloadValue: "",
        mqttNotiCmd: ["POWERMETER"],
        mqttPayload: ""
      },
    ],
  },
];

var mqttNotiCommands = [
  {
    commandId: "POWERMETER",
    notiID: "POWERMETER_VALUES",
  },
];

module.exports = { mqttHook,  mqttNotiCommands};

config.js:

		{
			module: "MMM-ValuesByNotification",
			position: "top_left",
			config: {
                                updateInterval: 60,
                                reuseCount: 5,
				groups: [
					{
						items: [
							{
								notification: "POWERMETER_VALUES",
								itemTitle: "Power",
								values: [
									{
										valueUnit: "W",
										jsonpath: "power",
									},
								]
							},
						]
					},
				]
			},
		},

Will look like:

You may want to configure the updateInterval and/or reuseCount to your needs.

Cr4z33

@wishmaster270 thank you it worked at first try!

Now I can go on with some aesthetic changes like icons, etc. :D

wishmaster270

@Cr4z33

Just tested a view things.
If you like you can use font awesome icon instead of the title:

		{
			module: "MMM-ValuesByNotification",
			position: "top_left",
			config: {
                                updateInterval: 60,
                                reuseCount: 5,
				groups: [
					{
						items: [
							{
								notification: "POWERMETER_VALUES",
								//itemTitle: "Power",
								values: [
									{
										classes: "power",
										valueIcon: "fa fa-bolt",
										valueUnit: "W",
										jsonpath: "power",
									},
								]
							},
						]
					},
				]
			},
		},

custom.css:

.vbn .valueIcon.power {
  color: orange;
}

Cr4z33

@wishmaster270 thanks I applied that instead.

Anyway to add some offset to the module to be aligned with the other modules on the left?
Immagine 2022-10-04 171613.png

wishmaster270

@Cr4z33
sorry i do not understand exactly what you mean

Cr4z33

@wishmaster270 I wanted to move your module way more to the left so to align it with my other modules (Google Assistant, clock and Spotify).

However nevermind as I opted to have your module on top instead. ;)

Cr4z33

@wishmaster270 sorry for bothering you again… :grinning_face_with_sweat:

What if I want no border?

Would I have to edit the module’s CSS or can I just add something to custom.css?

wishmaster270

@Cr4z33
No problem.
Simply add

.vbn .groupWrapper {
  border-style: none;
  padding: 0px;
}

to your custom.css

Ps.: Try to never ever edit any files in the module directory (except mentioned in the documentation) as you will get problems with updates in the future otherwise!

Cr4z33

@wishmaster270 exactly what I wanted thanks!

wishmaster270

@Cr4z33
If you still want to move the content to the left you can try something like the following in your custom.css:

.vbn .groupWrapper {
  border-style: none;
  padding: 0px;
  margin-left: 20px;
}

.vbn .groupsWrapper, .vbn .groupWrapper, .vbn .itemsWrapper, .vbn .valueWrapper {
  justify-content: left;
  align-items: unset;
}

BKeyport

@wishmaster270

Hey, Tom - Trying to use this module to decode the json output by my weatherstation - Like https://forum.magicmirror.builders/topic/17396/json-request-module

What I’m getting from Command to notification module is:

WEATHERLINK {"data":{"did":"001D0A71573B","ts":1675287003,"conditions":[{"lsid":434637,"data_structure_type":1,"txid":1,"temp": 47.4,"hum":52.8,"dew_point": 31.0,"wet_bulb": 38.4,"heat_index": 46.4,"wind_chill": 47.4,"thw_index": 46.4,"thsw_index":null,"wind_speed_last":2.00,"wind_dir_last":31,"wind_speed_avg_last_1_min":2.62,"wind_dir_scalar_avg_last_1_min":6,"wind_speed_avg_last_2_min":2.81,"wind_dir_scalar_avg_last_2_min":358,"wind_speed_hi_last_2_min":5.00,"wind_dir_at_hi_speed_last_2_min":340,"wind_speed_avg_last_10_min":1.43,"wind_dir_scalar_avg_last_10_min":36,"wind_speed_hi_last_10_min":5.00,"wind_dir_at_hi_speed_last_10_min":336,"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":0,"rainfall_year":1750,"rain_storm_last":4,"rain_storm_last_start_at":1674798601,"rain_storm_last_end_at":1675000860},{"lsid":434634,"data_structure_type":4,"temp_in": 79.4,"hum_in":20.5,"dew_point_in": 35.5,"heat_index_in": 77.4},{"lsid":434633,"data_structure_type":3,"bar_sea_level":30.125,"bar_trend":-0.013,"bar_absolute":29.660}]},"error":null}

yes, the weather station dumps a mess. :)

my current config for the values by notification is just the basics, but should be grabbing the “hum” value for testing:

		{
			module: "MMM-ValuesByNotification",
			position: "top_left",
			header: "Module-1",
			config: {
				groups: [
					{
						items: [
							{
								notification: "WEATHERLINK",
								itemTitle: "Item-1",
								values: [
									{
										valueTitle: "Value-1",
										jsonpath: "hum",
									},
								]
							},
						]
					},
				]
			},
		},

I get initally “NA” as a value, then it flips to “Undefined”

Any clue on what I’m doing wrong, or is the feed from the weather station needing more of a massage to be useful?

thanks!

wishmaster270

@BKeyport Hi,
i formatted your output to understand the JSON structure you are using:

{
    "data": {
        "did": "001D0A71573B",
        "ts": 1675287003,
        "conditions": [
            {
                "lsid": 434637,
                "data_structure_type": 1,
                "txid": 1,
                "temp": 47.4,
                "hum": 52.8,
                "dew_point": 31.0,
                "wet_bulb": 38.4,
                "heat_index": 46.4,
                "wind_chill": 47.4,
                "thw_index": 46.4,
                "thsw_index": null,
                "wind_speed_last": 2.00,
                "wind_dir_last": 31,
                "wind_speed_avg_last_1_min": 2.62,
                "wind_dir_scalar_avg_last_1_min": 6,
                "wind_speed_avg_last_2_min": 2.81,
                "wind_dir_scalar_avg_last_2_min": 358,
                "wind_speed_hi_last_2_min": 5.00,
                "wind_dir_at_hi_speed_last_2_min": 340,
                "wind_speed_avg_last_10_min": 1.43,
                "wind_dir_scalar_avg_last_10_min": 36,
                "wind_speed_hi_last_10_min": 5.00,
                "wind_dir_at_hi_speed_last_10_min": 336,
                "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": 0,
                "rainfall_year": 1750,
                "rain_storm_last": 4,
                "rain_storm_last_start_at": 1674798601,
                "rain_storm_last_end_at": 1675000860
            },
            {
                "lsid": 434634,
                "data_structure_type": 4,
                "temp_in": 79.4,
                "hum_in": 20.5,
                "dew_point_in": 35.5,
                "heat_index_in": 77.4
            },
            {
                "lsid": 434633,
                "data_structure_type": 3,
                "bar_sea_level": 30.125,
                "bar_trend": -0.013,
                "bar_absolute": 29.660
            }
        ]
    },
    "error": null
}

The hum value is part of the first element with index 0 of the conditions object which is part of the data object.
This results in a more advanced jsonpath…

		{
			module: "MMM-ValuesByNotification",
			position: "top_left",
			header: "Module-1",
			config: {
				groups: [
					{
						items: [
							{
								notification: "WEATHERLINK",
								itemTitle: "Item-1",
								values: [
									{
										valueTitle: "Value-1",
										jsonpath: "data.conditions[0].hum",
									},
								]
							},
						]
					},
				]
			},
		},

This config works out of the box ;-)

Edit:

If the order of the elements of conditions varies you can use

jsonpath: "data.conditions..hum"

This one selects the hum value of any element of conditions.

BKeyport

@wishmaster270 Brilliant. Thank you. JSON is still quite the mystery to me sometimes. :)

BKeyport

One last thing - where in the CSS do I adjust the font size for the module? I want it to use the MM “Large” font, as it’s on a wall display across from my desk. Can’t seem to find it.

wishmaster270

@BKeyport
Hi, great that it works now.
There are two different ways of how to change the font-size.
Either by using the classes option and add large to the element you want the font-size to be changed. i.e.:

{
			module: "MMM-ValuesByNotification",
			position: "top_left",
			header: "Module-1",
			config: {
				groups: [
					{
						items: [
							{
								notification: "WEATHERLINK",
								itemTitle: "Item-1",
								values: [
									{
										classes: "large",
										valueTitle: "Value-1",
										jsonpath: "data.conditions..hum",
									},
								]
							},
						]
					},
				]
			},
		},

The main problem with this solution is that the font-size of the valueTitle and the value itself is changed.

Or you can use custom.css to do the job:

.MMM-ValuesByNotification .vbn .groupTitle,
.MMM-ValuesByNotification .vbn .itemTitle,
.MMM-ValuesByNotification .vbn .value,
.MMM-ValuesByNotification .vbn .valueTitle {
  font-size: var(--font-size-large);
  line-height: 1;
}

In this example the font-size of all titles and the value is changed. I use the font-size-large CSS variable of the main.css for this job.

BKeyport

Thanks again, man. :)

I might not have to work up my own module to get the notifications. 🤣

BKeyport

I’m using the example scripts in CommandToNotification using a BME280. I’m trying to keep the temperature in F to two digits, as the script or BME module is producing LONG temperature values. (76.0000000000000000000000001)

Using the configuration below, I’m not getting any rounding on output. The “valueFormat” is directly from your README.md.

		{
			module: "MMM-ValuesByNotification", // https://github.com/Tom-Hirschberger/MMM-ValuesByNotification
			position: "top_bar",
			config: {
				animationSpeed: 0,
				updateInterval: 15,
				groups: [
					{
						items: [
							{
								notification: "WEATHERLINK", 
								values: [
									{
										valueTitle: "Closet",
										valueUnit: "°F",
										jsonpath: "data.conditions[1].temp_in",
										naValue: "0",
									},
								]
							},
						]
					},
					{
						items: [
							{
								notification: "TEMPROOM",
								itemTitle: "Room",
								values: [
									{
										valueTitle: "Temp",
										valueUnit: "°F",
										naValue: "0",
										valueFormat: "Number(${value}).toFixed(2)",
										jsonpath: "temperature_f",
									},
								],
							},
						]
					}, 
				]
			},
		},