SOLVED MMM-Image-On-Notification

ejay-ibm

Hello all,

I’d like some help to develop a module to display particular local images depending on a notification received.

I have developed a few gif images to display an AI face with different attitudes.
1- Standby ( Mouth closed, head move, eyes looking here -and there…)
https://drive.google.com/open?id=1zff5H4RN9azpUpuUj_9scDhCgeMgZI73
2- Talk ( Mouth talking, with other face animations )
3- (why not) Sing/dance ( head banging) ( Still working on that one as it needs more facial expression )

well, that’s my idea but any images from a sequential given list could be sync with any notification received to the user choice.

I walked around a few image modules but couldn’t find one that handles notifications.

Is someone interested in developing it?

Thank you

Ejay

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

Sean

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

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" />`,
  }
},

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

Sean

@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

0_1551468834882_Capture d’écran 2019-03-01 à 20.33.12.png

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