{"id":3770,"date":"2020-11-30T12:38:32","date_gmt":"2020-11-30T18:38:32","guid":{"rendered":"http:\/\/benincosa.com\/?p=3770"},"modified":"2020-11-30T12:38:32","modified_gmt":"2020-11-30T18:38:32","slug":"arcoachingoverlayview-and-swiftui","status":"publish","type":"post","link":"https:\/\/benincosa.com\/?p=3770","title":{"rendered":"ARCoachingOverlayView and SwiftUI"},"content":{"rendered":"\n

These last few weeks I’ve been diving into Apple’s RealityKit for iPhone. I’ve chosen to use SwiftUI instead of UIKit as I like the similarities between it and ReactJS. I thought I’d start posting a few things I learn as I find Apple’s documentation is great if you already know what you’re doing. Unfortunately, if I knew what I was doing I probably wouldn’t use the documentation. <\/p>\n\n\n\n

This brings us to ARCoachingOverlayView<\/a> which helps with the onboarding of a user to an AR app. It basically tells the user to start moving the phone so that the underlying engine can start recognizing anchors, positions, and objects in the scene. Using this with SwiftUI is as simple as making an extension. <\/p>\n\n\n\n

I created the following extension: <\/p>\n\n\n\n

extension ARView: ARCoachingOverlayViewDelegate {\n    func addCoaching() {\n        let coachingOverlay = ARCoachingOverlayView()\n        coachingOverlay.delegate = self\n        #if !targetEnvironment(simulator)\n        coachingOverlay.session = self.session\n        #endif\n        coachingOverlay.autoresizingMask = [.flexibleWidth, .flexibleHeight]\n        coachingOverlay.goal = .horizontalPlane\n        self.addSubview(coachingOverlay)\n    }\n    \n    public func coachingOverlayViewDidDeactivate(_ coachingOverlayView: ARCoachingOverlayView) {\n        print(\"did deactivate\")\n    }\n}<\/code><\/pre>\n\n\n\n
A few things to note about this code: <\/p>\n\n\n\n
  • We add a function addCoaching()<\/code> to the extension to show the view and add to the ARView’s session. <\/li>
  • We use the #if !targetEnvironment(simulator)<\/code> … #endif<\/code> to ensure this doesn’t break our simulator view.  Otherwise we get errors. <\/li><\/ul>\n\n\n\n
    Using the standard RealityKit demo, it gives us a struct ARViewContainer: UIViewRepresentable<\/code> with the function makeUIView<\/code> defined.  In here we add the login to start the coaching view: <\/p>\n\n\n\n
    var arView : ARView\n#if !targetEnvironment(simulator)\narView.addCoaching()\n#endif<\/code><\/pre>\n\n\n\n
    Notice that we once again enclose this in the if statement so the simulator can still compile.  Now this works on our app: <\/p>\n\n\n\n
    \"\"
    ARCoachingOveralayView Example<\/figcaption><\/figure>\n\n\n\n
    Now we see the overlay view pop up when the app starts.  <\/p>\n\n\n\n
    Apple is still in the early days of AR with their new RealityKit framework but I am excited about the possibilities.  The documentation, as with most Apple documentation, leaves a lot to be desired, but I’m excited enough to try to bang my head through it and start developing more on this platform. <\/p>\n","protected":false},"excerpt":{"rendered":"
    These last few weeks I’ve been diving into Apple’s RealityKit for iPhone. I’ve chosen to use SwiftUI instead of UIKit as I like the similarities between it and ReactJS. I thought I’d start posting a few things I learn as I find Apple’s documentation is great if you already know what you’re doing. Unfortunately, if…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[27,28,953,954,36],"tags":[955,956],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts\/3770"}],"collection":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3770"}],"version-history":[{"count":1,"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts\/3770\/revisions"}],"predecessor-version":[{"id":3773,"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts\/3770\/revisions\/3773"}],"wp:attachment":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}