ELI5 how notifications between modules work and how and where to create them

sdetweil

@reverendz so you have to create a button html/Dom object, as part of the response to getDom(), to be shown on the screen

Then you need to attach some handler/function to react when the button is pushed.

In the routine, you would add one line of code to call
this.sendNotification(Code, parms) as required by the keyboard module,
to tell the module supplying the keyboard to pop it up

I assume the keyboard will pop down, and send you back a notification with the text entered

(Not my modules, I just helped solve some problem)
This module reuses an existing routine
https://github.com/sdetweil/new-MP3Player

This one calls a new routine
https://github.com/sdetweil/MMM-MyVideoPlayer

sdetweil

@reverendz the how they work part

The sender calls
this.sendNotification(x,y)

Where x is the notification code some receiving module has published to accomplish the function you want
And y is whatever parameters that notification code might require

ALL modules running will receive a call at their notificationReceived(x,y) function

Any module receiving the message that understands what to do with code x, can handle it

At some time later one of the running modules will call this.sendNotification(q,z). With a response and ALL modules running will hear it.

sdetweil

@reverendz did you have time to look at this? If do, did you make progress?

sdetweil

@reverendz did you resolve this?

reverendz

@sdetweil

Hi, I’m frankly a bit embarrassed to reply.

I’m a newbie to all this, so while I’m able to get the modules working and have a passable custom.css, when I read things like:

“In the routine, you would add one line of code to call
this.sendNotification(Code, parms) as required by the keyboard module,
to tell the module supplying the keyboard to pop it up”

I have no idea what that means practically.

If I had an example, breaking it down like “edit this specific file and add this bit” and could play around with it, I’d get it. But reading that description, I’m totally lost.

sdetweil

@reverendz sendNotification can only be done in the browser side file, module_name.js

here is MMM-MotionDetector.js using code to watch camera feed. when motion is detected it informs its node_helper (in case the screen is off), this.sendSocketNotification()

AND it informs all the other modules
this.sendNotification()

in both cases the function takes two parameters
first is a string which means something, can be any string of any length, called notification in example code

second is any kind of data. also understood by whoever understands the notification code string,
called payload in example code

reverendz

@sdetweil

Thank you! That’s very helpful.

I wound up writing a very basic module to send a notification and it worked.

I’m still not sure how to integrate it into an existing module, but I am starting to understand it better.

sdetweil

@reverendz what module do you want to update?

sdetweil

@reverendz I ‘assume’ you want to have a something to trigger capturing some data to be input from the module (to cause the keyboard to pop up)

so, a button on the screen… this below is JUST the button content, all the other module content has to be created similarly
the button needs a function to handle when the button is pressed (onClick, or just click)

    getDom(){
     let wrapper = documentCreateElement("div")
         // create a button object
         let button_element = documentCreateElement("button")
         // identify the button
         button_element.id="openEditor"
         let self = this // this -> module object
         // connect button onclick to some routine
         button_element.addEventListener("click",self.someFunction(this))  // on button click, this -> button object, need to call function in module object
         // add the button object to the div we are sending back to MM , so it will be displayed
         wrapper.appendChild(button_element)   
     return wrapper
     }



someFunction(button){
    if(button.id=='openEditor")
       this.sendNotification(openEditor,... whatever parms)
}

reverendz

@sdetweil

It was working, then I changed a couple things and I can’t get it working again :|

So ideally, I’d like to understand notifications so that I can use an on screen menu to open a keyboard like this.

https://github.com/lavolp3/MMM-Keyboard

I’ve tried to modify pre-existing modules like these:

https://github.com/shbatm/MMM-OnScreenMenu

https://github.com/tjat84/MMM-SystemOptions/

https://github.com/Jopyth/MMM-Buttons

My idea is this: right now, I’ve got my Magic Mirror syncing with my calendar and it’s working pretty well with vdirsyncer.

I’d like to use an on-screen button or something in the EXT3 Calendar module to open a form with a keyboard.

I’d then write event details to the local calendar and then sync back to the cloud calendar.

Generally, it’d be nice to understand how to create buttons to do other functions as shown in https://github.com/shbatm/MMM-OnScreenMenu. The ability show/hide modules and even scroll to a different page using Carousel or Pages would be awesome too.

But I can’t seem to get past step one: send a notification to open the on screen keyboard. So far, I’ve gotten it working exactly once. Then I made a change and it’s failing.

I’m doing

npm start dev and I can see the notification is being sent. However, the keyboard isn’t responding even though I didn’t modify it at all.

Really appreciate the help, I’m real new to all this so just getting it set up with working modules was a win.