Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

camera overlay picture

edit 3

Good news and bad news. The good news is that in the Connections Inspector by disconnecting the overlay UIToolbar and connecting the UIImageview, I see theKing, but then -- the bad news -- I do not see the UIToolbar, which I also need. So the question now is, how can the user get back to the calling VC when s/he is finished here? How can both the toolbar and the image be part of the the overlay, or can the "go back button" toolbar be on the non-overlay view, or something? Or how can I make both the toolbar and the image show on the OverlayViewController?

edit 3

edit 2

setupImagePicker in OverlayViewController.m.

- (void)setupImagePicker:(UIImagePickerControllerSourceType)sourceType
{
    self.imagePickerController.sourceType = sourceType;

    if (sourceType == UIImagePickerControllerSourceTypeCamera)
    {
        // user wants to use the camera interface
        //
        self.imagePickerController.showsCameraControls = NO;

        if ([[self.imagePickerController.cameraOverlayView subviews] count] == 0)
        {
            // setup our custom overlay view for the camera
            //
            // ensure that our custom view's frame fits within the parent frame
            CGRect overlayViewFrame = self.imagePickerController.cameraOverlayView.frame;
            CGRect newFrame = CGRectMake(0.0,
                                         CGRectGetHeight(overlayViewFrame) -
                                         self.view.frame.size.height - 10.0,
                                         CGRectGetWidth(overlayViewFrame),
                                         self.view.frame.size.height + 10.0);
            self.view.frame = newFrame;
            [self.imagePickerController.cameraOverlayView addSubview:self.view];
        }
    }
}

edit 2

edit 1

This is the PhotoPicker sample code link.

edit 1

edit 0

Has anyone tried this on an iPhone instead of an iPad? I do not have an iPhone, but I was reading Matt Neuburg's book today where he says UIImagePicker works differently on the 2 devices.

edit 0

I cannot see the image I am attempting to overlay across the camera view in UIImagePicker. No matter how I add the IBOutlet, as a property or not, the image does not show, but the overlayed toolbar shows fine. Why?

OverlayViewController.h with theKing IBOutlet added to Apple's sample code and then commented out for now.

#import <UIKit/UIKit.h>
#import <AudioToolbox/AudioServices.h>

@protocol OverlayViewControllerDelegate;

@interface OverlayViewController : UIViewController <UINavigationControllerDelegate, UIImagePickerControllerDelegate>
{
    // IBOutlet UIImageView* theKing;   ******** temporarily commented out
    id <OverlayViewControllerDelegate> delegate;
}    

@property (nonatomic, assign) id <OverlayViewControllerDelegate> delegate;
@property (nonatomic, retain) UIImagePickerController *imagePickerController;

- (void)setupImagePicker:(UIImagePickerControllerSourceType)sourceType;

@end

@protocol OverlayViewControllerDelegate
- (void)didTakePicture:(UIImage *)picture;
- (void)didFinishWithCamera;
@end

OverlayViewController.m with the property for theKing IBOutlet added to Apple's sample code.

#import "OverlayViewController.h"

enum
{
    kOneShot,       // user wants to take a delayed single shot
    kRepeatingShot  // user wants to take repeating shots
};

@interface OverlayViewController ( )

@property (assign) SystemSoundID tickSound;

@property (nonatomic, retain) IBOutlet UIImageView* theKing;  // added *********
@property (nonatomic, retain) IBOutlet UIBarButtonItem *takePictureButton;
@property (nonatomic, retain) IBOutlet UIBarButtonItem *startStopButton;
@property (nonatomic, retain) IBOutlet UIBarButtonItem *timedButton;
@property (nonatomic, retain) IBOutlet UIBarButtonItem *cancelButton;

@property (nonatomic, retain) NSTimer *tickTimer;
@property (nonatomic, retain) NSTimer *cameraTimer;

I cannot see the image theKing when I execute the code on an iPhone. Below is a view of the nib I have added showing some of the connections made. No errors are thrown, but I cannot see the image, only the UIToolbar already added.

nib of overlay controller

like image 816
zerowords Avatar asked Mar 25 '13 20:03

zerowords


People also ask

How do you overlay pictures on a camera?

Choose image overlay and the camera prompts you to select a photo, and because it's in RAW format, you're free to play with its exposure—making it lighter or darker as a result—without affecting the original. Select your second photo, adjust it and then combine the two images.

How do I overlay a picture with another picture?

You can easily put a photo on top of another photo using Fotor, a free online photo editor. Simply drag and drop the image you want to overlay into Fotor- this will become your background picture. Then add a new image over it. You can adjust the transparency levels to blend two images together perfectly.

What is overlay image?

Image overlay is the technique of adding text or images over another base image. One of the simplest ways to add image or text overlay is using CSS properties and pseudo-elements.

How do I overlay pictures on my Iphone camera?

Simply tap Photos at the top left corner of the screen and choose the picture you want. Next, you'll need to add the foreground image. First, tap Transform, then Blend. Now tap Add Layer at the bottom right corner of the screen.


2 Answers

Update

I've updated it now and tried to replicate what you've done in your question. I've included full source of .h/.m and [email protected]. Create a new project and paste the source into the files and add [email protected]. Everything is done programmatically - you don't need to set anything up in interface builder other than embedding your view in a navigation controller.

Here is [email protected] - http://i.imgur.com/0DrM7si.png

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UIImagePickerControllerDelegate, UINavigationControllerDelegate> 

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // assign action to button
    UIButton *myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    myButton.frame = CGRectMake(0, 0, 200, 60);
    myButton.center = self.view.center;
    [myButton addTarget:self action:@selector(buttonPress:) forControlEvents:UIControlEventTouchUpInside];
    [myButton setTitle:@"Image Picker" forState:UIControlStateNormal];

    [self.view addSubview:myButton];
}

- (void)buttonPress:(id)sender {
    if (![UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]) {

        // alert the user that the camera can't be accessed
        UIAlertView *noCameraAlert = [[UIAlertView alloc] initWithTitle:@"No Camera" message:@"Unable to access the camera!" delegate:nil cancelButtonTitle:@"Dismiss" otherButtonTitles:nil, nil];
        [noCameraAlert show];

    } else {

        // prepare imagePicker view
        UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];
        imagePicker.sourceType = UIImagePickerControllerSourceTypeCamera;
        imagePicker.delegate = self;
        imagePicker.allowsEditing = NO;
        imagePicker.showsCameraControls = NO;

        // create view for overlay
        CGRect overlayRect = CGRectMake(0, 0, imagePicker.view.frame.size.width, imagePicker.view.frame.size.height);
        UIView *overlayView = [[UIView alloc] initWithFrame:overlayRect];

        // prepare the image to overlay
        UIImageView *overlayImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"theKing"]];
        overlayImage.center = overlayView.center;
        overlayImage.alpha = 0.5;

        // prepare toolbar for overlay
        UIToolbar *overlayToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 600, overlayView.frame.size.width, 40)];
        overlayToolbar.center = CGPointMake(overlayView.center.x, overlayView.frame.size.height - 20);
        overlayToolbar.barStyle = UIBarStyleBlack;

        UIBarButtonItem *takePictureButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCamera target:self action:@selector(takePictureButtonPressed:)];
        UIBarButtonItem *flexibleBarSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
        flexibleBarSpace.width = 1000;
        UIBarButtonItem *startStopButton = [[UIBarButtonItem alloc] initWithTitle:@"Snap" style:UIBarButtonItemStyleBordered target:self action:@selector(startStopButtonPressed:)];
        UIBarButtonItem *timedButton = [[UIBarButtonItem alloc]initWithTitle:@"Timed" style:UIBarButtonItemStyleBordered target:self action: @selector(timedButtonPressed:)];
        UIBarButtonItem *cancelButton = [[UIBarButtonItem alloc]initWithTitle:@"Cancel" style:UIBarButtonItemStyleBordered target:self action: @selector(cancelButtonPressed:)];

        overlayToolbar.items = [NSArray arrayWithObjects:takePictureButton, flexibleBarSpace, startStopButton, timedButton, cancelButton, nil];


        [overlayView addSubview:overlayImage];
        [overlayView addSubview:overlayToolbar];

        // add the image as the overlay
        [imagePicker setCameraOverlayView:overlayView];

        // display imagePicker
        [self.navigationController presentViewController:imagePicker animated:YES completion:nil];
    }
}

#pragma mark - UIBarButton Selectors

- (void)takePictureButtonPressed:(id)sender {
    NSLog(@"takePictureButtonPressed...");
    // TODO: take picture!
}

- (void)startStopButtonPressed:(id)sender {
    NSLog(@"startStopButtonPressed...");
    // TODO: make this do something
}

- (void)timedButtonPressed:(id)sender {
    NSLog(@"timedButtonPressed...");
    // TODO: implement timer before calling takePictureButtonPressed
}

- (void)cancelButtonPressed:(id)sender {
    NSLog(@"cancelButtonPressed");
    [self.navigationController dismissViewControllerAnimated:YES completion:nil];
}

#pragma mark - UIImagePickerController Delegate Methods

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)editingInfo {

    // determine if the user selected or took a new photo
    UIImage *selectedImage;
    if ([editingInfo objectForKey:UIImagePickerControllerOriginalImage]) selectedImage = (UIImage *)[editingInfo objectForKey:UIImagePickerControllerOriginalImage];
    else if ([editingInfo objectForKey:UIImagePickerControllerEditedImage]) selectedImage = (UIImage *)[editingInfo objectForKey:UIImagePickerControllerEditedImage];

    // TODO: Do something with selectedImage (put it in a UIImageView

    // dismiss the imagePicker
    [picker.presentingViewController dismissViewControllerAnimated:YES completion:nil];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

Screenshot

This is what it looks like when I run it. Screenshot

Does this satisfy your app requirements?

like image 108
rog Avatar answered Sep 23 '22 09:09

rog


One answer I have found is to put the image on a huge button which has as an action Done:. I'll have to figure out a way to tell my user to do it, but at least this will dismiss the image view and finish my setup mode. I would really like a cleaner alternative, so please add answers if you have them. Thanks to all who have considered my question.

like image 29
zerowords Avatar answered Sep 19 '22 09:09

zerowords