The Best Gateway for Tech Trends

Copyright 2023 @compsmag - All Right Reserved
Blogs

How to Code a Measuring App With ARKit

by Tech Desk
by Tech Desk

This tip is about the how to Code a Measuring App With ARKit. So read this free guide, How to Code a Measuring App With ARKit step by step. If you have query related to same article you may contact us.

How to Code a Measuring App With ARKit – Guide

Along with countless different things that in a short time have been superseded by our modern technology, perhaps the regular tape measure could be close to going. In this two-section series of instructional exercises, we are discovering how to use augmented reality and camera on your iOS device to make an app that will tell you the distance between two places.

In the first post, we designed the application and coded its main interface elements. Here, we are going to polish by measuring between two places in the AR scene. If you haven’t already, follow along with the main post to define your ARKit project. up.

How to Code a measurement app with ARKit

Identify prerequisites

  • Xcode 9 beta (download)
  • An iOS device (iOS 11) with A9, A10 processors. (i.e. iPhone-6S and above, iPad-2017 and above)

    • Create project in Xcode

  • Select “Single View App”
  • Define project details
  • Set “product name”, “organization name”, “Language”. (let’s create demo in Swift)

    • Configure basic things

    Before setting up remember.

  • ARKit is using ‘meter’ for length/width/height.

    • Add ‘ARSCNView’ to view and create IBOutlet

  • drag and drop the “ARSCNView” to “ViewController” and plug into the outlet

    • Resolve the error by importing ARKit

    Configuration Scene and ARSCNViewDelegate

  • configuration scene with options.

    • Camera usage description string

  • Add usage description string in “info.plist”

    • Configure ARS session

  • Create a world tracking session with horizontal plane detection and run the “sceneView” session.
  • Configure ARSession with WorldTracking Configuration

    • Run the project on your device

  • you should see feature points and the origin of the world.
  • Feature points
  • Origin of the world with axis (X,Y and Z)

    • Find ARPlanAnchor

  • ARKit will add new anchors when it has enough data points. We need some base planes to place our objects.
  • Add the “grid” image, which will be placed on the plane. grid.png (you can use another grid image)

    • Create a new “Plane” class by extending “SCNNode”

  • Let’s add the boot code,

    • init(anchor: ARPlanAnchor) {}

  • Determine the width, length of the anchor extension. Here, the height of the plane is 0.01 meter, which means 10 cm. Remember, ARKit uses ‘meter’ for length/width/height.
  • Here, we’ll create a box (and treat it as a geometry). set chanferRadius to zero for now.
  • Between the 6 sides of the box, we will place the grid image at the bottom of the box. The index of the lower side is 4 in the array of sides. Therefore, all sides have transparent materials, except for the 4th index.
  • Create a new plane node with box geometry and set the position.
  • We are done with the initialization of the class. Also, you can see a function calling at the bottom. We need to set the texture according to the size of the plane.
  • We finish with the initialization of the “Plane” class.

    • Let’s add a flat object, when a new ‘anchor’ is detected and the anchor node is added

  • Go to ‘ViewController’.
  • We finished detecting the plane and added our plane to it.
  • Now run the project. You should see that grids are being added to the detected planes.
  • So far, we can take feature points and anchors at those points.
  • Also using these anchors we can add our own flat node. If you feel that something is not working, feel free to leave a message or comment in the box.

    • Let’s see how we can improve plane detection

    Because when ARKit gives us a new anchor, we are creating a new flat object. But what if ARKit detects the plane previously available but with richer feature points. This means that we must update the dimensions of the previous plane (width, length). Where will we get update callbacks on the anchor node? Here, under “ViewController”. What should we do? How can we get the flat object added earlier?

  • use dictionary,
  • Update lines of code,
  • Add method in ‘Plane’ class to update the plane,
  • Add lines of code in ‘ViewController’, when the anchor is updated.
  • Also, remove the plane when the anchor is removed by ARKit.
  • So far, we’ve done the basic setup. Let’s go to the next step.

    • Configure focus view

    Why do we need this? It is for reference only. We’ll place a hover image in the center of the view in the storyboard. Set constraints for the center.

    Place object using hitTest

    Now we are ready to place the object in the focus square position using hitTest. Let’s add methods on ‘ViewController’.

  • hitTest will give the position on the existing plane that intersects with the center of the screen.
  • Get ‘SCNVector3’ from ‘transform’
  • Create a node at position
  • Add button in the storyboard and attach with action. [TouchUpInside]
  • Inside button action, now run the project. By clicking on the button the point must be added.

    • Measure

  • So far we can add point objects on the plane.
  • Now we need to draw a line between 2 points. (start end).
  • Set the starting point node to button action, the current position in the plane will be our point final.
  • Get the current position and draw a line between two points. Draw line between two vectors
  • Now when you press the button button you will see the line drawn from the start node to its current position (focus square). Let’s put a label that will indicate the distance between these two points.
  • Create UILabel to show distance.
  • Get string away.
  • Distance between 2 points.
  • Conversions.
  • screen measurements,

    • Final note

    I hope you like the guide How to Code a Measuring App With ARKit. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

    You Might Be Interested In
    Related Articles
    Apple GuidesBlogs DailyguiderobertGuides and Tutorialsguiding12How To GuideHow To Guidesios Guidesiphones guidesTipsTricks
    Tech Desk

    Our editorial team manages this account. We provide Quality technical hacks and guides, Consumer Electronics comparisons, How-To tips, and tutorials with the latest updates.

    Leave a Comment

    * By using this form you agree with the storage and handling of your data by this website.

    You may also like

    How to Fix Keyboard Auto-Typing on Windows 11

    How to Fix “Error Code 0x80070422” issue in Windows 11/10

    How to Fix “0x8096002A No error description available” issue in Windows

    How to Fix “Call of Duty Vanguard Dev Error 6032” issue on...

    How to Fix Cash App Session Error Domain 503

    How to Fix Error Code 0x80070002 in Windows 11/10

    Where technology meets possibility" "Compsmag has Proudly Shared Free Information Since 2014.

    This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More