@Brown19 Hi,
your python script looks good to me and also the output of node_helper till the moment it tries to send the data to the frontend.
Can you provide your MagicMirror and nodejs version information to me, please?
@Brown19 Hi,
your python script looks good to me and also the output of node_helper till the moment it tries to send the data to the frontend.
Can you provide your MagicMirror and nodejs version information to me, please?
@chimera Hi and sure,
just tested a config which uses the values send by MQTT directly to decide which icon to display:
var mqttHook = [
{
mqttTopic: "magicmirror/tarrif/set",
mqttPayload: [
{
mqttNotiCmd: ["energy_tarrif_value"]
}
]
}
];
var mqttNotiCommands = [
{
commandId: "energy_tarrif_value",
notiID: "ENERGY_TARRIF"
}
];
module.exports = { mqttHook, mqttNotiCommands};
{
module: "MMM-MQTTbridge",
disabled: false,
config: {
mqttServer: "mqtt://my_user:my_pass@my_server:the_port",
mqttConfig: {
listenMqtt: true,
},
}
},
{
module: "MMM-ValuesByNotification",
position: "top_left",
header: "Energy",
config: {
updateInterval: 10,
reuseCount: 90,
valuePositions: "i",
valueNaPositions: "i",
itemPositions: "e",
groupPositions: "e",
groups: [
{
items: [
{
notification: "ENERGY_TARRIF",
valueImgIcon: "modules/MMM-ValuesByNotification/icons/tom.jpg",
values: [
{
jsonpath: "state",
thresholds: [
{
type: "eq",
value: "PEAK",
valueImgIcon: "modules/MMM-ValuesByNotification/icons/peak.jpg",
},
{
type: "eq",
value: "OFF-PEAK",
valueImgIcon: "modules/MMM-ValuesByNotification/icons/off-peak.jpg",
},
{
type: "eq",
value: "NIGHT",
valueImgIcon: "modules/MMM-ValuesByNotification/icons/night.jpg",
},
]
},
]
},
]
},
]
},
},
Explanation…
MMM-MQTTbridge:
my_server
to port the_port
with user my_user
and password my_pass
listenMqtt
is set to true
the settings in mqttDictionary.js
are used which results in:
mqttTopic
magicmirror/tarrif/set
is received the message is processed by the mqttNotiCmd
energy_tarrif_value
payloadValue
is specified the command is called independent of the message that is send to the topicnotiPayload
is set in the command configuration but the notiID
ENERGY_TARRIF
every time a message is received of the specified topic a notification is send to all other modules with notification id ENERGY_TARRIF
and the original MQTT message as payloadMMM-ValuesByNotification:
updateInterval
is set to 10
notification
of a item but the module refreshes it will reuse the last received value for a maximum of 90 times (reuseCount
)valuePositions
and valueNaPositions
are set to i
only a specified icon will be displayed instead of the value itself (which will be v
or if both should be displayed vi
; see Positions-Documentation for more info)itemPositions
and groupPositions
are both set to e
only the elements and no additional titles (t
) or icons (i
) are displayed ( see Positions-Documentation for more info)ENERGY_TARRIF
valueImgIcon
) is used which has the path modules/MMM-ValuesByNotification/icons/tom.jpg
(see Icon-Documentation for more details)jsonpath
state
as its value. This means the payload of the notification is parsed as JSON and the value which is used in further processing is the content of the state
element. This can be everything the HomeAssistant sends but should be either PEAK
, OFF_PEAK
or NIGHT
thresholds
specified they are validated against the previously selected state
eq
) to the value
PEAK
the path of the valueimgIcon
is changed to modules/MMM-ValuesByNotification/icons/peak.jpg
eq
) to the value
OFF_PEAK
the path of the valueimgIcon
is changed to modules/MMM-ValuesByNotification/icons/off-peak.jpg
eq
) to the value
NIGHT
the path of the valueimgIcon
is changed to modules/MMM-ValuesByNotification/icons/night.jpg
Directly after the start the MMM-ValuesByNotification module will display the default icon. Every 10 seconds it refreshes. If a message for the specified topic is received by MMM-MQTTbridge the notification is send. The next time the module refreshes it will validate the message content and changes the icon depending on the content.
@chimera Hi and no problem, great you found a solution. My modules are much more complicated in this situation.
@chimera Hi, you may be able to use my MMM-ValuesByNotification for this job.
It is a little hack but i tested it and it seems to work.
The basic idea of the module is to display values send by notifications of other modules
BUT
the module has the ability to display a default value (naValue
) if no value has been send by any other module. It has abilities to display icons instead the value and change the icons based on thresholds (conditions). In combination with the support to define functions to format the values before the check of the conditions it will be possible to get the current time:
{
module: "MMM-ValuesByNotification",
position: "top_left",
header: "Energy",
config: {
updateInterval: 60,
valuePositions: "i",
valueNaPositions: "i",
itemPositions: "e",
groupPositions: "e",
formatNaValue: true,
transformerFunctions: {
naToImgIdent: (value) => {
let curHour = new Date().getHours();
if ((curHour >= 0) && (curHour <= 6)){
//From 0 to 6 o clock
return "a"
} else if ((curHour >= 7) && (curHour <= 12)) {
//From 7 to 12 o clock
return "b"
} else if ((curHour >= 13) && (curHour <= 18)) {
//From 13 to 18 o clock
return "c"
} else {
//From 19 to 23 o clock
return "d"
}
}
},
groups: [
{
items: [
{
notification: "ICON_DUMMY_ABC",
valueImgIcon: "modules/MMM-ValuesByNotification/icons/tom.jpg",
values: [
{
valueTransformers: ["naToImgIdent"],
thresholds: [
{
type: "eq",
value: "a",
valueImgIcon: "modules/MMM-ValuesByNotification/icons/tom.jpg",
},
{
type: "eq",
value: "b",
valueImgIcon: "modules/MMM-ValuesByNotification/icons/tom2.jpg",
},
{
type: "eq",
value: "c",
valueImgIcon: "modules/MMM-ValuesByNotification/icons/tom.jpg",
},
{
type: "eq",
value: "d",
valueImgIcon: "modules/MMM-ValuesByNotification/icons/tom2.jpg",
},
]
},
]
},
]
},
]
},
},
Edit:
I should have read your question in detail first :-)
If you can provide the state via MQTT already you can for sure use this module. You will need MMM-MQTTbridge to send the value as payload of a notification. Check for the notification in MMM-ValuesByNotification and display the icon you like.
@plainbroke Hi,
please use the code ticks to post code.
Yes there is a difference, you missed a " before database in the second one.
@BKeyport Hi and sorry, my fault.
I added the items in the wrong order to the group.
The main idea is that all items are in a row. Every time the space on the right side is not enough to display the next item a new line starts.
As the maximum width of the module is set to 700px only two items fit in a row. Thats why we get two columns here but the order of the items in the config matters.
In the config i additionally add the classes col1
and col2
to the items. This way i can set the width of the titles in the first column different to the ones of the second column.
I re-arranged the items to the structure of the initial post and increased the width of the titles a little bit:
{
module: "MMM-ValuesByNotification", // https://github.com/Tom-Hirschberger/MMM-ValuesByNotification
position: "top_center",
config: {
animationSpeed: 0,
updateInterval: 3600,
groupPositions: "e",
itemPositions: "e",
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;
},
},
groups: [
{
items: [
{
notification: "WeatherLink",
classes: "col1",
values: [
{
valueTitle: "Temperature Outdoors",
valueUnit: "°",
jsonpath: "data.conditions[0].temp",
valueFormat: "Number(${value}).toFixed(2)",
},
],
},
{
notification: "WeatherLink",
classes: "col2",
values: [
{
valueTitle: "Indoor Humidity",
valueUnit: "%",
jsonpath: "data.conditions[1].hum_in",
},
]
},
{
notification: "TempRoom",
classes: "col1",
values: [
{
valueTitle: "My Office Temperature",
valueUnit: "°",
jsonpath: "temperature_f",
valueFormat: "Number(${value}).toFixed(2)",
},
],
},
{
notification: "WeatherLink",
classes: "col2",
values: [
{
valueTitle: "Outdoor Humidity",
valueUnit: "%",
jsonpath: "data.conditions[0].hum",
},
]
},
{
notification: "TempCase",
classes: "col1",
values: [
{
valueTitle: "CPU Case Temperature",
valueUnit: "°",
jsonpath: "temperature_f",
valueFormat: "Number(${value}).toFixed(2)",
},
],
},
{
notification: "WeatherLink",
classes: "col2",
values: [
{
valueTitle: "Wind Speed",
valueUnit: "MPH",
jsonpath: "data.conditions[0].wind_speed_last",
unitSpace: true,
}
]
},
{
notification: "WeatherLink",
classes: "col1",
values: [
{
valueTitle: "Utility Room Temperature",
valueUnit: "°",
jsonpath: "data.conditions[1].temp_in",
valueFormat: "Number(${value}).toFixed(2)",
},
],
},
{
notification: "WeatherLink",
classes: "col2",
values: [
{
valueTitle: "Wind Direction",
jsonpath: "data.conditions[0].wind_dir_last",
valueTransformers: ["degToCompass"],
},
]
},
],
},
],
},
}
.MMM-ValuesByNotification{
width: 700px;
}
.MMM-ValuesByNotification .vbn .groupWrapper {
border-radius: 0px;
border-style: none;
}
.MMM-ValuesByNotification .vbn .itemsWrapper {
flex-direction: row;
flex-wrap: wrap;
column-gap: 30px;
justify-content: space-around;
}
.MMM-ValuesByNotification .vbn .itemWrapper {
flex-direction: row;
justify-content: unset;
}
.MMM-ValuesByNotification .vbn .valueWrapper {
flex-direction: row;
column-gap: 10px;
justify-content: unset;
}
.MMM-ValuesByNotification .vbn .col1 .valueWrapper {
min-width: 310px;
}
.MMM-ValuesByNotification .vbn .col2 .valueWrapper {
min-width: 285px;
}
.MMM-ValuesByNotification .vbn .wrap1 {
justify-content: flex-start;
}
.MMM-ValuesByNotification .vbn .valueTitle {
text-align: left;
}
.MMM-ValuesByNotification .vbn .col1 .valueTitle {
min-width: 220px;
}
.MMM-ValuesByNotification .vbn .col2 .valueTitle {
min-width: 210px;
}
@BKeyport Hi,
thank you for the config. There was a main difference in yours and mine. You added the last four values in one item, i had single items.
There was a problem with the column definitions in you config, but i think i figured the things out.
Its a little bit messy but i think it will work:
custom.css
.MMM-ValuesByNotification{
width: 700px;
}
.MMM-ValuesByNotification .vbn .groupWrapper {
border-radius: 0px;
border-style: none;
}
.MMM-ValuesByNotification .vbn .itemsWrapper {
flex-direction: row;
flex-wrap: wrap;
column-gap: 30px;
justify-content: space-around;
}
.MMM-ValuesByNotification .vbn .itemWrapper {
flex-direction: row;
justify-content: unset;
}
.MMM-ValuesByNotification .vbn .valueWrapper {
flex-direction: row;
column-gap: 10px;
justify-content: unset;
}
.MMM-ValuesByNotification .vbn .col1 .valueWrapper {
min-width: 290px;
}
.MMM-ValuesByNotification .vbn .col2 .valueWrapper {
min-width: 260px;
}
.MMM-ValuesByNotification .vbn .wrap1 {
justify-content: flex-start;
}
.MMM-ValuesByNotification .vbn .valueTitle {
text-align: left;
}
.MMM-ValuesByNotification .vbn .col1 .valueTitle {
min-width: 210px;
}
.MMM-ValuesByNotification .vbn .col2 .valueTitle {
min-width: 200px;
}
config.js:
{
module: "MMM-ValuesByNotification", // https://github.com/Tom-Hirschberger/MMM-ValuesByNotification
position: "top_center",
config: {
animationSpeed: 0,
updateInterval: 15,
groupPositions: "e",
itemPositions: "e",
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;
},
},
groups: [
{
items: [
{
notification: "WeatherLink",
classes: "col1",
values: [
{
valueTitle: "Temperature Outdoors",
valueUnit: "°",
jsonpath: "data.conditions[0].temp",
valueFormat: "Number(${value}).toFixed(2)",
},
],
},
{
notification: "TempRoom",
classes: "col2",
values: [
{
valueTitle: "My Office Temperature",
valueUnit: "°",
jsonpath: "temperature_f",
valueFormat: "Number(${value}).toFixed(2)",
},
],
},
{
notification: "TempCase",
classes: "col1",
values: [
{
valueTitle: "CPU Case Temperature",
valueUnit: "°",
jsonpath: "temperature_f",
valueFormat: "Number(${value}).toFixed(2)",
},
],
},
{
notification: "WeatherLink",
classes: "col2",
values: [
{
valueTitle: "Utility Room Temperature",
valueUnit: "°",
jsonpath: "data.conditions[1].temp_in",
valueFormat: "Number(${value}).toFixed(2)",
},
],
},
{
notification: "WeatherLink",
classes: "col1",
values: [
{
valueTitle: "Indoor Humidity",
valueUnit: "%",
jsonpath: "data.conditions[1].hum_in",
},
]
},
{
notification: "WeatherLink",
classes: "col2",
values: [
{
valueTitle: "Outdoor Humidity",
valueUnit: "%",
jsonpath: "data.conditions[0].hum",
},
]
},
{
notification: "WeatherLink",
classes: "col1",
values: [
{
valueTitle: "Wind Speed",
valueUnit: "MPH",
jsonpath: "data.conditions[0].wind_speed_last",
unitSpace: true,
}
]
},
{
notification: "WeatherLink",
classes: "col2",
values: [
{
valueTitle: "Wind Direction",
jsonpath: "data.conditions[0].wind_dir_last",
valueTransformers: ["degToCompass"],
},
]
},
],
},
],
},
}
Edit: Maybe i have time to search for an easier solution at the weekend.
@BKeyport Hi,
tested some things. You want it to look something like this, right:
I used these special config options:
{
module: "MMM-ValuesByNotification",
position: "top_center",
//header: "Module-1",
config: {
updateInterval: 3600,
groupPositions: "e",
itemPositions: "e",
unitSpace: true,
groups: [
{
items: [
{
notification: "TEST1",
classes: "col1",
values: [
{
valueTitle: "Temperature Outdoors",
naValue: "68.60",
valueUnit: "°"
},
]
},
{
notification: "TEST2",
classes: "col2",
values: [
{
valueTitle: "Indoor Humidity",
naValue: "26.8",
valueUnit: "%"
},
]
},
{
notification: "TEST3",
classes: "col1",
values: [
{
valueTitle: "My Office Temperature",
naValue: "77.59",
valueUnit: "°"
},
]
},
{
notification: "TEST4",
classes: "col2",
values: [
{
valueTitle: "Outdoor Humidity",
naValue: "58.4",
valueUnit: "%"
},
]
},
{
notification: "TEST5",
classes: "col1",
values: [
{
valueTitle: "CPU Case Temperature",
naValue: "87.15",
valueUnit: "°"
},
]
},
{
notification: "TEST6",
classes: "col2",
values: [
{
valueTitle: "Wind Speed",
naValue: "0",
valueUnit: "MPH"
},
]
},
{
notification: "TEST7",
classes: "col1",
values: [
{
valueTitle: "Utility Room Temperature",
naValue: "92.50",
valueUnit: "°"
},
]
},
{
notification: "TEST8",
classes: "col2",
values: [
{
valueTitle: "Wind Direction",
naValue: "N",
valueUnit: " "
},
]
},
]
},
]
},
},
I then set the following custom.css options:
.MMM-ValuesByNotification{
width: 700px;
}
.MMM-ValuesByNotification .vbn .groupWrapper {
border-radius: 0px;
border-style: none;
}
.MMM-ValuesByNotification .vbn .itemsWrapper {
flex-direction: row;
flex-wrap: wrap;
column-gap: 30px;
}
.MMM-ValuesByNotification .vbn .itemWrapper {
flex-direction: row;
justify-content: unset;
}
.MMM-ValuesByNotification .vbn .valueWrapper {
flex-direction: row;
column-gap: 10px;
justify-content: unset;
}
.MMM-ValuesByNotification .vbn .col1 .valueWrapper {
min-width: 277px;
}
.MMM-ValuesByNotification .vbn .col2 .valueWrapper {
min-width: 213px;
}
.MMM-ValuesByNotification .vbn .valueTitle {
text-align: left;
}
.MMM-ValuesByNotification .vbn .col1 .valueTitle {
min-width: 210px;
}
.MMM-ValuesByNotification .vbn .col2 .valueTitle {
min-width: 150px;
}
@BKeyport Hi and sure I will try to help.
I think a possible way would be to set some min-width
.
Can you share your module config?
It’s easier for me to setup a test environment with it.
@grantc66
There are ways to move windows to a specific screen on the bash. But it is complicated.
Maybe one of the solutions in this thread solves your problem.