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

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!