MMM-Image-On-Notification

[strawberry 3.141]

@ejay-ibm I’m not sure which modules you checked out, but there are a lot of modules listening on notifications from other modules.

Basically the elements you need are:

• a module variable that stores the image name

this.image = 'talking.gif'

• a notification handler that changes the current image

notificationReceived(notification, payload) {
  if (notification === 'SOME NOTIFICATION') {
    this.image = 'looking.gif';
  }
}

• a render function that displays the image

getDom() {
  const wrapper = document.createElement('div');
  const image = document.createElement('img');
  image.src = 'somepath' + this.image;
  wrapper.appendChild(image);
  return wrapper;
}

I think this should give you an idea how to solve it

[A Former User]

Making new module is somewhat not difficult and clear thing.
But I think how it could be done with existing modules by combination

1. MMM-HTMLBox (https://github.com/eouia/MMM-HTMLBox)
   It can insert static HTML on MM surface.
   So, it can show image also;

{
  module: "MMM-HTMLBox",
  position:"top_left",
  config: {
    width: "200px",
    height: "200px",
    refresh_interval_sec: 0, // you should not refresh, because content will be back to default value.
    content: `< img id="MY_ANIMATION" src="default.gif" />`,
  }
},

2. MMM-notificationTrigger (https://github.com/eouia/MMM-NotificationTrigger)
   Well, this module is not designed for this purpose, However I found it could be possible.

{
  module: 'MMM-NotificationTrigger',
  config: {
    triggers:[
      {
        trigger: "CHANGE_IMG_1",
        fires: [
          {
            fire:"DUMMY", 
            payload: (payload) => {
              var img = document.getElementById("MY_ANIMATION")
              img.src = "img1.gif"
              return payload
            },
          },
        ],
      },
      {
        trigger: "CHANGE_IMG_2",
        fires: [
          {
            fire:"DUMMY", 
            payload: (payload) => {
              var img = document.getElementById("MY_ANIMATION")
              img.src = "img2.gif"
              return payload
            },
          },
        ],
      },
    ]
  },
}

When CHANGE_IMG_1 (or anything you want) notification is received, this will emit DUMMY notification, but this is not important.
In payload callback function(it will be evaluated when the notification DUMMY be bursted), src of img will be changed.

I didn’t test. :D just thinking.

[ejay-ibm]

@sean Thank ( Again Sean)
I’m getting the following error :

config.js:40 Uncaught TypeError: Cannot set property 'src' of null
    at Object.payload (config.js:40)
    at Class.notificationReceived (MMM-NotificationTrigger.js:62)
    at sendNotification (main.js:95)
    at Object.sendNotification (main.js:498)
    at Class.sendNotification (module.js:368)
    at Class.socketNotificationReceived (MMM-Hotword.js:85)
    at module.js:246
    at r.<anonymous> (socketclient.js:25)
    at r.emit (index.js:83)
    at r.onevent (index.js:83)

config.js 40 is :

38           payload: (payload) => {
39            var img = document.getElementById("MY_ANIMATION")
40              img.src = "/home/pi/MagicMirror/jarvis-standby2.gif"
41              return payload

Any Idea ? Let me know if you need me to report this directly in git issues.

Thanks

[A Former User]

@ejay-ibm
Where is your default.gif?(#MY_ANIMATION)?

[ejay-ibm]

@sean
Right I was missing the first module .
Now this is what I’m getting

I feel stupid to not be able to debug such simple thing, but I’m sure you will figure out the error faster than me …

[sdetweil]

@ejay-ibm its ok, this is a tricky one… the forum has a problem with content that starts with the '< ’ symbol,
so to make it show, we have to put a space after it… so… in your content:, take the space out after that < symbol

[ejay-ibm]

Thank you @sdetweil That look better

Now I think it’s my last issue . The path …
I’m getting :
jarvis-standby2.gif:1 GET http://localhost:8080/jarvis-standby2.gif 404 (Not Found)
If the images is placed in /home/pi/MagicMirror/jarvis-standby2.gif

not sure what’s wrong and what is the “expectation” with the path …
Thanks

[sdetweil]

@ejay-ibm the default path for the localhost server is /home/pi/MagicMirror,

if you do

ls /home/pi/MagicMirror/jarvis-standby2.gif -laF
```

do you get a proper display out? 

linux/pi is case sensitive..

[ejay-ibm]

@sdetweil said in MMM-Image-On-Notification:

ls /home/pi/MagicMirror/jarvis-standby2.gif -laF

yup

i@ejaypi:~/MagicMirror$ ls /home/pi/MagicMirror/jarvis-standby2.gif -laF
-rw-r–r-- 1 pi pi 8735111 mars 1 19:58 /home/pi/MagicMirror/jarvis-standby2.gif

[ejay-ibm]

I found

src=“modules/MMM-HTMLBox/jarvis-standby2.gif”

that works …

thank you