Need help - New programmer

sdetweil · Dec 20, 2020, 9:33 PM

@innovation the ‘string’ is the value used in the getDom() function to create the html content

somestring:“this is just a test string”,
counter: 0,

getDom(){
   var wrapper=createElement("div")
   wrapper.innerText=this.somestring
   return wrapper;
}

there is no stopping the module, it MUST always be running… so, if u want to change the string,
you can start a timer, and when the timer expires, call a routine that does the work.

timerRoutine: function(){
     this.somestring="some other string"
}

but how does MM know u changed the value?
u tell MM there is new content…

timerRoutine: function(){
     this.somestring="some other string "+ this.counter++;
     this.updateDom(time_to_delay_in_ms, 0 = immediately)
}

now we need to start a timer… lets say, 15 seconds after we do it in getDom, lets change the text

getDom(){
   var wrapper=createElement("div')
   wrapper.innerText=this.somestring  // use the value of the somestring variable to display
  setTimeout(this.timerRoutine, 15000)   // call the timerRoutine in 15000 milliseconds
   return wrapper;
   // after here , MM will put the html tree defined in wrapper,
   // in the 'position' the module  defined in config.js
}

another way is to use the repeating timer, instead of the single event version

start: {
    // now the timerRoutine will be called every 15 seconds, forever
    // it will change the string, and then inform MM to call to get new content
    setInterval(this.timerRoutine,15000) //  start a repeating timer  every 15 seconds
},

getDom(){
   var wrapper=createElement("div')
   wrapper.innerText=this.somestring  // use the value of the somestring variable to display
   return wrapper;
}

you can do this same updateDom() call after receiving a message back from your node helper with new content.
(my sample module does this)

innovation · Dec 21, 2020, 1:55 PM

@ sdetweil, this is what I have entered in the js file. I am still not getting it:

/*

sample module structure


 */


Module.register("SampleModule", {
// define variables used by module, but not in config data
some_variable:  true,
some_other_variable: "a string",

// holder for config info from module_name.js
config:null,

// anything here in defaults will be added to the config data
// and replaced if the same thing is provided in config
defaults: {
message: "STAY HYDRATED! DRINK A GLASS OF WATER"
},

init: function(){
Log.log(this.name + " is in init!");
},

start: function(){
Log.log(this.name + " is starting!");
},

loaded: function(callback) {
Log.log(this.name + " is loaded!");
callback();
},

// return list of other functional scripts to use, if any (like require in node_helper)
getScripts: function() {
return	[
// sample of list of files to specify here, if no files,do not use this routine, or return empty list

//'script.js', // will try to load it from the vendor folder, otherwise it will load is from the module folder.
//'moment.js', // this file is available in the vendor folder, so it doesn't need to be available in the module folder.
//this.file('anotherfile.js'), // this file will be loaded straight from the module folder.
//'https://code.jquery.com/jquery-2.2.3.min.js',  // this file will be loaded from the jquery servers.
]
}, 

// return list of stylesheet files to use if any
getStyles: function() {
return [
// sample of list of files to specify here, if no files, do not use this routine, , or return empty list

//'script.css', // will try to load it from the vendor folder, otherwise it will load is from the module folder.
//'font-awesome.css', // this file is available in the vendor folder, so it doesn't need to be avialable in the module folder.
//this.file('anotherfile.css'), // this file will be loaded straight from the module folder.
//'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',  // this file will be loaded from the bootstrapcdn servers.
]
},




// return list of translation files to use, if any
/*getTranslations: function() {
return {
// sample of list of files to specify here, if no files, do not use this routine, , or return empty list

// en: "translations/en.json",  (folders and filenames in your module folder)
// de: "translations/de.json"
}
}, */ 



// only called if the module header was configured in module config in config.js
// getHeader: function() {
//	return this.data.header + " Foo Bar";
// },

// messages received from other modules and the system (NOT from your node helper)
// payload is a notification dependent data structure
notificationReceived: function(notification, payload, sender) {
// once everybody is loaded up
if(notification==="ALL_MODULES_STARTED"){
// send our config to our node_helper
this.sendSocketNotification("CONFIG",this.config)
}
if (sender) {
Log.log(this.name + " received a module notification: " + notification + " from sender: " + sender.name);
} else {
Log.log(this.name + " received a system notification: " + notification);
}
},

// messages received from from your node helper (NOT other modules or the system)
// payload is a notification dependent data structure, up to you to design between module and node_helper
socketNotificationReceived: function(notification, payload) {
Log.log(this.name + " received a socket notification: " + notification + " - Payload: " + payload);
if(notification === "message_from_helper"){
this.config.message = payload;
// tell mirror runtime that our data has changed,
// we will be called back at GetDom() to provide the updated content
this.updateDom(1000)
}

},

// system notification your module is being hidden
// typically you would stop doing UI updates (getDom/updateDom) if the module is hidden
suspend: function(){

},

// system notification your module is being unhidden/shown
// typically you would resume doing UI updates (getDom/updateDom) if the module is shown
resume: function(){

},

// this is the major worker of the module, it provides the displayable content for this module

start: {
    // now the timerRoutine will be called every 15 seconds, forever
    // it will change the string, and then inform MM to call to get new content
    setInterval(this.timerRoutine,15000) //  start a repeating timer  every 15 seconds
},

getDom (){
   var wrapper=createElement("div")
   wrapper.innerText=this.somestring  // use the value of the somestring variable to display
   return wrapper;
}




// if user supplied message text in its module config, use it
if(this.config.hasOwnProperty("message")){
// using text from module config block in config.js
wrapper.innerHTML = this.config.message;
}
else{
// use hard coded text
wrapper.innerHTML = "Hello world!";
}

// pass the created content back to MM to add to DOM.
return wrapper;
},


timerRoutine: function(){
     this.somestring="some other string "+ this.counter++;
     this.updateDom(time_to_delay_in_ms, 0 = immediately)
}


})

sdetweil · Dec 21, 2020, 2:40 PM

@innovation this sample module shows a whole host of things.

default message that CAN be overridden by one placed in the module config in config.js

     defaults: {
     message: "STAY HYDRATED! DRINK A GLASS OF WATER"
     },

      config:{
            message: "some message  to replace the default"
      }

use of the notification that all modules are loaded and started, to send an event to the node_helper

     notificationReceived(), ALL_MODULES_STARTED
     sendSocketNotification

the node helper received the config info and does some processing (by using a timer in this example),

     receiveSocketNotification

     then sends data back to the module  sendSocketNotification()

 this 'data' is the configured message, the module sends all the config down to the helper,
 the helper sends back JUST the message to display from the config info

 it just shows how the parts fit together and communicate with each other

4a. the module receives the notice from the node_helper, and then setup up to display that data

        socketNotificationReceived()

4b. the module tells MM that there is new data to display

        updateDom(1000)

the module formats the data for display

     getDom()

now, the current implementation ONLY sends and displays the message once…
send down to node_helper, timer, send to module, display

u want two things

make message go away
display some other message

but u need something to start the work… after all of the above, there is nothing to do… getDom() ALWAYS displays whatever is in the message variable.

SO, we could start ANOTHER timer, and when it expires, cause getDom() to display something different (from the same old place)

the timerRoutine() will do the second part , change the message variable, and tell MM it changed, which calls getDom()

but some NEW code has to cause the timerRoutine to run…

for this example, when getDom() runs, lets add some code to run the timerRoutine later

setTimeout(this.timerRoutine, ???) where ??? is some number of milliseconds
15000 is 15 seconds (15 seconds times 1000 milliseconds per second)

so , our updated getDom() looks like this

getDom (){
   var wrapper=createElement("div")
   wrapper.innerText=this.somestring  // use the value of the somestring variable to display
   setTimeout(this.timerRoutine, 15000)   // start a timer, when it expires call our routine 
   return wrapper;
}

so lets look at our timerRoutine
every time it runs, it will update the counter variable and then create a new message string

timerRoutine: function(){
     this.somestring="some other string "+ this.counter++;
     this.updateDom(?????) // time_to_delay_in_ms, 0 = immediately
}

updateDom takes a number as a parameter, number of milliseconds…
how FAST do you want the new info to display??? immediately? or after some time?
if immediately, then the number is 0

so, the updated routine looks like this

timerRoutine: function(){
     this.somestring="some other string "+ this.counter++;
     this.updateDom(0) // time_to_delay_in_ms, 0 = immediately
}

(ps u need to add the counter variable at the top near your defaults, not IN defaults, so that this code will work)

so, now we have the whole loop, start, send to node_helper, node_helper waits, sends message back, module updates variable, and tells mm we have content, mm calls getDom, which creates the html content to display, starts ANOTHER (one time) timer, and gives the current content to MM.

and then that timer expires and calls our routine, which changes the variable, and tells MM we have new content, mm calls getDom, which creates the html content to display, starts ANOTHER (one time) timer, and gives the current content to MM.

repeat this last cycle forever, over and over and over.

so the displayed message will change every 15 seconds

so, NOW you want the message to go away, before the next message appears…
well, we have to start some OTHER timer, OR piggy back on the existing timer…

lets use a second timer and a second timerRoutine (otherwise the time cycle is 15 seconds on, 15 seconds off
----> need to add showMessage:true, to the variables at the top

timerRoutine2: function(){
     this.showMessage= !this.showMessage                      // this will cause the flagShowMessage to toggle between true and false  
     this.updateDom(0) // time_to_delay_in_ms, 0 = immediately
}

and now we need to fix getDom()

getDom (){
   var wrapper=createElement("div")
   if(this.showMessage){  // if we should show the message
       wrapper.innerText=this.somestring  // use the value of the somestring variable to display
       setTimeout(this.timerRoutine2, 5000)   // start the timer to CLEAR the message in 5 seconds
   }
   // we don't need the negative case, cause we created a new empty div, so it will have nothing to display
   setTimeout(this.timerRoutine, 15000)   // start a timer, when it expires call our routine 
   return wrapper;
}

these are just examples, there are lots of ways to do something like this, up to your imagination…

write it down on a piece of paper, walk thru it in your native language, get the flow… then write code to match