MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    multiple carousals not rendering as expected

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    magic mirrorslidetroubleshoothelpfix
    5 Posts 2 Posters 1.3k Views 2 Watching
    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 Offline
      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 Offline
        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

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • S Offline
          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 Offline
            sdetweil @sunnykeerthi
            last edited by

            @sunnykeerthi weird

            U used it above

            this.updateDom()

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            S 1 Reply Last reply Reply Quote 0
            • S Offline
              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

              How to add modules

              learning how to use browser developers window for css changes

              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 Sam, technical setup by Karsten.
              This forum is using NodeBB as its core | Contributors
              Contact | Privacy Policy