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

Help with updateDom()



  • 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']
    		}
    })
    


  • I think (may be wrong) the config is read only inside the module, so your line before the return won’t actually do anything to this.config.count (you’ll probably see an error in the development tools in the browser). Every time getDom() runs, this.config.count is always the same, so your images will always be the same.

    Instead, you need a variable you can manipulate. In your start function, create a variable to use; e.g., this.photoCount = this.config.count.

    Then in your getDom() method, use this.photoCount instead of where you have used i and change the line before the return to this.photoCount = (this.config.count + 1) % 2;


  • Module Developer

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


  • Module Developer

    @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']
    		}
    })
    ``

  • Module Developer

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



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

  • Module Developer

    @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);
    		},

  • Module Developer

    @sdetweil You were faster sam!



  • This post is deleted!


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


Log in to reply