Quantcast
Jump to content

Sign in to follow this  
STF News

Getting Started with Watch Face Development Using the Tizen Web API

Recommended Posts

Watch faces are a special type of application that runs on the home screen of a Tizen wearable watch. Different watch faces have different purposes and can be interacted with in diverse ways. A watch face creates the first impression of the watch and holds value as a fashion accessory.

Anyone can make a watch face using Galaxy Watch Designer (GWD).[1] However, GWD limits how many different features you can add in a watch face. On watch faces, data is displayed to the user in the form of “complications,” which show individual data points such as steps or heart rate. While GWD gives you a set of complications you can add to designs, it does not allow you to add custom complications, as the numbers of complications are fixed inside the GWD tool. With Tizen Studio, you can create complications that pull in data from your own custom sources or perform custom actions, such as launching a separate application or opening a settings menu. With Tizen Studio, you have more options than the ones GWD gives you.

Using Tizen Web/Native/.NET APIs, developers can add a large number of functionalities on watch faces programmatically. In this article, we’ll start by developing a basic watch face using Tizen Web API.

Prerequisites

You need to define your app as a watch face application through an application category in the config.xml file. To achieve that, add wearable_clock under category.

<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/WatchFace" version="1.0.0" viewmodes="maximized">
    <tizen:application id="msWLHN3Mpw.WatchFace" package="msWLHN3Mpw" required_version="2.3.1"/>
    <tizen:category name="http://tizen.org/category/wearable_clock"/>
    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.shape.circle"/>
    <feature name="http://tizen.org/feature/screen.size.all"/>
    <icon src="icon.png"/>
    <name>WatchFace</name>
    <tizen:profile name="wearable"/>
</widget>

Resources

For an analog watch, we need three hands for second, minute, and hour. We also need a background image with a marked time index.

The following table shows resolutions for images in our example:

Image Width (pixels) Height (pixels)
Background 360 360
Hour hand 15 360
Minute hand 16 360
Second hand 16 360

Implementation

  1. We need to create a <div> element for each component, such as background, hour hand, minute hand, and second hand.
    <div id="container">
            <div id="background">
                <div id="components-main">
                    <div id="hand-main-hour"></div>
                    <div id="hand-main-minute"></div>
                    <div id="hand-main-second"></div>
                </div>
            </div>
        </div>
    
  2. We are using an image as the watch face background, so we need to set the background image by setting styles in the CSS file.

    Background Image: The clock time index is set on top of the background image. It could be a separate <div> element, but we assembled the clock index with the green background into one image (see Figure 1).

    2019-11-11-01-01.png

    Figure 1: Watch face background image

    CSS

    #background {
        width: 100%;
        height: 100%;
        background-image: url("../image/watch_bg.png");
    }
    
  3. We also need to set styles for watch face hands separately. The app image folder holds three images, one each for the hour hand, minute hand, and second hand. Then we’ll add some info to the CSS to adjust the position, size, and so on.
    The style set for the minute hand is shown below:
    #hand-main-minute {
        position: absolute;
        left: 172px;
        top: 0px;
        width: 16px;
        height: 360px;
        background-image: url("../image/watch_hand_minute.png");
        background-position: center top;
        background-size: contain;
    }
    
  4. We need to define a function that will rotate hands by a specific angle with its element ID.
     function rotateElement(elementID, angle) {
            var element = document.querySelector("#" + elementID);
            element.style.transform = "rotate(" + angle + "deg)";
        }
    
  5. We also need to have the hand update every second. To do that, we’ll set an interval to call the updateTime() function every second.
    // Update the watch hands every second
            setInterval(function() {
                updateTime();
            }, 1000);
    
  6. We are using the getCurrentDateTime() function of Tizen Time API[2] to get the current time object. From this time object, we can get the hour, minute, and second.
    var datetime = tizen.time.getCurrentDateTime(),
                hour = datetime.getHours(),
                minute = datetime.getMinutes(),
                second = datetime.getSeconds();
    
  7. Now we are going to call our defined function rotateElement() for the hour, minute, and second hands.
      // Rotate the hour/minute/second hands
        rotateElement("hand-main-hour", (hour + (minute / 60) + (second / 3600)) * 30);
        rotateElement("hand-main-minute", (minute + second / 60) * 6);
        rotateElement("hand-main-second", second * 6);
    
  8. We need to set an event listener for visibilitychange to update the screen when the display turns on from the off state.
    // Add an event listener to update the screen immediately when the device wakes up
         document.addEventListener("visibilitychange", function() {
             if (!document.hidden) {
                  updateTime();
             }
         });
    

    We also need to set an event and update the screen when the device’s time zone changes.

    // Add eventListener to update the screen when the time zone is changed
            tizen.time.setTimezoneChangeListener(function() {
                updateTime();
            });
    
  9. Additionally, we can set an event listener for ambient mode change. In this article, we added the listener and printed a console message when the ambient mode changed. It will not change anything on the watch during ambient mode, because we haven’t updated the sample watch face for ambient mode.
    window.addEventListener("ambientmodechanged", function(e) {
            if (e.detail.ambientMode === true) {
                 // Rendering ambient mode case
                 console.log("Ambient mode");
            } else {
                 // Rendering normal case
                 console.log("Normal mode");
            }
         });
    

Demo

A sample watch face app can be downloaded here, and the final watch face is shown in Figure 2.

2019-11-11-01-02.png

Figure 2: Demo watch face developed using Tizen Web

Conclusion

This article demonstrates how to start developing watch face apps with Tizen web API using Tizen Studio. We can now add more functionalities and change the watch into more than just a device that shows time.

References

  1. https://developer.samsung.com/galaxy-watch/design/watch-face/complications
  2. https://developer.tizen.org/development/guides/web-application/device-settings-and-systems/time-and-date-management

View the full blog at its source

Share this post


Link to post
Share on other sites


Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Similar Topics

    • By STF News
      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
    • By STF News
      Samsung Developer Conference is only days away! If you can’t make it to San Jose, you can follow along with our two livestreams for Keynote and Spotlight Session. Tune in for exciting new information and insights on the latest tech and tools from industry leaders.
      Just head to the Samsung Developer Conference homepage once the event begins to watch. In the meantime, add a livestream calendar reminder to ensure you don’t miss a thing.

      Opening Keynote Livestream: October 29 at 10 am PST
      Get ready for big names, exciting announcements, and cutting-edge reveals. Hear Samsung’s vision for the future straight from top leaders like DJ Koh, Eui-Suk Chung, Larry Heck, Adam Cheyer, Jayeon Jung, and more. They’ll discuss updates on everything from Bixby to SmartThings to Galaxy and Smart TV. Tune in to be the first to hear these announcements and insights.

      Spotlight Session Livestream: October 30 at 10 am PST
      Learn from Ethereum Co-Founder Vitalik Buterin as he shares how he created one of the most successful blockchain technologies and what he’s currently working on. Taher Behbehani will discuss B2B and how today’s talented developers and most innovative enterprises can collaborate to drive impact and change. Get the scoop from these industry leaders as they discuss their vision for the future and tech’s hottest topics.
      Plus, check out the Samsung Developer Program blog for daily highlights or follow the hashtag #SDC19 on Twitter for hour-by-hour updates. Make sure you shoot us a tweet while you’re following along — we’d love to hear your thoughts!
      View the full blog at its source
    • By STF News
      Since the release of Galaxy Watch Designer 1.7, the Gear S2 watch is no longer supported. This has caused many apps to be rejected by the review team when publishing to the Galaxy Store.
      When uploading your watch face app to Seller Office you must now deselect all S2 devices within the Supported Devices. After uploading your binary file, the S2 devices can either be deselected individually from the list of 1,300+ device combinations, or selected all at once by following the steps below:
      Click the red number next to Selected Device(s) to open the Detailed Device Settings dialog box. This number represents the selected Samsung devices that your app will be compatible with.
      Type Gear S2 in the search field to list all of the selected S2 devices.
      Uncheck Select All within the Device Group to deselect all S2 devices.
      Click Save.
      Click OK to close the WPC Notice.
      Click the Save button prior to submitting your app.
      Now that the S2 devices are no longer selected, the red number that represents the compatible devices is reduced by approximately 300.

      If your app was rejected due to Gear S2 device incompatibility and you still have questions, feel free to search the Galaxy Watch Designer Forum or send an email to [email protected]
      View the full blog at its source
    • By 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
    • By STF News
      You can’t really change the weather using Galaxy Watch Designer (GWD). However, GWD version 1.7.1 introduced the ability to design a watch face that uses a button to display weather content in various units on the watch face. The temperature unit selector lets users change the temperature unit. Previously, you could set the Auto-refresh time of any weather data; now the update weather data feature allows users to update weather information, which is provided by OpenWeatherMap, whenever they want.
      Get Started
      The temperature unit selector and update weather data features both require the use of weather components. However, keep in mind the following limitations with using any weather components in GWD.
      Avoid using the following with weather components: In-App Purchase Tag expression Text elements: Steps % Step counts Steps goal Speed Burned calorie Moved distance Heart rate Water intake Caffeine intake Floor You must use a weather API key to facilitate the use of any weather component. For more details, see this section.
      Note: The Weather API can determine a watch’s location to show the current weather data, but it can’t detect your location on the Galaxy Watch Designer tool. To see the current weather data on the GWD tool, select your location manually from Edit > Preferences > APIs > Current location > Select location. Temperature Unit Selector
      The Text > Temperature element displays the current weather temperature on your watch face. The temperature unit selector enables you to select the temperature unit (Celsius, Fahrenheit, or Kelvin). To create a temperature unit selector on your watch face:
      From the sidebar, click Text > Temperature:
      A dialog box opens, warning you of the limitation of using this element. Check Do not show again if you understand the limitation, and click OK.
      We recommend: Don’t check Do not show again, so you’ll be reminded of the limitations the next time you use this element.
      From Properties, click the Set as Button menu option.
      From Properties > Action, click Action > Interaction > Tap, and then set Action to Change Temperature Unit.
      Update Weather Data
      Follow these steps to add the update weather data feature:
      From the sidebar, click Text > {any weather type}.
      From Properties, click the Set as Button menu option. From Properties > Action, click Action > Interaction > Tap, and then set Action to Update Weather Data.
      Test the feature
      Test your ability to modify weather content using the attached sample GWD file.
      Tap on the temperature text to change to another unit. If it is not the unit you want, tap again. Because there are three temperature unit options, you must tap twice to cycle through the units (see Figure 1).

      Figure 1
      Tap on the update weather data button for the latest weather data (see Figure 2). In this figure, the last time data was updated was at 09:40.

      Figure 2
      To check weather on a real device, make sure your watch is connected to the Internet, and location services are enabled.
      View the full blog at its source


×
×
  • Create New...