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.

    Timer on Module

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    22 Posts 4 Posters 6.3k Views 4 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 @dsmtweaker
      last edited by

      @dsmtweaker you missed some of the job function
      this.updateDom()

      }, yourInterval)

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      D 1 Reply Last reply Reply Quote 0
      • D Offline
        dsmtweaker @sdetweil
        last edited by

        @sdetweil It is there in the get:function

         get: function() {setInterval(()=>{this.updateDom()}, 60000)
        	notificationRecieved: function (noti, payload, sender) {
        		if (noti = "DOM_OBJECT_CREATED") this.job()
        
        		},
        getDom: fuction ()
        			var video =  document.createElement("video");
        			video.src = this.config.videoSRC;
        			video.autoplay = true;
        			video.loop = this.config.loop;
        

        },});

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

          @dsmtweaker i hate code posting on this forum…

          note that
          getDom: fuction () is spelled wrong
          and also missing the open brace

          Sam

          How to add modules

          learning how to use browser developers window for css changes

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

            there are 3 routines (functions)… in seans post

            // worker function
            job: function() {
              // start a recurring timer that will tell MM to get the module updated dom content
              // this uses an inline function, be careful of braces and parens  matching
              setInterval(()=>{
                this.updateDom() // this will execute your getDom(), after 'yourInterval' time
              }, yourInterval)
            },
            
            // the function called when notifications are received from the system
            notificationReceived: function (noti, payload, sender) {
               // if the notification is "dom is created", then call our worker function
              if (noti == “DOM_OBJECT_CREATED”) this.job() 
            
            },
            
            // the function called for the module to provide its dom content
            getDom: function () {
              //making  your video DOM here.
            }
            

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            D 1 Reply Last reply Reply Quote 0
            • D Offline
              dsmtweaker @sdetweil
              last edited by

              @sdetweil I made all the corrections noted.

              but on if (noti == “DOM_OBJECT_CREATED”) this.job() I am still getting the error SyntaxError: Invalid or unexpected token

              Mykle1M S 2 Replies Last reply Reply Quote 0
              • Mykle1M Offline
                Mykle1 Project Sponsor Module Developer @dsmtweaker
                last edited by

                @dsmtweaker said in Timer on Module:

                but on if (noti == “DOM_OBJECT_CREATED”) this.job() I am still getting the error SyntaxError: Invalid or unexpected token

                Excuse me for jumping in but the curly quotes containing DOM_OBJECT_CREATED will cause that error. Try:

                if (noti == "DOM_OBJECT_CREATED") this.job()

                The difference is slight, but enough.

                Create a working config
                How to add modules

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

                  @dsmtweaker its the darned cut/paste of the double quotes… in the web posting it shows the MS word document style quotes which cause an error with the javascript parser…

                  overtype those double quotes with the text editor…

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 1
                  • ? Offline
                    A Former User
                    last edited by A Former User

                    I’m back. Sorry for my prior mistypo and unsufficient post. I was typing that on my phone.

                    start: function() {
                      this.timer = null  
                      this.videoDom = null
                    },
                    getDom: function() {
                      var container =  document.createElement("div")
                      var video = document.createElement("video")
                      video.id = "VIDEO"
                      video.style.display = "none"
                      video.autoplay = true
                      video.loop = this.config.loop
                      container.appendChild(video)
                      this.videoDom = video
                      return container 
                    // Just create DOMs in getDom(). It's better to control DOMs outside of getDom().
                    },
                    notificationReceived: function(noti, payload, sender) {
                      if (noti == "DOM_OBJECT_CREATED") this.work()
                    //DOM_OBJECT_CREATED would be the best time to start your job. Your DOM would be created and be ready to work on that message.
                    },
                    work: function(src = null, interval = null) {
                      clearTimer(this.timer)
                      interval = (interval) ? interval : this.config.interval
                      src = (src) ? src : this.config.videoSRC
                      this.playVideo(src)
                      this.timer = setTimeout(()=>{
                        this.work()
                      }, interval)
                    //setTimeout is better than setInterval.
                    // you can repeat this function by interval. you can change interval and src with parameters of this function.
                    },
                    playVideo: function(src) {
                      this.videoDom.src = src
                      if (this.videoDom.style.display == "none") this.videoDom.style.display = "block"
                      this.videoDom.play()
                      // assign src to your videoDom and play it.
                    }
                    

                    Not tested on real device, so maybe somthig is missed, but this is basic approach.
                    I didn’t use updateDom because there is no need to redraw whole module just for playing video.

                    D 1 Reply Last reply Reply Quote 0
                    • D Offline
                      dsmtweaker @Guest
                      last edited by

                      @sean Thank you, and everyone else for all the help. It’s refreshing to find a forum that doesn’t automatically start bashing beginners.

                      I think my knowledge is just not ready for something this advanced yet. I used your code, and tried changes here and there to make it work, but still no luck. I am no longer getting any errors in the console. But nothing happens(ie- no video ever loads/plays) this is where I got the code so far…

                      Module.register(“MMM-htmlvideo”,{

                      // Default module config.
                      defaults: {
                      	videoSRC: 'https://www.mid-americantitle.com/wp-content/uploads/output_HD7205.mp4',
                      	loop: true,
                      		},
                      
                      // get stylesheet
                      getStyles: function() {
                      	return ["htmlvideo.css"];
                      },
                      
                      
                      
                      start: function() {
                        this.timer = null  
                        this.videoDom = null
                      },
                      getDom: function() {
                       var container =  document.createElement("div")
                       var video = document.createElement("video")
                       video.src = this.config.videoSRC;
                      video.id = "VIDEO"
                      video.style.display = "none"
                      video.autoplay = true
                       video.loop = this.config.loop
                       container.appendChild(video)
                       this.videoDom = video
                       return container 
                      // Just create DOMs in getDom(). It's better to control DOMs outside of getDom().
                      },
                      notificationReceived: function(noti, payload, sender) {
                       if (noti == "DOM_OBJECT_CREATED") this.work()
                      //DOM_OBJECT_CREATED would be the best time to start your job. Your DOM would be created and be ready to work on that message.
                      },
                      work: function(src = null, interval = null) {
                       clearTimer(this.timer)
                       interval = (interval) ? interval : 30000
                       src = (src) ? src : this.config.videoSRC
                        this.playVideo(src)
                        this.timer = setTimeout(()=>{
                         this.work()
                        }, interval)
                      //setTimeout is better than setInterval.
                      // you can repeat this function by interval. you can change interval and src with parameters of this function.
                      },
                      playVideo: function(src) {
                      this.videoDom.src = src
                       if (this.videoDom.style.display == "none") this.videoDom.style.display = "block"
                        this.videoDom.play()
                        // assign src to your videoDom and play it.
                      },
                      
                      });
                      

                      I tried changing “interval” with actual numbers, as well as changing the source in multiple locations. Still just get a black screen.

                      ? 1 Reply Last reply Reply Quote 0
                      • ? Offline
                        A Former User @dsmtweaker
                        last edited by A Former User

                        @dsmtweaker
                        Sorry there were another mistypes. DOM_OBJECT_CREATED => DOM_OBJECTS_CREATED (and clearTimer => clearTimeout)

                        use this. tested.

                        Module.register("test",{
                          defaults: {
                            videoSRC: 'https://www.mid-americantitle.com/wp-content/uploads/output_HD7205.mp4',
                            loop: true,
                            interval: 36000,
                          },
                        
                          start: function() {
                            this.timer = null
                            this.videoDom = null
                          },
                        
                          getDom: function() {
                            var container =  document.createElement("div")
                            var video = document.createElement("video")
                            video.id = "VIDEO"
                            video.style.display = "none"
                            video.autoplay = true
                            video.loop = this.config.loop
                            container.appendChild(video)
                            this.videoDom = video
                            return container
                          },
                          notificationReceived: function(noti, payload, sender) {
                            if (noti == "DOM_OBJECTS_CREATED") this.work()
                          },
                          work: function(src = null, interval = null) {
                            clearTimeout(this.timer)
                            interval = (interval) ? interval : this.config.interval
                            src = (src) ? src : this.config.videoSRC
                            this.playVideo(src)
                            this.timer = setTimeout(()=>{
                              this.work()
                            }, interval)
                          },
                          playVideo: function(src) {
                            this.videoDom.src = src
                            if (this.videoDom.style.display == "none") this.videoDom.style.display = "block"
                            this.videoDom.play()
                          },
                        })
                        

                        Anyway, your video is already repeating by loop: true, why you need to repeat it with timer?

                        D 2 Replies Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 1 / 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