MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Display the specified picture in the specified location

    Scheduled Pinned Locked Moved Custom CSS
    21 Posts 2 Posters 7.9k Views 2 Watching
    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.
    • S Offline
      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

      How to add modules

      learning how to use browser developers window for css changes

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

        @sdetweil example:beaming_face_with_smiling_eyes: :beaming_face_with_smiling_eyes:

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

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

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            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

            How to add modules

            learning how to use browser developers window for css changes

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

              @sdetweil thank you

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

                  @史新瑞

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

                  			img.onload=  (evt) => {
                  

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

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

                    @sdetweil Sorry I didn’t find line 247247.png

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

                      @史新瑞 my version

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

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

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

                        @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 sorrybc.png

                        史 S 2 Replies 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 Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy