Enable Water Lock Mode in Galaxy Watch Using Tizen Web App

[STF News]

What is Water lock mode?

Water lock mode was introduced on the Galaxy Watch to prevent accidental touches and wake-up gestures on your screen while swimming. And the thrilling news for developers is that you can enable Water lock mode directly from your app. If you have a fitness-related app, you can use this feature to enhance your app’s capability for various water-based exercises like swimming, water aerobics, and aqua teaser. Let’s dig into the details of how to do this in a Tizen web app.

How do you enable Water lock mode from your app?

This implementation is quite simple. Water lock mode can be enabled using the Application launch API. It involves three simple steps:

1. Configure your app with privileges
2. Retrieve application ID
3. Enable Water lock mode

Let’s get started.

Configure your app with privileges

First, add the following privileges to the config.xml file.

<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
<tizen:privilege name="http://tizen.org/privilege/application.info"/>
<tizen:privilege name="http://tizen.org/privilege/power"/>

• http://tizen.org/privilege/application.launch - Allows the application to open other applications
• http://tizen.org/privilege/application.info - Allows the application to retrieve information related to other applications
• http://tizen.org/privilege/power - Allows the application to control power-related settings

Retrieve application ID

You can enable Water lock mode directly using the launch() method of the Application API. The launch() method launches an application with the given application ID. That’s why we need to know the application ID of the Water lock mode pop-up.

Retrieve the app ID using the following code snippet in the JS file. The following code snippet returns the list of all applications installed on the watch. Among them you can choose the exact ID of the app which you need to launch. For example, we picked the ID com.samsung.clocksetting.water-lock-popup to enable Water lock mode.

function onListInstalledApps(applications) {
    for (var i = 0; i < applications.length; i++)
        console.log("ID : " + applications[i].id);
}

tizen.application.getAppsInfo(onListInstalledApps);

Figure 1: Installed application list

Enable Water lock mode

Once you get the app ID, you can enable Water lock mode with following code snippet in the JS file:

tizen.application.launch("com.samsung.clocksetting.water-lock-popup");

And that’s it. Water lock mode is launched. Please note that, if the mode is launched for the first time in the device, a pop-up appears with a permission message.

When Water lock mode is enabled, the touchscreen, as well as the wake-up gesture feature, is deactivated. So, there is no user interaction between the user and your app. Meanwhile your application runs in the background. So if you want to keep your app running in the foreground, you can use the Power API.

To set the power state, the request() method is called. To manage the screen and CPU state, use the following code snippet in the JS file:

tizen.power.request(“SCREEN”, “SCREEN_NORMAL");
tizen.power.request("CPU", "CPU_AWAKE");
tizen.power.release("SCREEN");
tizen.power.release("CPU");

For example, here I have added a time counter while the Water lock mode is on using an open source library named EasyTimer.js. First, add the JS library to the HTML file.

<script src="lib/easytimer/dist/easytimer.min.js"></script>

After that, add the following code snippet to the JS file to implement a time counter.

var timerInstance = new easytimer.Timer();
timerInstance.start();
timerInstance.addEventListener('secondsUpdated', function (e) {
		document.getElementById("excercise_timer").textContent=timerInstance.getTimeValues().toString();
});
document.getElementById("counting_done").addEventListener("click", function(){
	timerInstance.stop();
});

Figure 2: Water lock enabled

To disable Water lock mode, users must long press the Home key. After disabling Water lock mode, the user can start interacting with your app immediately. For example, the user can stop the time counter using the Done button in the sample app (see Figure 2).

Quite simple, right? You can check out the sample app here. If you have any questions, you can post your queries to Samsung Developer's forum.

View the full blog at its source