Help with updateDom()

UjwalReddy267

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

CreepinJesus

This post is deleted!

lavolp3

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

lavolp3

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

lavolp3

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

sdetweil

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

lavolp3

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

lavolp3

@sdetweil You were faster sam!

UjwalReddy267

This post is deleted!

UjwalReddy267

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