added example structure for json download and calendar visualization functions
This commit is contained in:
Raphael Maenle
commit
8a1d8c6882
BIN
CalendarWatch.wgt
Normal file
BIN
CalendarWatch.wgt
Normal file
Binary file not shown.
202
LICENSE.APLv2
Normal file
202
LICENSE.APLv2
Normal file
@ -0,0 +1,202 @@
|
|||||||
|
|
||||||
|
Apache License
|
||||||
|
Version 2.0, January 2004
|
||||||
|
http://www.apache.org/licenses/
|
||||||
|
|
||||||
|
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||||
|
|
||||||
|
1. Definitions.
|
||||||
|
|
||||||
|
"License" shall mean the terms and conditions for use, reproduction,
|
||||||
|
and distribution as defined by Sections 1 through 9 of this document.
|
||||||
|
|
||||||
|
"Licensor" shall mean the copyright owner or entity authorized by
|
||||||
|
the copyright owner that is granting the License.
|
||||||
|
|
||||||
|
"Legal Entity" shall mean the union of the acting entity and all
|
||||||
|
other entities that control, are controlled by, or are under common
|
||||||
|
control with that entity. For the purposes of this definition,
|
||||||
|
"control" means (i) the power, direct or indirect, to cause the
|
||||||
|
direction or management of such entity, whether by contract or
|
||||||
|
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||||
|
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||||
|
|
||||||
|
"You" (or "Your") shall mean an individual or Legal Entity
|
||||||
|
exercising permissions granted by this License.
|
||||||
|
|
||||||
|
"Source" form shall mean the preferred form for making modifications,
|
||||||
|
including but not limited to software source code, documentation
|
||||||
|
source, and configuration files.
|
||||||
|
|
||||||
|
"Object" form shall mean any form resulting from mechanical
|
||||||
|
transformation or translation of a Source form, including but
|
||||||
|
not limited to compiled object code, generated documentation,
|
||||||
|
and conversions to other media types.
|
||||||
|
|
||||||
|
"Work" shall mean the work of authorship, whether in Source or
|
||||||
|
Object form, made available under the License, as indicated by a
|
||||||
|
copyright notice that is included in or attached to the work
|
||||||
|
(an example is provided in the Appendix below).
|
||||||
|
|
||||||
|
"Derivative Works" shall mean any work, whether in Source or Object
|
||||||
|
form, that is based on (or derived from) the Work and for which the
|
||||||
|
editorial revisions, annotations, elaborations, or other modifications
|
||||||
|
represent, as a whole, an original work of authorship. For the purposes
|
||||||
|
of this License, Derivative Works shall not include works that remain
|
||||||
|
separable from, or merely link (or bind by name) to the interfaces of,
|
||||||
|
the Work and Derivative Works thereof.
|
||||||
|
|
||||||
|
"Contribution" shall mean any work of authorship, including
|
||||||
|
the original version of the Work and any modifications or additions
|
||||||
|
to that Work or Derivative Works thereof, that is intentionally
|
||||||
|
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||||
|
or by an individual or Legal Entity authorized to submit on behalf of
|
||||||
|
the copyright owner. For the purposes of this definition, "submitted"
|
||||||
|
means any form of electronic, verbal, or written communication sent
|
||||||
|
to the Licensor or its representatives, including but not limited to
|
||||||
|
communication on electronic mailing lists, source code control systems,
|
||||||
|
and issue tracking systems that are managed by, or on behalf of, the
|
||||||
|
Licensor for the purpose of discussing and improving the Work, but
|
||||||
|
excluding communication that is conspicuously marked or otherwise
|
||||||
|
designated in writing by the copyright owner as "Not a Contribution."
|
||||||
|
|
||||||
|
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||||
|
on behalf of whom a Contribution has been received by Licensor and
|
||||||
|
subsequently incorporated within the Work.
|
||||||
|
|
||||||
|
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
copyright license to reproduce, prepare Derivative Works of,
|
||||||
|
publicly display, publicly perform, sublicense, and distribute the
|
||||||
|
Work and such Derivative Works in Source or Object form.
|
||||||
|
|
||||||
|
3. Grant of Patent License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
(except as stated in this section) patent license to make, have made,
|
||||||
|
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||||
|
where such license applies only to those patent claims licensable
|
||||||
|
by such Contributor that are necessarily infringed by their
|
||||||
|
Contribution(s) alone or by combination of their Contribution(s)
|
||||||
|
with the Work to which such Contribution(s) was submitted. If You
|
||||||
|
institute patent litigation against any entity (including a
|
||||||
|
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||||
|
or a Contribution incorporated within the Work constitutes direct
|
||||||
|
or contributory patent infringement, then any patent licenses
|
||||||
|
granted to You under this License for that Work shall terminate
|
||||||
|
as of the date such litigation is filed.
|
||||||
|
|
||||||
|
4. Redistribution. You may reproduce and distribute copies of the
|
||||||
|
Work or Derivative Works thereof in any medium, with or without
|
||||||
|
modifications, and in Source or Object form, provided that You
|
||||||
|
meet the following conditions:
|
||||||
|
|
||||||
|
(a) You must give any other recipients of the Work or
|
||||||
|
Derivative Works a copy of this License; and
|
||||||
|
|
||||||
|
(b) You must cause any modified files to carry prominent notices
|
||||||
|
stating that You changed the files; and
|
||||||
|
|
||||||
|
(c) You must retain, in the Source form of any Derivative Works
|
||||||
|
that You distribute, all copyright, patent, trademark, and
|
||||||
|
attribution notices from the Source form of the Work,
|
||||||
|
excluding those notices that do not pertain to any part of
|
||||||
|
the Derivative Works; and
|
||||||
|
|
||||||
|
(d) If the Work includes a "NOTICE" text file as part of its
|
||||||
|
distribution, then any Derivative Works that You distribute must
|
||||||
|
include a readable copy of the attribution notices contained
|
||||||
|
within such NOTICE file, excluding those notices that do not
|
||||||
|
pertain to any part of the Derivative Works, in at least one
|
||||||
|
of the following places: within a NOTICE text file distributed
|
||||||
|
as part of the Derivative Works; within the Source form or
|
||||||
|
documentation, if provided along with the Derivative Works; or,
|
||||||
|
within a display generated by the Derivative Works, if and
|
||||||
|
wherever such third-party notices normally appear. The contents
|
||||||
|
of the NOTICE file are for informational purposes only and
|
||||||
|
do not modify the License. You may add Your own attribution
|
||||||
|
notices within Derivative Works that You distribute, alongside
|
||||||
|
or as an addendum to the NOTICE text from the Work, provided
|
||||||
|
that such additional attribution notices cannot be construed
|
||||||
|
as modifying the License.
|
||||||
|
|
||||||
|
You may add Your own copyright statement to Your modifications and
|
||||||
|
may provide additional or different license terms and conditions
|
||||||
|
for use, reproduction, or distribution of Your modifications, or
|
||||||
|
for any such Derivative Works as a whole, provided Your use,
|
||||||
|
reproduction, and distribution of the Work otherwise complies with
|
||||||
|
the conditions stated in this License.
|
||||||
|
|
||||||
|
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||||
|
any Contribution intentionally submitted for inclusion in the Work
|
||||||
|
by You to the Licensor shall be under the terms and conditions of
|
||||||
|
this License, without any additional terms or conditions.
|
||||||
|
Notwithstanding the above, nothing herein shall supersede or modify
|
||||||
|
the terms of any separate license agreement you may have executed
|
||||||
|
with Licensor regarding such Contributions.
|
||||||
|
|
||||||
|
6. Trademarks. This License does not grant permission to use the trade
|
||||||
|
names, trademarks, service marks, or product names of the Licensor,
|
||||||
|
except as required for reasonable and customary use in describing the
|
||||||
|
origin of the Work and reproducing the content of the NOTICE file.
|
||||||
|
|
||||||
|
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||||
|
agreed to in writing, Licensor provides the Work (and each
|
||||||
|
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||||
|
implied, including, without limitation, any warranties or conditions
|
||||||
|
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||||
|
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||||
|
appropriateness of using or redistributing the Work and assume any
|
||||||
|
risks associated with Your exercise of permissions under this License.
|
||||||
|
|
||||||
|
8. Limitation of Liability. In no event and under no legal theory,
|
||||||
|
whether in tort (including negligence), contract, or otherwise,
|
||||||
|
unless required by applicable law (such as deliberate and grossly
|
||||||
|
negligent acts) or agreed to in writing, shall any Contributor be
|
||||||
|
liable to You for damages, including any direct, indirect, special,
|
||||||
|
incidental, or consequential damages of any character arising as a
|
||||||
|
result of this License or out of the use or inability to use the
|
||||||
|
Work (including but not limited to damages for loss of goodwill,
|
||||||
|
work stoppage, computer failure or malfunction, or any and all
|
||||||
|
other commercial damages or losses), even if such Contributor
|
||||||
|
has been advised of the possibility of such damages.
|
||||||
|
|
||||||
|
9. Accepting Warranty or Additional Liability. While redistributing
|
||||||
|
the Work or Derivative Works thereof, You may choose to offer,
|
||||||
|
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||||
|
or other liability obligations and/or rights consistent with this
|
||||||
|
License. However, in accepting such obligations, You may act only
|
||||||
|
on Your own behalf and on Your sole responsibility, not on behalf
|
||||||
|
of any other Contributor, and only if You agree to indemnify,
|
||||||
|
defend, and hold each Contributor harmless for any liability
|
||||||
|
incurred by, or claims asserted against, such Contributor by reason
|
||||||
|
of your accepting any such warranty or additional liability.
|
||||||
|
|
||||||
|
END OF TERMS AND CONDITIONS
|
||||||
|
|
||||||
|
APPENDIX: How to apply the Apache License to your work.
|
||||||
|
|
||||||
|
To apply the Apache License to your work, attach the following
|
||||||
|
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||||
|
replaced with your own identifying information. (Don't include
|
||||||
|
the brackets!) The text should be enclosed in the appropriate
|
||||||
|
comment syntax for the file format. We also recommend that a
|
||||||
|
file or class name and description of purpose be included on the
|
||||||
|
same "printed page" as the copyright notice for easier
|
||||||
|
identification within third-party archives.
|
||||||
|
|
||||||
|
Copyright [yyyy] [name of copyright owner]
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
3
NOTICE
Normal file
3
NOTICE
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
Copyright (c) 2012 Samsung Electronics Co., Ltd. All rights reserved.
|
||||||
|
Except as noted, this software is licensed under Apache License, Version 2.
|
||||||
|
Please, see the LICENSE.APLv2 file for Apache License, Version 2 terms and conditions.
|
||||||
14
config.xml
Normal file
14
config.xml
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<?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/CalendarWatch" version="1.0.0" viewmodes="maximized">
|
||||||
|
<tizen:application id="6dY8X5wAPN.CalendarWatch" package="6dY8X5wAPN" 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.size.all"/>
|
||||||
|
<icon src="icon.png"/>
|
||||||
|
<name>CalendarWatch</name>
|
||||||
|
<tizen:privilege name="http://tizen.org/privilege/download"/>
|
||||||
|
<tizen:privilege name="http://tizen.org/privilege/alarm"/>
|
||||||
|
<tizen:privilege name="http://tizen.org/privilege/calendar.read"/>
|
||||||
|
<tizen:privilege name="http://tizen.org/privilege/calendar.write"/>
|
||||||
|
<tizen:profile name="wearable"/>
|
||||||
|
</widget>
|
||||||
27
css/style.css
Normal file
27
css/style.css
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
html, body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
display: -webkit-flex;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas-layout {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas-content {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
20
index.html
Normal file
20
index.html
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<!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="Canvas Watch - Canvas API & Time API" />
|
||||||
|
<title>Canvas Watch</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<canvas id="canvas-layout"></canvas>
|
||||||
|
<canvas id="canvas-content"></canvas>
|
||||||
|
</div>
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
344
js/app.js
Normal file
344
js/app.js
Normal file
@ -0,0 +1,344 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2016 Samsung Electronics Co., Ltd. All rights reserved.
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
var canvasLayout,
|
||||||
|
canvasContent,
|
||||||
|
ctxLayout,
|
||||||
|
ctxContent,
|
||||||
|
center,
|
||||||
|
watchRadius;
|
||||||
|
|
||||||
|
function readJSON(path) {
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('GET', path, true);
|
||||||
|
xhr.responseType = 'blob';
|
||||||
|
xhr.onload = function(e) {
|
||||||
|
console.log("status " + this.status);
|
||||||
|
if (this.status == 0) {
|
||||||
|
var file = new File([this.response], 'temp');
|
||||||
|
var fileReader = new FileReader();
|
||||||
|
fileReader.addEventListener('load', function(){
|
||||||
|
console.log(fileReader.result);
|
||||||
|
});
|
||||||
|
fileReader.readAsText(file);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getJSON() {
|
||||||
|
var downloadRequest = new tizen.DownloadRequest('http://download.tizen.org/tools/README.txt', 'downloads');
|
||||||
|
tizen.systeminfo.getPropertyValue('NETWORK', function(networkInfo) {
|
||||||
|
if (networkInfo.networkType === 'NONE') {
|
||||||
|
console.log('Network connection is not available.Download is not possible.');
|
||||||
|
downloadRequest = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var listener = {
|
||||||
|
/* When the download progresses (interval is platform-dependent) */
|
||||||
|
onprogress: function(id, receivedSize, totalSize) {
|
||||||
|
console.log('Received with id: ' + id + ', ' + receivedSize + '/' + totalSize);
|
||||||
|
},
|
||||||
|
|
||||||
|
/* When the user pauses the download */
|
||||||
|
onpaused: function(id) {
|
||||||
|
console.log('Paused with id: ' + id);
|
||||||
|
},
|
||||||
|
|
||||||
|
/* When the user cancels the download */
|
||||||
|
oncanceled: function(id) {
|
||||||
|
console.log('Canceled with id: ' + id);
|
||||||
|
},
|
||||||
|
|
||||||
|
/* When the download is completed */
|
||||||
|
oncompleted: function(id, fullPath) {
|
||||||
|
console.log('Completed with id: ' + id + ', full path: ' + fullPath);
|
||||||
|
|
||||||
|
readJSON(fullPath);
|
||||||
|
},
|
||||||
|
|
||||||
|
/* When the download fails */
|
||||||
|
onfailed: function(id, error) {
|
||||||
|
console.log('Failed with id: ' + id + ', error name: ' + error.name);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
console.log("starting download");
|
||||||
|
downloadId = tizen.download.start(downloadRequest, listener);
|
||||||
|
console.log(tizen.download.getState(downloadId));
|
||||||
|
console.log("done");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders a circle with specific center, radius, and color
|
||||||
|
* @private
|
||||||
|
* @param {object} context - the context for the circle to be placed in
|
||||||
|
* @param {number} radius - the radius of the circle
|
||||||
|
* @param {string} color - the color of the circle
|
||||||
|
*/
|
||||||
|
function renderCircle(context, center, radius, color) {
|
||||||
|
context.save();
|
||||||
|
context.beginPath();
|
||||||
|
context.fillStyle = color;
|
||||||
|
context.arc(center.x, center.y, radius, 0, 2 * Math.PI);
|
||||||
|
context.fill();
|
||||||
|
context.closePath();
|
||||||
|
context.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders a partial with specific center, radius, and color
|
||||||
|
* @private
|
||||||
|
* @param {object} context - the context for the circle to be placed in
|
||||||
|
* @param {number} radius - the radius of the circle
|
||||||
|
* @param {string} color - the color of the circle
|
||||||
|
*/
|
||||||
|
function renderArc(context, center, radius, color, startAngle, endAngle) {
|
||||||
|
context.save();
|
||||||
|
context.beginPath();
|
||||||
|
|
||||||
|
seperation = 5;
|
||||||
|
|
||||||
|
startAngle += seperation;
|
||||||
|
if(startAngle >= 360)
|
||||||
|
startAngle -= 360;
|
||||||
|
|
||||||
|
endAngle -= seperation;
|
||||||
|
if(endAngle<0)
|
||||||
|
endAngle += 360;
|
||||||
|
context.arc(center.x, center.y, radius, startAngle * Math.PI / 180., endAngle * Math.PI / 180.);
|
||||||
|
context.fillStyle = color;
|
||||||
|
context.strokeStyle = color;
|
||||||
|
context.lineWidth = 18;
|
||||||
|
context.stroke();
|
||||||
|
context.restore();
|
||||||
|
|
||||||
|
renderCircle(context, polToCart(radius, startAngle), 9, color);
|
||||||
|
renderCircle(context, polToCart(radius, endAngle), 9, color);
|
||||||
|
}
|
||||||
|
|
||||||
|
function polToCart(radius, angle) {
|
||||||
|
pos = {
|
||||||
|
x: center.x + radius * Math.cos(angle * Math.PI / 180),
|
||||||
|
y: center.y + radius * Math.sin(angle * Math.PI / 180)
|
||||||
|
};
|
||||||
|
return pos;
|
||||||
|
}
|
||||||
|
|
||||||
|
function hourToAngle(hour) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders a needle with specific center, angle, start point, end point, width and color
|
||||||
|
* @private
|
||||||
|
* @param {object} context - the context for the needle to be placed in
|
||||||
|
* @param {number} angle - the angle of the needle (0 ~ 360)
|
||||||
|
* @param {number} startPoint - the start point of the needle (-1.0 ~ 1.0)
|
||||||
|
* @param {number} startPoint - the end point of the needle (-1.0 ~ 1.0)
|
||||||
|
* @param {number} width - the width of the needle
|
||||||
|
* @param {string} color - the color of the needle
|
||||||
|
*/
|
||||||
|
function renderNeedle(context, angle, startPoint, endPoint, width, color) {
|
||||||
|
var radius = context.canvas.width / 2,
|
||||||
|
centerX = context.canvas.width / 2,
|
||||||
|
centerY = context.canvas.height / 2,
|
||||||
|
dxi = radius * Math.cos(angle) * startPoint,
|
||||||
|
dyi = radius * Math.sin(angle) * startPoint,
|
||||||
|
dxf = radius * Math.cos(angle) * endPoint,
|
||||||
|
dyf = radius * Math.sin(angle) * endPoint;
|
||||||
|
|
||||||
|
context.save();
|
||||||
|
context.beginPath();
|
||||||
|
context.lineWidth = width;
|
||||||
|
context.strokeStyle = color;
|
||||||
|
context.moveTo(centerX + dxi, centerY + dyi);
|
||||||
|
context.lineTo(centerX + dxf, centerY + dyf);
|
||||||
|
context.stroke();
|
||||||
|
context.closePath();
|
||||||
|
context.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders text at a specific center, radius, and color
|
||||||
|
* @private
|
||||||
|
* @param {object} context - the context for the text to be placed in
|
||||||
|
* @param {string} text - the text to be placed
|
||||||
|
* @param {number} x - the x-coordinate of the text
|
||||||
|
* @param {number} y - the y-coordinate of the text
|
||||||
|
* @param {number} textSize - the size of the text in pixel
|
||||||
|
* @param {string} color - the color of the text
|
||||||
|
*/
|
||||||
|
function renderText(context, text, x, y, textSize, color) {
|
||||||
|
context.save();
|
||||||
|
context.beginPath();
|
||||||
|
context.font = textSize + "px Courier";
|
||||||
|
context.textAlign = "center";
|
||||||
|
context.textBaseline = "middle";
|
||||||
|
context.fillStyle = color;
|
||||||
|
context.fillText(text, x, y);
|
||||||
|
context.closePath();
|
||||||
|
context.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Draws the basic layout of the watch
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
function drawWatchLayout() {
|
||||||
|
var grd,
|
||||||
|
angle,
|
||||||
|
i,
|
||||||
|
j;
|
||||||
|
|
||||||
|
// Clear canvas
|
||||||
|
ctxLayout.clearRect(0, 0, ctxLayout.canvas.width, ctxLayout.canvas.height);
|
||||||
|
|
||||||
|
// Draw the background circle
|
||||||
|
/*
|
||||||
|
renderCircle(ctxLayout, center, watchRadius, "#000000");
|
||||||
|
grd = ctxLayout.createLinearGradient(0, 0, watchRadius * 2, 0);
|
||||||
|
grd.addColorStop(0, "#000000");
|
||||||
|
grd.addColorStop(0.5, "#454545");
|
||||||
|
grd.addColorStop(1, "#000000");
|
||||||
|
ctxLayout.fillStyle = grd;
|
||||||
|
renderCircle(ctxLayout, center, watchRadius * 0.945, grd);
|
||||||
|
renderCircle(ctxLayout, center, watchRadius * 0.7, "#000000");
|
||||||
|
*/
|
||||||
|
// Draw the dividers
|
||||||
|
// 60 unit divider
|
||||||
|
/*
|
||||||
|
for (i = 1; i <= 60; i++) {
|
||||||
|
angle = (i - 15) * (Math.PI * 2) / 60;
|
||||||
|
renderNeedle(ctxLayout, angle, 0.95, 1.0, 1, "#c4c4c4");
|
||||||
|
}
|
||||||
|
|
||||||
|
// 12 unit divider
|
||||||
|
for (j = 1; j <= 12; j++) {
|
||||||
|
angle = (j - 3) * (Math.PI * 2) / 12;
|
||||||
|
renderNeedle(ctxLayout, angle, 0.7, 0.945, 10, "#c4c4c4");
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
renderText(ctxLayout, "TIZEN WATCH", center.x, center.y - (watchRadius * 0.4), 25, "#999999");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Draws the content of the watch
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
function drawWatchContent() {
|
||||||
|
var datetime = tizen.time.getCurrentDateTime(),
|
||||||
|
hour = datetime.getHours(),
|
||||||
|
minute = datetime.getMinutes(),
|
||||||
|
second = datetime.getSeconds(),
|
||||||
|
date = datetime.getDate();
|
||||||
|
|
||||||
|
// Clear canvas
|
||||||
|
ctxContent.clearRect(0, 0, ctxContent.canvas.width, ctxContent.canvas.height);
|
||||||
|
|
||||||
|
// Draw the hour needle
|
||||||
|
renderNeedle(ctxContent, Math.PI * (((hour + minute / 60) / 6) - 0.5), 0, 0.50, 3, "#454545");
|
||||||
|
|
||||||
|
// Draw the minute needle
|
||||||
|
renderNeedle(ctxContent, Math.PI * (((minute + second / 60) / 30) - 0.5), 0, 0.70, 3, "#454545");
|
||||||
|
|
||||||
|
// Draw the minute/hour circle
|
||||||
|
// renderCircle(ctxContent, center, 8, "#454545");
|
||||||
|
|
||||||
|
thickness = 18;
|
||||||
|
edge = document.body.clientWidth / 2 - thickness / 2 - 2;
|
||||||
|
renderArc(ctxContent, center, edge, "#808080", 75, 195); // sleep
|
||||||
|
renderArc(ctxContent, center, edge, "#FF0000", 210, 277.5); // work
|
||||||
|
renderArc(ctxContent, center, edge, "#FFFF00", 277.5, 292.5); // lunch
|
||||||
|
renderArc(ctxContent, center, edge, "#FF0000", 292.5, 352.5); // work
|
||||||
|
|
||||||
|
// Draw the second needle
|
||||||
|
ctxContent.shadowOffsetX = 4;
|
||||||
|
ctxContent.shadowOffsetY = 4;
|
||||||
|
renderNeedle(ctxContent, Math.PI * ((second / 30) - 0.5), -0.10, 0.85, 1, "#c4c4c4");
|
||||||
|
|
||||||
|
// Draw the second circle
|
||||||
|
ctxContent.shadowOffsetX = 0;
|
||||||
|
ctxContent.shadowOffsetY = 0;
|
||||||
|
renderCircle(ctxContent, center, 5, "#c4c4c4");
|
||||||
|
|
||||||
|
// Draw the center circle
|
||||||
|
renderCircle(ctxContent, center, 2, "#454545");
|
||||||
|
|
||||||
|
// Draw the text for date
|
||||||
|
renderText(ctxContent, date, center.x, center.y + (watchRadius * 0.5), 25, "#999999");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set default variables
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
function setDefaultVariables() {
|
||||||
|
canvasLayout = document.querySelector("#canvas-layout");
|
||||||
|
ctxLayout = canvasLayout.getContext("2d");
|
||||||
|
canvasContent = document.querySelector("#canvas-content");
|
||||||
|
ctxContent = canvasContent.getContext("2d");
|
||||||
|
|
||||||
|
// Set the canvases square
|
||||||
|
canvasLayout.width = document.body.clientWidth;
|
||||||
|
canvasLayout.height = canvasLayout.width;
|
||||||
|
canvasContent.width = document.body.clientWidth;
|
||||||
|
canvasContent.height = canvasContent.width;
|
||||||
|
|
||||||
|
center = {
|
||||||
|
x: document.body.clientWidth / 2,
|
||||||
|
y: document.body.clientHeight / 2
|
||||||
|
};
|
||||||
|
|
||||||
|
watchRadius = canvasLayout.width / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set default event listeners
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
function setDefaultEvents() {
|
||||||
|
// add eventListener to update the screen immediately when the device wakes up
|
||||||
|
document.addEventListener("visibilitychange", function() {
|
||||||
|
if (!document.hidden) {
|
||||||
|
// Draw the content of the watch
|
||||||
|
drawWatchContent();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initiates the application
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
function init() {
|
||||||
|
setDefaultVariables();
|
||||||
|
setDefaultEvents();
|
||||||
|
|
||||||
|
// Draw the basic layout and the content of the watch at the beginning
|
||||||
|
drawWatchLayout();
|
||||||
|
drawWatchContent();
|
||||||
|
|
||||||
|
// Update the content of the watch every second
|
||||||
|
setInterval(function() {
|
||||||
|
drawWatchContent();
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onload = init;
|
||||||
|
}());
|
||||||
1
version.txt
Normal file
1
version.txt
Normal file
@ -0,0 +1 @@
|
|||||||
|
1.0.5
|
||||||
Loading…
Reference in New Issue
Block a user