Quantcast
Jump to content

Getting Started with Watch Face Development Using the Tizen Web API


STF News
 Share

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

Link to comment
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.
Note: Your post will require moderator approval before it will be visible.

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...
 Share

  • Similar Topics

    • By Gerald Griffith
      The USB warning code comes up when the TV is turned on and it will not change modes to anything. You cannot get into settings, absolutely anything. The TV will not move. We tried all the suggestions online, unplugging for one minute unplugging for 30 seconds doing the reset button, at least five hours on the phone with different people from Best Buy and Samsung. No help. Very frustrating.
    • By Cartha
      Is there a way to take the application files from the TV and run it on Samsung's Tizen blu-ray player?
      I have a problem with the application from the Samsung Store. Its publisher left version 5 available for my Samsung UBD-M9500 player. This version does not work anymore, but on Samsung TVs it is version 6. The system is the same, so if i had access to the files of this application maybe it could be launched via developer mode on the blu-ray player.
      Does anyone know how it can be done?
    • By 4cr4n1x
      When user selects input, keyboard opens and shifts app almost all the way up. Only 10% of app is visible with keyboard on.
    • By STF News
      The Remote Device Manager provides a mechanism to deploy a project remotely from Tizen Studio to a Tizen-enabled device, such as Galaxy Watch. Tizen-enabled devices can be connected or disconnected through the Remote Device Manager if they are on the same network. Once the connection is made, a device log is shown in the Log View. You can also use the interface of the Remote Device Manager for executing SDB shell commands.
      Prerequisites: Tizen Studio 2.0 or higher
      Launch a project with Remote Device Manager
      Step 1: Disable Bluetooth
      If the watch has not been upgraded and the Tizen version is below 5.0, Bluetooth should be disabled during this process. In upgraded watches, you don’t need to disable Bluetooth.
      Path: Settings > Connections > Bluetooth

      Figure 1: Disabling Bluetooth
      Step 2: Enable debugging mode
      Make sure debugging mode is enabled. You can enable debugging mode from the Settings menu, as shown below.
      Path: Settings > About Watch > Debugging is turned on

      Figure 2: Enabling debugging mode
      Step 3: Set the Wi-Fi to Always on
      This step is optional, but to avoid any unnecessary issues, it is better to set the Wi-Fi to Always on. Leaving the setting on Auto can sometimes create issues.
      Path: Settings > Connections > Wi-Fi > Always on

      Figure 3: Setting the Wi-Fi to Always on
      Caution: Setting the Wi-Fi to Always on can drain the battery drastically. After debugging, it should be set back to Auto again for better battery life. Step 4: Connect to the network
      Connect the watch to the same network as your PC.
      Choose either of the following ways to connect the devices to the same network:
      • By creating a mobile hotspot
      • By using Wi-Fi under the same router
      Step 5: Restart the watch
      After the previous steps have been completed, restart the device. If you do not, the connection setup shows an error.

      Figure 4: Rebooting the watch
      Step 6: Establish the connection from the Remote Device Manager
      In Tizen Studio, go to Launch Remote Device Manager.

      Figure 5: Launching the Remote Device Manager
      Scan for new devices. The window shows a list of available devices and their IP addresses. You can also add a device manually from the Remote Device Manager window.

      Figure 6: Searching for available devices for connection
      To connect to the device, click on the Connect toggle next to the watch IP address and port information. The watch receives an RSA authentication request through a pop-up during this connection setup and it is mandatory to accept the RSA authentication to complete the process.

      Figure 7: Connecting to the watch from the Remote Device Manager
      You are now all set to deploy your app from Tizen Studio to the wearable device.
      Step 7: Permit to install user applications
      As a security feature, the device or emulator you have connected to does not contain the necessary certificates for installing user applications, and you must install them before being able to run your application on it. To do so, select “Permit to install applications” from the context menu of the device in the Device Manager.
      If the “The permit to install application is not required for this device” appears, this step is unnecessary.

      Figure 8: Setting the permit to install applications in the Device Manager
      Step 8: Launch your project
      Now, deploy your project on your connected watch, as shown in the image below.
      Path: Right-Click on the project > Run As > 1 Tizen Native Application

      Figure 9: Deploying the project from Tizen Studio to a connected watch
      Some helpful tips for connecting your device with the Remote Device Manager
      Check the IP address of your watch from Connections > Wi-Fi -> Wi-Fi Networks > tap on the SSID (your Wi-Fi name) > IP address.
      If your device is already shown in the Remote Device Manager's history, delete it and try to connect again.
      Launch the Device Manager to see the Log View.

      Figure 10: The Log View from Device Manager
      Make sure the watch is not connected with any other devices, including a phone. Otherwise, the connection fails and you receive the following error message:

      Figure 11: Error message during multiple connections
      If you cannot find the watch after scanning for devices from the Remote Device Manager, make sure your device is on the same network. To check this, go to the command prompt on your PC and ping the IP address of the watch in the following manner:
      ping < Watch_IP >
      If the ping command fails to connect to the IP address of your watch, it is not on the same network, and the SDB / Remote Device Manager does not work. To fix this, you need to change the network settings of your router or PC. The issue can also be caused by firewall settings, although this is rare.
      Conclusion
      The main purpose of this article is to help new developers to deploy Tizen projects to a real device using the Tizen Remote Device Manager. Hopefully, this tutorial is helpful for beginners and gives them a good experience with Tizen Studio.
      If you have any other problems or queries regarding launching projects with the Remote Device Manager, feel free to reach out through the Samsung Developers Forum.
      View the full blog at its source
    • By SAMSUNG
      Meet Galaxy Watch3! Complete Galaxy Watch3's signature look by choosing from over 50,000 watch faces that match its sleek body and enjoy a smartwatch personalized to your taste. For more information, visit http://smsng.co/GalaxyWatch3 #GalaxyWatch3 #Watch3 #Howto
×
×
  • Create New...