Head first developing MM module for extreme beginners

[nrayever]

@sdetweil … ok.

[Dobi]

Hey guys,

I’m quite new in developing an own module. I was able to change exiting modules on my magic mirror but now I wanted to create my own module, but I’m not able to get socket communication between my “main” module an the “helper-function”

I uploaded my module here:
https://github.com/Dobherrmann/MMM_Testmodul.git
my Module looks like this on my magic mirror:

maybe someone can find my mistake(s).

BR

[sdetweil]

@dobi two things

when the DomObject Created method is called, its POSSIBLE that the elements are not yet accessible… so your code fails as the document.getElementbyID returns null…

second, do you have a position: set in the module def in config.js?

third and MOST important

the module NAME must match the folder name AND the filename and the register in the file…

so, the filename is MMM-cookbook.js
therefore ALL the things must be called MMM-cookbook

git clone will name the folder the name of the github repo
(unless u add an extra part to git clone repo_url output_folder_name)

I fixed all those and the module displays the countdown/up each second

[Dobi]

@sdetweil ahh thank you for these information I will give it a try.

[Dobi]

@sdetweil I gave it a try but without differences :(
I made a new git repo : https://github.com/Dobherrmann/MMM-cookbook.git
Now there I should have the same name in the repo like my module.

my config. js looks like this (I gave it a position):

 {
      module: "MMM-cookbook",
      position: "middle_center",
      config: {
        header: "My Cookbook",
        foo: "I'm the King of the world!"
      }
    },

I started to debug “my code” a little bit and I found this when I want to send a socket notification:

self.sendSocketNotification("DO_YOUR_JOB", this.count);
					console.log("Notfication", this.sendSocketNotification("DO_YOUR_JOB", this.count))
					this.sendSocketNotification("DO_YOUR_JOB", this.count)
					this.subElementUp.innerHTML = "Count UP:" + this.count

On my console i get the feedback that “this.sendSocketNotification(“DO_YOUR_JOB”, this.count” is undefined. It looks like that this function is unkown.

[sdetweil]

@dobi u are inside a callback. change the ‘this’ to ‘self’ like the self.sendSocketNotification

‘this’ is always tricky. depends on the context, and some of the programming idioms used

that’s why we typically see
var self = this;
at the beginning of functions that have callbacks or .then() used inside

[Dobi]

@sdetweil ok, but it dosen’t change something.

notificationReceived: function (notification, payload, sender) {
		self = this;
		switch (notification) {
			case "DOM_OBJECTS_CREATED":
				var timer = setInterval(() => {
					//this.updateDom()
					self.sendSocketNotification("DO_YOUR_JOB", this.count);
					console.log(`self.sendSocketNotification("DO_YOUR_JOB", this.count)`, self.sendSocketNotification("DO_YOUR_JOB", this.count))
					self.sendSocketNotification("DO_YOUR_JOB", this.count)
					this.subElementUp.innerHTML = "Count UP:" + this.count
					this.count++
				}, 1000)
				break
		}
	},

Now i could post a picture of my console

[sdetweil]

@dobi show the source code page. u had to fix both counters

sources tab, modules, mmm-cookbook, mmm-cookbook.js

[sdetweil]

@dobi

self.sendSocketNotification("DO_YOUR_JOB", this.count)

but u didn’t change this.count to self.count
in all the places

[Dobi]

@sdetweil I replaced all this. … calls to self. … but I don’t get a change. Is there a way that I can check to check that I can check that the function is loaded correctly from the kernal?

[sdetweil]

@dobi view the source in the dev window

what u showed above is not changed

[Dobi]

@sdetweil
sorry I only updated it on github

notificationReceived: function (notification, payload, sender) {
		var self = this;
		switch (notification) {
			case "DOM_OBJECTS_CREATED":
				var timer = setInterval(() => {
					//this.updateDom()
					self.sendSocketNotification("DO_YOUR_JOB", self.count);
					console.log(`self.sendSocketNotification("DO_YOUR_JOB", this.count)`, self.sendSocketNotification("DO_YOUR_JOB", self.count))
					self.sendSocketNotification("DO_YOUR_JOB", self.count)
					self.subElementUp.innerHTML = "Count UP:" + self.count
					self.count++
				}, 1000)
				break
		}
	},

[sdetweil]

@dobi and in the console.log too

[Dobi]

@sdetweil Hey sorry for my quite late response. But I wanted to tell you that I found my error it was quite stupid. I had to restart my raspi. After a restart the node_helper worked fine :)
I wrote my first module.

Thanks for your patient

[sdetweil]

@dobi glad you found it… so much fun!!

[cowboysdude]

@dobi See you can do it! Great job and glad that it all worked out for you! :) This is what this project is about…learning.

NOW you can make your mirror your own by showing information that you want and/or need to see…

[riich]

Anyone have an idea on how to display an image instead of a line. I downloaded a jpeg image of a dog and I would like to display that instead of