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

Need help - New programmer

Scheduled Pinned Locked Moved General Discussion
23 Posts 5 Posters 3.7k Views 5 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 Away
    sdetweil @smart_user
    last edited by Dec 12, 2020, 7:57 PM

    @smart_user show me the config block. Minimum is this. MUST have a position

    {
         module:"SampleModule",
         position:"middle",
     },
    

    Sam

    How to add modules

    learning how to use browser developers window for css changes

    1 Reply Last reply Reply Quote 0
    • ? Offline
      A Former User
      last edited by Dec 12, 2020, 10:26 PM

      euh … position needed ONLY if you have to show something on the mirror (getDom).
      If you have nothing to show THEN position is not needed

      Note: verified in my lasted module (position is not needed because no visual)

      S 1 Reply Last reply Dec 12, 2020, 11:10 PM Reply Quote 0
      • S Away
        sdetweil @Guest
        last edited by Dec 12, 2020, 11:10 PM

        @Bugsounet yes, my sample module DOES want to display something

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • S Offline
          smart_user
          last edited by Dec 13, 2020, 5:08 AM

          @sdetweil Yes! I missed adding the position to the config file. Just have another clarification. Can these messages show up for a few seconds then disappear and then appear again after 30 minutes? If so, how do I do that?

          S 1 Reply Last reply Dec 13, 2020, 12:12 PM Reply Quote 0
          • S Away
            sdetweil @smart_user
            last edited by sdetweil Dec 21, 2020, 2:37 AM Dec 13, 2020, 12:12 PM

            @smart_user sure. When u want the message to go away, set the string to empty, or not create any content in getDom()…

            U would start a timer after u display the text, and the call updateDom() in the timer routine.

            Wait, display. Wait. Remove output
            Repeat

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • I Offline
              innovation
              last edited by Dec 20, 2020, 3:10 PM

              @sdetweil Hello, I am facing the same problem - and I want the same feature @smart_user mentioned. But I am sorry, I didn’t get the timer part. Which string are you talking about? and where will I add the updateDom()? Please help

              S 2 Replies Last reply Dec 20, 2020, 3:15 PM Reply Quote 0
              • S Away
                sdetweil @innovation
                last edited by Dec 20, 2020, 3:15 PM

                @innovation i have my grandson for a few hours will get back to you

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • I Offline
                  innovation
                  last edited by Dec 20, 2020, 3:35 PM

                  sure @sdetweil, no problem!

                  1 Reply Last reply Reply Quote 0
                  • S Away
                    sdetweil @innovation
                    last edited by sdetweil Dec 20, 2020, 9:33 PM Dec 20, 2020, 6:53 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)

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 2
                    • I Offline
                      innovation
                      last edited by sdetweil Dec 21, 2020, 1:55 PM Dec 21, 2020, 8:35 AM

                      @ 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)
                      }
                      
                      
                      })
                      
                      S 1 Reply Last reply Dec 21, 2020, 2:40 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 2 / 3
                      • 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