Ypimagepicker: Enhancement to the camera picker

Created on 3 Jul 2018  路  7Comments  路  Source: Yummypets/YPImagePicker

Hi guys,

As previously mentioned, great work on this! I wanted to submit two requests for enhancements:

  • Would it be possible to enable zoom on the camera picker? It doesn't necessarily need to be implemented at the time of the picture capture (like the stock camera) but could be done once the picture is taken (more like a crop feature before the filter screen)
  • Full screen pictures. While I like the square I think the interface would look a bit better if we could allow full-screen pictures (say in the config file). Combined with the 1st feature mentioned above (a zoom/ crop) it could still give the option for users to do square pictures if they so wished.

Thoughts on this?

Thanks again for the good work!
Francois

Not now enhancement question

Most helpful comment

@ashwinp-r don't know if you're still stuck on this, but I've found that increasing the buttonsContainer offset to something like buttonsContainer.Bottom == previewViewContainer.Bottom - 50 allows for the flip camera/flash buttons to still be interactable. I'm not too familiar with how this library works since it's still new to me, but this does result in the capturePhotoImage icon appearing higher than the other two buttons.

Hopefully there is an update on this, seems like there are few people, myself included, that would want to option to customise the camera layout height without having to setup a submodule. :)

All 7 comments

Hi @fschaus,

Firstly, I'd like to thank you for taking the time to submit your ideas, this is much appreciated :)

1- I believe the "zoom feature" you suggest is already possible with the following configuration

/* Adds a Crop step in the photo taking process, after filters. Defaults to .none */
config.showsCrop = .rectangle(ratio: (1/1))

This adds a step after taking a photo where the user can zoom and crop the shot to a square.

In the case of a non-squared photo, you could use a 3/4 ratio

config.showsCrop = .rectangle(ratio: (3/4))

We are trying to emulate Instagram's way of doing things and they don't support live zoom neither, so I'd lean towards the above solution for the zoom feature.

2- I quite like the idea, Indeed at the moment if config.onlySquareImagesFromCamera = false, the preview when taking a shot is still squared so we miss parts of the actual photo while previewing.
This is related to https://github.com/Yummypets/YPImagePicker/issues/138. It's just a mater of UI and making sure the 4/3 ratio looks fine on all devices I guess.

PS: Excuse the delayed response, we won the soccer World Cup so I was away for a while 馃嚝馃嚪 馃嵒 :)

I am using the library to take a photo from the camera (no library or video support) and I agree with the 2nd point. It is a rather strange UX to see a half empty view, especially when using the library for the first time :)

Hi guys,

As previously mentioned, great work on this! I wanted to submit two requests for enhancements:

  • Would it be possible to enable zoom on the camera picker? It doesn't necessarily need to be implemented at the time of the picture capture (like the stock camera) but could be done once the picture is taken (more like a crop feature before the filter screen)
  • Full screen pictures. While I like the square I think the interface would look a bit better if we could allow full-screen pictures (say in the config file). Combined with the 1st feature mentioned above (a zoom/ crop) it could still give the option for users to do square pictures if they so wished.

Thoughts on this?

Thanks again for the good work!
Francois

For the second question, I wrote some code in YPCameraView.swift. You can change constraints to see a full-size camera.
Just change the code inside "convenience init" method

              layout(
                0,
                |-sideMargin-previewViewContainer-sideMargin-|,
                -2,
                |progressBar|,
                0,
                |buttonsContainer|,
                0
            )
            previewViewContainer.heightEqualsWidth()

to this


        //added
        if YPConfig.onlySquareImagesFromCamera
        {
            layout(
                0,
                |-sideMargin-previewViewContainer-sideMargin-|,
                -2,
                |progressBar|,
                0,
                |buttonsContainer|,
                0
            )
            previewViewContainer.heightEqualsWidth()


        }else
        {
            layout(
                0,
                |-sideMargin-previewViewContainer-sideMargin-|,
                -2,
                |progressBar|,
                0
            )
            previewViewContainer.fillContainer()

            buttonsContainer.fillHorizontally()
            buttonsContainer.height(100)
            buttonsContainer.Bottom == previewViewContainer.Bottom - 15
        }

I hope this helps your need.

@bybash Thanks for the tip! This feature is a must for my project. The flip camera/flash buttons are not working for me when I extend this. Any idea why?

@ashwinp-r don't know if you're still stuck on this, but I've found that increasing the buttonsContainer offset to something like buttonsContainer.Bottom == previewViewContainer.Bottom - 50 allows for the flip camera/flash buttons to still be interactable. I'm not too familiar with how this library works since it's still new to me, but this does result in the capturePhotoImage icon appearing higher than the other two buttons.

Hopefully there is an update on this, seems like there are few people, myself included, that would want to option to customise the camera layout height without having to setup a submodule. :)

Hi folks, I'm happy to announce that both zooming and full screen preview will be available in the next version :)

@s4cha any update on full screen preview?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

theolof picture theolof  路  6Comments

esabunor picture esabunor  路  5Comments

StackHelp picture StackHelp  路  4Comments

fukemy picture fukemy  路  6Comments

kerimsener picture kerimsener  路  6Comments