Third-Party Module - how to get help?

sdetweil

@ember1205 you need to use position:‘fullscreen’ for my sizing to work.

there is a space around the picture, its NOT ‘fullscreen’, its the fullscreen section of the mirror ui.

i adjust the pic to fix exactly with the same relative dimensions as actual

I do not fill (cover) the screen
and do not contain (the image)
alt text

whatever it takes to get 100% of the image, no clipping, onto the screen.

they will NEVER fill the screen, the measurements are different.

the grey is the background color in the config to use to fill the empty space around the pic

  backgroundColor: "#808080",  // the default is #000 , ie, black

the pics are centered on the screen

sdetweil

@ember1205 if you don’t use position:“fullscreen” then the image will be clipped or shrunk based on the area u pick, which is less that 100% of the display space.

I wanted a full background image without clipping or stretching

I checked a few thousand images to insure the right calculations.

ember1205

@sdetweil

I tried with the config you provided:

		{
			module: "MMM-ImagesPhotos",
			position: "fullscreen",
			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)
			},
		},

This results in the photos running off the edges of the screen and not being able to view the entire image. I have also tried using the config on the project page, and adding the maxHeight and maxWidth variables as well.

Just for the heck of it, I even tried using the “fullscreen_below” positioning area that the other module uses.

The photos always run off the edge of the screen. And by a lot.

As of right now, these are all photos that were shot on a 24MP DSLR and they are being displayed on a 1080 TV. There is definitely more pixels in the photo and the device needs to ‘resize’ them down to fit the screen (which it does not appear to be doing).

While you don’t ‘contain’ the images, I do recall that was an option being used in the other module that would ensure they did not overrun the screen edges. Is there a config option for yours that would enable it?

sdetweil

@ember1205 no. Contain…etc.

My pics are from a Nikon D3300 24mp I don’t see anything strange.

U set fullscreen. I add .above

I just checked 50 pics, and they display exactly the same as shown in Windows Media viewer and explorer.

I just installed the module on two systems. Pi3 and pi4. Cut/pasted the config I posted and both systems present the same. One at 1920x1080, and one at 3840x2160. I get the screen size dynamically. Nothing is hard coded

sdetweil

@ember1205 the pics above are without any mods… installed MM, install the module, linked to my server and started MM… they reach to the top of the window or the side (only a few), never both
no border around. not used space is filled with the background color.

if u accidentally zoomed in the browser using ctrl-+, it sadly remembers across instances

ctrl-minus sign will zoom out again

ember1205

@sdetweil

I’ll definitely give it a try. But… If it were a browser zoom issue, wouldn’t that prevent the other module from displaying them properly as well?

sdetweil

@ember1205 yes…

sdetweil

I just added a little bit of debug messaging…

go to the MMM-ImagesPhotos folder, and do a git pull

then edit the config and add
debug:true,

then restart MM

using keyboard, hit ctrl-shift-i, a window will open on right side, select the tab labeled console, and type
image into the field labeled filter…

now u will see messages from the module as it loads images and gets the image actual size, and sets the location and dimension of the image to be displayed… like this sizes are width/height
top is the top left corner (all locations are relative to the top left corner of the screen, 0,0 is the top left… so 0:72 is all the way left and 72 pixels down. (note its centered, so height+2*offset = max,.

MMM-ImagesPhotos.js:237 image setting size to 3023:2015
MMM-ImagesPhotos.js:238 image setting top to 0:72
2015+72*2=2159 (of 2160) in this case

MM-ImagesPhotos.js:222 image loaded=http://localhost:8080/MMM-ImagesPhotos/photo/DSC_0491.JPG size=4000:6000
MMM-ImagesPhotos.js:237 image setting size to 1440:2160
MMM-ImagesPhotos.js:238 image setting top to 791:0

MMM-ImagesPhotos.js:222 image loaded=http://localhost:8080/MMM-ImagesPhotos/photo/PICT0097.JPG size=5472:3648
MMM-ImagesPhotos.js:237 image setting size to 3023:2015
MMM-ImagesPhotos.js:238 image setting top to 0:72

MMM-ImagesPhotos.js:222 image loaded=http://localhost:8080/MMM-ImagesPhotos/photo/DSC_0027.JPG size=6000:4000
MMM-ImagesPhotos.js:237 image setting size to 3023:2015
MMM-ImagesPhotos.js:238 image setting top to 0:72

MMM-ImagesPhotos.js:222 image loaded=http://localhost:8080/MMM-ImagesPhotos/photo/DSC_0476.JPG size=6000:4000
MMM-ImagesPhotos.js:237 image setting size to 3023:2015
MMM-ImagesPhotos.js:238 image setting top to 0:72

MMM-ImagesPhotos.js:222 image loaded=http://localhost:8080/MMM-ImagesPhotos/photo/DSC_0042.JPG size=6000:4000
MMM-ImagesPhotos.js:237 image setting size to 3023:2015
MMM-ImagesPhotos.js:238 image setting top to 0:72

MMM-ImagesPhotos.js:222 image loaded=http://localhost:8080/MMM-ImagesPhotos/photo/DSC_0198.JPG size=6000:4000
MMM-ImagesPhotos.js:237 image setting size to 3023:2015
MMM-ImagesPhotos.js:238 image setting top to 0:72

MMM-ImagesPhotos.js:222 image loaded=http://localhost:8080/MMM-ImagesPhotos/photo/DSC_0720.JPG size=4496:3000
MMM-ImagesPhotos.js:237 image setting size to 3023:2017
MMM-ImagesPhotos.js:238 image setting top to 0:71

MMM-ImagesPhotos.js:222 image loaded=http://localhost:8080/MMM-ImagesPhotos/photo/DSC_0697.JPG size=3000:4496
MMM-ImagesPhotos.js:237 image setting size to 1441:2160
MMM-ImagesPhotos.js:238 image setting top to 791:0

MMM-ImagesPhotos.js:222 image loaded=http://localhost:8080/MMM-ImagesPhotos/photo/DSC_0319.JPG size=4000:6000
MMM-ImagesPhotos.js:237 image setting size to 1440:2160
MMM-ImagesPhotos.js:238 image setting top to 791:0

ember1205

@sdetweil

“do a get pull”… To date, I’ve done little with repositories - can you elaborate on how I do this to make sure I do it correctly?

Also… Some updates.

CTRL - does not affect image size in any way. It DOES affect the sizing of the text for the other modules, though.
I believe that I have determined that the desktop / browser “believes” that it is in portrait mode. The images seem to be getting constrained properly, but because the browser is configured to be as tall as it is, I’m losing all kinds of content off the bottom of the screen. If I do a CTRL-SHIFT-I and then turn on the device toolbar, I see a full vertical representation of the browser and I can see the entire image. As I increase the zoom, it becomes apparent where the image is getting clipped vertically.

Thoughts?

sdetweil

@ember1205
do a get pull…

No
“do a git pull”

Do

cd ~/MagicMirror/modules/MMM-ImagesPhotos
git pull

That copies the latest from a remote repo and updates the local copy and working directory.

I don’t understand how electron thinks it should be in portrait mode. Never seen that