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

Touch or click buttons for new module i am building

Scheduled Pinned Locked Moved Development
3 Posts 2 Posters 215 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.
  • C Offline
    crg34711
    last edited by Jul 14, 2024, 3:23 PM

    Greetings and thanks for reading.

    I am working on building an app with a bunch of rotating data. For example if i wanted to display the top movies. The first screen would be a top 10 list. I want to put buttons on the screen just like https://github.com/shbatm/MMM-OnScreenMenu (which i cant get to work right.

    and label them by movie type. One button for drama, one button for Action, one for Comedy etc.

    When its clicked it can show or hide different modules on the page or send a module a command to filter it. In the app i am calling an API with parameters. In this case i want the module to call the api again with different parameters.

    Any ideas/Suggestions

    S 2 Replies Last reply Jul 14, 2024, 3:32 PM Reply Quote 0
    • S Away
      sdetweil @crg34711
      last edited by Jul 14, 2024, 3:32 PM

      @crg34711 said in Touch or click buttons for new module i am building:

      send a module a command to filter it

      everything you said is simple coding

      except that… "command to filter it… "

      you can only send notifications

      this.sendNotification(string, data)

      string is the identifier for the message
      it can be anything… each module can define their own things they understand
      data is ANY formatted data that the receiving module might need for whatever the notification string is.

      buttons are html buttons
      and what you do when the button event happens is entirely up to your module.

      there are modules that have buttons… look at their code
      there are modules that send notifications to other modules

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • S Away
        sdetweil @crg34711
        last edited by sdetweil Jul 17, 2024, 12:17 PM Jul 14, 2024, 3:49 PM

        @crg34711 also
        here is a tutorial for handling buttons in JS
        https://www.freecodecamp.org/news/html-button-onclick-javascript-click-event-tutorial/

        one thing to note…

        FINDING the button via ID
        (getElementsByID), won’t work UNTIL AFTER you have returned from getDom()
        because your new content is not IN the document tree (DOM) until MM inserts it after getDom() returns it…

        you don’t need to do it the find way, just add an eventListener to the button element in the getDom() routine itself. you just created the button… so you have its object already

        use the developer window (ctrl-shift-i) sources tab to debug step thru your code as it happens

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • 1 / 1
        1 / 1
        • First post
          2/3
          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