Quantcast
Jump to content


How to Add Watch Face Features Using Tizen Web


Recommended Posts

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.

2019-12-10-01-01.png
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)";
}

2019-12-10-01-02.png
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");
});

2019-12-10-01-03.png
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;

2019-12-10-01-04.png
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);

2019-12-10-01-05.png
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

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
      A sensor's maximum and minimum values are crucial for calibration, data interpretation, threshold setting, user interface, error handling, sensor selection, and performance optimization.
      Understanding the expected range of values helps identify and handle sensor errors or anomalies, and selecting the right sensor for the intended use case is essential. Efficient use of sensor data, especially in resource-constrained environments like mobile devices, can optimize data processing algorithms.
      The maximum and minimum values of sensors play a crucial role in the accurate and efficient functioning of sensor-based applications across various domains. In this tutorial, a wearable application is developed to collect the maximum and minimum ranges of sensors from a Galaxy Watch running Wear OS powered by Samsung. This tutorial shows how to retrieve all sensor ranges together, as well as from one specific sensor separately.
      Environment
      Android Studio IDE is used for developing the Wear OS application. In this tutorial, Java is used, but Kotlin can also be used.
      Let’s get started
      The SensorManager library is used here to collect sensor data from a Galaxy Watch running Wear OS powered by Samsung.
      Retrieve the maximum range of a sensor
      To get access and retrieve the maximum ranges from the sensor:
      In Android Studio, create a wearable application project by selecting New Project > Wear OS > Blank Activity > Finish. To access the sensor, add the body sensor in the application’s “manifests” file.
      <uses-permission android:name="android.permission.BODY_SENSORS" /> To run the application on devices with Android version 6 (API level 23) or later, you need runtime permission from the user to use the BODY_SENSORS APIs.
      Add the following code snippet to the onCreate() method before calling any sensor operations:
      if (checkSelfPermission(Manifest.permission.BODY_SENSORS) != PackageManager.PERMISSION_GRANTED) { requestPermissions(new String[]{Manifest.permission.BODY_SENSORS}, 1); } else { Log.d("TAG___", "ALREADY GRANTED"); } After this code executes, a pop-up window appears and requests permission from the user. The sensor APIs return values only if the user grants permission. The application asks for permission only the first time it is run. Once the user grants permission, the application can access the sensors.
      Figure 1: Permission screen
      More details about runtime permissions can be found here.
      Create an instance of the SensorManager library before using it in the code.
      private SensorManager sensorManager; sensorManager = (SensorManager)getSystemService(Context.SENSOR_SERVICE); To retrieve the maximum range of all sensors, create a sensor list using API Sensor.TYPE_ALL.
      List<Sensor> sensors = sensorManager.getSensorList(Sensor.TYPE_ALL); ArrayList<String> arrayList = new ArrayList<String>(); for (Sensor sensor : sensors) { if (sensor != null) { arrayList.add(sensor.getName()); arrayList.add(sensor.getMaximumRange() + ""); arrayList.add(sensor.getResolution() + ""); } } arrayList.forEach((n) -> System.*out*.println(n)); The above code shows the sensor name, maximum range, and resolution. You can get all the available data from the sensors, such as type, vendor, version, resolution, maximum range, and power consumption, by applying this same approach.
      Remember, sensor information may vary from device to device.
      Additionally, not every sensor that appears in the logcat view is accessible. Third-party applications are still not allowed to access Samsung's private sensors using the Android SensorManager. You get a “null” value if you try to access the private sensors.
      Moreover, there are no plans to make these sensors available to the public in the near future.
      You can check my blog Check Which Sensor You Can Use in Galaxy Watch Running Wear OS Powered by Samsung to find out which sensors are accessible on your Galaxy Watch and which are not.
      Retrieve the minimum range of a sensor
      The minimum range is the complement of maximum range.
      If the maximum range is x, then the minimum range can be calculated like this: x*(-1) = -x.
      If a specific sensor value should always be absolute, then the minimum range is zero (0).
      There is no direct API available to retrieve the minimum range of sensors from Galaxy Watch.
      Get a specific sensor value
      To get specific sensor values from a Galaxy Watch, you can filter the sensor list or use the getDefaultSensor() method. Here is an example that demonstrates how to do this. Add the necessary permission in the “manifests” file for the accelerometer sensor:
      <uses-feature android:name="android.hardware.sensor.accelerometer" /> Use the following code in your Activity or Fragment to retrieve the accelerometer data:
      sensor = sensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER); if (sensor != null) { textView_maxV.setText(textView_maxV.getText() + "" + sensor.getMaximumRange() + ""); textView_resolution.setText(textView_resolution.getText() + "" + sensor.getResolution() + ""); } Ensure you have added the TextView element to your XML file. Output of the above code:
      Figure 2: Maximum range and resolution of the accelerometer
      Remember, sensor ranges may vary from device to device. You may get different values for different Galaxy Watch models.
      Download the example from this blog:
      SensorMinxMax (313.2KB) Sep 10, 2024 Summary
      This article demonstrates how you can retrieve the maximum and minimum ranges of sensors from your Galaxy Watch running Wear OS powered by Samsung. You can also use the above approaches to get other necessary available information from the watch that can be used for the precise and effective operation of sensor-based applications in a variety of fields.
      If you have any questions about or need help with the information in this article, you can reach out to us on the Samsung Developers Forum or contact us through Developer Support.
      View the full blog at its source
    • By Samsung Newsroom
      View the full blog at its source





×
×
  • Create New...