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

Help with updateDom()

Scheduled Pinned Locked Moved Development
11 Posts 5 Posters 3.0k 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.
  • U Offline
    UjwalReddy267
    last edited by Jul 1, 2020, 6:44 PM

    This module is supposed to show a slideshow of the two images that are given in the variablle loc. But, I am not able to update the Dom. It does not change the image. The setInterval function does not seem to be working.

    Module.register("MMM-Test",{
                    default: {loc: ["modules/MMM-Test/test1.jpg","modules/MMM-Test/test.jpg"], count:0},
    		start : function(){
    				setInterval(function() {this.updateDom()}, 1000);
    		},
    		getDom : function (){
                            var wrapper = document.createElement('div')
    			wrapper.id = 'FULL'
    			var img = document.createElement('div')
    			var i = this.config.count
                            img.style.backgroundImage = 'url(' + this.config.loc[i] + ')'
    			img.id = 'photo'
            		var blr = document.createElement('div')
    			blr.id = 'backgrnd'
    			blr.style.backgroundImage = 'url(' + this.config.loc[i] + ')'
    			wrapper.appendChild(blr)
    			wrapper.appendChild(img)
    			this.config.count = (this.config.count + 1) % 2
                            return wrapper
                    },
    		getStyles : function (){
    			return ['MMM-Test.css']
    		}
    })
    
    L S 2 Replies Last reply Jul 2, 2020, 10:33 AM Reply Quote 0
    • C Offline
      CreepinJesus
      last edited by Jul 1, 2020, 7:52 PM

      This post is deleted!
      L 1 Reply Last reply Jul 2, 2020, 10:31 AM Reply Quote 0
      • L Offline
        lavolp3 Module Developer @CreepinJesus
        last edited by Jul 2, 2020, 10:31 AM

        @CreepinJesus said in Help with updateDom():

        I think (may be wrong) the config is read only inside the module,

        that’s not true. The config values can be manipulated.

        How to troubleshoot modules
        MMM-soccer v2, MMM-AVStock

        L 1 Reply Last reply Jul 2, 2020, 10:44 AM Reply Quote 1
        • L Offline
          lavolp3 Module Developer @UjwalReddy267
          last edited by lavolp3 Jul 2, 2020, 10:39 AM Jul 2, 2020, 10:33 AM

          @UjwalReddy267
          I would do this:
          the count variable out of defaults and into this. Then count it up in getdom.

          Module.register("MMM-Test",{
                          default: {loc: ["modules/MMM-Test/test1.jpg","modules/MMM-Test/test.jpg"]},
                          count: 0,
          		start : function(){
          				setInterval(function() {this.updateDom()}, 1000);
          		},
          		getDom : function (){
                                  var wrapper = document.createElement('div')
          			wrapper.id = 'FULL'
          			var img = document.createElement('div')
          			var i = this.count
                                  img.style.backgroundImage = 'url(' + this.config.loc[i] + ')'
          			img.id = 'photo'
                  		var blr = document.createElement('div')
          			blr.id = 'backgrnd'
          			blr.style.backgroundImage = 'url(' + this.config.loc[i] + ')'
          			wrapper.appendChild(blr)
          			wrapper.appendChild(img)
          			this.count = (this.count + 1) % 2
                                  return wrapper
                          },
          		getStyles : function (){
          			return ['MMM-Test.css']
          		}
          })
          ``

          How to troubleshoot modules
          MMM-soccer v2, MMM-AVStock

          L 1 Reply Last reply Jul 2, 2020, 10:39 AM Reply Quote 0
          • L Offline
            lavolp3 Module Developer @lavolp3
            last edited by lavolp3 Jul 2, 2020, 10:41 AM Jul 2, 2020, 10:39 AM

            @lavolp3 are you sure the image url is correct?
            I would always for debugging purposes print that out once.

            console.log('url(' + this.config.loc[i] + ')');
            console.log(this.count)
            

            Or check the dev console for errors not finding the pictures.

            How to troubleshoot modules
            MMM-soccer v2, MMM-AVStock

            1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil @UjwalReddy267
              last edited by sdetweil Jul 2, 2020, 10:44 AM Jul 2, 2020, 10:44 AM

              @UjwalReddy267 your pointer ‘this’ is wrong inside the timer handle

              setInterval(function() {this.updateDom()
              

              you need to do

              var self=this
              

              and in the handler use self instead

              setInterval(function() {self.updateDom()
              

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              L U 3 Replies Last reply Jul 2, 2020, 10:45 AM Reply Quote 0
              • L Offline
                lavolp3 Module Developer @lavolp3
                last edited by Jul 2, 2020, 10:44 AM

                @lavolp3 NOw I have the error, I think!

                the thisin the interval might refer to another this and not to the original module-this
                So you need to do the following in start:

                start : function(){
                                                var self = this;
                				setInterval(function() {self.updateDom()}, 1000);
                		},

                How to troubleshoot modules
                MMM-soccer v2, MMM-AVStock

                1 Reply Last reply Reply Quote 0
                • L Offline
                  lavolp3 Module Developer @sdetweil
                  last edited by Jul 2, 2020, 10:45 AM

                  @sdetweil You were faster sam!

                  How to troubleshoot modules
                  MMM-soccer v2, MMM-AVStock

                  1 Reply Last reply Reply Quote 0
                  • U Offline
                    UjwalReddy267 @sdetweil
                    last edited by Jul 2, 2020, 5:55 PM

                    This post is deleted!
                    1 Reply Last reply Reply Quote 0
                    • U Offline
                      UjwalReddy267 @sdetweil
                      last edited by Jul 2, 2020, 5:58 PM

                      @sdetweil said in Help with updateDom():

                      @UjwalReddy267 your pointer ‘this’ is wrong inside the timer handle

                      setInterval(function() {this.updateDom()
                      

                      you need to do

                      var self=this
                      

                      and in the handler use self instead

                      setInterval(function() {self.updateDom()
                      

                      Yes, that was the error, thank you it works now.

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        3/11
                        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