MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.24.0 is available! For more information about this release, check out this topic.

    UNSOLVED multiple carousals not rendering as expected

    Troubleshooting
    magic mirror slide troubleshoot help fix
    2
    5
    818
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      sunnykeerthi last edited by sunnykeerthi

      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

      1 Reply Last reply Reply Quote 0
      • S
        sdetweil last edited by

        At the end if your showslides functions add

        this.updateDom(1000)

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

        Sam

        Create a working config
        How to add modules

        1 Reply Last reply Reply Quote 0
        • S
          sunnykeerthi last edited by

          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

          S 1 Reply Last reply Reply Quote 0
          • S
            sdetweil @sunnykeerthi last edited by

            @sunnykeerthi weird

            U used it above

            this.updateDom()

            Sam

            Create a working config
            How to add modules

            S 1 Reply Last reply Reply Quote 0
            • S
              sdetweil @sdetweil last edited by sdetweil

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

              Sam

              Create a working config
              How to add modules

              1 Reply Last reply Reply Quote 0
              • 1 / 1
              • First post
                Last post
              Enjoying MagicMirror? Please consider a donation!
              MagicMirror created by Michael Teeuw.
              Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
              This forum is using NodeBB as its core | Contributors
              Contact | Privacy Policy