Quantcast
Jump to content


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

Link to comment
Share on other sites



  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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...
  • Similar Topics

    • By Samsung Newsroom
      Samsung Electronics today announced that it will unveil a brand film starring BTS “SUGA” on October 5. As Samsung’s ambassador, SUGA will show how he uses The Freestyle 2nd Gen, Samsung’s latest versatile portable projector, in his own unique way. The film is to be unveiled on Samsung’s social media accounts including its Youtube channel.
       
      ▲ BTS SUGA shown using The Freestyle 2nd Gen instead of a monitor
       
      In the film, SUGA emphasizes that “You’ve got the freedom to use The Freestyle anytime, anywhere. No others, only SAMSUNG!” as he demonstrates how he enjoys the portable projector.
       
      ▲ A scene from the brand film starring SUGA
       
      Previously at IFA 2023 held in Berlin, Germany, SUGA surprised visitors as he greeted them from a display screen, inviting them to experience The Freestyle 2nd Gen.
       
      ▲ SUGA greeted visitors at Samsung Electronics’ booth at IFA 2023
       
      The Freestyle is Samsung’s light, portable projector which recently debuted its 2nd generation model. The Freestyle 2nd Gen aims to redefine portable screens with its newly added “Smart Edge Blending” feature and “Gaming Hub” compatibility.
      View the full article
    • By Samsung Newsroom
      Samsung Electronics today announced the launch of The Frame-Disney100 Edition to commemorate Disney’s 100th anniversary. Available in 55, 65 and 75-inch class models, this limited edition of The Frame features a sleek branded bezel, 100 special pieces of art from the Disney collection and a Mickey Mouse-inspired remote, designed to delight Disney fans all over the world.1
       
      “We are thrilled to offer this one-of-a-kind edition of The Frame to celebrate Disney’s landmark 100th anniversary,” said Cheolgi Kim, Executive Vice President of Visual Display Business at Samsung Electronics. “These collaborations serve as an exciting way to spotlight The Frame’s distinct features, which revolutionized how we use our screens and consume content. We hope this unique edition of The Frame allows more people to experience the wonderful viewing experience the TV has to offer.”
       
      The Frame-Disney100 Edition exemplifies a delightful blend of Samsung technology and Disney creativity. Upon powering on the TV, viewers are greeted by a Samsung x Disney100 onscreen logo. The TV also features exclusive bezels in the Disney100 signature color — platinum silver metal — paired with a special Disney edition remote as a nod to Disney’s most beloved character, Mickey Mouse.
       
      ▲ The Frame-Disney100 Edition with a Mickey Mouse-inspired SolarCell remote
       
      The Frame-Disney100 Edition also comes with 100 pieces of dedicated art from Disney that you can access directly on the Samsung Art Store. With content from Walt Disney Animation Studios, Pixar Animation Studios, Marvel, Lucasfilm and National Geographic, Disney fans can curate and showcase a gallery of their most beloved characters and content right on their TV.  With Samsung Art Store, you can also enjoy beautifully curated collections from leading international museums such as the Louvre, Tate and more, as well as artists from Monet to Van Gogh. Samsung Art Store makes it easier than ever to bring the art gallery experience directly into your home, and this new curated Disney collection offers even more captivating pieces to choose from.
       

       
      ▲ 100 pieces of Disney artwork included with The Frame-Disney100 Edition. © Disney/Pixar. © 2023 MARVEL
       
      Since its launch, The Frame has redefined content consumption by turning traditional displays into stunning works of art. The TV’s slim design and matte display has been noted by fans around the world as an excellent addition to match home and interior design preferences, while its premium 4K QLED picture quality breathes new life into art and media consumption.
       
      For more information on The Frame and to purchase The Frame Disney100 Edition while supplies last, please visit samsung.com.
       
       
      1 The Frame-Disney100 Edition is available in the United States, Europe, Korea and Latin America.
      View the full article





×
×
  • Create New...