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

[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?

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