Jump to content

Enable Water Lock Mode in Galaxy Watch Using Tizen Web App

Recommended Posts


What is Water lock mode?

Water lock mode was introduced on the Galaxy Watch to prevent accidental touches and wake-up gestures on your screen while swimming. And the thrilling news for developers is that you can enable Water lock mode directly from your app. If you have a fitness-related app, you can use this feature to enhance your app’s capability for various water-based exercises like swimming, water aerobics, and aqua teaser. Let’s dig into the details of how to do this in a Tizen web app.

How do you enable Water lock mode from your app?

This implementation is quite simple. Water lock mode can be enabled using the Application launch API. It involves three simple steps:

  1. Configure your app with privileges
  2. Retrieve application ID
  3. Enable Water lock mode

Let’s get started.

Configure your app with privileges

First, add the following privileges to the config.xml file.

<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
<tizen:privilege name="http://tizen.org/privilege/application.info"/>
<tizen:privilege name="http://tizen.org/privilege/power"/>
  • http://tizen.org/privilege/application.launch - Allows the application to open other applications
  • http://tizen.org/privilege/application.info - Allows the application to retrieve information related to other applications
  • http://tizen.org/privilege/power - Allows the application to control power-related settings

Retrieve application ID

You can enable Water lock mode directly using the launch() method of the Application API. The launch() method launches an application with the given application ID. That’s why we need to know the application ID of the Water lock mode pop-up.

Retrieve the app ID using the following code snippet in the JS file. The following code snippet returns the list of all applications installed on the watch. Among them you can choose the exact ID of the app which you need to launch. For example, we picked the ID com.samsung.clocksetting.water-lock-popup to enable Water lock mode.

function onListInstalledApps(applications) {
    for (var i = 0; i < applications.length; i++)
        console.log("ID : " + applications[i].id);


Figure 1: Installed application list
Figure 1: Installed application list

Enable Water lock mode

Once you get the app ID, you can enable Water lock mode with following code snippet in the JS file:


And that’s it. Water lock mode is launched. Please note that, if the mode is launched for the first time in the device, a pop-up appears with a permission message.

When Water lock mode is enabled, the touchscreen, as well as the wake-up gesture feature, is deactivated. So, there is no user interaction between the user and your app. Meanwhile your application runs in the background. So if you want to keep your app running in the foreground, you can use the Power API.

To set the power state, the request() method is called. To manage the screen and CPU state, use the following code snippet in the JS file:

tizen.power.request(“SCREEN”, “SCREEN_NORMAL");
tizen.power.request("CPU", "CPU_AWAKE");

For example, here I have added a time counter while the Water lock mode is on using an open source library named EasyTimer.js. First, add the JS library to the HTML file.

<script src="lib/easytimer/dist/easytimer.min.js"></script>

After that, add the following code snippet to the JS file to implement a time counter.

var timerInstance = new easytimer.Timer();
timerInstance.addEventListener('secondsUpdated', function (e) {
document.getElementById("counting_done").addEventListener("click", function(){


Figure 2: Water lock enabled

To disable Water lock mode, users must long press the Home key. After disabling Water lock mode, the user can start interacting with your app immediately. For example, the user can stop the time counter using the Done button in the sample app (see Figure 2).

Quite simple, right? You can check out the sample app here. If you have any questions, you can post your queries to Samsung Developer's forum.

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.

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.

  • Similar Topics

    • By STF News
      Samsung Electronics firmly believes in the power of technology to create a more inclusive world. When it comes to design, accessibility should be top of mind ensuring that everyone, regardless of their abilities, can fully enjoy the benefits of modern innovations. Traditional television can present challenges when accessing and comprehending visual content. However, through the use of visual aid features, Samsung is helping bridge the gap and providing an immersive and enjoyable viewing experience for all.
      Relumino Mode, a viewing mode on select Samsung TVs, was designed to augment the visual capabilities of those with low vision, making it possible for anyone to engage with their favorite shows, movies and documentaries like never before. By highlighting specific parts of videos — such as contrast, color and sharpness — this feature makes it easier than ever to discern content on the TV screen.
      To shed more light on this groundbreaking inclusive technology, Samsung Newsroom sat down with Dr. Kyungah Park and Jason (Jaeseong) Park from Visual Display Business, Samsung Electronics, to discuss everything from development to clinical trials.
      ▲ Jason Park (Samsung Electronics) and Kyungah Park, M.D. (Samsung Medical Center) discuss their journeys in creating and clinically testing Relumino Mode
      Screens for All — Including People With Impaired Vision
      Relumino, borrowed from Latin, means “to give back the light.” The idea is to restore vision as much as possible to people with impaired vision. Earlier this year at CES, Samsung introduced Relumino Mode on select Samsung TVs. This follows the wearable device “Relumino Glass” and the smartphone image processing software “Relumino App,” each revealed at CES in 2017 and 2018, respectively. Before that, Relumino was conceived in “C-Lab(Creative Lab),” Samsung Electronics’ in-house venture program. It has evolved and expanded ever since.
      ▲ Relumino Glass(left) and Relumino Mode for Samsung TVs(right)
      “For several years, ‘Screens for All’ has been one of the key mottos for us. We’re working to further enhance TV accessibility and promote inclusion,” said Jason Park, who plans products and services for the Visual Display Business. “People with low vision are still a key demographic that need better TV viewing experiences.”
      Innovation Rooted in the User’s Perspective
      To develop Relumino Mode, planners and engineers met with a number of advisors who had visual impairments to understand their wants and needs.
      ▲ Jason Park, Visual Display Business, Samsung Electronics
      “There’s an early experience that really changed my perspective,” shared Jason. “When we first met an advisor for Relumino Mode, I asked him to ‘Please come here and have a seat’ to which he replied, ‘Where is here?’ That was a hard and clear wake-up call for me. I was so embarrassed.” It was then that Jason realized that they were exploring a totally new territory and would have to first understand the way their users see the world.
      ▲ As part of the efforts to understand customers with visual impairments, Samsung engineers used special goggles to simulate blurry vision
      Despite the decades of collective experience in enhancing TV picture quality, this particular project presented a unique challenge that none of the engineers had encountered before. Typically, their expertise lay in identifying even the slightest imperfections on the screen, but now they had to understand what it’s like as a user to have impaired vision. In addition to consulting advisors, the engineers utilized special goggles that simulated blurry vision, serving as a starting point for their exploration. Through a process of generating ideas, conducting trials and learning from mistakes, they eventually developed a solution that could be considered a genuinely effective viewing mode.
      Clinical Trials and Direct Feedback
      After initial research and development came trials on a larger scale. This is where Samsung Electronics decided to collaborate with Samsung Medical Center, one of South Korea’s most comprehensive medical facilities.
      ▲Dr. Kyungah Park, Department of Ophthalmology, Samsung Medical Center
      “Clinical trials targeting people without disabilities are popular and recruiting subjects for these projects is relatively easy. Some even ask to join before we ask,” said Dr. Park. “But, that was not the case for the Relumino study. The pool was much more limited as we were more strict with our requirements — we targeted people who have lower vision than WHO’s vision impairment criteria.”
      However, the people that Samsung contacted showed much passion for the project. “Many who joined the trials were very excited and didn’t mind traveling long distances for the study. Thanks to their support and encouragement, we were able to carry out the research,” Dr. Park added.
      Four 55-inch Samsung QLED TVs were featured in the tests. One displayed the control image with no picture enhancements at all. The other three TVs showed the same content with Relumino Mode on high, medium and low. The TVs were installed on a meter away from each other onw a wall in a room with a specified amount of light.
      The test was two-fold, with objective and subjective evaluations. A certified contrast sensitivity test was employed for the objective evaluation. For the subjective evaluations, participants were asked to examine a set of eight still images and two videos on each of the screens. Their satisfaction levels were measured on a scale of 0 to 10. Based on the results, researchers carried out additional interviews adjusting picture enhancement levels on the spot.
      ▲ A blurry vision goggle simulation of what Relumino Mode may look like to people with visual impairment
      Relumino mode was well received by the group. One of the participants highly praised the technology, saying “I was thrilled to see the ball in a soccer match on screen. It can get frustrating if you can’t see the ball because of low vision, as you can imagine. Relumino Mode helped me see the ball clearly.”
      “The subjects’ responses indicated the Mode’s subjective results while the contrast sensitivity testing showed its objective results. Both of these factors, combined, allowed us to find the optimal setting for a brilliant image on TV,” said Jason.
      Screens for All, Today and Tomorrow
      “While [the Relumino Mode] project focused on people with relatively severe visual impairment many people with slightly lighter symptoms still need help. I’d like to work on developing projects for them,” explained Dr. Park.
      Jason shared a similar point of view, saying, “Samsung will continue to advance technology in the long term to provide personalized picture quality for people with vision impairment and let them enjoy TV comfortably.” Samsung remains committed to accessibility and strives to leverage its technologies to enable more people do what they enjoy.
      View the full article
    • By BGR
      The Galaxy S23 preorder period is almost over, and Samsung will soon start shipping the Galaxy S23, S23 Plus, and Ultra to buyers. The consensus seems to be that the three phones are great upgrades, ready to deliver a solid experience all around. The Galaxy S23 phones offer great performance and camera features, and battery life is also a Galaxy S23 Ultra highlight. Overall, the Galaxy S23 is a much better upgrade than the Galaxy S22. And the phone might have a few hidden features that Samsung hasn’t exactly detailed on stage.
      One of these features is a secret battery charging mode for playing games or using any other apps that might be taxing the processor. The phone can bypass battery charging to provide energy directly to the processor. In turn, this boosts peak performance and prevents overheating.
      The Galaxy S22 series surprised fans with a throttling feature that would reduce the processor speed to prevent overheating. The phone was also cheating in benchmarks. This was a major issue that impacted the phone’s launch, forcing Samsung to apologize to buyers and shareholders. The Galaxy S22 is the reason why there’s no Exynos-powered Galaxy S23 this year. And why there might not be one for years to come.
      Instead, Samsung rocks a custom version of the Qualcomm Snapdragon 8 Gen 2 chip inside all Galaxy S23 handsets. That chip offers the best possible performance an Android phone can get this year, even if the Galaxy S23 can’t match the iPhone 14’s performance. Or iPhone 12, for that matter.
      Benchmarks aside, the Galaxy S23 should have no problem running apps and high-end games. But if you happen to be playing a title that uses plenty of CPU and GPU resources while you’re charging the Galaxy S23 battery, you’ll be able to take advantage of a new Pause USB Power Delivery feature. Found by YouTube channel NL Tech in the Game Booster settings, the feature lets you power the phone without recharging it.
      The battery charging bypass might help you reduce overheating during extended gameplay sessions. The phone won’t have to simultaneously provide energy to the Galaxy S23 chips and the battery. Instead, it’ll provide less power that goes directly to the processor, bypassing the battery.
      According to the Galaxy S23 Ultra review above, the phone draws just 6W of power when Pause USB Power Delivery is on. If the battery is charging at the same time, the power consumption increases to 17W.
      In addition to preventing battery overheating and wear, the feature should also improve peak CPU performance during intensive tasks.
      The downside is that the battery won’t charge during gameplay. Also, to pause battery charging during games, the Galaxy S23 has to hold a charge of at least 20%. The other immediate issue is that you have to play games while connected to a charger, which might not be a great experience.
      Considering the Galaxy S23 phones rock the latest Snapdragon flagship, you don’t have to worry about gameplay performance. The battery charging bypass might come in handy on mid-range devices. And it looks like Samsung is rolling it out to older hardware.
      According to the same YouTube channel, many Samsung phones quietly support the Pause USB Power Delivery feature. Check out the video below to see how to enable it.
      Don't Miss: Galaxy S23 Ultra is slower than the iPhone 13 mini and iPhone 12 in benchmarksThe post Galaxy S23 has a secret battery charging mode for when you’re playing games appeared first on BGR.
      View the full article
    • By BGR
      Samsung is so terrified of the iPhone 14 that it launched an ad campaign to mock Apple (again) right before the launch event. Samsung keeps pulling the same stunt only to copy Apple’s biggest decisions later. To that point, in a recent One UI 5 beta, Samsung basically cloned one of the best new iOS 16 features: Lock Screen customization.
      The new Lock Screen experience in iOS 16 is something smartphone users who love customizing their handsets have been excited about. The Lock Screen is more exciting than ever, allowing you to add all sorts of widgets and visual effects. You can also change fonts and colors to match the static or dynamic images that act as the Lock Screen wallpaper.
      Moreover, you can set up different wallpapers for each Focus mode. And each one of them can have its own widgets that are relevant in the context of that mode.
      iOS 16 Lock Screen customizations. Image source: Apple Inc. Finally, if you have an iPhone 14 Pro or Pro Max, you can pair the new Lock Screen with Apple’s always-on display feature for even greater utility.
      Apple wasn’t the first to do this, and Android fans point out that they had access to Lock Screen widgets long before iOS 16 rolled out. But Apple built its own Lock Screen customization, giving users plenty of customization options to suit their needs.
      How Samsung cloned iOS 16’s Lock Screen feature
      In turn, Samsung could have come up with an original Lock Screen customization experience for its own smartphone users. Instead, Samsung just copied Apple.
      Maybe there’s no other way to make a Lock Screen with widgets now that Apple released iOS 16. Perhaps Samsung had no choice but to arrange user interface elements in One UI 5 just like Apple did in iOS 16. The same goes for the available customizations.
      Just like there probably wasn’t any other way to make the first Galaxy phones than to copy the iPhone pixel by pixel.
      However, 9to5Mac points out that the customization options aren’t totally identical. iOS 16 offers eight clock styles for the Lock Screen, while Samsung has just five. And the wallpaper picker’s choices aren’t all that similar either.
      Moreover, Apple supports more third-party widgets than Samsung. Samsung only supports notifications icons for the time being. But One UI 5 is still in beta.
      What’s missing from Samsung’s iOS 16 Lock Screen clone is the Dynamic Island of the iPhone 14 Pro. Then again, iOS 16 beta 1 came out in mid-June. Samsung had plenty of time to study it. The Dynamic Island didn’t see the light of day until Apple’s iPhone 14 reveal earlier this month. We’ll likely see how Samsung responds to that feature soon.
      More Apple coverage: Check out the best Apple deals online right now.
      The post Samsung just blatantly stole Apple’s iOS 16 Lock Screen appeared first on BGR.
      View the full article
    • By STF News
      Photo by Alexander Andrews on Unsplash
      As promised in my last post about dark mode, I bring you a dark mode tutorial 🌚. If you just want to see the code, a refactored version lives on Glitch. Let’s get straight into it.
      This tutorial is beginner friendly but not if you’ve done absolutely no HTML, CSS, JavaScript. You’ll also need a small HTML and CSS site that you’d like to add dark mode to. I’ll be using my own personal site.

      System Preferences
      Many operating systems now have dark and light mode settings which we should respect. A safe assumption to make is that if someone has their operating settings set to “dark” then they probably also want to view your site in dark mode too.
      We can do this with the CSS media query [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme), this media query allows us to recognise the operating system’s colour scheme and define some CSS rules within it. So, just to make sure things are working let’s set the background to black if the operating system is set to dark:
      @media (prefers-color-scheme: dark) { body { background-color: black; } } This is my result. The media query can read what the operating system has as its colour scheme and applies the appropriate rules. You can test this by toggling the colour scheme settings on your computer.

      Toggle colours
      Okay, but what if the visitor wants to view your site in a different colour scheme than what the operating system is? We should give them that choice and we can do so by adding a toggle button and using JavaScript to switch between light and dark colour schemes.
      First, let’s add a meta tag the head of our HTML:
      <meta name="color-scheme" content="dark light"> This will act as a fallback for the browser should it not have prefers-colour-scheme since it can act as an indicator for browser to know that the content supports colour schemes.
      Then we want to add the button to our body.
      <button id="colourModeBtn">Toggle Dark Mode</button> Finally on the body, we want to add a specific class (which will be important later on):
      <body class="`systemDarkPreference"> `<button id="colourModeBtn">Toggle Dark Mode</button> `</body>` CSS
      Next, we want to set some CSS rules for a light theme within our prefers-color-scheme: dark block. We’re doing this so that if someone has set their operating system to “dark” everything that happens is within a dark OS context since we can’t override that setting. Now, we need to switch gears in how we’ve been thinking about our colour scheming. Sure, it’s light vs dark but it’s also system settings vs overridden, and this is important. It‘s helpful to think of @ media (prefers-color-scheme: dark) as the system dark context within which we also want some rules for that media query and also when we want to override the system setting. It may be complicated but hopefully the code sheds some light:
      @media (prefers-color-scheme: dark) { body.systemDarkPreference { background-color: black; } } So within our dark context, we’ve added a systemDarkPreference to the body class as a way to apply our dark theme within the system dark context. We don’t need a class for our light theme because we’re going to be toggling the systemDarkPreference. So if the body is in our dark context but doesn’t have the systemDarkPreference class, then it will fall back to what rule it finds for the body element.
      So, what happens if a visitor switches off the dark theme? Or their operating system colour scheme is set to light and they want to switch to dark? Or what if the visitor’s operating system doesn’t allow users to change their colour themes? To ensure these visitors are properly served, we’ll want to add some rules outside of the media query.
      /* Default */ body{ background-color: white; } /* Dark */ body.dark { background-color: black; } We want to define the body element’s ruleset without any classes as the default behaviour for anyone who visits the site. Then a .dark class for those who want to toggle to a dark theme. There is a bit of repetition here since all the dark rules will have to be defined both inside and outside of the prefers-color-scheme media query but the default theme only needs to be defined once.
      Remember to ensure your JavaScript is within <script></script> tag in your HTML or, if you prefer, is in a JavaScript file which is being called from your HTML like so: <script src="your_file.js"></script>.
      Without the JavaScript the visitor won’t be able to interact with the page. So next, we’ll add an event listener to the button we created earlier. Let’s get the button element:
      const ***toggleColourModeBtn ***= ***document***.getElementById("colourModeBtn"); Then we can add the event listener to the button:
      ***toggleColourModeBtn***.addEventListener("click", function () {}); At the moment this won’t have any functionality since we’re not asking it to do anything in the listener. Within the listener, first we want to make a few checks :
      ***toggleColourModeBtn***.addEventListener("click", function () { const hasSysDarkClass = ***document***.body.classList.contains('systemDarkPreference'); const currentSysIsDark = ***window***.matchMedia("(prefers-color-scheme: dark)").matches; const isDark = (hasSysDarkClass && currentSysIsDark) || ***document***.body.classList.contains('dark'); }); Let’s see what each variable is checking:
      hasSysDarkClass checks that the body has the systemDarkPreference class on it.
      currentSysIsDark checks if the operating system is set to dark using the prefers-color-scheme similar to what we’re doing in our CSS.
      isDark checks that the first two variables ( hasSysDarkClass and currentSysIsDark ) are both true at the same time *or *that the body has the .dark class.
      This could have been one variable but it’s far easier to read split up like this. Before we apply the correct styles to our body, we need to remove the hard coded systemDarkPreference since as soon as someone presses our button, they are indicating they want to override the system settings.
      ***toggleColourModeBtn***.addEventListener("click", function () { const hasSysDarkClass = ***document***.body.classList.contains('systemDarkPreference'); const currentSysIsDark = ***window***.matchMedia("(prefers-color-scheme: dark)").matches; const isDark = (hasSysDarkClass && currentSysIsDark) || ***document***.body.classList.contains('dark'); *** document***.body.classList.remove('systemDarkPreference'); }); Then we want to finally apply the correct CSS rules by toggling the body’s class list to include the .dark class if isDark is false.
      ***toggleColourModeBtn***.addEventListener("click", function () { const hasSysDarkClass = ***document***.body.classList.contains('systemDarkPreference'); const currentSysIsDark = ***window***.matchMedia("(prefers-color-scheme: dark)").matches; const isDark = (hasSysDarkClass && currentSysIsDark) || ***document***.body.classList.contains('dark'); *** document***.body.classList.remove('systemDarkPreference'); ***document***.body.classList.toggle('dark', !isDark); }); The end result should look like this.

      Storing Settings
      So that our visitors don’t have to keep readjusting the settings, we should store their preferences. In my last post I spoke about different methods to do this including localStorage and Cookies. Since my personal site is small and doesn’t collect data to be stored on the server, I’ve decided to go with localStorage. When we make any colour scheme change, we want to save it to the browser’s localStorage which we can do in the event listener we just added.
      ***toggleColourModeBtn***.addEventListener("click", function () { ... let colourMode; if (***document***.body.classList.contains("dark")) { colourMode = "dark"; } else { colourMode = "light"; } ***localStorage***.setItem("colourMode", colourMode); ***localStorage***.setItem("overRideSysColour", "true") }); For this first section there are a few moving parts. First we initiate colourMode so that we can dynamically set it later. Next we check if the .dark class is applied to the body element, if it is then we can set colourMode to dark and if it isn’t then we can set it to light. Then we can save this value in the localStorage. Finally, we also want to keep track of the fact that we’ve overridden the system’s settings in the localStorage.
      The second section to this is to use what’s in the localStorage to set the page’s colour scheme when the visitor visits the page again. So somewhere outside of and above the event listener, we want to get the colourMode we saved previously and present the correct colour scheme depending on the value.
      if (***localStorage***.getItem("overRideSysColour") == "true") { const ***currentColourMode ***= ***localStorage***.getItem("colourMode"); ***document***.body.classList.remove('systemDarkPreference'); ***document***.body.classList.add(***currentColourMode***); } So we’re checking that the system colour scheme has been overridden and if it is, then we remove that hard coded system class then add the value that’s in the localStorage. Something to note here is that this value can either be "light" or "dark" however, we don’t have any rules for the .light class so nothing will be applied to this and it will use the default rules as defined in our CSS. If you have rules for .light this will cause issues, so you may want to use a different name or an empty string when you’re setting the value in localStorage.
      Choosing colours
      Now, arguably the most important factor of dark themes. Choosing the correct colours. Many sites go for an off-black background and lighter white or off-white text. You want to be careful not to have contrast that’s too sharp but you also need to meet the minimum colour contrast of 4.5:1 for normal text for accessibility purposes. It’s important to make your user experience as comfortable to all visitors as possible. However, you don’t have to be confined to black and white, feel free to be creative. Coolors is a tool that allows you to view colour combinations and ensure they meet the Web Content Accessibility Guidelines.

      I went for a dark blue, light blue and pink combo.
      Finished Page
      Play with the finished thing.

      Last Words
      Samsung Internet is starting to support prefers-color-scheme as a Labs menu item, so web developers can start working with it, and exploring how it helps them to build better UI. In the meantime, Samsung Internet will support force dark mode for the sake of users how expect dark web page when they set the device as dark. So if you want to experiment with prefers-color-scheme on Samsung Internet, make sure to turn it on via the Labs menu for now.
      As I mentioned in my last post, there are many ways to implement dark mode and it’s up to you to analyse what the sacrifices for each method is. For example, if a visitor to my website has JavaScript turned off on their browser, then this solution won’t work. However, it’s overkill for me to store the theming data in a database (another method) because I don’t collect user data and don’t need to. The method I went with, while not perfect, is a nice middle ground. There are also other factors you may need to consider, such as the typography and icons which I didn’t have to think about. Check out the final glitch project to see how I refactored the code and managed the state of the button.
      If this tutorial is useful to you, feel free to share it and show off your new dark mode sites! ✨
      View the full blog at its source

  • Create New...