MagicMirror² v2.8.0 is available! For more information about this release, check out this topic.

A way to add image name to MMM-BackgroundSlideshow?



  • Hi,

    New here, just got an RPI and am thrilled with it, MM and the 3rd party modules. I’ve set up MMM-BackgroundSlideshow to randomly show backgrounds from a few thousand pictures on my NAS. Every once in a while I see an image that I’d like to remove or edit. Is there a way to get the image filename to show somewhere on the display? (I’m not much of a coder)
    Thanks!



  • FWIW, I did manage to do this. I added a line 155 to the MMM-BackgroundSlideshow.js:

    image.src = encodeURI(this.imageList[this.imageIndex]);
    this.sendNotification("IMAGEFILEPATH", image.src); //my stuff
    
    

    Then I created a small module that displayed the notification.

    Module.register("MMM-ShowMessage", {
    	defaults: {},
    	getDom: function() {
    		var element = document.createElement("div");
    		element.className = this.config.size;
    		element.id = "IMGPATHFILE";
    		return element;
    	},
    	notificationReceived: function(notification, payload, sender) {
    		switch(notification) {
    			case "IMAGEFILEPATH":
    			        var elem = document.getElementById("IMGPATHFILE")
    				var subpayload = payload.substring(53)
    				elem.innerHTML = subpayload
    				break
    		}
    	},
    });
    

    In my config.js I just added:

    {
    	module: "MMM-ShowMessage",
    	position: "bottom_left",
    		config: {
    			size: "small"
    			}
    },
    
    

    Now each time the image changes a notification is sent and picked up by the show message module which displays it on screen. I trim the path because the beginning was consistent among all the pictures.