Module not showing

[hazem]

hello, I’m developing a module that detects users heartBeat with a camera based on the eulerian vidéo magnification algorithm, with the voice assistant I send a notification to the module (which I called it MMM-HeartBeat) to activate it.

the scenario of execution

• 1: Before the notification is received
  the dom Object is empty.

• 2: After the notification is received
  the core module sends socket notification to the node helper to begin the execution of a python script to calculate the value and at the same time some animation must show up (a loader) while the value is being calculated.

• 3 After calculating the heartBeat value
  after calculating the value the node helper sends socket notification to the core module with the value in the payload and the value must be shown.

The problem
my problem is that the animation is not showing.
the python script is successfully executing and I successfully logged the HeartBeat value.

This is my code :
core module code:
source code download link

Module.register('MMM-Heart-Beat', {

	defaults: {
		header: 'Heart Beat',
		classes: 'default everyone',
		position : "middle_center"	},

	getStyles: function () {
		console.log("Heartbeat getStyles");
		return ["Heart-Beat.css"];
	},

	init: function () {
		console.log("heartbeat init");
	},

	start: function () {
		Log.log('Starting module: ' + this.name);
		console.log("HeartBeat start");
		this.execution = 0;
		this.getDom();
		this.updateDom(100);
		},

	// Override dom generator.
	getDom: function () {
	
		console.log("heartbeat getDom, "+this.execution);
		var element = document.createElement("div");	
		element.className = "heartbeatloader";
		
		
		if (this.execution === 0) {
			element.innerHTML = "";
			return element;
		}
		else if (this.execution === 1) {
			var element = document.createElement("div");
			element.className = "heartbeatloader";
		 	this.First_layout = " <svg class='svgdraw' width='100%' height='100%' viewBox='0 0 150 400' xmlns='www.w3.org/2000/svg' > <path class='path' 		d='M 0 200 l 40 0 l 5 -40 l 5 40 l 10 0 l 5 15 l 10 -140 l 10 220 l 5 -95 l 10 0 l 5 20 l 5 -20 l 30 0' fill='transparent' stroke-width='4' 		stroke='black'/></svg> <div class='innercircle'></div> <div class='outercircle'></div>";
			element.innerHTML = this.First_layout;
			
			return element;
		}
		else if (this.execution === 2) {
			var element = document.createElement("div");
			element.className = "heartbeatloader";
			this.Second_layout = ![" <h3 class='value'>" + this.Value + " BPM</h3> <svg class='svgdraw2' width='100%' height='50%' viewBox='0 0 150 400' xmlns='www.w3.org/2000/svg' > <path class='path' d='M 0 200 l 40 0 l 5 -40 l 5 40 l 10 0 l 5 15 l 10 -140 l 10 220 l 5 -95 l 10 0 l 5 20 l 5 -20 l 30 0' fill='transparent' stroke-width='4' stroke='black'/></svg> <div class='innercircle'></div> <div class='outercircle'></div>";

 
			element.innerHTML = this.Second_layout;

			return element;

		}
	},

	notificationReceived: function (notification, payload,sender) {
		
		if (notification === 'DETECT-HEART-BEAT') {
			console.log('detect Heart Beat'+sender.name);
			this.execution = 1;
			this.Value = "";
			this.updateDom("");
			this.sendSocketNotification('CONFIG');
		}
	},

	socketNotificationReceived: function (notification, payload) {

		if (notification === 'STATS') {
			console.log(notification + " "+ payload);
			this.execution = 2;
			this.Value = payload;
			console.log(payload);
			this.updateDom();

		}
	},


});

node helper code:
source code download link

//'use strict';

const NodeHelper = require('node_helper');
var async = require('async');
var sys = require('sys');
var python_shell = require('python-shell');

module.exports = NodeHelper.create({

	start: function () {
	},
	socketNotificationReceived: function (notification) {
		var self = this;
		if (notification === 'CONFIG') {

			self.getStats();
		}
		else if (notification === 'DETECT-HEART-BEAT') {

			self.sendSocketNotification('DETECT-HEART-BEAT', this.name);
		}

	},

	getStats: function () {
		//console.log("getStats started");
		var self = this;
		var detection = 0;

		let pyshell = new python_shell.PythonShell('modules/MMM-Heart-Beat/get_pulse.py');

		pyshell.on('message', function (message) {
			// received a message sent from the Python script (a simple "print" statement)
			if (message === 'face not detected') {
				if (detection > 50) {
					console.log("face not detected ");
					detection = 0;
				}
				else {
					detection++;
				}
			}
			else if (message === 'face detected') {
				console.log("face detected");
			}
		});
		pyshell.end(function (err, code, signal) {
			if (code === 1) {
				throw err;
			}
			else {
				self.sendSocketNotification('STATS', code);

				
				pyshell.childProcess.kill('SIGINT');
			}
		});

		//);


	},

});

thank you for helping me

[sdetweil]

@hazem said in Module not showing:

header: ‘Heart Beat’,
classes: ‘default everyone’,
position : “middle_center” },

those are all OUTSIDE the module config

{
 module:"MMM-Heart-Beat",
	header: 'Heart Beat',
 	classes: 'default everyone',
	position : "middle_center",
        config: {
        // any value here will replace the same named values in defaults 
        // in the object called this.config in the modulename.js
        }
},

if there is no position value, MM does not know where to put the output of the getDom() function
so it will appear invisible.. cause it is not anywhere

getDom() returns the ENTIRE contents to be displayed by this module NOW
can be a 'loading...'  messagem or the actual content to replace the loading message

[hazem]

Thank you very much @sdetweil you have just saved my day!