Use Tizen To Enable Galaxy Watch Rotary Events

[STF News]

Rotary event handling, enabled via the bezel, is supported on the Tizen platform. A bezel is a term used to describe the outside frame of a device, and in the case of a Galaxy Watch, the bezel is the outer ring of the device, which can be rotated. Rotary events are triggered from the Galaxy Watch rotary component when the bezel is rotated clockwise or counterclockwise. The event for each rotation is measured in incremental units called “detents.”

Bezel interactions can be used in a variety of ways, such as controlling the application page, controlling the snap list, changing the progress bar value, scrolling the page, changing the volume, and setting configurations such as date-time on the date-time picker.

This blog discusses how to handle rotary events in Tizen web and native applications. In the following example, you’ll learn how to let a user interact with bezel by using the rotary event to receive or reject a call. The user rotates the bezel clockwise to receive the call and counterclockwise to reject it.

Note: Because Galaxy Active devices do not have bezels, rotary features will not work on them.

---

Prerequisites

Tizen Web
In the Tizen web application, add the following line in the config.xml file:

<feature name="tizen.org/feature/input.rotating_bezel"/>

Tizen Native
In the Tizen native application, include the <system_info.h>header file to use the functions and data types of the system information API.

#include<system_info.h>

You also must add the following line to the manifest file:

<feature name="http://tizen.org/feature/input.rotating_bezel">true</feature>

Check capability

Tizen Web

In the Tizen web application, use the following line to check if the device supports rotary events or if it uses bezel:

var isSupport = tizen.systeminfo.getCapability('http://tizen.org/feature/input.rotating_bezel'); 
console.log(' Bezel = ' + isSupport);

The getCapability() function of the Tizen web API returns with information about whether or not the device supports bezel.

Tizen Native
In the Tizen native application, use the following code to check bezel capability:

bool rotaryValue;
int rotaryReturn;
    rotaryReturn = system_info_get_platform_bool("http://tizen.org/feature/input.rotating_bezel", & rotaryValue);
    if (rotaryReturn!= SYSTEM_INFO_ERROR_NONE) {
       dlog_print(DLOG_INFO, LOG_TAG, "Rotary error");
        return;
    }
dlog_print(DLOG_INFO, LOG_TAG, "Bezel: %s", value ? "Supported" : "Not supported");

Implementation

Tizen Web
Register the rotarydetent event. After registering an event, ev.detail.direction provides the direction value. If the value is CW, the bezel is rotated clockwise. If the value of direction is CCW, the bezel is rotated counterclockwise.

document.addEventListener('rotarydetent', function(ev) {
        /* Get the direction value from the event */
        var direction = ev.detail.direction;
        var textbox = document.querySelector('.contents');
        box = document.querySelector('#textbox'); 
        
        if (direction == 'CW') {
            /* Add behavior for clockwise rotation */
            console.log('clockwise');
            box.innerHTML ="clockwise";
        } else if (direction == 'CCW') {
            /* Add behavior for counter-clockwise rotation */
            console.log('counter-clockwise');
            box.innerHTML ="counter-clockwise";
        }
  });

Tizen Native
Register the rotary event in the app using the following line:

eext_rotary_event_handler_add(_rotary_handler_cb, ad);

The handle function is defined using following code:

Eina_Bool
_rotary_handler_cb(appdata_s *data, Eext_Rotary_Event_Info *ev)
{
    if (ev->direction == EEXT_ROTARY_DIRECTION_CLOCKWISE) {
        dlog_print(DLOG_DEBUG, LOG_TAG,
                   "Rotary device rotated in clockwise direction");

    } else {
        dlog_print(DLOG_DEBUG, LOG_TAG,
                   "Rotary device rotated in counter-clockwise direction");
    }
    return EINA_FALSE;
}

If the rotation direction is equal to EEXT_ROTARY_DIRECTION_CLOCKWISE, the bezel is rotated clockwise. Otherwise, the bezel is rotated counterclockwise.

---

Demo

Two sample apps are attached:
• Rotary Native
• Rotary Web

Web
When you run the web sample app and turn the bezel clockwise, the following text appears on the watch face:

When you turn the bezel counter counterclockwise, “counterclockwise” appears on the watch face:

Native
When you run the native sample app and turn the bezel clockwise, the following text appears on the watch face:

When you turn the bezel counterclockwise, the following text appears:

---

For more information

The bezel is the physical controller of some Samsung wearable devices. Understanding the physical characteristics of the bezel will help you design better interactions.

References:

• https://developer.tizen.org/development/guides/web-application/user-interface/tizen-advanced-ui/applications-circular-ui/handling-rotary-events
• https://developer.tizen.org/development/guides/native-application/user-interface/efl/hardware-input-handling/managing-rotary-events
• https://developer.tizen.org/design/wearable/interaction/bezel-interactions?langswitch=en

View the full blog at its source