Display the specified picture in the specified location

[史新瑞]

I want to display the specified image in the middle of the screen，What should I do

[sdetweil]

@史新瑞 use middle_center position?

[史新瑞]

@sdetweil Do you have a specific routine? I am a novice, not familiar with it, thank you

[sdetweil]

@史新瑞 what do you mean routine?

mm is a web page, using normal css and styles

there are some predefined positions. see css/main.css

[史新瑞]

@sdetweil example:beaming_face_with_smiling_eyes: :beaming_face_with_smiling_eyes:

[史新瑞]

@sdetweil Have you ever done a similar project? Can I refer to it:folded_hands:

[sdetweil]

@史新瑞 you can look at my version of MMM-ImagesPhotos

https://github.com/sdetweil/MMM-ImagesPhotos

I center the image in the background(fullscreen_below), retaining the image dimension ratio, which css cover and contain do not.

to help with smoothing the transitions and not having blank screen, I use an onLoad() handler to hide the prior and visualize the just loaded image.

I have not tried these modifications in the middle_center mm position

[史新瑞]

@sdetweil thank you

[史新瑞]

@sdetweil I was wondering how do you set the image position in your CSS program?or automatically read fixed folder pictures and thanks for the instructions

[sdetweil]

@史新瑞

see the on-load handler , line 247 of the MMM-ImagesPhotos.js

			img.onload=  (evt) => {

[史新瑞]

@sdetweil Sorry I didn’t find line 247

[sdetweil]

@史新瑞 my version

https://github.com/sdetweil/MMM-ImagesPhotos

[史新瑞]

@sdetweil Thank you. I have downloaded your module, but there is an error when I use it. Could you please help me check it? I’m very sorry

[史新瑞]

@史新瑞
This is the config.js file

[sdetweil]

@史新瑞 error… you have to do

npm install 

in the module folder

[史新瑞]

@sdetweil Sorry, I forgot. I’ll try again

[sdetweil]

@史新瑞 my code always uses the full screen
m is the margin size

var tw = document.body.clientWidth+(parseInt(m)*2);

var th = document.body.clientHeight+(parseInt(m)*2)

but one could get the module position( part of the config Info passed to module) and then get ITS size.
see the window.getComputedStyle(), used on line 221.

[史新瑞]

@sdetweil I did the installation and configuration several times. But yesterday’s mistake has not been resolved

[史新瑞]

@sdetweil Thank you very much. I’ve got the problem

Thank you again

[sdetweil]

@史新瑞 I do not understand

if you did the npm install in the newly cloned module folder then the request library would be added to the modules library list