Using a toolbar with buttons as an imagepicker camera overlay? - ios

I am trying to add some basic functionality to a camera application.
The app works like this: You press the camera button somewhere in the app, the camera activates and then gives you some extra basic functionality aside from the flash, switchcameras, cancel and take picture buttons.
Having clicked through quite a bit of search results it seems like only a new cameraoverlay is possible.
Now, I've managed to show some text or a button on itsself somewhere on the camera screen following the scanning example on musicalgeometry.com.
But what I'm trying to do here is add an entire view, constructed in IB, as a cameraOverlay. (for example just a toolbar with some buttons and the rest is blank).
Can I use storyboards for this or is this easier working with Nib files?
Or can the toolbar be programmatically added to a UIView so it can serve as cameraOverlay?
I would think the latter (programmatically) is the most straight forward but I haven't been able to find any examples for either possible solution so anything is welcome.
This is the basic overlay code from the example:
- (void) viewDidAppear:(BOOL)animated {
OverlayView *overlay =
[[OverlayView alloc] initWithFrame:CGRectMake(
0, 0, SCREEN_WIDTH, SCREEN_HEIGTH)];
// Create a new image picker instance:
UIImagePickerController *picker = [[UIImagePickerController alloc] init];
// Set the image picker source:
picker.sourceType = UIImagePickerControllerSourceTypeCamera;
// Hide the controls:
picker.showsCameraControls = NO;
picker.navigationBarHidden = YES;
// Make camera view full screen:
picker.wantsFullScreenLayout = YES;
picker.cameraViewTransform = CGAffineTransformScale(picker.cameraViewTransform,
CAMERA_TRANSFORM_X, CAMERA_TRANSFORM_Y);
// Insert the overlay:
picker.cameraOverlayView = overlay;
// Show the picker:
[self presentModalViewController:picker animated:YES];
[picker release];
[super viewDidAppear:YES];
}

Related

Need help calling imagePickerController's "Editing mode"

I've searched everywhere and cannot find a solid answer to this. Is there any way to programatically call a imagePickerController's "edit" photo mode (i.e. the mode where you crop photo taken into a square)?
The reason I'm asking is because I have a custom overlay view and a custom "take photo" button, but I want to edit the image afterwards. I have set the allowsEditing attribute to YES but
[camera takePicture];
Just calls the didFinishPickingMediaWithInfo right after the image is taken. It doesn't go to the "edit" mode view at all. Is there a solution to this?
My code for the image picker:
camera = [[UIImagePickerController alloc] init];
camera.delegate = self;
camera.sourceType = UIImagePickerControllerSourceTypeCamera;
camera.cameraDevice = UIImagePickerControllerCameraDeviceRear;
camera.showsCameraControls = NO;
camera.navigationBarHidden = YES;
camera.toolbarHidden = YES;
camera.wantsFullScreenLayout = NO;
camera.allowsEditing = YES;
camera.cameraOverlayView = overlay;
Edit: added more code
Post your code on how you are presenting the imagePickerContorller
imagePicker.allowsEditing = YES; is what you use to allow editing of the image after image is taken
try adding [cameraOverlayView setUserInteractionEnabled:NO];

Setting Move and Scale Box for iOS

I have seen several apps that after you take a picture, it shows a view for Move and Scale your picture, with a box showing what the resulting image will look like. My app takes a picture the user takes or picks from library, and adds it to a PDF file. I need this file to be a certain size to fit on the PDF, so I need to set the move and scale box accordingly, but I cannot find any documentation on how to do this. Any suggestions?
Just set the UIImagePickerController instance's allowsEditing to YES.
_imagePickerController = [[UIImagePickerController alloc] init];
...
_imagePickerController.delegate = self;
_imagePickerController.allowsEditing = YES;
The UIImagePickerController picker ONLY performs 320x320 cropping.
Try using this: https://github.com/gekitz/GKImagePicker (GKImagePicker)
Sample Code:
self.imagePicker = [[GKImagePicker alloc] init];
self.imagePicker.cropSize = CGSizeMake(320, 90);
self.imagePicker.delegate = self;
[self presentModalViewController:self.imagePicker.imagePickerController animated:YES];

iOS6 Camera Overlay Does Not Allow Editing

In my app, I need to have a Camera Overlay to help the user line up the picture correctly for it's intended use. Further, I need to have the Editing interface to let them fine tune the zoom and alignment with this "guide". I have gotten the Camera overlay to work with the default Camera Controls (the editing pane won't even show unless you use the default controls) , however now on the editing screen, I cannot zoom/pan. The touch events seem to occur on the overlay, and not the editing screen. I know/knew this was a potential problem, and have implemented the fix mentioned here
This allows focusing on the camera screen itself, you can see the touches are being passed through/ignored in the overlay, but on the editing screen this is still not working. I have also tried some of the hittest code found here
That solution gives me an error every time that No visible #interface for 'UIViewController' declares the selector 'hitTest:withEvent:' on the super line.
I have also tried all kinds of settings playing with the userInteractionEnabled property
Here is the code I am using to do the overlay:
self.picker = [[UIImagePickerController alloc] init];
self.picker.sourceType = UIImagePickerControllerSourceTypeCamera;
self.picker.cameraCaptureMode = UIImagePickerControllerCameraCaptureModePhoto;
self.picker.cameraDevice = UIImagePickerControllerCameraDeviceRear;
self.picker.showsCameraControls = YES;
self.picker.navigationBarHidden = YES;
self.picker.toolbarHidden = YES;
self.picker.wantsFullScreenLayout = YES;
self.picker.allowsEditing = YES;
self.picker.view.userInteractionEnabled = YES;
// Insert the overlay
self.overlay = [[OverlayViewController alloc] initWithNibName:#"OverlayViewController" bundle:nil];
self.overlay.pickerReference = self.picker;
self.picker.cameraOverlayView = self.overlay.view;
[self.picker.cameraOverlayView setUserInteractionEnabled:YES];
//[self.picker.cameraOverlayView setUserInteractionEnabled:FALSE];
self.picker.delegate = self.overlay;
// [self performSelector:#selector(moveOverlayViewToSublayer:) withObject:self.picker afterDelay:0.1f];
[self presentModalViewController:self.picker animated:NO];
I had trouble getting a custom overlay working using a xib file and ended up just creating the overlay view in code.
There are examples of how to achieve this around the Net:
http://www.musicalgeometry.com/?p=821
https://developer.apple.com/library/ios/#samplecode/PhotoPicker/Introduction/Intro.html#//apple_ref/doc/uid/DTS40010196

Camera with Custom View

My Application uses camera, I would like to add overlay over the camera preview. For example, I want to use a picture frame when I use Camera, also I would like to add a custom bar for camera operations. Kindly help me to do the same.
You might be trying using UIImagePickerController. But I know this one solution to your problem. You can do it easily using AVCamCaptureManager and AVCamRecorder classes. Apple has a demo program build on its developer site here. It is named AVCam. In simple words what it does is when you click to open the camera, it calls the classes and methods which are responsible for opening the iPhone's camera and record video or capture audio. It calls the same classes which are called by UIImagePickerController. So your camera will open and start taking input.
Now, if you open the xib file of that AVCam project, you'll find a small UIView object. This view is responsible for displaying the camera's feed. You can resize that view as per the size you want and the camera's input will be displayed in that much area. You can also put the frame image around it as per your choice.
It worked for me when I wanted to resize the camera's input feed and capture photos. I hope it works for you as well.
Create a UIImagePickerController from code, adjust its properties, add an overlay onto it, and with you controller, control whatever you want on that overlay : custom controls, overlaying images, etc...
That gives something like this :
self.picker = [[UIImagePickerController alloc] init];
self.picker.sourceType = UIImagePickerControllerSourceTypeCamera;
self.picker.cameraCaptureMode = UIImagePickerControllerCameraCaptureModePhoto;
self.picker.cameraDevice = UIImagePickerControllerCameraDeviceRear;
self.picker.showsCameraControls = NO;
self.picker.navigationBarHidden = YES;
self.picker.toolbarHidden = YES;
self.picker.wantsFullScreenLayout = YES;
// Insert the overlay
self.overlay = [[OverlayViewController alloc] initWithNibName:#"Overlay" bundle:nil];
self.overlay.pickerReference = self.picker;
self.picker.cameraOverlayView = self.overlay.view;
self.picker.delegate = self.overlay;
[self presentModalViewController:self.picker animated:NO];
OverlayViewController is the controller that you must write to control everything you add onto the overlay.
pickerReference is a property you can keep to send orders to the camera. For example, you could call the following from an IBAction coming from a UIButton placed onto the overlay :
[self.pickerReference takePicture];
Read the UIImagePickerController Class Reference, that's right in the documentation…
There are properties for this, especially the cameraOverlayView and showsCameraControls properties.
So you can hide the controls, provide a custom overlay view, and add subviews to this custom view to add custom buttons, frames, etc.
Swift 3 version for answer from Oliver:
self.picker = UIImagePickerController()
self.picker.sourceType = .camera
self.picker.cameraCaptureMode = .photo
self.picker.cameraDevice = .rear
self.picker.showsCameraControls = false
self.picker.isNavigationBarHidden = true
self.picker.isToolbarHidden = true
// Insert the overlay
self.overlayViewController = self.storyboard?.instantiateViewController(withIdentifier: "Overlay") as! OverlayViewController
self.picker.cameraOverlayView = self.overlayViewController.view
self.picker.delegate = self.overlayViewController
self.navigationController?.present(self.picker, animated: true, completion: nil)
OverlayViewController protocols:
class OverlayViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate

Custom Overlay with UIImagePickerControllerSourceTypeSavedPhotosAlbum

I need to let the user select a photo from the Photo Library and be able to size and crop their image while using an Overlay image. Using UIImagePickerControllerSourceTypeCamera with cameraOverlayView is fine, but UIImagePickerControllerSourceTypeSavedPhotosAlbum does not support that property.
Strangely enough, when I add the overlay view as a subView with alpha set at half, the overlay appears on the Photo selection screen, but this wont fly with Apple's approval process.
-(void)choosePhotoDialog:(id)sender
{
UIBarButtonItem * barThing = (UIBarButtonItem*)sender;
OverlayView * overlay = [[OverlayView alloc] initWithFrame: CGRectMake(0, 0, SCREEN_WIDTH_IPHONE, SCREEN_HEIGTH_IPHONE)
andPhotoOverlay: [dict objectForKey:#"imageUrl"]];
[overlay setUserInteractionEnabled: NO];
UIImagePickerController * picker = [[UIImagePickerController alloc] init];
switch (barThing.tag)
{
case 0: [picker setSourceType: UIImagePickerControllerSourceTypeCamera];
[picker setShowsCameraControls: YES];
[picker setCameraOverlayView: overlay];
break;
case 1: [picker setSourceType: UIImagePickerControllerSourceTypeSavedPhotosAlbum];
[picker.view addSubview: overlay];
[overlay setAlpha: 0.5f];
break;
}
[picker setDelegate: self];
[picker setAllowsEditing: YES];
[picker setNavigationBarHidden: YES];
[picker setWantsFullScreenLayout: YES];
[self presentModalViewController:picker animated:YES];
[picker release];
}
Question
What is the correct way to allow a user to select a photo from the PhotoLibrary with an Overlay using UIImagePickerControllerSourceTypeSavedPhotosAlbum?
Resolved
Basically, I needed to write 3 separate classes and combine them to create my own custom photo editing view, which also saves pinch / zoom / rotate edits.
I ended up writing several classes:
An OverlayView class which is a UIView and simply retrieves the .png image with transparency and is the bottom-most layer.
An InteractiveWallpaper class which is a UIImageView and handles all of the touch events, including the transformation events.
And finally, an EditingView class which is a UIViewController. This adds the 2 views previously mentioned as well as saves the photo that the user edited.
This also allowed me to customize the behavior of the view. When the user touches the imported photo, the top-most photo decreases it's alpha value, allowing the user to still see the overlay while the imported photo is more visible.

Resources