MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Display image based on state or time

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    7 Posts 2 Posters 485 Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C Offline
      chimera
      last edited by

      Hey, I want to display an image (or rather an icon) showing when I’m being billed by my power company at either peak, off peak or night rates. So an if then else condition, either by time of day or alternately because I have that state known already in home assistant then either by mqtt or restful api.

      I’ve googled searched and also scrolled through the modules and can find some things that do half the job or combined could probably hack it, but want to know is there a conditional module available that will do this easily? If not what’s the best method to achieve this?

      Thanks

      wishmaster270W 1 Reply Last reply Reply Quote 0
      • wishmaster270W Offline
        wishmaster270 Module Developer @chimera
        last edited by

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

        C 2 Replies Last reply Reply Quote 1
        • C Offline
          chimera @wishmaster270
          last edited by

          @wishmaster270 thanks, but I’m really confused by the notifications side.

          I’ve setup mqttDictionary.js

          var mqttHook = [
              {
                mqttTopic: "magicmirror/tarrif/set",
                mqttPayload: [
                  {
                    payloadValue: '{"state": "PEAK"}',
                    mqttNotiCmd: ["Command PEAK"]
                  },
                  {
                    payloadValue: '{"state": "OFF-PEAK"}',
                    mqttNotiCmd: ["Command OFF-PEAK"]
                  },
                  {
                    payloadValue: '{"state": "NIGHT"}',
                    mqttNotiCmd: ["Command NIGHT"]
                  },
                ],
              },
            ];
          var mqttNotiCommands = [
              {
                commandId: "Command PEAK",
                notiID: "ENERGY_TARRIF",
                notiPayload: {action: 'PEAK'}
              },
              {
                commandId: "Command OFF-PEAK",
                notiID: "ENERGY_TARRIF",
                notiPayload: {action: 'OFF-PEAK'}
              },
              {
                commandId: "Command NIGHT",
                notiID: "ENERGY_TARRIF",
                notiPayload: {action: 'NIGHT'}
              },  
            ];
          
            module.exports = { mqttHook,  mqttNotiCommands};
          

          So ‘magicmirror/tarrif/set’ topic gets set to either PEAK, OFF-PEAK or NIGHT via Home Assistant mqtt publish action, and the above sees this then this sets the notification payload to send.

          What I don’t understand is how to display the appropriate .png file using your module. I assume notification: “ENERGY_TARRIF” relates to the notification ID in the dictionary (?) but what relates to the payload? Based on your example I assumed it would be, eg: value: “PEAK” with the valueImgIcon underneath but that doesn’t work.

          I just get all 3 images showing with NA underneath.

          1 Reply Last reply Reply Quote 0
          • C Offline
            chimera @wishmaster270
            last edited by sdetweil

            @wishmaster270 Thanks anyway and nevermind, I use MMM-MQTT already and found this to be considerably easier using the ‘conversions’ functionality…

            {
            			module: 'MMM-MQTT',
            			position: 'top_right',
            			header: 'ENERGY TARRIF',
            			config: {
            				logging: false,
            				useWildcards: false,
            				mqttServers: [
            					{
            						address: '192.168.222.100',
            						port: '1883',
            						user: 'mqtt',
            						password: 'password,
            						subscriptions: [
            							{
            								topic: "magicmirror/tarrif/set",
            								maxAgeSeconds: 60,
            								label: "",
            								conversions: [
            								  {
            									from: "PEAK",
            									to: "<img src='modules/default/icons/peak.png' width=80px>",
            								  },
            								  {
            									from: "OFF-PEAK",
            									to: "<img src='modules/default/icons/offpeak.png' width=80px>",
            								  },
            								  {
            									from: "NIGHT",
            									to: "<img src='modules/default/icons/night.png' width=80px>",
            								  },
            								  {
            									from: "",
            									to: "#DISABLED#",
            								  },
            								]
            							}
            						]
            					}
            				],
            			}
            		},
            
            wishmaster270W 1 Reply Last reply Reply Quote 0
            • wishmaster270W Offline
              wishmaster270 Module Developer @chimera
              last edited by

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

              C 1 Reply Last reply Reply Quote 0
              • C Offline
                chimera @wishmaster270
                last edited by

                @wishmaster270 For my own understanding (and possibly others) I’d still like to know how notifications work in your module, what variable determines the payload? How would I select an image based on a notification from the MQTTbridge? I see your example uses code to return a variable based on time of day, but if that comes in via notifications instead how would one display the correct image?

                wishmaster270W 1 Reply Last reply Reply Quote 0
                • wishmaster270W Offline
                  wishmaster270 Module Developer @chimera
                  last edited by wishmaster270

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

                  1 Reply Last reply Reply Quote 0
                  • 1 / 1
                  • First post
                    Last post
                  Enjoying MagicMirror? Please consider a donation!
                  MagicMirror created by Michael Teeuw.
                  Forum managed by Sam, technical setup by Karsten.
                  This forum is using NodeBB as its core | Contributors
                  Contact | Privacy Policy