multiple carousals not rendering as expected

sunnykeerthi · May 3, 2019, 12:25 PM

Hi,

I’m creating 2 carousals one on top_center and another in bottom_bar. Both of them are working perfectly when I run them separately(by commenting out either top or bottom part in config.js). when I run them together they seem to show up in random times, though the interval set is the same. Here is my code.

my first slide page

Module.register("deImages", {
	// Default module config.
	defaults: {
		width: 200,
		height: 200,
		text: "Hello World!",
		slideIndex: -1,
		rotateInterval: 30 * 1000,
		animationSpeed: 3000, // fade in and out speed
		initialLoadDelay: 4250,
		retryDelay: 2500,
		updateInterval: 60 * 60 * 1000,
	},
	total_info: "Hello World!",


	getStyles: function () {
		return [
			'deImagesStyle.css'
		]
	},


	getDom: function () {
		var wrapperEl = document.createElement("div");
		var container = document.createElement("div");
		container.className = "slideshow-container";

		var div1 = document.createElement("div");
		div1.className = "mySlides fade";

		var img1 = document.createElement("img");
		img1.src = "https://www.w3schools.com/howto/img_nature_wide.jpg";
		div1.appendChild(img1);
		container.appendChild(div1);

		var div2 = document.createElement("div");
		div2.className = "mySlides fade";

		var img2 = document.createElement("img");
		img2.src = "https://www.w3schools.com/howto/img_mountains_wide.jpg";
		div2.appendChild(img2);
		container.appendChild(div2);

		var div3 = document.createElement("div");
		div3.className = "mySlides fade";

		var img3 = document.createElement("img");
		img3.src = "https://www.w3schools.com/howto/img_snow_wide.jpg";
		div3.appendChild(img3);
		container.appendChild(div3);
		wrapperEl.appendChild(container);

		Log.log("slide payload >> ");

		return wrapperEl;
	},



	showSlides1: function () {
		if (!this.slideIndex) {
			this.slideIndex = 0;
		}
		var i;
		var slides = document.getElementsByClassName("mySlides");
		for (i = 0; i < slides.length; i++) {
			console.log(slides[i]);
			slides[i].style.display = "none";
		}

		this.slideIndex++;
		slides[this.slideIndex - 1].style.display = "block";
		if (this.slideIndex > (slides.length - 1)) { this.slideIndex = 0 }

		setInterval(this.showSlides1, 2000);
	},

	start: function () {
		this.sendSocketNotification('duDash_initConnection');
	},

	socketNotificationReceived: function (notification, payload) {
		if (notification === "duDash_updateNumbers") {
			Log.log("payload >> " + payload);
			this.total_info = payload;
			this.updateDom();
			setInterval(this.showSlides1, 2000);
		}
	}
});

and here is my 2nd file

Module.register("deImages_2", {
	// Default module config.
	defaults: {
		width: 200,
		height: 200,
		text: "Hello World!",
		slideIndex: -1,
		rotateInterval: 30 * 1000,
		animationSpeed: 3000, // fade in and out speed
		initialLoadDelay: 4250,
		retryDelay: 2500,
		updateInterval: 60 * 60 * 1000,
	},
	total_info: "Hello World!",


	getStyles: function () {
		return [
			'deImagesStyle2.css'
		]
	},



	getDom: function () {
		var wrapperEl = document.createElement("div");
		var container = document.createElement("div");
		container.className = "slideshow-container";

		var div1 = document.createElement("div");
		div1.className = "mySlides fade";

		var img1 = document.createElement("img");
		img1.src = "https://www.w3schools.com/howto/img_nature_wide.jpg";
		div1.appendChild(img1);
		container.appendChild(div1);

		var div2 = document.createElement("div");
		div2.className = "mySlides fade";

		var img2 = document.createElement("img");
		img2.src = "https://www.w3schools.com/howto/img_mountains_wide.jpg";
		div2.appendChild(img2);
		container.appendChild(div2);

		var div3 = document.createElement("div");
		div3.className = "mySlides fade";

		var img3 = document.createElement("img");
		img3.src = "https://www.w3schools.com/howto/img_snow_wide.jpg";
		div3.appendChild(img3);
		container.appendChild(div3);
		wrapperEl.appendChild(container);
		Log.log("slide payload >> ");

		return wrapperEl;
	},



	showSlides2: function () {
		if (!this.slideIndex) {
			this.slideIndex = 0;
		}
		var i;
		var slides = document.getElementsByClassName("mySlides");
		for (i = 0; i < slides.length; i++) {
			console.log(slides[i]);
			slides[i].style.display = "none";
		}

		this.slideIndex++;
		slides[this.slideIndex - 1].style.display = "block";
		if (this.slideIndex > (slides.length - 1)) { this.slideIndex = 0 }

		setInterval(this.showSlides2, 2000);
	},

	start: function () {
		this.sendSocketNotification('duDash_initConnection2');
	},





	socketNotificationReceived: function (notification, payload) {
		if (notification === "duDash_updateNumbers2") {
			Log.log("payload >> " + payload);
			this.total_info = payload;
			this.updateDom();
			setInterval(this.showSlides2, 2000);
		}
	}
});

when I run this, Here is a small gif that I’ve recorded to show the output.

https://giphy.com/gifs/XbD0g7cAz8zVdwtQLj/fullscreen

please let me know where am I going wrong and how Can I run the two files parallel instead of simultaneously.

Thanks,
Sunny

sdetweil · May 3, 2019, 1:47 PM

At the end if your showslides functions add

this.updateDom(1000)

To tell mm to get the new content via the getDom() function

sunnykeerthi · May 3, 2019, 7:56 PM

Hi @sdetweil ,

thanks very much for the quick reply. I added this.updateDom(1000), but I get the error as below.

Uncaught TypeError: this.updateDom is not a function

I did the below to both my files.

this.slideIndex++;
slides[this.slideIndex - 1].style.display = "block";
if (this.slideIndex > (slides.length - 1)) { 
  this.slideIndex = 0 
}
setInterval(this.showSlides1, 2000);
this.updateDom(1000);

please let me know where am I going wrong.

Thanks

sdetweil · May 3, 2019, 9:46 PM

@sunnykeerthi weird

U used it above

this.updateDom()

sdetweil · May 4, 2019, 12:53 AM

actually this is because you have fired a timer on the slide update

showSlides2: function () {
		if (!this.slideIndex) {
			this.slideIndex = 0;
		}
		var i;
		var slides = document.getElementsByClassName("mySlides");
		for (i = 0; i < slides.length; i++) {
			console.log(slides[i]);
			slides[i].style.display = "none";
		}
 
		this.slideIndex++;
		slides[this.slideIndex - 1].style.display = "block";
		if (this.slideIndex > (slides.length - 1)) { this.slideIndex = 0 }

		setInterval(this.showSlides2, 2000);   //< ------- here restarts the function, BUT inside the function  'this'; becomes the context of the timer routine and not the module.. 
                this.updateDom(1000);  // or whatever transition time u want.
	},

to fix it you need an arrow function to keep context right

see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

but net

showSlides2: function () {
		if (!this.slideIndex) {
			this.slideIndex = 0;
		}
		var i;
		var slides = document.getElementsByClassName("mySlides");
		for (i = 0; i < slides.length; i++) {
			console.log(slides[i]);
			slides[i].style.display = "none";
		}

		this.slideIndex++;
		slides[this.slideIndex - 1].style.display = "block";
		if (this.slideIndex > (slides.length - 1)) { this.slideIndex = 0 }

		setInterval( () => { this.showSlides2()} , 2000);   // < --- was a typo here..  need () => { stuff } 
                this.updateDom(1000);  // or whatever transition time u want.
	},