MagicMirror² v2.14.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']
    		}
    })
    


  • This post is deleted!

  • 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