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.

    Module not showing

    Scheduled Pinned Locked Moved Troubleshooting
    3 Posts 2 Posters 251 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.
    • H Offline
      hazem
      last edited by 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.Capture.PNG

      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 ;)

      1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil
        last edited by

        @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

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        H 1 Reply Last reply Reply Quote 0
        • H Offline
          hazem @sdetweil
          last edited by

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

          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