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 4.8k 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 Offline
      sdetweil @smart_user
      last edited by

      @smart_user you could use my sample module which puts up a configured message every few minutes. Change the message and the time…

      https://github.com/sdetweil/SampleModule

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      S 1 Reply Last reply Reply Quote 1
      • S Offline
        smart_user @ashishtank
        last edited by

        @ashishtank Yes I will look into it. Thank you so much for the instant reply. Appreciate it a lot

        1 Reply Last reply Reply Quote 0
        • S Offline
          smart_user @sdetweil
          last edited by

          @sdetweil Thank you so much! I will use this module and let you know how it goes!

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @smart_user
            last edited by

            @smart_user ok. Timer is in the node_helper.
            It is a one time timer, setTimer, vs repeating, setInterval.

            Doesn’t need to be in the node_helper, but did that to show the structure and communication between the parts

            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

              @sdetweil It still isn’t working. I had configured for the alert to show up in 10 seconds but it didn’t

              S 1 Reply Last reply Reply Quote 0
              • S Offline
                sdetweil @smart_user
                last edited by sdetweil

                @smart_user you changed the 15000 in node_helper to 10000, right?

                And u had a position: set in config.js, right?

                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

                  @sdetweil Yes

                  1 Reply Last reply Reply Quote 0
                  • S Offline
                    smart_user
                    last edited by

                    @sdetweil Is it possible for you to send me a picture of the .js file so I can double check?

                    S 1 Reply Last reply Reply Quote 0
                    • S Offline
                      sdetweil @smart_user
                      last edited by

                      @smart_user u can look on the github site

                      View code. Then click on file.

                      If you used git clone, then u can do

                      git diff node_helper.js
                      to see the differences

                      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

                        @sdetweil Hello. I did and still am not receiving any alert on the screen

                        S 1 Reply Last reply Reply Quote 0
                        • S Offline
                          sdetweil @smart_user
                          last edited by

                          @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

                            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 Reply Quote 0
                            • S Offline
                              sdetweil @Guest
                              last edited by

                              @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

                                @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 Reply Quote 0
                                • S Offline
                                  sdetweil @smart_user
                                  last edited by sdetweil

                                  @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

                                    @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 Reply Quote 0
                                    • S Offline
                                      sdetweil @innovation
                                      last edited by

                                      @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

                                        sure @sdetweil, no problem!

                                        1 Reply Last reply Reply Quote 0
                                        • S Offline
                                          sdetweil @innovation
                                          last edited by sdetweil

                                          @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

                                            @ 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 Reply Quote 0

                                            Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                                            Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                                            With your input, this post could be even better 💗

                                            Register Login
                                            • 1
                                            • 2
                                            • 1 / 2
                                            • 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