• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

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

Scheduled Pinned Locked Moved Unsolved Troubleshooting
13 Posts 2 Posters 1.4k Views 2 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    sdetweil @reverendz
    last edited by sdetweil Nov 29, 2024, 9:21 PM Nov 29, 2024, 9:20 PM

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

    Sam

    How to add modules

    learning how to use browser developers window for css changes

    1 Reply Last reply Reply Quote 0
    • S Offline
      sdetweil @reverendz
      last edited by Dec 2, 2024, 12:57 PM

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

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      R 1 Reply Last reply Dec 25, 2024, 7:48 PM Reply Quote 0
      • S Offline
        sdetweil @reverendz
        last edited by Dec 22, 2024, 3:56 PM

        @reverendz did you resolve this?

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • R Offline
          reverendz @sdetweil
          last edited by Dec 25, 2024, 7:48 PM

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

          S 1 Reply Last reply Dec 25, 2024, 8:25 PM Reply Quote 0
          • S Offline
            sdetweil @reverendz
            last edited by sdetweil Dec 26, 2024, 12:14 AM Dec 25, 2024, 8:25 PM

            @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()
            IMG_0571.png

            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

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            R 1 Reply Last reply Dec 26, 2024, 10:26 PM Reply Quote 0
            • R Offline
              reverendz @sdetweil
              last edited by Dec 26, 2024, 10:26 PM

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

              S 2 Replies Last reply Dec 26, 2024, 10:43 PM Reply Quote 0
              • S Offline
                sdetweil @reverendz
                last edited by Dec 26, 2024, 10:43 PM

                @reverendz what module do you want to update?

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                R 1 Reply Last reply Dec 26, 2024, 11:24 PM Reply Quote 0
                • S Offline
                  sdetweil @reverendz
                  last edited by sdetweil Dec 26, 2024, 10:58 PM Dec 26, 2024, 10:55 PM

                  @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)
                  }
                  

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • R Offline
                    reverendz @sdetweil
                    last edited by Dec 26, 2024, 11:24 PM

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

                    S 1 Reply Last reply Dec 26, 2024, 11:36 PM Reply Quote 0
                    • S Offline
                      sdetweil @reverendz
                      last edited by Dec 26, 2024, 11:36 PM

                      @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…

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      S 1 Reply Last reply Dec 28, 2024, 1:29 PM Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      • First post
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy