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

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;

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.