Galaxy Watch Always On Display (AOD) / ambientmode

Galaxy Watch Always On Display (AOD) / ambientmode

BY 11 Sep 2019 Web Application Development

Hello,

I want to create my first watch face for Galaxy Watch in Tizen Studio.
I want to use the “Always On Display” (AOD) feature, but I’m not sure how to use it.

Display is switching off, no ambientmodechanged in main.js…


Here is my configuration:

*** config.xml ***

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/TestClock1" version="1.0.0" viewmodes="maximized">
    <tizen:application id="xCfHfKGAB1.TestClock1" package="xCfHfKGAB1" required_version="4.0" ambient_support="enable"/>
    <tizen:category name="http://tizen.org/category/wearable_clock"/>
    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.size.all"/>
    <icon src="icon.png"/>
    <name>TestClock1</name>
    <tizen:profile name="wearable"/>
    <tizen:setting background-support="disable" encryption="disable" hwkey-event="enable"/>
</widget>

*** index.html ***

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="your_description"/>
    <title>your_title</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="js/main.js"></script>
</head>

<body>
  <div id="background" class="normalBackground">
      <div align="center">
        test123
      </div>
  </div>
</body>
</html>

*** style.css ***

* {
    font-family: Verdana, Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
    margin: 0px auto;
    background-color:grey;
}

*** main.js ***

var isAmbientMode;

(function() {
    function bindEvents() {
    	document.addEventListener("visibilitychange", function() {

    	if(!document.hidden) {	
	    	if(isAmbientMode === true) {
	    		showAmbientWatch();
	    	} else {
	    		showNormalWatch();
	    	}
    	}
    	});

    	window.addEventListener("ambientmodechanged", function(e) {    		
    		console.log("***ambientmodechanged()");    		
	    	if(e.detail.ambientMode === true) {	    		
	    		console.log("ambientmodechanged() to true");	    		
	    		isAmbientMode = true;
	    		showAmbientWatch();
	    	} else {	    		
	    		console.log("ambientmodechanged() to false");	    		
	    		isAmbientMode = false;
	    		showNormalWatch();
	    	}
    	});
    }
    
    function showNormalWatch(){
    	console.log("showNormalWatch()");
    }

    function showAmbientWatch(){
    	console.log("showAmbientWatch()");
    }
    
    function init(){
    	bindEvents();
    	isAmbientMode = false;
    }
    window.onload = init();
}());
Written by
Keep Reading All Posts
Announcing the Tizen Studio 6.1 Release

BY

16 Apr 2025

Tizen Studio

Read More
Announcing the Tizen Studio 6.0 Release

BY

04 Nov 2024

Tizen Studio

Read More
Announcing the Tizen Studio 5.6 Release

BY

02 Apr 2024

Tizen Studio

Read More