MMM-BackgroundSlideshow

[hootzter]

Hello,

I’m new to magic mirror. Since two weeks I try to get MMM-ImagesPhotos or MMM-BackgroundSlideshow to work with the photos of my camera (all pictures are JPEG with 5 to 10 meg).

Like @CyruS1337 the whole mirror goes black, if I use my photos but works if I use the example-pictures.

@sdetweil :
How did you get this to work with your pictures?
Could you post your config (including tweeks you did) and tell us which pi you are using?

I was so desperate that I looked for alternatives. I found pi3d but couldn’t integrate it into magic mirror.

I would really appreciate your help.

Best regards

hootzter

[sdetweil]

@hootzter said in MMM-BackgroundSlideshow:

MMM-ImagesPhotos

usually black screen means some missing library…
if u npm start from the terminal window you will see runtime messages
also from the developers window , ctrl-shift-i on the mirror keyboard, select the console tab, and scroll up.

you can try my MMM-ImagesPhotos
https://github.com/sdetweil/MMM-ImagesPhotos

my config

		{
			module: "MMM-ImagesPhotos",
			disabled: false,
			position: "fullscreen",  // < --- this is the div location NOT screen covered with image
			config: {
				opacity: 0.9, 
				animationSpeed: 0,
				updateInterval: 30000,  // how often to change pic
				backgroundColor: "#808080", // color around pic (if u want something other than black)
			},
		},

I have run this on pi0 thru pi4, mac, and two non-pi SBCs, odroid Xu4, and nano jetson.
where did u put your pictures? the module is looking in the folder
~/MagicMirror/modules/MMm_ImagesPhotos/uploads

I linked that to a mounted server volume

now, my tweaks were to display the images without distortion… same aspect ratio as taken.
I did NOT want the screen completely filled… (image stretched or clipped)

to use mine, just rename the old MMM-ImagesPhotos folder out of the way, and then git clone my version of the module.

[Stoffbeuteluwe]

@sdetweil Hi, is it possible to cover the whole screen with mmm images photos?

[sdetweil]

@Stoffbeuteluwe not with my code, no

the original code does fill the screen if u set the max height and width to the screen size

img.style.maxWidth = this.config.maxWidth;
img.style.maxHeight = this.config.maxHeight;

[Stoffbeuteluwe]

@sdetweil Thank you Sam 😀🙏

[Stoffbeuteluwe]

@sdetweil hi Sam can you help me again I have tried a lot but no luck…my screensize is
width: 1080
high: 1920
I don’t know how to set it the right way

Thanks 🙏

[sdetweil]

@Stoffbeuteluwe are u portrait, not landscape? original or mine?

it should work, but ugly

[Stoffbeuteluwe]

@sdetweil Portrait

[sdetweil]

@Stoffbeuteluwe oops. the width/height is from the imagesSlideshow

this module only supports

backgroundSize	The sizing of the background image. Values can be:
cover: Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
contain: Resize the background image to make sure the image is fully visible

Example: 'contain'
Default value: 'cover'
This value is OPTIONAL

[sdetweil]

also, how are you rotated? physical or CSS?

module does

			div1.style.transform="rotate(0deg)";

then adjusts if different

var Orientation = EXIF.getTag(this, "Orientation");
				if (Orientation != null) {