Head first developing MM module for extreme beginners

A Former User

I cant get the text to appear when I run it, I made the Test.js file in the MagicMirror modules folder and copied in what was posted and put the config in the config.js file but when I run it the screens all black, here’s what happens when I try to run it

pi@raspberrypi:~/MagicMirror/modules $ cd ~/MagicMirror
pi@raspberrypi:~/MagicMirror $ npm start dev

magicmirror@2.8.0 start /home/pi/MagicMirror
sh run-start.sh “dev”

Starting MagicMirror: v2.8.0
Loading config …
Loading module helpers …
No helper found for module: MMM-Test.
All module helpers loaded.
Starting server on port 8080 …
Server started …
Sockets connected & modules started …
Launching application.
Shutting down server…
pi@raspberrypi:~/MagicMirror $

any help would be greatly appreciated I dont see what I’m missing

StuGrunt

It is because there is an error (at least I think so - I am new too) and no instructions on where to put the function.

change the Module.register(“MMM-Timetable”) to Module.register(“MMM-Test”)
The article does not tell you where to put the getDom function when it is first introduced. Replace the getDom: function() {}. with the code shown. In other words, don’t just add it to the file. This article would have benefited from a final section that gave the entire code.

I think the original author at least expected us to be very familiar with Node.js (fair enough), but alas, I am not so it took a bit of work to figure it out. :-)

Here it is, for the first part:

Module.register(“MMM-Test”, {
defaults: {},
start: function () {},

getDom: function() {
var element = document.createElement(“div”)
element.className = “myContent”
element.innerHTML = “Hello, World!”
return element
},
notificationReceived: function() {},
socketNotificationReceived: function() {},
})
_

nrayever

Shame, code is really messed up. Not helpful to use it as a guide to start developing modules.

sdetweil

@nrayever see my sample module,
https://github.com/sdetweil/SampleModule

and follow the module developers doc

nrayever

@sdetweil will try it. I don’t have JS experience that is why I have found it difficult to start.

sdetweil

@nrayever sorry cant help develop module if u dont know programming and dont want to learn

cowboysdude

@StuGrunt said in Head first developing MM module for extreme beginners:

It is because there is an error (at least I think so - I am new too) and no instructions on where to put the function.

change the Module.register(“MMM-Timetable”) to Module.register(“MMM-Test”)

The article does not tell you where to put the getDom function when it is first introduced. Replace the getDom: function() {}. with the code shown. In other words, don’t just add it to the file. This article would have benefited from a final section that gave the entire code.

I think the original author at least expected us to be very familiar with Node.js (fair enough), but alas, I am not so it took a bit of work to figure it out. :-)

Here it is, for the first part:

Module.register(“MMM-Test”, {
defaults: {},
start: function () {},

getDom: function() {
var element = document.createElement(“div”)
element.className = “myContent”
element.innerHTML = “Hello, World!”
return element
},
notificationReceived: function() {},
socketNotificationReceived: function() {},
})
_

Both of those functions go outside the getDom function pretty much anywhere you want to put them.

The socketNotificationReceived function [example below, can be used in either node_helper OR your main.js file. The example below is in my node_helper] :

socketNotificationReceived: function(notification, payload) {
		if (notification === 'CONFIG') {
            this.config = payload; 
        }
        if (notification === 'GET_CURRENT') {
            this.getCurrent(payload);
        }
        if (notification === 'GET_FORECAST') {
            if (this.forecast.timestamp === this.getDate() && this.forecast.data !== null) {
                this.sendSocketNotification('FORECAST_RESULT', this.forecast.data); 
                console.log("Using data we already have");
            } else { 
                this.getForecast();
				console.log("Getting new data");
            }
        }
		
    }

Here is the corresponding one in the main.js

socketNotificationReceived: function(notification, payload) {
        if (notification === "CURRENT_RESULT") {
            this.processCurrent(payload);
        }
        if (notification === "FORECAST_RESULT") {
            this.processForecasts(payload);
        }
		this.updateDom(this.config.initialLoadDelay);
    },

You can use notificationReceived to receive info from other modules like this:

Here are examples of that:

notificationReceived: function (notification, payload){ 
        if (notification === 'CURRENT_RESULT') {
			this.processCurrent(payload); 
        }
	},

this.sendNotification('CURRENT_RESULT', payload);

This is how I send and receive my ‘payload’ from one module to another.
The first example is getting my ‘CURRENT_RESULT’ [getting info for a Forecast module from the Current weather module] from the bottom example that is
sending out ‘CURRENT_RESULT’…

The bottom example will ‘broadcast’ and in reality ANY module can get the data it’s sending out.

Hope this helps. It’s a really simple process.

Schmaniel

How can I test the getDom() html output?
I don’t want to restart MM every time when I change something just to look if it worked.

sdetweil

@Schmaniel ctrl-r to reload the screen

nrayever

@sdetweil … ok.