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

[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

[sdetweil]

@ejay-ibm actually looks like the base is

/home/pi/MagicMirror/modules

code in app/server.js

var directories = ["/config", "/css", "/fonts", "/modules", "/vendor", "/translations", "/tests/configs"];

sets up listening on those folders

[ejay-ibm]

Thank you @Sean & @sdetweil
This is the draft result. I still have to work on the talking image. that one is a quick test.

https://drive.google.com/open?id=1G34tJ-1trMCK1yEJK0C6gIw3Nx3O8X8Q

As you can see the animation is triggered a bit early.
As I discussed with you Sean This is why I would need an additional notification between HOTWORD_PAUSE & ASSISTANT_ACTIVATE (I’ll use this notification as well to turn down the volume when user command is given in case any music is played on the mirror )

thank you again

Ejay

[ejay-ibm]

@sdetweil I didn’t know that . Thanks I learnt something
I’ll use config folder then

Ejay

[sdetweil]

@ejay-ibm i would try to stay away from MM folders… create another under modules for your own content

[ejay-ibm]

@sdetweil Yes config/images or modules/images
Both would be ok since not overwritten in case of an update.
Good Idea.