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