MagicMirror² v2.14.0 is available! For more information about this release, check out this topic.

Need help - New programmer



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



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


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

    1. 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"
          }
    
    1. use of the notification that all modules are loaded and started, to send an event to the node_helper
         notificationReceived(), ALL_MODULES_STARTED
         sendSocketNotification
    
    1. 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)
    
    1. 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

    1. make message go away
    2. 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


Log in to reply