@sdetweil sorry, i dont understand, Because of my poor English.

I want to delete commit(371e64e,50879e0)…

How should I delete it?

MMM-imageSlideshow
Only some of the codes in MMM-imageSlideshow were added.

Module.register("MMM-BeforeImage", {

	// Default module config.

	defaults: {
                    ~~
	},

    // load function

	start: function () {

            ~~

	},

	// Define required scripts.

	getStyles: function() {
              ~~
	},    

	// the socket handler

	socketNotificationReceived: function(notification, payload) {
            ~~
    },    

	// Override dom generator.

	getDom: function () {

		var wrapper = document.createElement("div");

        // if an error, say so (currently no errors can occur)

        if (this.errorMessage != null) {

            wrapper.innerHTML = this.errorMessage;

        }

        // if no errors

        else {

            // if the image list has been loaded

            if (this.loaded === true) {

				// if was delayed until restart, reset index reset timer

				if (this.imageIndex == -2) {

					this.imageIndex = -1;

					clearInterval(this.interval);

					var self = this;

					this.interval = setInterval(function() {

						self.updateDom(0);

						}, this.config.slideshowSpeed);						

				}				

                // iterate the image list index

                this.imageIndex += 1;

				// set flag to show stuff

				var showSomething = true;

                // if exceeded the size of the list, go back to zero

                if (this.imageIndex == this.imageList.length) {

                                       // console.log("MMM-ImageSlideshow sending reload request");

				       // reload image list at end of iteration, if config option set

                                       if (this.config.reloadImageList) 

                                           this.sendSocketNotification('IMAGESLIDESHOW_RELOAD_FILELIST', this.config);



					// if delay after last image, set to wait

					if (this.config.delayUntilRestart > 0) {

						this.imageIndex = -2;

						wrapper.innerHTML = " ";

						showSomething = false;

						clearInterval(this.interval);

						var self = this;

						this.interval = setInterval(function() {

							self.updateDom(0);

							}, this.config.delayUntilRestart);									

					}

					// if not reset index

					else

						this.imageIndex = 0;

				}

				if (showSomething) {

					// create the image dom bit

					var image = document.createElement("img");
  //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ adding this code @@@@@@@@@@@@@@@@@@@@@@@@@@@@
					image.id="imgid";
					
                                        var elemimg = document.getElementById("imgid")
                                              elemimg.addEventListener("click", () => {
                                                
                                                console.log(" click success !")
                                                      
                                              }) 
 //@@@@@@@@@@@@@@@@@@@@@@@@@@@ adding this code @@@@@@@@@@@@@@@@@@@@@@@@@@@@@
                                       // if set to make grayscale, flag the class set in the .css file
					if (this.config.makeImagesGrayscale)

						image.className = "desaturate";

					// create an empty string

					var styleString = '';

					// if width or height or non-zero, add them to the style string

					if (this.config.fixedImageWidth != 0)

						styleString += 'width:' + this.config.fixedImageWidth + 'px;';

					if (this.config.fixedImageHeight != 0)

						styleString += 'height:' + this.config.fixedImageHeight + 'px;';

					// if style string has antyhing, set it

					if (styleString != '')

						image.style = styleString;

					// set the image location
					
					// ad the image to the dom
					//var elem = document.getElementById("imageclick")
					
					
					wrapper.appendChild(image);					

				}

            }

            else {

                // if no data loaded yet, empty html

                wrapper.innerHTML = " ";

            }

        }
		
        // return the dom

		return wrapper;

	},
	

});

but Console show ‘Uncaught TypeError : Cannot read property ‘addEventListener’ of null’

@sdetweil thank U!!

@sdetweil When I click Refresh in Chrome, a picture that has been successfully changed appears.

Is there any way to restart a specific module?

@sdetweil
Are you saying to run chrome and put fil://~ in url?
:) ?

@sdetweil
Clicking makes the capture and overwrite the file successful in the process where the magic mirror is run. But it doesn’t appear on the screen.
When the magic mirror is turned off and restarted, a new image will appear successfully.

I think the code is working properly, but the MMM-imageSlideshow module is not being renewed.

@sdetweil
not changed in screen omg…

MMM-Testpython.js

var Testpythons;
Module.register("MMM-Testpython", {

    defaults: {},
    start: function (){
        Testpythons = this;
    },
  
  getDom: function() {
    var element = document.createElement("div")
    element.className = "myContent"
    element.id="divid"
    element.innerHTML = "Hello, World!!! " + this.config.foo
    var subElement = document.createElement("p")
    subElement.innerHTML = "Click" 
    subElement.id = "clickid"
    element.appendChild(subElement)
    return element
  },
  
  notificationReceived: function(notification, payload, sender) {
    switch(notification) {
      case "DOM_OBJECTS_CREATED":
      var elem = document.getElementById("clickid")
      elem.addEventListener("click", () => {
        //
        Testpythons.sendSocketNotification("TEST")
        //
        console.log(" click success !")
        elem.innerHTML = "click success"       
      }) 
        break
    }
  },
  socketNotificationReceived: function(notification, payload) {
    switch(notification) {
      case "AFTERCLICK":
        console.log("Socket recevied payload : "+payload)
        var elemk = document.getElementById("clickid")
        //
        Testpythons.sendNotification('SHOWCHANGEDIMAGE');
        //
        elemk.innerHTML = payload
        break
    }
  }

})

node_helper.js(in MMM-Testpython)

var NodeHelper = require("node_helper");
var {PythonShell} = require('python-shell');
var socketTestpython;
module.exports = NodeHelper.create({
  start: function() {
    socketTestpython=this;
    console.log(this.name+"node_helper started")
  },
  
  socketNotificationReceived: function(notification, payload) {
    switch(notification) {
      case "TEST":
        console.log("notification : " + notification)
	    PythonShell.run('/home/pi/Desktop/BeautyMirror/modules/MMM-Testpython/before.py', null, function (err, result) {
            if (err) throw err;
            console.log(result);          
            socketTestpython.sendSocketNotification("AFTERCLICK",result);
          });
	       
        break
    }
  }
}) 

MMM-ImageSlideshow.js
I added only the following code from the original module code.

notificationReceived: function(notification, payload) {
		Log.info(this.name + " - received notification: " + notification);
		if(notification === "DOM_OBJECTS_CREATED"){
			this.hide()
		}
		
		if(notification === "SHOWCHANGEDIMAGE"){
			var self = this;
			self.updateDom();
			self.show();
		}
	}

console is success…

image before capture

capture image

after caputure

@sdetweil
not about path update

about replacing a picture with an overwritten one dynamically.

@sdetweil
There’s no other way.
Then there’s one more question. Originally, MMM-Testpython is a module that uses python files to capture pictures.

I tried to show the captured pictures using MMM-imageSlideshow.
To sum up, what I want is:
1.Run the magic mirror.
2.MMM-imageSlideShow runs to show the pictures in the folder
3.Use MMM-Testpython to capture it with a webcam.
4.Replace original photos by covering them.
------I’ve been successful so far----
5. MMM-imageSlideshow module has been updated to show only captured pictures (failed)

So what I’m wondering is if I can update MMM-imageSlideshow in the Magic Mirror.

Updatedom() will not be renewed.

I’m using three modules.
MMM-Testpython (This is the module I’m developing.)
MMM-imageSlideshow
MMM-Modulebar1

When I click the click button implemented in the Testpython module code, I want to change the path of the file where the picture is stored. So I want to show you a picture of a different path.

modules/MMM-Testpython/nothing ->modules/MMM-Testpython/before

I implemented it using “sendnotification” in MMM-Testpython, “notificationreceived” in MMM-imageSlideshow.

It was confirmed that the output was successful on the console window.

before click

after click

However, the picture does not change on screen.

The code is as follows.
MMM-imageSlideshow
I’ve just modified the underline for @@@@@@@@@@@@@@@

/* global Module */

/* MMM-ImageSlideshow.js
 * 
 * Magic Mirror
 * Module: MMM-ImageSlideshow
 * 
 * Magic Mirror By Michael Teeuw http://michaelteeuw.nl
 * MIT Licensed.
 * 
 * Module MMM-ImageSlideshow By Adam Moses http://adammoses.com
 * MIT Licensed.
 */
 
Module.register("MMM-ImageSlideshow", {
	// Default module config.
	defaults: {
        // an array of strings, each is a path to a directory with images
        imagePaths: [ 'modules/MMM-Testpython/nothing' ],
        // the speed at which to switch between images, in milliseconds
		slideshowSpeed: 10 * 1000,
        // if zero do nothing, otherwise set width to a pixel value
        fixedImageWidth: 0,
        // if zero do nothing, otherwise set height to a pixel value        
        fixedImageHeight: 0,
        // if true randomize image order, otherwise do alphabetical
        randomizeImageOrder: false,
        // if true combine all images in all the paths
        // if false each path with be viewed seperately in the order listed
        treatAllPathsAsOne: false,
        // if true, all images will be made grayscale, otherwise as they are
        makeImagesGrayscale: false,
        // list of valid file extensions, seperated by commas
        validImageFileExtensions: 'bmp,jpg,gif,png',
		// a delay timer after all images have been shown, to wait to restart (in ms)
		delayUntilRestart: 0,
	},
    // load function
	start: function () {
        // add identifier to the config
        this.config.identifier = this.identifier;
        // ensure file extensions are lower case
        this.config.validImageFileExtensions = this.config.validImageFileExtensions.toLowerCase();
        // set no error
		this.errorMessage = null;
        if (this.config.imagePaths.length == 0) {
            this.errorMessage = "MMM-ImageSlideshow: Missing required parameter."
        }
        else {
            // create an empty image list
            this.imageList = [];
            // set beginning image index to -1, as it will auto increment on start
            this.imageIndex = -1;
            // ask helper function to get the image list
            this.sendSocketNotification('IMAGESLIDESHOW_REGISTER_CONFIG', this.config);
			// do one update time to clear the html
			this.updateDom();
			// set a blank timer
			this.interval = null;
        }
	},
	// Define required scripts.
	getStyles: function() {
        // the css contains the make grayscale code
		return ["imageslideshow.css"];
	},    
	// the socket handler
	socketNotificationReceived: function(notification, payload) {
		// if an update was received
		if (notification === "IMAGESLIDESHOW_FILELIST") {
			// check this is for this module based on the woeid
			if (payload.identifier === this.identifier)
			{
				// set the image list
				this.imageList = payload.imageList;
                // if image list actually contains images
                // set loaded flag to true and update dom
                if (this.imageList.length > 0) {
                    this.loaded = true;
                    this.updateDom();
					// set the timer schedule to the slideshow speed			
					var self = this;
					this.interval = setInterval(function() {
						self.updateDom();
						}, this.config.slideshowSpeed);					
                }
			}
		}
    },    
	// Override dom generator.
	getDom: function () {
		var wrapper = document.createElement("div");
        // if an error, say so (currently no errors can occur)
        if (this.errorMessage != null) {
            wrapper.innerHTML = this.errorMessage;
        }
        // if no errors
        else {
            // if the image list has been loaded
            if (this.loaded === true) {
				// if was delayed until restart, reset index reset timer
				if (this.imageIndex == -2) {
					this.imageIndex = -1;
					clearInterval(this.interval);
					var self = this;
					this.interval = setInterval(function() {
						self.updateDom(0);
						}, this.config.slideshowSpeed);						
				}				
                // iterate the image list index
                this.imageIndex += 1;
				// set flag to show stuff
				var showSomething = true;
                // if exceeded the size of the list, go back to zero
                if (this.imageIndex == this.imageList.length) {
					// if delay after last image, set to wait
					if (this.config.delayUntilRestart > 0) {
						this.imageIndex = -2;
						wrapper.innerHTML = " ";
						showSomething = false;
						clearInterval(this.interval);
						var self = this;
						this.interval = setInterval(function() {
							self.updateDom(0);
							}, this.config.delayUntilRestart);									
					}
					// if not reset index
					else
						this.imageIndex = 0;
				}
				if (showSomething) {
					// create the image dom bit
					var image = document.createElement("img");
					// if set to make grayscale, flag the class set in the .css file
					if (this.config.makeImagesGrayscale)
						image.className = "desaturate";
					// create an empty string
					var styleString = '';
					// if width or height or non-zero, add them to the style string
					if (this.config.fixedImageWidth != 0)
						styleString += 'width:' + this.config.fixedImageWidth + 'px;';
					if (this.config.fixedImageHeight != 0)
						styleString += 'height:' + this.config.fixedImageHeight + 'px;';
					// if style string has antyhing, set it
					if (styleString != '')
						image.style = styleString;
					// set the image location
					image.src = this.imageList[this.imageIndex];
					// ad the image to the dom
					wrapper.appendChild(image);					
				}
            }
            else {
                // if no data loaded yet, empty html
                wrapper.innerHTML = " ";
            }
        }
        // return the dom
		return wrapper;
	}, 
	// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ my code @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
	notificationReceived: function(notification, payload) {
		Log.info(this.name + " - received notification: " + notification);
		if(notification === "BEFORE"){
			console.log("this payload : "+payload)
			this.config.imagePaths=payload
			var self = this;
			self.updateDom();
			console.log("this config config payload : "+this.config.imagePaths)
		}
		
	}
});

MMM-Testpython

var Testpythons;
Module.register("MMM-Testpython", {

    defaults: {},
    start: function (){
        Testpythons = this;
    },
  
  getDom: function() {
    var element = document.createElement("div")
    element.className = "myContent"
    element.id="divid"
    element.innerHTML = "Hello, World!!! " + this.config.foo
    var subElement = document.createElement("p")
    subElement.innerHTML = "Click" 
    subElement.id = "clickid"
    element.appendChild(subElement)
    return element
  },
  
  notificationReceived: function(notification, payload, sender) {
    switch(notification) {
      case "DOM_OBJECTS_CREATED":
      var elem = document.getElementById("clickid")
      elem.addEventListener("click", () => {
        // send!!
        Testpythons.sendNotification('BEFORE','modules/MMM-Testpython/before');
        elem.innerHTML = "click success"       
      }) 
        break
    }
  }

})

@Sean thank you!

@sdetweil thank you!

https://forum.magicmirror.builders/topic/6345/facial-recognition-module-step-by-step-guide
Referring to the above link, I was following the guidelines. But while following the guide, an error occurred in the Python capture.py part.
I am trying to run capture.py but getting this Error. I am using a webcam…

python capture.py

Traceback (most recent call last):
File “capture.py”, line 18, in
import lib.capture as capture
File “/home/pi/MagicMirror/modules/MMM-Facial-Recognition-Tools/lib/capture.py”, line 12, in
from builtins import input
ImportError: No module named builtins

python3 capture.py

Traceback (most recent call last):
   File "capture.py", line 18, in 
      import lib.capture as capture
   File "/home/pi/MagicMirror/modules/MMM-Facial-Recognition-Tools/lib/capture.py", line 21, in 
     from . import config
   File "/home/pi/MagicMirror/modules/MMM-Facial-Recognition-Tools/lib/config.py", line 15, in 
     (CV_MAJOR_VER, CV_MINOR_VER, mv1, mv2) = cv2.__version__.split(".")
ValueError: not enough values to unpack (expected 4, got 3)

Then im tring to sudo pip install future --upgrade,
I modified the code in config.py
from CV_MAJOR_VER, CV_MINOR_VER, mv1, mv2 = cv2.version.split(“.”)
to CV_MAJOR_VER, CV_MINOR_VER, type = cv2.version.split(“.”)

try: python3 capture.py // python capture.py

success!!

I’m still worried. Is there anything wrong with it later?

I installed openv and python etc in the raspberry pie for camera capture.
So I executed a simple Python code.
test.py:

import cv2

cap = cv2.VideoCapture(0)

ret, frame = cap.read()
cv2.imwrite('chan.jpg',frame)

cap.release()
cv2.destroyAllWindows()
print("1")

Successfully 1(print(“1”) in test.py) was printed and the picture was saved on pi/Desktop.
Then, I deleted the pi/Desktop/chan.jpg.

However, we tried to run test.py with MagicMirror, but failed.

The code for node_helper.js to run test.py is as follows.

var NodeHelper = require("node_helper");
var {PythonShell} = require('python-shell');
var socketTestpython;
module.exports = NodeHelper.create({
  start: function() {
    socketTestpython=this;
    console.log(this.name+"node_helper started")
  },
  
  socketNotificationReceived: function(notification, payload) {
    switch(notification) {
      case "TEST":
        console.log("notification : " + notification)
	    PythonShell.run('/home/pi/Desktop/test.py', null, function (err, result) {
            if (err) throw err;
            console.log(result);          
            socketTestpython.sendSocketNotification("I_DID",result);
          });
	       
        break
    }
  }
})

print(“1”) in test.py
‘1’ was successfully outputed on the console as follows:
But as you can see in the image, there is no capture picture file on the desktop.

What is the problem?
I didn’t do anything on npm install about openv.
Is there anything I should install in the magic mirror?
For example, should I do npm install opencv4nodejs?

@sdetweil

pi@pi:~/newTest $ npm start

> magicmirror@2.6.0 start /home/pi/newTest
> sh run-start.sh

Starting MagicMirror: v2.6.0
Loading config ...
Loading module helpers ...
No helper found for module: MMM-iFrame.
No helper found for module: MMM-EmbedYoutube1.
No helper found for module: MMM-Modulebar1.
No helper found for module: MMM-Modulebar.
No helper found for module: MMM-Dynamic-Modules.
No helper found for module: alert.
WARNING! Could not load config file. Starting with default configuration. Error found: Error: Cannot find module 'node_helper'
Loading module helpers ...
No helper found for module: MMM-iFrame.
No helper found for module: MMM-EmbedYoutube1.
No helper found for module: MMM-Modulebar1.
No helper found for module: MMM-Modulebar.
No helper found for module: MMM-Dynamic-Modules.
No helper found for module: alert.
App threw an error during load
Error: Cannot find module 'node_helper'
    at Module._resolveFilename (module.js:543:15)
    at Function.Module._resolveFilename (/home/pi/newTest/node_modules/electron/dist/resources/electron.asar/common/reset-search-paths.js:35:12)
    at Function.Module._load (module.js:473:25)
    at Module.require (module.js:586:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/pi/newTest/modules/default/updatenotification/node_helper.js:6:18)
    at Object.<anonymous> (/home/pi/newTest/modules/default/updatenotification/node_helper.js:92:3)
    at Module._compile (module.js:642:30)
    at Object.Module._extensions..js (module.js:653:10)
    at Module.load (module.js:561:32)
Whoops! There was an uncaught exception...
{ Error: Cannot find module 'node_helper'
    at Module._resolveFilename (module.js:543:15)
    at Function.Module._resolveFilename (/home/pi/newTest/node_modules/electron/dist/resources/electron.asar/common/reset-search-paths.js:35:12)
    at Function.Module._load (module.js:473:25)
    at Module.require (module.js:586:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/pi/newTest/modules/default/updatenotification/node_helper.js:6:18)
    at Object.<anonymous> (/home/pi/newTest/modules/default/updatenotification/node_helper.js:92:3)
    at Module._compile (module.js:642:30)
    at Object.Module._extensions..js (module.js:653:10)
    at Module.load (module.js:561:32) code: 'MODULE_NOT_FOUND' }
MagicMirror will not quit, but it might be a good idea to check why this happened. Maybe no internet connection?
If you think this really is an issue, please open an issue on GitHub: https://github.com/MichMich/MagicMirror/issues
Launching application.

@ganget

I think cleaning is the answer too…

@sdetweil said in node_helper.js does not work.:

when the mirror app is running, can u access from another system at http://mirror_ip:mirror_port

I solved it!!
A month ago, /fi/MagicMirror was installed.
/pi/Magicmirror puts the code above, so node_helper.js work well.

But I don’t know why /pi/Desktop/Beauty/Magicmirror isn’t working. Is this because of /pi/Magicmirror?

Thanks to you, I solved it. Thank you all the time.

@sdetweil
I first ran a magic mirror at /home/pi/Desktop/MagicMirror . But after failing, another one was installed. Running /home/pi/Desktop/Beauty/MagicMirror gave the same result.

In conclusion, there are two magic mirrors: /home/pi/Desktop/MagicMirror and /home/pi/Desktop/Beauty/MagicMirror.

I’ll try it tomorrow, but maybe it doesn’t matter.