Touch or click buttons for new module i am building

crg34711

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

sdetweil

@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

sdetweil

@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