<p>In a native application, the profile name element can be added to the <code>tizen-manifest.xml</code> file as follows:</p>
<pre class="prettyprint">
<manifest xmlns="http://tizen.org/ns/packages" api-version="2.3.1" ... >
-<profile name="mobile"/>
+ <profile name="mobile"/>
</pre>
<p>The Tizen Store compares the device profile and the <code>profile name</code> element in an application. The store only shows the applications with a profile name matching the device profile to prevent unsupported applications from being installed.</p>
/*
start_downloading() function utilizes the ecore_thread_feedback_run() function
- to allow the download_thread_run_cb() function to call the download_feedback_cb function
+ to allow the download_thread_run_cb() function to call the
+ download_feedback_cb function
*/
static void
start_downloading(void *data)
{
download_contents(data);
- /* ecore_thread_feedback() invokes download_feedback_cb() registered by ecore_thread_feedback_run () */
+ /*
+ ecore_thread_feedback() invokes download_feedback_cb()
+ registered by ecore_thread_feedback_run()
+ */
<span class="highlight">ecore_thread_feedback(thread, data);</span>
}
/*
Set the destination path and file name
- If the values are not given, the default storage and an auto-generated file name are used
+ If the values are not given,
+ the default storage and an auto-generated file name are used
*/
char *data_path = app_get_data_path();
error = download_set_destination(download_id, data_path);
{
/* Create a telephony handle */
telephony_handle_list_s handle_list;
- ret = telephony_init(&handle_list); /* In case of a single SIM, you get only one handle */
+ /* In the case of a single SIM, you get only one handle */
+ ret = telephony_init(&handle_list);
/* Print */
for (i = 0; i < app_data->handle_list.count; i++) {
{
/* Create a telephony handle */
telephony_handle_list_s handle_list;
- ret = telephony_init(&handle_list); /* In case of a single SIM, you get only one handle */
+ /* In the case of a single SIM, you get only one handle */
+ ret = telephony_init(&handle_list);
/*
Register the network_service_state_noti_cb() callback function
error_code += contacts_filter_add_int(filter, _contacts_contact.person_id, CONTACTS_MATCH_EQUAL, person_id);
error_code += contacts_query_set_filter(query, filter);
- /* Run the query to retrieve a list of all contacts associated with the person ID */
+ /* Run the query to retrieve a list of contacts associated with the person ID */
error_code += contacts_db_get_records_with_query(query, 0, 0, associated_contacts);
/* Destroy the filter and query handles and release all their resources */
/* Retrieve the person ID from the person record */
error_code += contacts_record_get_int(record, _contacts_person.id, &person_id);
- /* Create a phone number query with filters for the person ID and default phone number */
+ /*
+ Create a phone number query with filters
+ for the person ID and default phone number
+ */
error_code += contacts_query_create(_contacts_person_number._uri, &query);
error_code += contacts_filter_create(_contacts_person_number._uri, &filter);
error_code += contacts_filter_add_int(filter, _contacts_person_number.person_id, CONTACTS_MATCH_EQUAL, person_id);
error_code += contacts_filter_add_bool(filter, _contacts_person_number.is_primary_default, true);
error_code += contacts_query_set_filter(query, filter);
- /* Run the query to retrieve the phone number records containing the default phone number */
+ /*
+ Run the query to retrieve the phone number records
+ containing the default phone number
+ */
error_code += contacts_db_get_records_with_query(query, 0, 0, &list);
/* Retrieve the current record from the query list */
error_code += contacts_record_set_str(number, _contacts_number.number, "+8210-1234-5678");
error_code += contacts_record_add_child_record(contact, _contacts_contact.number, number);
-/* Contact is linked automatically if an existing person has the same number in a different address book */
+/*
+ Contact is linked automatically if an existing person has the same number
+ in a different address book
+*/
error_code += contacts_db_insert_record(contact, NULL);
contacts_record_destroy(contact, true);
appdata_s *ad = data;
player_state_e state;
- /* All the interrupted_code_e is deprecated from Tizen 3.0 except PLAYER_INTERRUPTED_BY_RESOURCE_CONFLICT */
+ /*
+ All the interrupted_code_e is deprecated since Tizen 3.0
+ except PLAYER_INTERRUPTED_BY_RESOURCE_CONFLICT
+ */
player_get_state(ad->player, &state);
dlog_print(DLOG_INFO, LOG_TAG, "current player state = %d", state);
/* If the state is PLAYER_STATE_PAUSED, update the UI (for example, button) */
static void
init_base_player(appdata_s *ad)
{
- /* Set a completed callback if the application wants to know when the playback ends */
+ /*
+ Set a completed callback if the application wants to
+ know when the playback ends
+ */
error_code = player_set_completed_cb(ad->player, _player_completed_cb, ad);
if (error_code != PLAYER_ERROR_NONE)
appdata_s *ad = data;
player_state_e state;
- /* All the interrupted_code_e is deprecated from Tizen 3.0 except PLAYER_INTERRUPTED_BY_RESOURCE_CONFLICT */
+ /*
+ All the interrupted_code_e is deprecated since Tizen 3.0
+ except PLAYER_INTERRUPTED_BY_RESOURCE_CONFLICT
+ */
player_get_state(ad->player, &state);
dlog_print(DLOG_INFO, LOG_TAG, "current player state = %d", state);
/* If the state is PLAYER_STATE_PAUSED, update the UI (for example, button) */
<p>In a Web application, the profile name element can be added to the <code>config.xml</code> file as follows:</p>
<pre class="prettyprint">
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" ... >
-<tizen:profile name="mobile"/>
-<!--OR-->
-<tizen:profile name="wearable"/>
+ <tizen:profile name="mobile"/>
</pre>
<p>The Tizen Store compares the device profile and the <code>profile name</code> element in an application. The store only shows the applications with a profile name matching the device profile to prevent unsupported applications from being installed.</p>
<p>To bind an event callback on rotary events, use the following code:</p>
<pre class="prettyprint">
-document.addEventListener("rotarydetent", function(ev)
-{
- /* Get the direction value from the event */
- var direction = ev.detail.direction;
-
- if (direction == "CW")
- {
- /* Add behavior for clockwise rotation */
- console.log("clockwise");
- }
- else if (direction == "CCW")
- {
- /* Add behavior for counter-clockwise rotation */
- console.log("counter-clockwise");
- }
+document.addEventListener('rotarydetent', function(ev) {
+ /* Get the direction value from the event */
+ var direction = ev.detail.direction;
+
+ if (direction == 'CW') {
+ /* Add behavior for clockwise rotation */
+ console.log('clockwise');
+ } else if (direction == 'CCW') {
+ /* Add behavior for counter-clockwise rotation */
+ console.log('counter-clockwise');
+ }
});
</pre>
<pre class="prettyprint">
/* Check whether high color mode is supported */
-var isHighColorMode = tizen.systeminfo.getCapability("http://tizen.org/feature/screen.always_on.high_color");
+var isHighColorMode = tizen.systeminfo.getCapability('http://tizen.org/feature/screen.always_on.high_color');
</pre>
<p>The following table describes the ambient mode events.</p>
<p>To bind an event callback on ambient events, use the following code:</p>
<pre class="prettyprint">
-document.addEventListener("ambientmodechanged", function(ev)
-{
- var mode = ev.detail.ambientMode;
- if (mode == true)
- {
- /* Change the UI for ambient mode */
- }
- else
- {
- /* Change the UI for normal mode */
- }
+document.addEventListener('ambientmodechanged', function(ev) {
+ var mode = ev.detail.ambientMode;
+ if (mode == true) {
+ /* Change the UI for ambient mode */
+ } else {
+ /* Change the UI for normal mode */
+ }
});
-document.addEventListener("timetick", function(ev)
-{
- /* Update the UI */
+document.addEventListener('timetick', function(ev) {
+ /* Update the UI */
});
</pre>
<li><code>css/style.css</code>:
<pre class="prettyprint">
html,
-body
-{
+body {
width: 100%;
height: 100%;
margin: 0 auto;
background-color: #222222;
color: #ffffff;
}
-.page
-{
+.page {
width: 100%;
height: 100%;
display: table;
}
-.contents
-{
+.contents {
display: table-cell;
vertical-align: middle;
text-align: center;
-webkit-tap-highlight-color: transparent;
}
-#content-text
-{
+#content-text {
font-weight: bold;
font-size: 5em;
}
<p>By default, the text uses the <code>#ffffff</code> color (white), defined for the <code><body></code> element. If you change the CSS code and add a separate color for the <code>content-text</code> class, the text color changes (in this case, to <code>#ff0000</code> red):</p>
<pre class="prettyprint">
-#content-text
-{
+#content-text {
font-weight: bold;
font-size: 5em;
<span class="highlight">color: #ff0000;</span>
<p>In the <code>style.css</code> file, add the CSS styles for the new <code>id</code> attributes:
</p>
<pre class="prettyprint">
-#contentArea
-{
+#contentArea {
background-color: white;
}
-#footerArea
-{
+#footerArea {
background-color: blue;
}
</pre>
<p> Decorate the page in the same way as <code>index.html</code>. In the <code>style.css</code> file, add the following CSS style:</p>
<pre class="prettyprint">
-#secondPage
-{
+#secondPage {
background-color: white;
}
</pre>
<p>In the <code>app.js</code> file, all kinds of logic can be added to the application. In this case, add several lines for handling navigation:</p>
<pre class="prettyprint">
-(function()
-{
- window.addEventListener('tizenhwkey', function(ev)
- {
- if (ev.keyName === "back")
- {
- var page = document.getElementsByClassName('ui-page-active')[0],
- pageid = page ? page.id : "";
-
- if (pageid !== "main")
- {
- window.history.back();
- }
- }
- });
+(function() {
+ window.addEventListener('tizenhwkey', function(ev) {
+ if (ev.keyName === 'back') {
+ var page = document.getElementsByClassName('ui-page-active')[0],
+ pageid = page ? page.id : '';
+
+ if (pageid !== 'main') {
+ window.history.back();
+ }
+ }
+ });
}());
</pre></li></ol>
</li>
<p>You have to consider the fact that when the user clicks the back key, the application can only exit if it is showing the main page. If the second page is showing, the application must return to the main page.</p>
<p>The following example shows how to handle the back key input with page navigation and application exit. This code is included in the <strong>TAU Basic</strong> project template <code>main.js</code> file by default.</p>
<pre class="prettyprint">
-(function()
-{
- window.addEventListener('tizenhwkey', function(ev)
- {
- if (ev.keyName === "back")
- {
- var page = document.getElementsByClassName('ui-page-active')[0],
- pageid = page ? page.id : "";
-
- if (pageid === "main")
- {
- try
- {
- tizen.application.getCurrentApplication().exit();
- }
- catch (ignore)
- {
+(function() {
+ window.addEventListener('tizenhwkey', function(ev) {
+ if (ev.keyName === 'back') {
+ var page = document.getElementsByClassName('ui-page-active')[0],
+ pageid = page ? page.id : '';
+
+ if (pageid === 'main') {
+ try {
+ tizen.application.getCurrentApplication().exit();
+ } catch (ignore) {}
+ } else {
+ window.history.back();
}
- }
- else
- {
- window.history.back();
- }
- }
- });
+ }
+ });
}());
</pre>
<li><code>css/style.css</code>:
<pre class="prettyprint">
html,
-body
-{
+body {
width: 100%;
height: 100%;
margin: 0 auto;
background-color: #222222;
color: #ffffff;
}
-.page
-{
+.page {
width: 100%;
height: 100%;
display: table;
}
-.contents
-{
+.contents {
display: table-cell;
vertical-align: middle;
text-align: center;
-webkit-tap-highlight-color: transparent;
}
-#content-text
-{
+#content-text {
font-weight: bold;
font-size: 5em;
}
<p>By default, the text uses the <code>#ffffff</code> color (white), defined for the <code><body></code> element. If you change the CSS code and add a separate color for the <code>content-text</code> class, the text color changes (in this case, to <code>#ff0000</code> red):</p>
<pre class="prettyprint">
-#content-text
-{
+#content-text {
font-weight: bold;
font-size: 5em;
<span class="highlight">color: #ff0000;</span>
<p>In the <code>style.css</code> file, add a CSS style for the new <code>id</code> attribute:</p>
<pre class="prettyprint">
-#contentArea
-{
+#contentArea {
color: #8be3d1;
}
</pre>
<p>The following example shows how to create a SnapListview using the <code>tau.helper</code> class:</p>
<pre class="prettyprint">
-(function(tau)
-{
- var page,
- list,
- listHelper;
-
- /* Check for a circular device */
- if (tau.support.shape.circle)
- {
- document.addEventListener("pagebeforeshow", function(e)
- {
- page = e.target;
- list = page.querySelector(".ui-listview");
- if (list)
- {
- /* Create SnapListView and binding rotary event using tau.helper */
- listHelper = tau.helper.SnapListStyle.create(list);
- }
- });
-
- document.addEventListener("pagebeforehide", function(e)
- {
- listHelper.destroy();
- });
- }
+(function(tau) {
+ var page,
+ list,
+ listHelper;
+
+ /* Check for a circular device */
+ if (tau.support.shape.circle) {
+ document.addEventListener('pagebeforeshow', function(e) {
+ page = e.target;
+ list = page.querySelector('.ui-listview');
+ if (list) {
+ /* Create SnapListView and binding rotary event using tau.helper */
+ listHelper = tau.helper.SnapListStyle.create(list);
+ }
+ });
+
+ document.addEventListener('pagebeforehide', function(e) {
+ listHelper.destroy();
+ });
+ }
}(tau));
</pre>
<p>Overwrite the <code>app.js</code> file content with the following code:</p>
<pre class="prettyprint">
-(function()
-{
- window.addEventListener('tizenhwkey', function(ev)
- {
- if (ev.keyName === "back")
- {
- var page = document.getElementsByClassName('ui-page-active')[0],
- pageid = page ? page.id : "";
-
- if (pageid !== "main")
- {
- window.history.back();
- }
- }
- });
+(function() {
+ window.addEventListener('tizenhwkey', function(ev) {
+ if (ev.keyName === 'back') {
+ var page = document.getElementsByClassName('ui-page-active')[0],
+ pageid = page ? page.id : '';
+
+ if (pageid !== 'main') {
+ window.history.back();
+ }
+ }
+ });
}());
</pre></li></ol>
</li>
<p>You have to consider the fact that when the user clicks the back key, the application can only exit if it is showing the main page. If the second page is showing, the application must return to the main page.</p>
<p>The following example shows how to handle the back key input with page navigation and application exit. This code is included in the <strong>TAU Basic</strong> project template <code>main.js</code> file by default.</p>
<pre class="prettyprint">
-(function()
-{
- window.addEventListener('tizenhwkey', function(ev)
- {
- if (ev.keyName === "back")
- {
- var page = document.getElementsByClassName('ui-page-active')[0],
- pageid = page ? page.id : "";
-
- if (pageid === "main")
- {
- try
- {
- tizen.application.getCurrentApplication().exit();
- }
- catch (ignore)
- {
+(function() {
+ window.addEventListener('tizenhwkey', function(ev) {
+ if (ev.keyName === 'back') {
+ var page = document.getElementsByClassName('ui-page-active')[0],
+ pageid = page ? page.id : '';
+
+ if (pageid === 'main') {
+ try {
+ tizen.application.getCurrentApplication().exit();
+ } catch (ignore) {}
+ } else {
+ window.history.back();
}
- }
- else
- {
- window.history.back();
- }
- }
- });
+ }
+ });
}());
</pre>
<p>Modify the <code>window.requestAnimationFrame()</code> method to make the application compatible with the main browsers:</p>
<pre class="prettyprint">
window.requestAnimationFrame = window.requestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- window.oRequestAnimationFrame ||
- window.msRequestAnimationFrame ||
- function(callback)
- {
- 'use strict';
- window.setTimeout(callback, 1000 / 60);
- };</pre>
+ window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.oRequestAnimationFrame ||
+ window.msRequestAnimationFrame ||
+ function(callback) {
+ 'use strict';
+ window.setTimeout(callback, 1000 / 60);
+ };
+</pre>
</li>
<li>Initialize the canvas context and define the canvas area:
<pre class="prettyprint">
-window.onload = function onLoad()
-{
- 'use strict';
+window.onload = function onLoad() {
+ 'use strict';
- canvas = document.querySelector('canvas');
- ctx = canvas.getContext('2d');
- clockRadius = document.body.clientWidth / 2;
+ canvas = document.querySelector('canvas');
+ ctx = canvas.getContext('2d');
+ clockRadius = document.body.clientWidth / 2;
- canvas.width = document.body.clientWidth;
- canvas.height = canvas.width;</pre>
+ canvas.width = document.body.clientWidth;
+ canvas.height = canvas.width;
+</pre>
</li>
<li>Define an event listener to detect back key events and time tick:
<pre class="prettyprint">
- /* Add eventListener for tizenhwkey */
- window.addEventListener('tizenhwkey', function(e)
- {
- if (e.keyName === 'back')
- {
- try
- {
- tizen.application.getCurrentApplication().exit();
- }
- catch (err)
- {
- console.error('Error: ', err.message);
- }
- }
- });
-
- /* Add eventListener for timetick */
- window.addEventListener('timetick', function()
- {
- console.log("timetick is called");
- ambientWatch();
- });
-}
+ /* Add eventListener for tizenhwkey */
+ window.addEventListener('tizenhwkey', function(e) {
+ if (e.keyName === 'back') {
+ try {
+ tizen.application.getCurrentApplication().exit();
+ } catch (err) {
+ console.error('Error: ', err.message);
+ }
+ }
+ });
+
+ /* Add eventListener for timetick */
+ window.addEventListener('timetick', function() {
+ console.log('timetick is called');
+ ambientWatch();
+ });
+};
</pre>
</li>
<li>
<p>Create the clock in the middle of the canvas, and define the watch face style:</p>
<pre class="prettyprint">
-function renderDots()
-{
- 'use strict';
-
- var dx = 0,
- dy = 0,
- i = 1,
- angle = null;
-
- ctx.save();
- ctx.translate(canvas.width / 2, canvas.height / 2);
- ctx.beginPath();
- ctx.fillStyle = '#999999';</pre>
+function renderDots() {
+ 'use strict';
+
+ var dx = 0,
+ dy = 0,
+ i = 1,
+ angle = null;
+
+ ctx.save();
+ ctx.translate(canvas.width / 2, canvas.height / 2);
+ ctx.beginPath();
+ ctx.fillStyle = '#999999';
+</pre>
</li>
<li>Create 4 dots on the sides of the watch face and use the <code>fill()</code> method to style the dots:
<pre class="prettyprint">
- for (i = 1; i <= 4; i++)
- {
- angle = (i - 3) * (Math.PI * 2) / 4;
- dx = clockRadius * 0.9 * Math.cos(angle);
- dy = clockRadius * 0.9 * Math.sin(angle);
-
- ctx.arc(dx, dy, 3, 0, 2 * Math.PI, false);
- ctx.fill();
- }
- ctx.closePath();</pre>
+ for (i = 1; i <= 4; i++) {
+ angle = (i - 3) * (Math.PI * 2) / 4;
+ dx = clockRadius * 0.9 * Math.cos(angle);
+ dy = clockRadius * 0.9 * Math.sin(angle);
+
+ ctx.arc(dx, dy, 3, 0, 2 * Math.PI, false);
+ ctx.fill();
+ }
+ ctx.closePath();
+</pre>
</li>
<li>Create the center point:
<pre class="prettyprint">
- ctx.beginPath();
+ ctx.beginPath();
- ctx.fillStyle = '#ff9000';
- ctx.strokeStyle = '#fff';
- ctx.lineWidth = 4;
+ ctx.fillStyle = '#ff9000';
+ ctx.strokeStyle = '#fff';
+ ctx.lineWidth = 4;
- ctx.arc(0, 0, 7, 0, 2 * Math.PI, false);
- ctx.fill();
- ctx.stroke();
- ctx.closePath();
-}</pre>
+ ctx.arc(0, 0, 7, 0, 2 * Math.PI, false);
+ ctx.fill();
+ ctx.stroke();
+ ctx.closePath();
+}
+</pre>
</li>
</ol>
</li>
<li>The needles can be created using the <code>renderNeedle()</code> method.
<p>To create the needle as a triangle or a polygon, assign the coordinate of the beginning point with the <code>moveTo()</code> method. To assign the rest of the points of the triangle or polygon, use the <code>lineTo()</code> method, which defines the position of the next connecting vertex. You can also adjust the size of each clock needle with the <code>lineTo()</code> method.</p>
<pre class="prettyprint">
-function renderNeedle(angle, radius)
-{
- 'use strict';
- ctx.save();
- ctx.rotate(angle);
- ctx.beginPath();
- ctx.lineWidth = 4;
- ctx.strokeStyle = '#fff';
- ctx.moveTo(6, 0);
- ctx.lineTo(radius, 0);
- ctx.closePath();
- ctx.stroke();
- ctx.closePath();
- ctx.restore();
-}</pre>
+function renderNeedle(angle, radius) {
+ 'use strict';
+ ctx.save();
+ ctx.rotate(angle);
+ ctx.beginPath();
+ ctx.lineWidth = 4;
+ ctx.strokeStyle = '#fff';
+ ctx.moveTo(6, 0);
+ ctx.lineTo(radius, 0);
+ ctx.closePath();
+ ctx.stroke();
+ ctx.closePath();
+ ctx.restore();
+}
+</pre>
</li>
<li>Create the hour needle using the <code>renderHourNeedle()</code> method:
<pre class="prettyprint">
-function renderHourNeedle(hour)
-{
- 'use strict';
+function renderHourNeedle(hour) {
+ 'use strict';
- var angle = null,
- radius = null;
+ var angle = null,
+ radius = null;
- angle = (hour - 3) * (Math.PI * 2) / 12;
- radius = clockRadius * 0.55;
- renderNeedle(angle, radius);
-}</pre>
+ angle = (hour - 3) * (Math.PI * 2) / 12;
+ radius = clockRadius * 0.55;
+ renderNeedle(angle, radius);
+}
+</pre>
</li>
<li>Create the minute needle using the <code>renderMinuteNeedle()</code> method:
<pre class="prettyprint">
-function renderMinuteNeedle(minute)
-{
- 'use strict';
+function renderMinuteNeedle(minute) {
+ 'use strict';
- var angle = null,
- radius = null;
+ var angle = null,
+ radius = null;
- angle = (minute - 15) * (Math.PI * 2) / 60;
- radius = clockRadius * 0.75;
- renderNeedle(angle, radius);
-}</pre>
+ angle = (minute - 15) * (Math.PI * 2) / 60;
+ radius = clockRadius * 0.75;
+ renderNeedle(angle, radius);
+}
+</pre>
</li>
</ol>
</li>
<li>Determine the current time using the <code>new Date()</code> method.
<p>To point the needles accurately, define variables for the current hour and minute.</p>
<pre class="prettyprint">
-function getDate()
-{
- 'use strict';
-
- var date;
- try
- {
- date = tizen.time.getCurrentDateTime();
- }
- catch (err)
- {
- console.error('Error: ', err.message);
- date = new Date();
- }
-
- return date;
+function getDate() {
+ 'use strict';
+
+ var date;
+ try {
+ date = tizen.time.getCurrentDateTime();
+ } catch (err) {
+ console.error('Error: ', err.message);
+ date = new Date();
+ }
+
+ return date;
}
-function watch()
-{
- 'use strict';
+function watch() {
+ 'use strict';
- if (isAmbientMode === true)
- {
- return;
- }
+ if (isAmbientMode === true) {
+ return;
+ }
- var date = getDate(),
- hours = date.getHours(),
- minutes = date.getMinutes(),
- seconds = date.getSeconds(),
- hour = hours + minutes / 60,
- minute = minutes + seconds / 60,
- nextMove = 1000 - date.getMilliseconds();</pre>
+ var date = getDate(),
+ hours = date.getHours(),
+ minutes = date.getMinutes(),
+ seconds = date.getSeconds(),
+ hour = hours + minutes / 60,
+ minute = minutes + seconds / 60,
+ nextMove = 1000 - date.getMilliseconds();
+</pre>
</li>
<li>Every time a new time is indicated, erase the previous time (the previously positioned needles) using the <code>clearRect()</code> method:
<pre class="prettyprint">
- ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);</pre>
+ ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+</pre>
</li>
<li>Point the clock needles to display the current time:
<pre class="prettyprint">
- renderDots();
- renderHourNeedle(hour);
- renderMinuteNeedle(minute);
-
- ctx.restore();
- setTimeout(function()
- {
- window.requestAnimationFrame(watch);
- }, nextMove);
-}</pre>
+ renderDots();
+ renderHourNeedle(hour);
+ renderMinuteNeedle(minute);
+
+ ctx.restore();
+ setTimeout(function() {
+ window.requestAnimationFrame(watch);
+ }, nextMove);
+}
+</pre>
</li>
</ol>
bool support;
int ret;
-ret = system_info_get_platform_bool("http://tizen.org/feature/screen.always_on.high_color", &support);
+ret = system_info_get_platform_bool('http://tizen.org/feature/screen.always_on.high_color', &support);
</pre>
</div>
<li>Define an event listener for the ambient mode:
<pre class="prettyprint">
/* Add eventListener for ambientmodechanged */
-window.addEventListener('ambientmodechanged', function(e)
-{
- console.log("ambientmodechanged: " + e.detail.ambientMode);
- if (e.detail.ambientMode === true)
- {
- /* Render ambient mode */
- isAmbientMode = true;
- ambientWatch();
- }
- else
- {
- /* Render normal mode */
- isAmbientMode = false;
- window.requestAnimationFrame(watch);
- }
+window.addEventListener('ambientmodechanged', function(e) {
+ console.log('ambientmodechanged: ' + e.detail.ambientMode);
+ if (e.detail.ambientMode === true) {
+ /* Render ambient mode */
+ isAmbientMode = true;
+ ambientWatch();
+ } else {
+ /* Render normal mode */
+ isAmbientMode = false;
+ window.requestAnimationFrame(watch);
+ }
});
/* Normal mode */
isAmbientMode = false;
window.requestAnimationFrame(watch);
-};
</pre>
</li>
<li>Create the ambient mode dots:
<pre class="prettyprint">
-function renderAmbientDots()
-{
- 'use strict';
+function renderAmbientDots() {
+ 'use strict';
- ctx.save();
+ ctx.save();
- ctx.translate(canvas.width / 2, canvas.height / 2);
+ ctx.translate(canvas.width / 2, canvas.height / 2);
- ctx.beginPath();
+ ctx.beginPath();
- ctx.fillStyle = '#000000';
- ctx.strokeStyle = '#fff';
- ctx.lineWidth = 4;
+ ctx.fillStyle = '#000000';
+ ctx.strokeStyle = '#fff';
+ ctx.lineWidth = 4;
- ctx.arc(0, 0, 7, 0, 2 * Math.PI, false);
- ctx.fill();
- ctx.stroke();
- ctx.closePath();
+ ctx.arc(0, 0, 7, 0, 2 * Math.PI, false);
+ ctx.fill();
+ ctx.stroke();
+ ctx.closePath();
}
</pre>
</li>
<li>Indicate time in the ambient mode:
<pre class="prettyprint">
-function ambientWatch()
-{
- 'use strict';
- /* Get the current time */
- var date = getDate(),
- hours = date.getHours(),
- minutes = date.getMinutes(),
- seconds = date.getSeconds(),
- hour = hours + minutes / 60,
- minute = minutes + seconds / 60;
-
- /* Erase the previous time */
- ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-
- renderAmbientDots();
- renderHourNeedle(hour);
- renderMinuteNeedle(minute);
-
- ctx.restore();
+function ambientWatch() {
+ 'use strict';
+ /* Get the current time */
+ var date = getDate(),
+ hours = date.getHours(),
+ minutes = date.getMinutes(),
+ seconds = date.getSeconds(),
+ hour = hours + minutes / 60,
+ minute = minutes + seconds / 60;
+
+ /* Erase the previous time */
+ ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+ renderAmbientDots();
+ renderHourNeedle(hour);
+ renderMinuteNeedle(minute);
+
+ ctx.restore();
}
</pre>
</li>
<li>The <code>style.css</code> file indicates the style properties of various HTML elements.
<p>The <code>index.html</code> file imports the <code>style.css</code> file.</p>
<pre class="prettyprint">
-html, body
-{
+html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
-#page
-{
+#page {
background-color: #000;
color: #fff;
height: 100%;
position: relative;
width: 100%;
}
-#container
-{
+#container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
-#content-text
-{
+#content-text {
font-weight: bold;
font-size: 40px;
}
projects / sdk / online-doc.git / commitdiff