Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RFE: standardized component to crop and center the avatar #2778

Closed
jsfan3 opened this issue Apr 27, 2019 · 8 comments

Comments

Projects
None yet
3 participants
@jsfan3
Copy link
Contributor

commented Apr 27, 2019

Thank you for your response here:
https://stackoverflow.com/questions/55880408/crop-and-center-an-avatar-in-codename-one-allowing-the-user-to-choose-the-region/55882687#55882687

Can you add a standardized component that implements what is described in my question?


Copy of the Stack Overflow question:

About cropping and centering an avatar in Codename One, I saw similar examples in the manual, in the Javadoc and in the blog, for example the first block of code here: https://www.codenameone.com/javadoc/com/codename1/capture/Capture.html

But I need something that is different and more difficult.

The main problem is that the face is not always in the exact center of the photo. Some apps allow the user to choose the region to crop.

For example, suppose that after capturing a photo it looks automatically cropped and centered so:

image1

Of course it's wrong, I want the lion at the center. In this case, it could be nice if the user can pinch-to-zoom the lion and drag it to the center of the cropping area, getting something like this:

image2

I don't know where to start to do this with Codename One. Is it possible to do it with a Form shown immediately after capturing a photo, that allows to pinch-to-zoom and center the photo in the cropping area like in the above image? Thank you for suggestions.

@codenameone codenameone added this to the Version 7.0 milestone Apr 28, 2019

@codenameone

This comment has been minimized.

Copy link
Owner

commented Apr 28, 2019

I think the right thing to do here would be to enhance ImageViewer to support this sort of UI.

@jsfan3

This comment has been minimized.

Copy link
Contributor Author

commented Apr 29, 2019

The two images that I used to describe this RFE are inspired by the avatar capture of the Facebook app.

I would add this thought: the same app can need to show rounded avatars in some Forms and squared avatar in other Forms. This is my case. So this new component should make possible to get the centered and cropped image as rounded or squared or both types.

@codenameone

This comment has been minimized.

Copy link
Owner

commented Apr 29, 2019

I think it should only include the cropping. Rounding is just masking and we already have the functionality for that elsewhere. It would let you place a mask which would show you how things would look when rounded so that should still work fine.

@jsfan3

This comment has been minimized.

Copy link
Contributor Author

commented Apr 29, 2019

You're right :)

@shannah

This comment has been minimized.

Copy link
Collaborator

commented May 2, 2019

Adding "editing" capability to the ImageViewer seems like it is out of the scope for a "viewer". I'm inclined to create a new component for this. Something like "ImageEditor".

@codenameone

This comment has been minimized.

Copy link
Owner

commented May 2, 2019

I don't think it's editing. The concept is you can add a crop marking in a layered layout and place the image viewer below. Unfortunately it's really hard to know the image boundaries that are currently within the viewport. If just that aspect was exposed the editor would become a trivial component to implement.

Otherwise you'd need to re-implement, pan and zoom for an image in your editor from scratch.

shannah added a commit that referenced this issue May 6, 2019

@shannah

This comment has been minimized.

Copy link
Collaborator

commented May 6, 2019

I have just added a couple of methods to ImageViewer to get the current cropped image. I have added a sample to the SampleRunner (ImageViewerSample2778) that demonstrates its usage.

image

@shannah shannah closed this May 6, 2019

@jsfan3

This comment has been minimized.

Copy link
Contributor Author

commented May 6, 2019

I tried your test case in the Simulator, after changing the image url because it's not more valid (the url you inserted produces an exception).

It seems fine, thank you, I'm going to try to insert an overlay mask, as suggested by Shai, to produce an UI similar to what I need.

I noted that the ImageViewer produces a lot of logs during the dragging and a log for each cropbox: maybe these verbose logs should be optional and disabled by default.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.