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

multiple carousals not rendering as expected



  • 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



  • At the end if your showslides functions add

    this.updateDom(1000)

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



  • 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



  • @sunnykeerthi weird

    U used it above

    this.updateDom()



  • 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.
    	},