A Basic Example Creating An Interactive Business Card In ARKit2.

Overview

ARKit Business Card

This project is a basic example of creating a fully interactive business card in ARKit.

The app uses ARImageTrackingConfiguration to detect the business card and then present interactive content.

As with all my work, the code is fully commented (probably way too much!) so it should be very easy to follow.

Branches:

The Master Branch was originally compiled in XCode10 Beta using Swift 4.

An updated Branch called 'Swift4.2' contains the project built in XCode 10.5 Beta and uses Swift 4.2.

Requirements:

The project is setup for iPhone, and in Portait Orientation.

Notes: If you want to use this project on IOS11.4 you will need to change the ARImageTrackingConfiguration to ARWorldTrackingConfiguration and make some minor tweaks to the Configuration settings in the ViewController, all of which are very trivial.

Some people have had some issues with SideMenu. If I remember correctly, I had to manually change a few of the names, as some have changed in later versions of Swift. Again these are all very trivial!

Using The Templates:

In the templates folder of this repository there are 2 files:

  1. businessCardPrint.png
  2. businessCardTemplate.ai

To get up and running you can print out the businessCardPrint.png or even display it in preview to test the apps functionality. Currently this is sized at 10cm by 5cm, although of course you can change this as you wish!

The template ai file is provided so you can make your own business cards.

The image below shows the SCNScene Business Card template:

The semi transparent area is the actual size of our business card (imageTarget) as such you can change and organise things as you wish.

Business Card Template

The use of a template makes the creation of interactive business cards simple, without the need for manually calculating the position of interactive buttons, and labels etc. And means that you can easily configure the app to detect as many different business cards as you need.

There are 2 Templates:

  1. BusinessCardTemplateA (which doesn't show the users image),
  2. BusinessCardTemplateB (which shows the users image).

If you are using the 1st template you must currently provide an image, which for the sake of simplicity; add an image of the cardholder to the Assetts folder and name it like so: firstname+surname e.g. JoshRobbins.png

The BusinessCardData Struct formats all the data needed for each element of the business card to work:

struct BusinessCardData{

   var firstName: String
   var surname: String
   var position: String
   var company: String
   var address: BusinessAddress
   var website: SocialLinkData
   var phoneNumber: String
   var email: String
   var stackOverflowAccount: SocialLinkData
   var githubAccount: SocialLinkData
}

struct BusinessAddress{

    var street: String
    var city: String
    var state: String
    var postalCode: String
    var coordinates: (latittude: Double, longtitude: Double)
}

enum SocialLink: String{

    case Website
    case StackOverFlow
    case GitHub
}

A BusinessCard is initialised like so:

/// Creates The Business Card
///
/// - **Parameters**:
/// - data: BusinessCardData
/// - cardType: CardTemplate
init(data: BusinessCardData, cardType: CardTemplate) {
}

Whereby the data argument takes the data needed to populate the template and the cardType takes either of the following values:

case noProfileImage
case standard

As such generating a BusinessCard (which is an SCNNode subclass) is as simple as this:

extension  ViewController: ARSCNViewDelegate{

func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {

    //1. Check We Have A Valid Image Anchor
    guard let imageAnchor = anchor as? ARImageAnchor else { return }

   //2. Get The Detected Reference Image
   let referenceImage = imageAnchor.referenceImage

  //3. Load Our Business Card
  if let matchedBusinessCardName = referenceImage.name, matchedBusinessCardName == "BlackMirrorz"{

     //4. Create Our Business Card
     let businessCardData = BusinessCardData(firstName: "Josh",
     surname: "Robbins",
     position: "Software Engineer",
     company: "BlackMirrorz",
     address: BusinessAddress(street: "1 Infinite Loop",
     city: "Cupertino",
     state: "CA",
     postalCode: "95015",
     coordinates: (latittude: 37.3349, longtitude: -122.0090201)),
     website: SocialLinkData(link: "https://www.blackmirrorz.tech", type: .Website),
     phoneNumber: "+821076337633",
     email: "[email protected]",
     stackOverflowAccount: SocialLinkData(link: "https://stackoverflow.com/users/8816868/josh-robbins", type: .StackOverFlow),
     githubAccount: SocialLinkData(link: "https://github.com/BlackMirrorz", type: .GitHub))

     //5. Assign It To The Business Card Node
     let businessCard = BusinessCard(data: businessCardData, cardType: .noProfileImage)
     businessCardPlaced = true
     node.addChildNode(businessCard)
     
   }
  }
}

When the business card is detected, the Firstname and Surname of the card holder is animated with a typing like effect, and the buttons are animated as well.

Interactive Elements:

Each button performs a different function: ARKit Business Card Icons

  • The StackOverFlow Button presents a slide out WKWebView to display the users StackOverFlow Account.
  • The GitHub Button presents a slide out WKWebView to display the users GitHub Account.
  • The Internet Button presents a slide out WKWebView to display the users website.
  • The Phone Button allows the user to call the Business Telephone Number.
  • The SMS Button presents an MFMessageComposeViewController allowing the user to send a text message to the business.
  • The Email Button presents an MFMailComposeViewController allowing the user to email the business.
  • The Contact Button creates a CNMutableContact and saves the business as a new contact on the users device.
  • The Location Button presents a slide out MKMapView to display the users Businesses Location.

Repositories Used:

Since rendering a WKWebView as an SCNMaterial isn't possible, I had to look at other ways to allow the content to be fully interactive.

As such I made use of the fabulous repository SideMenu by Jonkykong which is available here: SideMenu

This allows the user to still experience ARKit whilst allowing an almost split screen like effect:

ARKit Business Card Split Screen

To Do:

Allow the user to create a business card within the app.

You might also like...
Ios-card-transition - iOS CocoaPod to create beautiful card transitions
Ios-card-transition - iOS CocoaPod to create beautiful card transitions

CSCardTransition CSCardTransition is a small library allowing you to create wond

Card Decks is a small utility application for your iPhone, iPod touch and iPad which brings you simple, configurable, colored, multi-line text cards that are grouped into card decks

Card Decks is a small utility application for your iPhone, iPod touch and iPad which brings you simple, configurable, colored, multi-line text cards that are grouped into card decks.

SwiftUI-Card - Simple card ui designed using SwiftUI
SwiftUI-Card - Simple card ui designed using SwiftUI

SwiftUI - Card Simple card ui designed using SwiftUI Preview

IOS Card Game - A simple card game using SwiftUI
IOS Card Game - A simple card game using SwiftUI

IOS_Card_Game A simple card game using Swift UI.

Appstore card animation transition. UICollectionView and UITableView card expand animated transition
Appstore card animation transition. UICollectionView and UITableView card expand animated transition

Appstore card animation transition. UICollectionView and UITableView card expand animated transition. This library tries to add the appstore transition to your own app. The goal is to be as simple as possible to integrate in an app while keeping the flexibility and customization alive.

An example of using the GPU on M1 arm64 Macs for basic compute functions

M1-GPU-Compute Using Swift and Apple's Metal API to utilize the GPUs on M1 equipped Macs Adding Two Arrays CPUs perform computations sequentially, wai

An example of creating custom popups in SwiftUI
An example of creating custom popups in SwiftUI

Custom Popup Example An example project for Implementing custom popups in SwiftUI article. Author Artem Novichkov, [email protected] License The

Creating a simple selectable tag view in SwiftUI is quite a challenge. here is a simple & elegant example of it.
Creating a simple selectable tag view in SwiftUI is quite a challenge. here is a simple & elegant example of it.

SwiftUI TagView Creating a simple selectable tag view in SwiftUI is quite a challenge. here is a simple & elegant example of it. Usage: Just copy the

NintendoSwitch-BezierPath-Example - Nintendo Switch Bezier Path Example

NintendoSwitch-BezierPath-Example An example app that demonstrates the use of Be

Assignment 2 - A fully functional example in the CardinalKit-Example directory
Assignment 2 - A fully functional example in the CardinalKit-Example directory

Assignment 2 - A fully functional example in the CardinalKit-Example directory

A UINavigationController subclass that support pop interactive UINavigationbar with hidden or show.
A UINavigationController subclass that support pop interactive UINavigationbar with hidden or show.

KDInteractiveNavigationController Features ✨ UINavigationController interactive with UINavigationBar hidden or show Hide all UINavigationController ba

A navigation controller that displays its view controllers as an interactive stack of cards.
A navigation controller that displays its view controllers as an interactive stack of cards.

CardNavigation The easiest way to turn a navigation controller into an interactive stack of cards. Highlights ✅ Fully interactive and interruptible ✅

Interactive view transition to display menus with flowing and bouncing effects in Swift
Interactive view transition to display menus with flowing and bouncing effects in Swift

FlowingMenu FlowingMenu provides an interactive transition manager to display menu with a flowing and bouncing effects. The Objective-C countepart is

iOS Interactive Side Menu written in Swift.
iOS Interactive Side Menu written in Swift.

Interactive Side Menu A customizable, interactive, auto expanding and collapsing side menu for iOS written in Swift. Here are some of the ways Interac

Swipe between pages with an interactive title navigation control. Configure horizontal or vertical chains for unlimited pages amount.
Swipe between pages with an interactive title navigation control. Configure horizontal or vertical chains for unlimited pages amount.

SlideController is a simple and flexible UI component fully written in Swift. Built using power of generic types, it is a nice alternative to UIPageVi

™️ A powerful paging view controller with interactive indicator bars
™️ A powerful paging view controller with interactive indicator bars

⭐️ Features Easy to implement page view controller with interactive indicator bars. Highly adaptable and powerful customization. Fully extensible with

A simple way to create custom interactive UIViewController transitions
A simple way to create custom interactive UIViewController transitions

EasyTransitions is a library that helps developers create custom interactive transitions using simple functions defined in a protocol and avoid handli

Custom interactive transition like Apple Music iOS App (iOS 9). written in Swift.
Custom interactive transition like Apple Music iOS App (iOS 9). written in Swift.

MusicPlayerTransition Custom interactive transition like Apple Music iOS App. written in Swift. Demo See demo on Appetize.io Using Transition Animator

Comments
  • The name keeps looping

    The name keeps looping

    The timer function has some issue. The user name appears properly once . When you scan again it keeps adding letters to the existing first name and surname. Are you still supporting the code?

    Thanks, Aarti

    opened by aartivaz 0
  • Scan not working on business card

    Scan not working on business card

    Hi,

    I just downloaded and run the application on iPhone 6s device, Accepted the camera permission in-order to scan businessCard. But its not doing any thing.

    Scan is not happening for me.

    opened by arishanapalli 0
  • Issue in Multiple Card detection

    Issue in Multiple Card detection

    Right now this application is working fine, if we kept only 1 reference image but if we have multiple reference images, then it is not working properly.

    Scenario : if i have card1, card2, card3 and i try to scan one by one , image detection is working properly. Now once i finished scanning of card3, if i scanned card 1 again, application didn't show anything.Now it is able to scan card 3 only.

    opened by rajatmohanty 0
Owner
BlackMirrorz
BlackMirrorz
ARKit Base Project. Place virtual objects based on WWDC example project

ARKit - Placing Virtual Objects in Augmented Reality Learn best practices for visual feedback, gesture interactions, and realistic rendering in AR exp

Ignacio Chiazzo Cardarello 338 Jan 5, 2023
An example project showing how to extract and color anchor geometry in RealityKit

RealityKit - Extracting anchor geometry to create a custom Mesh An example project showing how to extract anchor geometry from ARMeshAnchor, create a

Travis Hall 11 Dec 1, 2022
SwiftUI BusinessCard - Created iOS Business card app to practice SwiftUI

SwiftUI_BusinessCard Created iOS Business card app to practice SwiftUI

null 0 Jan 29, 2022
Alfresco iOS App - Alfresco is the open platform for business-critical content management and collaboration.

Welcome to the Alfresco iOS App Alfresco is the open platform for business-critical content management and collaboration. Alfresco Mobile was designed

Alfresco Software 42 Sep 26, 2022
Build, Measure and Grow iOS subscription business

Apphud SDK Apphud SDK is a lightweight open-source Swift library to manage auto-renewable subscriptions and other in-app purchases in your iOS app. No

Apphud 144 Jan 8, 2023
🌊 - Jelly is a library for animated, non-interactive & interactive viewcontroller transitions and presentations with the focus on a simple and yet flexible API.

Jelly is a library for animated, non-interactive & interactive viewcontroller transitions and presentations with the focus on a simple and yet flexibl

Sebastian Boldt 2.4k Dec 25, 2022
🌊 - Jelly is a library for animated, non-interactive & interactive viewcontroller transitions and presentations with the focus on a simple and yet flexible API.

Jelly is a library for animated, non-interactive & interactive viewcontroller transitions and presentations with the focus on a simple and yet flexibl

Sebastian Boldt 2.4k Dec 25, 2022
VidyoPlatform Basic CustomLayouts Reference App for iOS (Swift)VidyoPlatform Basic CustomLayouts Reference App for iOS (Swift)

VidyoPlatform Basic CustomLayouts Reference App for iOS (Swift) VidyoPlatform reference application highlighting how to integrate video chat into a na

Taras Melko 0 Nov 19, 2021
card.io provides fast, easy credit card scanning in mobile apps

card.io SDK for iOS card.io provides fast, easy credit card scanning in mobile apps. NEW!!! card.io is now an open-source project! As of December 2014

card.io 2.3k Jan 4, 2023
Swipe able, customizable card stack view, Tinder like card stack view based on UICollectionView. Cards UI

Swipable, customizable card stack view, Tinder like card stack view based on UICollectionView. Cards UI Сocoapods installation Add in your Podfile: po

Indy 850 Nov 17, 2022