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

Hey @sdetweil ,

Tried it. But it doesn’t seem working.

Thanks!!!

I’m trying to create a bunch of divs for magic mirror and then add them to another dynamic div created. Currently I’m able to create all the divs.

Next I want to run a carousal/slideshow on these created divs.

Below is my code.

	// Override dom generator.
	getDom: function () {
		console.log('get dom');
		var wrapperEl = document.createElement("div");
		var container = document.createElement("div");
		container.className = "slideshow-container";
		wrapperEl.appendChild(container);

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

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

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

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

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

		this.showSlides(container, 5);

		Log.log("slide payload >> ");
		return wrapperEl;
	},



	showSlides: function (container, counter) {
		var i;
		console.log(counter);
		slideIndex = 0;
		var slides = container.childNodes;
		console.log("ClassName " + slides.length);
		var dots = document.getElementsByClassName("dot");
		for (i = 0; i < slides.length; i++) {
			slides[i].style.display = "none";  
		}
		slideIndex++;
		if (slideIndex > slides.length) { slideIndex = 1 }

		slides[slideIndex - 1].style.display = "block";
		counter = counter - 1;
		if (counter != 0)
			setTimeout(this.showSlides(container, counter), 2000); // Change image every 2 seconds

	},

Here only one image shows up and the carousal doesn’t roll.

please let me know on where am I going wrong and how Can I fix this.

Thanks

Hi,

I’m pretty new to Magic Mirror development. I am trying to develop a module using chart.js. I’m using the module provided at MMM-Chart.

Here is my code.

Module.register("MMM-Chart", {
    defaults: {
        width: 200,
        height: 200,
        chartConfig: {
            type: 'bar',
            data: {
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        }
    },

    getScripts: function () {
        return ["modules/" + this.name + "/node_modules/chart.js/dist/Chart.bundle.min.js"];
    },

    start: function () {
        this.config = Object.assign({}, this.defaults, this.config);
        Log.info("Starting module: " + this.name);
    },

    getDom: function () {
        console.log("*****" + JSON.stringify(this.config.chartConfig));
        // Create wrapper element
        const wrapperEl = document.createElement("div");
        wrapperEl.setAttribute("style", "position: relative; display: inline-block;");

        // Create chart canvas
        const chartEl = document.createElement("canvas");
        chartEl.width = this.config.width;
        chartEl.height = this.config.height;

        // Init chart.js
        this.chart = new Chart(chartEl.getContext("2d"), this.config.chartConfig);

        // Append chart
        wrapperEl.appendChild(chartEl);

        return wrapperEl;
    }
});

When I run this code, there is no error popped in the console, also there is no chart displayed on my screen.

Here is what I’ve added to my config file.

{
module: "MMM-Chart",
position: "top_left"
}

please let me know on where am I going wrong and how can I fix this.

Thanks!!!

Sorry for my dumbest question guys :frowning_face:. I got it working, changed Module.register("MMM-Timetable", to Module.register("MMM-Test", and its working fine.

Thanks,
Sunny

Hi,

I’m absolute beginner to developing Magic Mirror Modules, but I’m ver keen and eager to learn and develop them. I started to follow the tutorial available at https://forum.magicmirror.builders/topic/8534/head-first-developing-mm-module-for-extreme-beginners. but the problem here I’m facing is as below. I did a git pull and installed the dependencies. when I did a node serveronly and firing up my chrome browser and heading to the localhost:8080, I’m able to see the clock, compliments, etc… (defaults provided). And as per the tutorial, I went till the getDom() step, and I tried running it, And when I went to my browser and refreshed the window, to my surprise, nothing is shown up, not even Hello, World!, I went to the developer console and searched for myContent , there is no such div created with such class name. :frowning_face:

Config.js

/* Magic Mirror Config Sample
 *
 * By Michael Teeuw http://michaelteeuw.nl
 * MIT Licensed.
 *
 * For more information how you can configurate this file
 * See https://github.com/MichMich/MagicMirror#configuration
 *
 */

var config = {
	address: "localhost", // Address to listen on, can be:
	// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
	// - another specific IPv4/6 to listen on a specific interface
	// - "", "0.0.0.0", "::" to listen on any interface
	// Default, when address config is left out, is "localhost"
	port: 8080,
	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
	// or add a specific IPv4 of 192.168.1.5 :
	// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
	// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
	// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

	language: "en",
	timeFormat: 24,
	units: "metric",

	modules: [
		{
			module: "MMM-Test",
			position: "top_left"
		},
	]

};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") { module.exports = config; }

MMM-Test.js

Module.register("MMM-Timetable", {
  defaults: {},
  start: function () {},
getDom: function() {
  var element = document.createElement("div")
  element.className = "myContent"
  element.innerHTML = "Hello, World!"
  return element
},
notificationReceived: function() {},
  socketNotificationReceived: function() {},
})

and my developer console output is as below.

Initializing MagicMirror.
Loading core translation file: translations/en.json
Loading core translation fallback file: translations/en.json
Load script: modules/MMM-Test//MMM-Test.js
Module registered: MMM-Timetable
Load stylesheet: css/custom.css
All modules started!

and below is my folder structure

Please let me know where am I going wrong guys and please let me know on how can I fix this. Here are my codes.

Thanks,
Sunny