ARUI

What is ARUI?

While building an Augmented Reality app in iOS, develoeprs need to spend time in handling all the ARkit specific details and sceneKit related code to setup an AR UI and then worry about the positioning and sizing the UI elements in AR. This library lets the developer specify a UI in the form of an Xib file and then parses the Xib file and creates an AR UI by resizing all the UI elements and arranging them to their relative positions in AR.

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

Requirements

Swift 4 and the latest Xcode

Example Project Images/GIFs

Example App Demo

The Xib file which is parsed to create the UI

Example App Screenshot

Installation

ARUI is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'ARUI'

Instructions to use the Pod

• Start the project in XCode as an ARApp

• Add pod ARUI in Podfile and run pod install

• Add import ARUI to the imports in the ViewController.swift of the workspace

• Now go ahead and create an xib or View file and build your UI. Make sure to include UIImage and UILabel only. Rest of the items will be ignored. The pod currently supports UIImage and UILabel only.

• Make sure to provide an unique restoration identifier to each of UIImage and UILabel. The pod can associate each UI element with the image/text resource through this identifier.

Note:

If you have two UI elements with same restoration identifier, XCode will throw an error. So, once you have set restoration identifer to an element, don't copy paste it as restoration id is also copied.

• Now go to the ViewController.swift conform to ARUIDelegateProtocol

• Now you need to implement two delegate methods

1. func textResourceFor(restorationId: String) -> ARUITextInfo?
   This method is called by the pod for each of the UILabel present in the xib file and you need to return a ARUITextInfo object to put appropriate text for each UILabel.
   

2. func imageResourceFor(restorationId: String) -> UIImage?
   This method is called by the pod for each of the UIImage present in the xib file and you need to return a UIImage object for each UIImage in xib file corresponding to its rstoration identifier.
   

Sample code for delegate methods(You can also find all the code in example project) -

func textResourceFor(restorationId: String) -> ARUITextInfo? {
        
        switch restorationId {
        case "placeName":
            let textInfo = ARUITextInfo(textString: "Colosseum", color: UIColor.blue, font: "Arial")
            return textInfo
            
        case "builtIn":
            let textInfo = ARUITextInfo(textString: "Built in: 70–80 AD", color: UIColor.black, font: "Arial")
            return textInfo
            
        case "located":
            let textInfo = ARUITextInfo(textString: "Located: city of Rome, Italy", color: UIColor.black, font: "Arial")
            return textInfo
            
        case "capacity":
            let textInfo = ARUITextInfo(textString: "Capacity: Estimated between 50,000 and 80,000 ", color: UIColor.black, font: "Arial")
            return textInfo
            
        case "builtBy":
            let textInfo = ARUITextInfo(textString: "Built by: Emperor Vespasian & Emperor Titus", color: UIColor.black, font: "Arial")
            return textInfo
            
        default:
            break
        }
        
        let textInfo = ARUITextInfo(textString: "Augmented Reality", color: UIColor.blue, font: "Menlo")
        return textInfo
    }

func imageResourceFor(restorationId: String) -> UIImage? {
        var image = UIImage()
        switch restorationId {
            case "icon":
                image =  UIImage(named: "cicon")!
            case "image1":
                image =  UIImage(named: "image1")!
            case "image2":
                image =  UIImage(named: "image2")!
            case "image3":
                image =  UIImage(named: "image3")!
            case "image4":
                image =  UIImage(named: "image4")!
            default:
                break
        }
        return image
    }

• Now go to viewDidLoad method and create an instance of ARUIHandler. Now you need to provide five parameters to the init method.

1. Name of the xib file you created
   

2. Delegate as self
   

3. Sceneview object - pass the sceneView object of the current class
   

4. arViewWidth - The width of the AR View which will be created. You can set a ballpark number like 15 and change it accordingly based on how it looks. This has to be set in accordance with the depth value.
   

5. arViewDepth - The distance in z axis(in front/back to you). Negative values pushes objects in front of you.(same as scenekit)
   

• Now set a panel/background color for the UI.

• Call the method drawARUI() and you're done!

• A sample code below illustrates that -

let ARH : ARUIHandler = ARUIHandler(nibName: "ExampleUI", delegate: self, scnView: sceneView, arViewWidth: 14.0, arViewDepth: -20.0)
 ARH.panelColor = UIColor(red: 72/255.0, green: 201/255.0, blue: 176/255.0, alpha: 0.8)
 ARH.drawARUI()

Note:

1. Height of the AR UI is calculated based on provided width and the dimensions of xib/View file.
   

2. You need to do some trial with arViewWidth and arViewDepth values as a really huge object might look really small if its far away.
   

3. The size of the elements in AR are calculated according to the width provided and their actual size in xib/View file relative to size of the xib/View itself.
   

4. If you have any questions, you can email me :)
   

Author

Sandeep Joshi, aw.snjoshi@hotmail.com

License

ARUI is available under the MIT license. See the LICENSE file for more info.