Filter4Cam 學習之 Augmented Reality in iOS 5

since: 2012/02/06
update: 2012/02/08
reference: Augmented Reality in iOS 5 « Safari Books Online's Official Blog

A. 前言
     1. 那些會持續吸引人們注意的 iOS 應用程式類型, 是那些利用擴增實境
       （Augmented Reality，簡稱AR）的應用程式. AR 一般被描述為另一種形式
        的虛擬實境(virtual reality). 它技術上使用擴增的感覺輸入(augment sensory input),
        像是影片, 用來即時地增加人們對現實的感知. 有不同種類的基於 AR 的 iOS app,
        提供許多不同用途之服務. 

    2. 本篇文章以原始作者的內容為主, 來建立整個專案.
----------------------------------------------------------------------------------------------------

B. 擴增實境的不同應用
     我們經常在互動式廣告上看到 AR. 廣告刊登者會在真實世界擁有印著 QR codes
     的東西, 例如在雜誌上的一頁. 這些廣告需要在你的 iPhone 上使用他們的 app 來
     觀看頁面, 並且在螢幕上產生一個商品的虛擬模型之廣告. 

     Word Lens 是一個 AR app 的優秀範例. 它使用照相機的視野來進行英語, 法語與
     西班牙語的翻譯. 除了將你的相機對準想要翻譯的文字, 沒有其它相關的互動. 
     這個 app 會將顯示在你螢幕上的文字替換成翻譯的結果.

----------------------------------------------------------------------------------------------------

C. 利用移動式的感知輸入設備

    如果你想要親自去建立一個 AR app, 你將需要在照相機的即時顯示畫面上鋪上資訊
    (overlay information). 給人深刻印象的 AR 應用程式, 利用了 iOS 設備上可用的不同
    感測器. 作為一個 iOS 開發者, 我們可以進入到 iPhone 的相機, 加速度計
    (accelerometer), 陀螺儀(gyroscope), 羅盤(compass)與全球定位系統
    (Global Positioning System，GPS) 來存取相關的操作. 

    一個 AR 應用程式, 例如: Car Finder, 利用相機, GPS 與羅盤來鋪上方位與距離的
    資訊. 首先幫車子的位置作記號, 應用程式使用 GPS 來儲存 iOS 設備目前的緯度
    與經度. 要引導一個人回到車子的地方, 我們可以連續不斷地計算介於 iPhone 目前
    位置與車子的儲存位置之間的距離. 我們可以使用羅盤, 來給使用者指出正確的方向,
    給予目前的航向. 所有的這些資訊, 藉由鋪在在即時照相機的 view 上面, 而被顯示在
    螢幕上.

----------------------------------------------------------------------------------------------------

D. 新增專案
      1. Xcode > File > New > New Project...
         iOS > Application > Single View Application > Next
         Product Name: MyAR
         Device Family: iPhone
         Use Storyboard: checked
         Use Automatic Reference Couting: checked
         > Next > Create

      2. 加入 CoreLocation framework.

----------------------------------------------------------------------------------------------------

E. 使用羅盤來得到目前的航向

    1. 開啓 ViewController.h 檔案, 修改如下:
#import <UIKit/UIKit.h>
//@add
#import <CoreLocation/CoreLocation.h>

//@interface ViewController : UIViewController
//@update
@interface ViewController : UIViewController <CLLocationManagerDelegate>
{
    //@add
    // We need to specify this class as the delegate for the CLLocationManager
    CLLocationManager *locationManager;
}

//@add
@property (nonatomic, strong) CLLocationManager *locationManager;

@end

    2. 開啓 ViewController.m 檔案, 修改如下:
#import "ViewController.h"

@implementation ViewController

//@add
@synthesize locationManager = _locationManager;
....
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    //@add
    CLLocationManager *locationManager = [[CLLocationManager alloc]  init];
    [self setLocationManager:locationManager];

    self.locationManager.delegate = self;
   
    // checking if we have access to the compass by calling the class method:
    // headingAvailable.
    if([CLLocationManager headingAvailable])
    {
        [self.locationManager startUpdatingHeading];
    }
}
....
//@add
// We can now setup the delegate method to retrieve the compass'heading information:
- (void) locationManager:(CLLocationManager *)manager didUpdateHeading:(CLHeading *)newHeading
{
    NSLog(@"Magnetic Heading: %f", newHeading.magneticHeading);
}
....

      備註: a. 執行結果如下: Magnetic Heading: 125.768448
                 b. 0 為地磁北極, 90 為地磁東極, 180 為地磁南極等等.     

----------------------------------------------------------------------------------------------------

F. 在相機視野的上方鋪上一些成分

    1. 使用 UIView(以下使用UILabel) 當作鋪在相機上的 view
        a. 開啓 ViewController.h 檔案, 修改如下:
@interface ViewController : UIViewController <CLLocationManagerDelegate>
{
    //@add
    // We need to specify this class as the delegate for the CLLocationManager
    CLLocationManager *locationManager;
    UILabel *label;
}

//@add
@property (nonatomic, strong) CLLocationManager *locationManager;
@property (nonatomic, strong) UILabel *label;

        b. 開啓 ViewController.m 檔案, 修改如下:
....
//@add
@synthesize locationManager = _locationManager;
@synthesize label = _label;
....

- (void)viewDidLoad
{
    [super viewDidLoad];
....
    //@add
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0,200,320,40)];
    label.font = [UIFont boldSystemFontOfSize:18.0f];
    label.backgroundColor = [UIColor clearColor];
    label.textColor = [UIColor whiteColor];
    label.textAlignment = UITextAlignmentCenter;
    label.opaque = NO;
   
    [self setLabel:label];
}

    2. 設定 UIImagePickerController
- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    //@add: setup the UIImagePickerController
    UIImagePickerController *picker = [[UIImagePickerController alloc] init];

    // display the live camera view
    picker.sourceType = UIImagePickerControllerSourceTypeCamera;

    // hiding the camera controls and navigation bar
    picker.showsCameraControls = NO;
    picker.navigationBarHidden = YES;

    //To fill up the whole screen properly
    picker.cameraViewTransform = CGAffineTransformScale(picker.cameraViewTransform, 1.242f, 1.242f);

    // The overlay view for the UIImagePickerController accepts any UIView
    [picker setCameraOverlayView:self.label];
   
    [self presentModalViewController:picker animated:YES];
}

    3. 使用 Label 顯示不斷更新的磁極方向.
- (void) locationManager:(CLLocationManager *)manager didUpdateHeading:(CLHeading *)newHeading
{
    //NSLog(@"Magnetic Heading: %f", newHeading.magneticHeading);
    //@update
    self.label.text = [NSString stringWithFormat:@"%f°", newHeading.magneticHeading];
}

----------------------------------------------------------------------------------------------------

G. 編譯並執行