• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

MMM-SelfieShot: Rotating camera

Scheduled Pinned Locked Moved Unsolved Troubleshooting
11 Posts 3 Posters 3.6k Views 3 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.
  • H Offline
    hclaus
    last edited by Jul 16, 2022, 11:30 AM

    Hey everyone,

    MMM-Selfieshot only allows for an image preview in landscape mode. Is there a way/ unconventional configuration option to change into portrait mode?

    This would come quite handy as my mirror (as most mirrors) is also in portrait orientation and I am building a 3D-printed socket that also allows to put the camera into portrait orientation.

    Best,
    Hendrik

    M 1 Reply Last reply Jul 16, 2022, 11:10 PM Reply Quote 0
    • M Offline
      MMRIZE @hclaus
      last edited by MMRIZE Jul 16, 2022, 11:10 PM Jul 16, 2022, 11:10 PM

      @hclaus

      This module’s features are dependent on node_webcam module, but that module is just a convenient wrapper of lower-level applications like fswebcam or ImageSnap. Anyway, node_webcam itself has no feature about it.

      Frankly said, I’ve already requested that feature to the developer of that node module (https://github.com/chuckfairy/node-webcam/issues/38) for my own purpose, but he hadn’t yet.

      There could be several solutions;

      • Rotating the picture on display of MM (Just with CSS it could be done, but the file itself is not rotated, so if what you need is the picture itself, this is not a perfect solution)
      • Rotating the picture file after shooting (Another post-process is needed. Fortunately, Just one picture’s rotating takes not so long time - Some SBC might not have enough power to process fast)
      • Taking photo itself with rotation. (To achieve this, Independence from node_webcam module might be needed. But not a big deal.)

      I’ll consider options and make a solution for this.

      But you need to know one thing. At this moment, the module’s owner is in anotherone, not me. So I’ll make a PR but acceptance would be on his hands. (Maybe we could have other branch or special dedicated clone for you when the PR is not accepted.)

      H 1 Reply Last reply Jul 18, 2022, 1:27 PM Reply Quote 0
      • H Offline
        hclaus @MMRIZE
        last edited by Jul 18, 2022, 1:27 PM

        @MMRIZE

        Thanks for your reply! I should maybe clarify:

        • The camera chip is mounted 90° rotated, so that I can make use of the maximum resolution of the camera chip in portrait mode.
        • The post-selfie view should ideally be rotated in the same direction as the camera (90° clockwise or counter-clockwise). Both is possible because I can 3D-print a suitable casing in both directions if necessary :-)
        • Rotating the picture file after shooting is not necessary. I do it manually or with another program.
        M 2 Replies Last reply Jul 18, 2022, 5:51 PM Reply Quote 0
        • M Offline
          MMRIZE @hclaus
          last edited by Jul 18, 2022, 5:51 PM

          @hclaus
          So what you need is just displaying picture on mm screen with 90 CW/CCW rotation, I think it could be done with CSS only. I’ll test and show you how to do in a while. (I have dinner now ;) )

          1 Reply Last reply Reply Quote 0
          • M Offline
            MMRIZE @hclaus
            last edited by Jul 18, 2022, 10:48 PM

            @hclaus
            custom.css

            #SELFIE .result {
              width: auto;
              height: auto;
              aspect-ratio: 1 / 1;
            }
            
            @media (min-aspect-ratio: 1 / 1) { /* Horizontal Screen */
              #SELFIE .result {
                left: calc((100vw - 90vh) / 2);
                transform: rotate(90deg);
                width: 90vh;
                top: 0;
              }
            }
            @media (max-aspect-ratio: 1 / 1) { /* Vertical Screen */
              #SELFIE .result {
                top: calc((100vh - 90vw) / 2);
                transform: rotate(90deg);
                height: 90vw;
                left: 0;
              }
            }
            

            You can adjust some values for your purpose.

            S M 2 Replies Last reply Jul 18, 2022, 10:59 PM Reply Quote 0
            • S Away
              sdetweil @MMRIZE
              last edited by Jul 18, 2022, 10:59 PM

              @MMRIZE said in MMM-SelfieShot: Rotating camera:

              top: calc((100vh - 90vw) / 2);

              height -width?

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              M 1 Reply Last reply Jul 18, 2022, 11:06 PM Reply Quote 0
              • M Offline
                MMRIZE @sdetweil
                last edited by Jul 18, 2022, 11:06 PM

                @sdetweil
                Yes, It works. Guess it. :)

                S 1 Reply Last reply Jul 18, 2022, 11:10 PM Reply Quote 0
                • S Away
                  sdetweil @MMRIZE
                  last edited by sdetweil Jul 18, 2022, 11:11 PM Jul 18, 2022, 11:10 PM

                  @MMRIZE hm… on my 2560wx1080h, top is -612

                  on my 3840wx2160h, top is -648
                  ((12160) -(.93840))/2

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  M 1 Reply Last reply Jul 18, 2022, 11:22 PM Reply Quote 0
                  • M Offline
                    MMRIZE @sdetweil
                    last edited by MMRIZE Jul 18, 2022, 11:23 PM Jul 18, 2022, 11:22 PM

                    @sdetweil
                    It would be rotated.

                    2560w x 1080h
                    that is horizontal resolution, so by media rule; below will be adopted;

                    left: calc((100vw - 90vh) / 2); /* (2560 - 972) / 2 = 794 */
                    transform: rotate(90deg);
                    width: 90vh; /* 972 */
                    height: (auto) /* 972, by aspect-ratio: 1 / 1; */
                    top: 0;
                    
                    S 1 Reply Last reply Jul 18, 2022, 11:23 PM Reply Quote 0
                    • S Away
                      sdetweil @MMRIZE
                      last edited by Jul 18, 2022, 11:23 PM

                      @MMRIZE ok, got it…

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        2/11
                        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