MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    1. Home
    2. wishmaster270
    3. Posts
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.
    Offline
    • Profile
    • Following 0
    • Followers 6
    • Topics 16
    • Posts 329
    • Groups 2

    Posts

    Recent Best Controversial
    • RE: apt upgrade question

      @ankonaskiff17 Hi,

      it’s basically the same but not exactly…

      • apt full-upgrade upgrades all packages and removes old versions of the packages
      • apt dist-upgrade upgrades all packages and removes old versions but it tries to figure out which upgrade is more “worthful” if there are occur conflicts cause of the upgrades
      • apt update updates the locally saved list of available packages by downloading the current package list of all configured repositories
      • apt is the new replacement command of apt-get
      posted in General Discussion
      wishmaster270W
      wishmaster270
    • RE: MMM-Temperature uncaught exception...

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

      posted in Troubleshooting
      wishmaster270W
      wishmaster270
    • RE: Display image based on state or time

      @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:

      • The module connects to the MQTT-Server my_server to port the_port with user my_user and password my_pass
      • As listenMqtt is set to true the settings in mqttDictionary.js are used which results in:
        • If a message to mqttTopic magicmirror/tarrif/set is received the message is processed by the mqttNotiCmd energy_tarrif_value
        • As no payloadValue is specified the command is called independent of the message that is send to the topic
        • As no notiPayload 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 payload

      MMM-ValuesByNotification:

      • the module refreshes every ten seconds as updateInterval is set to 10
      • if no new notification is received for a configured notification of a item but the module refreshes it will reuse the last received value for a maximum of 90 times (reuseCount)
      • As 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)
      • As 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)
      • A single group with one item which contains one value is specified
      • The values of the item use the payload of the notification with id ENERGY_TARRIF
      • As default icon a image for the value (valueImgIcon) is used which has the path modules/MMM-ValuesByNotification/icons/tom.jpg (see Icon-Documentation for more details)
      • The value element selects the content with 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
      • As there are thresholds specified they are validated against the previously selected state
        • If the payload is equal to (eq) to the value PEAK the path of the valueimgIcon is changed to modules/MMM-ValuesByNotification/icons/peak.jpg
        • If the payload is equal to (eq) to the value OFF_PEAK the path of the valueimgIcon is changed to modules/MMM-ValuesByNotification/icons/off-peak.jpg
        • If the payload is equal to (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.

      posted in Troubleshooting
      wishmaster270W
      wishmaster270
    • RE: Display image based on state or time

      @chimera Hi and no problem, great you found a solution. My modules are much more complicated in this situation.

      posted in Troubleshooting
      wishmaster270W
      wishmaster270
    • RE: Display image based on state or time

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

      posted in Troubleshooting
      wishmaster270W
      wishmaster270
    • RE: Is there a Difference between these ???

      @plainbroke Hi,

      please use the code ticks to post code.

      Yes there is a difference, you missed a " before database in the second one.

      posted in Troubleshooting
      wishmaster270W
      wishmaster270
    • RE: MMM-ValuesByNotification, CSS Advice...

      @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;
      }
      
      posted in Custom CSS
      wishmaster270W
      wishmaster270
    • RE: MMM-ValuesByNotification, CSS Advice...

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

      posted in Custom CSS
      wishmaster270W
      wishmaster270
    • RE: MMM-ValuesByNotification, CSS Advice...

      @BKeyport Hi,

      tested some things. You want it to look something like this, right:
      ValuesByNotification-2Column.png

      I used these special config options:

      • As you do not display any group or item title i set the positions to “e” only. Which means only elements, nothing else.
      • As the titles of the first and second column are very different (the second column has shorter titles) i decided to add the classes “col1” and “col2” to the items.
      • As i did not want to setup a complete environment i set the “naValue” of each value to the values of your screenshot. Please skip that step!
      {
      			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;
      }
      
      posted in Custom CSS
      wishmaster270W
      wishmaster270
    • RE: MMM-ValuesByNotification, CSS Advice...

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

      posted in Custom CSS
      wishmaster270W
      wishmaster270
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 32
    • 33
    • 6 / 33