Enhancing Your User’s Experience with ARKit

Enhancing Your User’s Experience with ARKit

Augmented Reality (AR) gives us the ability to enhance our world with a real-time overlay of sound, graphics or video. With the promises of Swift’s ARKit, developers have the opportunity to harness this great power and create projects where our only limitation is the imagination. We had the pleasure of utilizing augmented reality and specifically Apple’s ARKit in a recent application for an American furniture manufacturing company. This client wanted to step into this innovative space and turned to Shockoe to create a proof of concept that takes their existing system for documenting defects with a deck of cards and digitize it with an AR app to enhance this process. Let’s dive into more details on this exciting project.

The Client

Our client is a major manufacturer of quality kitchen and bath cabinets for the home with over 500 cabinet styles and a variety of designs, materials, and finishes. You can find these cabinets being sold through a nationwide network of homebuilders, independent dealers, and distributors. In the U.S., many of their products are found at Lowe’s and The Home Depot. So how can a corporation that boasts the embodiment of the marriage of technology, automation and American craftsmanship benefit from an AR experience?

The Ask 

Our team was tasked to create a digital field tool that can aid in the assessment and documentation of product defects using augmented reality and QMS standards. What were we working with? Well, interestingly enough, the current system for assessing a product defect was a deck of transparent cards that employees would hold up against a cabinet surface to mark the defect. These cards contained instructions and details that would allow an employee to properly mark a defect on the appropriate surface. Not only was this process inefficient, it was also ineffective and gave the chance to human error to the user experience. We had to make a change.

The Build

In order to encapsulate these deck of cards, we started with user testing to begin to understand the user mind. We first provided the user with options of cards to choose from in order to provide the appropriate marker for the defect. These options included species, finish and joint type which were used to drive the next list of defect options. Once each category had an option selected, the user was now able to document the defect. You can see examples of this in these screenshots.

AR-app-manufacturing-AR-assesement-screen

Based on the option selected, the user was given a different spec and AR type used to mark the defect. Specs ranged from 1/4” width x 8” length box to parallel lines .010” in width. Precision was key when marking these defects.

Using ARKit, we are able to create virtual objects with these exact specs to best represent the marker. One of the most important benefits of using AR is that it maintains proper scale from any perspective/distance (which is why we couldn’t simply put an overlay over a photo). This killer feature of AR makes it the right feature in this particular case. ARKit was the ideal technology to solve the client’s problem, and we happen to have the skills to do it.

Here is the code I used to map out these options.

func createBoxImage(length: Float, width: Float) -> VirtualObject {
		
	let position = SCNVector3(x: 0, y: 0, z: 0)
		
	let distanceY = self.get3DPositionInYFromPointForDistance(inches: width, fromPosition: position)
	let distanceX = self.get3DPositionInXFromPointForDistance(inches: length, fromPosition: position)
		
	let scnBox1 = SCNBox(width: distanceX, height: 0.001, length: distanceY, chamferRadius: 0)
		
	let rectangleMaterial = SCNMaterial()
	rectangleMaterial.diffuse.contents =  imageLiteral(resourceName: "focus_square.png")
	scnBox1.materials = [rectangleMaterial]
		
	return VirtualObject(geometry: scnBox1, modelName: "Box \(length) in x \(width) in")
}

 

With  ARKit, we had access to vertical planes allowing us to detect and place nodes on vertical surfaces. Once the vertical surface was detected, we prompted the user to tap and place the marker on the defect. The user also had the option to rotate or drag the marker appropriately once placed.

As the last step and to further enhance their experience and provide better documentation, we’ve added the ability to take photos of the defect as well as take notes about the current defect.

The Outcome

Using ARKit allowed us to provide multiple tools into one mobile app that are efficient and innovative. Users are able to access data easily in the field, improving training and speed of proficiency. By increasing speed, accuracy, and efficiency, all business units will be able to operate with more objective assessments of business KPIs. Augmented reality allows for the automatic surface detection and reliable and accurate scale that decreases the level of subjective user assessment. We’re excited to see the progress of this furniture manufacturing company and help clients with similar needs. Reach out to us if this sounds like the right solution to help your team or if you have your own idea of utilizing augmented reality for your app!

Shae Hazelwood

Shae Hazelwood

Developer

Shae is a mobile developer with a passion for producing business-focused applications and strategy-based mobile development. What began with home-grown app prototypes has turned into a career at Shockoe focused on Titanium and Android development as well as considering market deployment practices. When he’s not deep in code, Shae spends his time playing video games and listening to Hip Hop.

5 Ways an App can Increase Employee Productivity in Manufacturing

5 Ways an App can Increase Employee Productivity in Manufacturing

While we spend most of our efforts helping clients, there are times where we step back and reflect on the lessons we learn through these endeavors. I spent half of 2017 working with Crown, a leading innovator in world-class forklift and material-handling equipment. Through the course of this time, I personally saw changes confirming the app we were developing truly was a key factor in an increase in their employee productivity.

Through app usage, Crown developed a productivity mindset and removed organizational obstacles to their workforce productivity. The app gives employees the ability to work efficiently, keep their equipment operational, and ensure that tools or parts are readily available. Employees are now more productive because the former structures and processes, that consumed valuable time and prevented them from getting things done, have been replaced. Now, with higher labor throughput and with the same amount of relative work, they are more productive.

With these efforts in mind, I compiled the following five ways an app can increase a manufacturer’s employee productivity.

1. Reduce movement to optimize task efficiency
There are many factors that can contribute to unnecessary, time-consuming movement including ineffective floor layout; temporarily displacing material, information, tools, or people; and inefficient working methods. Movement can be reduced by strategically placing objects and information within an app, giving employees quick and easy access to this information. This can eliminate the need for time-consuming searches and demonstrations. For example, video of how to operate equipment can help employees better familiarize themselves with key information about the operations, which will empower them to make informed decisions that help improve their overall productivity.

2. Improve scheduling and plan for interruptions to reduce bottlenecksblog image - schedule effectively and plan for interruptions
Companies must act quickly when something goes wrong, or when their process must be put on hold momentarily because of a malfunct
ion, rejections, or any other changes that may occur. By having access to real-time information regarding employees, tools, and materials, adjustments and accommodations can be made for interruptions. Establishing the right system enables a company to determine the feasibility of scheduling requests, estimate the impact, and even minimize the impact it could have on production. 

3. Improve equipment reliability
Neglecting to maintain equipment, tools, or software puts the process at risk from unaccounted-for downtime. Furthermore, equipment that is poorly maintained or outdated will affect product quality. By taking a more strategic approach and analyzing performance data for key trends, potential issues can be anticipated and maintenance schedules created to extend the longevity of tools, equipment, and software. An app that displays these maintenance schedules gives employees quick access and keeps them informed on equipment status, enabling them to know which equipment needs repairs and which parts are needed for the equipment beforehand. As a result, there will be plans in place to help avoid disruptions to production due to unplanned downtime.

4. Optimize inventory levels to reduce shortages
It’s difficult to be productive when the proper tools to handle a task are unavailable. Companies need to account for and address short count, unexpected delays, and/or late deliveries. An app with this useful information allows accurate and timely visibility of inventory, keeps users informed on what’s running low, possible issues that might arise, and helps address these issues before they become problems that will affect production. In the cases where the shortages are unavoidable, having this system in place will enable users to account for them and even re-assign resources in the meantime.

5. Automate the processblog image - increase and optimize your inventory
The advancements in robotics, artificial intelligence, and machine learning has reached, or in some cases 
surpassed, humans in several different work activities. Having an automated process in production, or even part of an existing process can greatly improve the efficiency and productivity of the process. When the gathering and sending of information is automated, the possibility of human error is eliminated, which effectively prevents disruption to workforce productivity.

At Shockoe, we have been helping businesses increase their productivity by implementing these ideas. We even improved our own process by having systems in place to make our process more productive and efficient, so we can deliver an exceptional product to our clients. Our work with Crown has given us insight on how an application can improve a manufacturer’s productivity. By providing functionality like time tracking, inventory and equipment management, parts logs, order checklists, and more, we have successfully improved productivity for Crown’s workforce. Contact us to take the next step toward improving the quality of your company’s processes and productivity today.

I Got 99 Problems and a Grid ain’t 1

I Got 99 Problems and a Grid ain’t 1

A Grid View is pretty common in many applications nowadays, displaying images or a variety of image and text content to the user in a repeated pattern cells in a vertical and horizontal layout. This component is highly favored over List Views and Table Views when wanting to compare similar data types as well having a better visual comprehension that helps to distinguish the subsets of items.

However, when it comes to Titanium, they don’t have any reference to a Grid View. So what does that mean for our image heavy applications that would like to display a list of images? You could use a list view if you are able to supply enough information that would allow the user to easily read and comprehend the list. But, if you have limited data or none at all it would be more visually appealing to display a Grid View. Which brings us back to the problem at hand, Titanium does not have any reference to a Grid View.

Let us explore our options:

Option 1:

If you know that your data won’t change you could just do some calculations to disperse your views across the screen in the xml. This would be good for navigation where each button would have separate functionality when clicked.

<Alloy>
    <Window layout="horizontal" horizontalWrap="true" backgroundColor="white">
        <Button width="50%" height="50%" title="TopLeft"/>
        <Button width="50%" height="50%" title="TopRight"/>
        <Button width="50%" height="50%" title="BottomLeft"/>
        <Button width="50%" height="50%" title="BottomRight"/>
    </Window>
</Alloy>

 

However this may get a bit messy and annoying when you have to calculate for up to 20 or more views. Which brings us to

Option 2:

Let’s create a Grid View that has three columns and four rows.

// to fit in a 320-wide space 
var cellWidth = 92;
var cellHeight = 92;
var padding = 5; // padding between cells
var xGrid = 3; // how many cells wide
var yGrid = 4; // how many cells tall

/**
 * This will create a 3 x 4 gridview of 12 images
 * you can do some math to determine how many rows will be needed for your data set
 */

var tableData = [];

// array of team objects
var teams = [
    {name : 'Dragons', logo : '/images/dragon.png'}
    {name : 'Tigers', logo : '/images/tiger.png'},
    {name : 'Foxes', logo : '/images/fox.png'},
    {name : 'Dare Devils', logo : '/images/dare_devil.png'},
    {name : 'Cyclones', logo : '/images/cyclone.png'},
    {name : 'Majors', logo : '/images/major.png'},
    {name : 'Hawks', logo : '/images/hawk.png'},
    {name : 'Stallions', logo : '/images/stallion.png'}.
    {name : 'Knights', logo : '/images/knight.png'},
    {name : 'Pirates', logo : '/images/pirate.png'},
    {name : 'Crusaders', logo : '/images/crusader.png'},
    {name : 'Wolves', logo : '/images/wolf.png'},
];

var cellIndex = 0;

//

for (var y=0; y < yGrid; y++){

    var row = Ti.UI.createTableViewRow({
        className : "grid",
        layout : "horizontal",
        height : cellHeight + padding,
        selectedBackgroundColor : 'white'
    });

    for (var x=0; x < xGrid; x++){
        // the cell that will hold the logo and the team name
        var view = Ti.UI.createView({
            teamID : teams[cellIndex].name + cellIndex.toString()
            left : padding,
            right : padding,
            height : cellHeight,
            width : cellWidth
        });
        // image of the logo of the team
        var teamLogo = Ti.createImageView({
            image : teams[cellIndex].logo,
            teamID : teams[cellIndex].name + cellIndex.toString()
        })
        // label of the team's name
        var teamName = Ti.UI.createLabel({
            font : {
                fontSize:14,
                fontWeight:'bold'
            },
            text : teams[cellIndex].name,
            touchEnabled : false,
            teamID : teams[cellIndex].name + cellIndex.toString()
        });

        view.add(teamLogo);
        view.add(teamName);
        row.add(view);

        cellIndex++;
    }

    tableData.push(row);
}

var tableview = Ti.UI.createTableView({
    data : tableData
});


tableview.addEventListener("click", function(e){
    //teamId property set for each view will determine what view was clicked in the table
    if(e.source.teamID){
        Ti.API.info('Clicked: ' + e.source.teamID);
    }
});

This option gives us a very faux Grid View by using the Table View as a crutch by populating each row with several cells. This is a good option and simply by doing some math to determine the amount of rows you’d need for your data set you can make this very flexible to allow for an undetermined data length. However, a problem with this approach is that a user may notice that the entire row shows feedback for being selected. This can be avoided by substituting the Table view for a Scroll View and instead of using Table Rows, just use a View that spans the entire width and add the cell View accordingly.

Option 3:

Simply use a module. There are several good modules out there that not only make it very easy to add a grid to your project but they also add a lot of extra cool features to the Grid View like TiCollectionView and TiFlexiGrid

There are plenty of other ways to create a Grid View that aren’t mentioned above. Titanium allows for a immense of other possibilities to creating a Grid View and the only thing that you need is imagination and some problem solving skills. So even though Titanium lacks a simple way to incorporate a Grid View within your app, that does not mean you can’t Jimmy Rig your own.