MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.20.0 is available! For more information about this release, check out this topic.

    Display the specified picture in the specified location

    Custom CSS
    2
    21
    245
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • 史
      史新瑞 last edited by

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

      S 1 Reply Last reply Reply Quote 0
      • S
        sdetweil @史新瑞 last edited by

        @史新瑞 use middle_center position?

        Sam

        Create a working config
        How to add modules

        史 1 Reply Last reply Reply Quote 0
        • 史
          史新瑞 @sdetweil last edited by

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

          S 1 Reply Last reply Reply Quote 0
          • S
            sdetweil @史新瑞 last edited by

            @史新瑞 what do you mean routine?

            mm is a web page, using normal css and styles

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

            Sam

            Create a working config
            How to add modules

            史 2 Replies Last reply Reply Quote 0
            • 史
              史新瑞 @sdetweil last edited by

              @sdetweil example😁 😁

              1 Reply Last reply Reply Quote 0
              • 史
                史新瑞 @sdetweil last edited by

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

                S 1 Reply Last reply Reply Quote 0
                • S
                  sdetweil @史新瑞 last edited by 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

                  Sam

                  Create a working config
                  How to add modules

                  史 2 Replies Last reply Reply Quote 0
                  • 史
                    史新瑞 @sdetweil last edited by

                    @sdetweil thank you

                    1 Reply Last reply Reply Quote 0
                    • 史
                      史新瑞 @sdetweil last edited by

                      @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

                      S 1 Reply Last reply Reply Quote 0
                      • S
                        sdetweil @史新瑞 last edited by

                        @史新瑞

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

                        			img.onload=  (evt) => {
                        

                        Sam

                        Create a working config
                        How to add modules

                        史 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 1 / 3
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy