Page tree
Skip to end of metadata
Go to start of metadata

This guide explains how to use 3D Touch with Force Touch on iOS

Devices that Support Force Touch

Force Touch is the one o the newest technologies in the world and you can develop 3D touch applications with Smartface. For now, 3D touch is only available for iOS devices.
These are; iPhone 6S and iPhone 6S Plus supports 3D Touch for now, iPhone 7 is also expected to come with 3D Touch features. (iPhone SE -aka 6C- does not support 3D Touch.)

Usage

For objects that have touch events as ; onPressed, onTouch, onTouchEnded, onDragInside and onDragOutside, iOS runtime provides a force value. This value is a number. This force value can be gotten from any of those events as "e.force". Also there is another value which keeps the maximum possible force value and is called maximumPossibleForce.  Furthermore, this maximum force value can be gotten from the above events by e.maximumPossibleForce. As an example let’s see how Force Touch works for a TextButton object and a Container object.  Depending on your application, you can use e.force and e.maximumPossibleForce in many different ways but for this example, let’s create a Label object. This label object will be used to show force and maximumPossibleForce values for TextButton and then Container.

Example with TextButton

Now let's create a TextButton and use it’s onDragInside event as below:

var myTextButton = new SMF.UI.TextButton({
		left : "15%",
		top : "35%",
		width : "70%",
		height : "10%",
		text : "trigger dragInside"
	});
page1.add(myTextButton);
myTextButton.onDragInside = function (e) {
	if (Device.forceTouchCapability) {
		myLabel.text = "e.force: " + e.force +
			"\ne.maximumPossibleForce: " + e.maximumPossibleForce;
	}
};

When onDragInside event is triggered, it will return e.force and e.maximumPossibleForce values as below:

Example with Container

Now let’s see force touch on a Container object. Let’s use its onTouch event. 
Create a container and put inside the onTouch event, try to show values of force touch :

var myContainer = new SMF.UI.Container({
        left : "15%",
        top : "35%",
        width : "70%"
        height : "20%",
    });
page1.add(myContainer);
myContainer.onTouch = function (e) {
    if (Device.forceTouchCapability) {
        myLabel.text = "e.force: " + e.force +
            "\ne.maximumPossibleForce: " + e.maximumPossibleForce;
    }
};

When onTouch event is triggered, it will return force touch values (force and maximumPossibleForce).