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

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

[sdetweil]

@reverendz in the developers window (sources tab) you can see the keyboard module source too…
and put a stop on its notificationReceived() function

put a stop on your this.sendNotification() function line

when it stops, use the mouse to hover over the word this… does it look like module info??

there are lots of tricky items to deal with… especially if you have pages running… some modules won’t respond if they are ‘hidden’ by MMM-Pages
so, best is to start bare minimum…

YOU WILL have to create another module to do all this…
I can see using the button to CREATE… doing edit/delete will be harder trying to get to the data in another module. altho you can use JQuery pretty well,
how to get it invoked on that cal entry will be fun… (maybe monkeypatch module???)

there is NO MAGIC here, its all grunt work.

welcome to the fun of learning while developing…

i’ve got a hardware development kit that has left me completely blank wall for about 6 months now…
so I KNOW the feeling…

[sdetweil]

@reverendz i dont want to discourage you from getting this working

you might look at another collection of modules that aim to do the same. see

https://forum.magicmirror.builders/topic/18011/touchscreen-family-dashboard