Samsung Newsroom Posted December 11, 2019 Report Share Posted December 11, 2019 Smart watch users are interested in having an interactive and eye-catching watch faces, which makes creating watch faces a great area for developers to explore. You can create varieties of watch faces, focusing on different perspectives and purposes. This blog can help you create a basic watch face using HTML and JavaScript in Tizen Studio. We will also discuss simple interactions, such as launching an app from watch face, providing sensor data, and so on. Design Watch Face Figure 1 shows a sample watch face that implements an analog clock, has two interactive icons, and shows the wearer’s step count using the pedometer sensor. One of the icons launches the SHealth app to measure heart rate, and another icon displays the current date and launches the Calendar app. Figure 1: Sample watch face design Define Category Add wearable_clock as the category of your app in the config.xml file. It defines your application as a watch face. <tizen:category name="http://tizen.org/category/wearable_clock"/> Create a Basic Watch Face As this is an analog clock, first you’ll have to calculate the rotation angles of the watch hands and then update the UI accordingly. A sample implementation is shown in the following code snippets: the updateTime() function calculates rotation angle with respect to time, and the rotateElement() function updates the UI with rotating watch hands (see Figure 2). function updateTime() { var curtime = new Date(), hour = curtime.getHours(), minute = curtime.getMinutes(), second = curtime.getSeconds(); rotateElement("hand-main-hour", (hour + (minute / 60) + (second / 3600)) * 30); rotateElement("hand-main-minute", (minute + second / 60) * 6); rotateElement("hand-main-second", second * 6); if (curDate < 10) str_curdate.innerHTML = "0" + curDate; else str_curdate.innerHTML = curDate; } function rotateElement(elementID, angle) { var element = document.querySelector("#" + elementID); element.style.transform = "rotate(" + angle + "deg)"; } Figure 2: Basic watch face Add Functionality Launch App The Application API provides a method to launch an app in Tizen. To launch the app, add following privilege to the config.xml file: <tizen:privilege name="http://tizen.org/privilege/application.launch"/> Then use launch(ApplicationID) method to launch the desired application. If you do not know the ID of that application, you can use getAppsInfo() to get the list of IDs. The Heart icon launches SHealth app’s heart rate measuring page (com.samsung.shealth.heartrate.measure). The implementation is as follows: var heart_click = document.getElementById("heart"); heart_click.addEventListener('click', function() { tizen.application.launch("com.samsung.shealth.heartrate.measure"); }); Figure 3: Launch SHealth from the watch face The Calendar icon shows the current date and launches the calendar application (com.samsung.w-calendar2) on the watch. var calendar_click = document.getElementById('date-calendar'); calendar_click.addEventListener('click', function() { tizen.application.launch("com.samsung.w-calendar2"); }); var curtime = new Date(), curDate = curtime.getDate(), str_curdate = document.getElementById("date-calendar"); str_curdate.innerHTML = curDate; Figure 4: Launch Calendar from the watch face Access Device Sensor Data The pedometer sensor provides step count data. To access this sensor, you need to add a feature and a privilege to the config.xml file: Next, you have to ask for user permission to start reading data from the pedometer sensor. The following code snippet shows the implementation: function onchangedCB(pedometerInfo) { var str_step = document.getElementById('step-count'); str_step.innerHTML = pedometerInfo.cumulativeTotalStepCount; } function onSuccess() { tizen.humanactivitymonitor.start("PEDOMETER", onchangedCB,onError,option); } function onError(e) { console.log("error " + JSON.stringify(e)); } tizen.ppm.requestPermission("http://tizen.org/privilege/healthinfo", onSuccess, onError); Figure 5: Step count It’s simple to add functionalities to a basic watch face, isn’t it? I hope this blog inspires and helps you create some amazing watch faces using your own ideas and designs. View the full blog at its source Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.