raphael/calenderwatch_client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: raphael:weather
Branches Tags
raphael:master raphael:longitude-digital raphael:weather raphael:dev
..
compare: raphael:longitude-digital
Branches Tags
raphael:longitude-digital raphael:weather raphael:dev raphael:master

4 Commits
weather ... longitude-

Author SHA1 Message Date
raphael
1152e61384 fixes incorrect event name appearnece 2020-10-24 15:31:41 +02:00
raphael
a462151406 adds digital time and event name 2020-10-11 23:40:08 +02:00
raphael
feddff3fd6 updated css with b fabiolo font 2020-10-03 23:01:23 +02:00
raphael
2770c31e6d adds scturcture for mixed design 2020-10-03 18:40:20 +02:00
9 changed files with 826 additions and 829 deletions
Expand all files Collapse all files

BIN
calenderwatch_client.wgt
View File

Binary file not shown.

2
config.xml
View File

@ -14,7 +14,5 @@
<tizen:privilege name="http://tizen.org/privilege/filesystem.read"/> <tizen:privilege name="http://tizen.org/privilege/filesystem.read"/>
<tizen:privilege name="http://tizen.org/privilege/filesystem.write"/> <tizen:privilege name="http://tizen.org/privilege/filesystem.write"/>
<tizen:privilege name="http://tizen.org/privilege/mediastorage"/> <tizen:privilege name="http://tizen.org/privilege/mediastorage"/>
<tizen:privilege name="http://tizen.org/privilege/location"/>
<tizen:profile name="wearable"/> <tizen:profile name="wearable"/>
</widget> </widget>

BIN
css/CourierPrimeBold.ttf Normal file
View File

Binary file not shown.

BIN
css/CourierPrimeSansRegular.ttf Normal file
View File

Binary file not shown.

BIN
css/alba.regular.ttf Normal file
View File

Binary file not shown.

BIN
css/fabiolo-smallcap-regular.ttf Normal file
View File

Binary file not shown.

74
css/style.css
View File

@ -1,11 +1,16 @@
@font-face{ @font-face{
font-family: roboto; font-family: courier;
src: url('JetBrainsMono-Bold.ttf'); src: url('CourierPrimeSansRegular.ttf');
}
@font-face{
font-family: fabiolo;
src: url('fabiolo-smallcap-regular.ttf')
} }
.Roboto{ .Roboto{
font-family: roboto; font-family: fabiolo;
} }
html, body { html, body {
@ -13,7 +18,7 @@ html, body {
height: 100%; height: 100%;
margin: 0; margin: 0;
overflow-y: hidden; overflow-y: hidden;
font-family: "roboto"; font-family: "courier";
} }
@ -22,7 +27,7 @@ html, body {
display: -webkit-flex; display: -webkit-flex;
-webkit-align-items: center; -webkit-align-items: center;
width: 100%; width: 100%;
height: 100% height: 100%;
} }
#canvas-layout { #canvas-layout {
@ -45,7 +50,6 @@ hour&minutes
*/ */
#digital-body { #digital-body {
position: absolute; position: absolute;
width: 70%;
width: 360px; width: 360px;
height: 360px; height: 360px;
top: 0px; top: 0px;
@ -53,37 +57,58 @@ hour&minutes
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
overflow: hidden; overflow: hidden;
}
#str-just-hours {
text-transform: full-width;
font-size: 600%;
font-style: bold;
letter-spacing: -2px;
float: left;
color: white;
width: 90px;
text-align: right;
} }
#rec-time { #rec-time {
margin: 0; position: relative;
position: absolute; display: inline-block;
top: 50%; top: 40%;
left: 50%; left: 50%;
-ms-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 1;
} }
#str-hours { #str-hours {
font-size: 370%; font-size: 450%;
font-style: bold; font-style: bold;
letter-spacing: -10px;
float: left; float: left;
color: white; color: white;
width: 80px;
text-align: right;
transform: translate(-5px, 0);
} }
#str-console { #str-console {
font-size: 370%; font-size: 250%;
font-style: bold;
float: left; float: left;
color: white; color: white;
visibility: hidden; visibility: hidden;
transform: translate(-6px, 8px);
} }
#str-minutes { #str-minutes {
font-size: 370%; font-size: 450%;
font-style: bold; letter-spacing: -10px;
float: left; float: left;
color: white; color: white;
width: 70px;
text-align: left;
transform: translate(-15px, 0);
} }
#str-ampm { #str-ampm {
@ -91,3 +116,24 @@ hour&minutes
color: white; color: white;
padding-top: 20%; padding-top: 20%;
} }
#str-event {
position: absolute;
display: inline-block;
top:60%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 175%;
color: white;
text-align: center;
z-index: 2;
line-height: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
-webkit-box-orient: vertical;
}
}

3
index.html
View File

@ -13,11 +13,14 @@
<body> <body>
<div id="digital-body"> <div id="digital-body">
<div id="str-just-hours"></div>
<div id="rec-time"> <div id="rec-time">
<div id="str-hours"></div> <div id="str-hours"></div>
<div id="str-console">:</div> <div id="str-console">:</div>
<div id="str-minutes"></div> <div id="str-minutes"></div>
</div> </div>
<div id="str-event"></div>
</div> </div>
<div id="container"> <div id="container">

492
js/app.js
View File

@ -14,25 +14,30 @@
* limitations under the License. * limitations under the License.
*/ */
/* 'downloads' for debugging, /* 'downloads' for debugging,
* 'wgt-private' for any release */ * 'wgt-private' for any release */
var STORAGE_SPACE = "downloads"; var STORAGE_SPACE = "downloads";
var SHORT_WAIT = 10000; var SHORT_WAIT = 10000;
var LONG_WAIT = 30000; // 600000 var LONG_WAIT = 30000; // 600000
var DESIGN = 0; // 0 - longitude, 1 - mission control var DESIGN = 2; // 0 - longitude, 1 - mission control, 2 - longitude
var wait_time = LONG_WAIT; var wait_time = LONG_WAIT;
var events = null; var events = null;
var weather = null;
var deviceFingerprint = null; var deviceFingerprint = null;
var eventsTimeStamp = 0; var eventsTimeStamp = 0;
var navigatorTimeStamp = 0;
var flagDigital = true; var flagDigital = true;
(function() { (function() {
var canvasLayout, canvasContent, ctxLayout, ctxContent, center, watchRadius; var canvasLayout,
canvasContent,
ctxLayout,
ctxContent,
center,
watchRadius;
var flagConsole = true; var flagConsole = true;
function deleteFile(name, callback) { function deleteFile(name, callback) {
/* successful resolution of wgt-private */ /* successful resolution of wgt-private */
@ -54,9 +59,8 @@ var flagDigital = true;
dir.deleteFile(dirfile.fullPath, function() { dir.deleteFile(dirfile.fullPath, function() {
console.log("deleted"); console.log("deleted");
callback(); callback();
}, function(e) { },
console.log(e) function(e) {console.log(e)});
});
} }
} }
@ -72,8 +76,7 @@ var flagDigital = true;
console.log("error "+ JSON.stringify(e)); console.log("error "+ JSON.stringify(e));
} }
tizen.ppm.requestPermission("http://tizen.org/privilege/mediastorage", tizen.ppm.requestPermission("http://tizen.org/privilege/mediastorage", onsuccessPermission, onErrorPermission);
onsuccessPermission, onErrorPermission);
} }
function clearDownloads() { function clearDownloads() {
@ -83,11 +86,9 @@ var flagDigital = true;
var onResolveSuccess = function(dir) { var onResolveSuccess = function(dir) {
var onListFilesSuccess = function(files) { var onListFilesSuccess = function(files) {
files files.forEach(function(file) {
.forEach(function(file) {
if (!file.isDirectory) { if (!file.isDirectory) {
dir.deleteFile(file.fullPath, onDeleteSuccess, dir.deleteFile(file.fullPath, onDeleteSuccess, onError);
onError);
} }
}); });
}; };
@ -95,11 +96,9 @@ var flagDigital = true;
dir.listFiles(onListFilesSuccess, onError); dir.listFiles(onListFilesSuccess, onError);
}; };
var onDeleteSuccess = function() { var onDeleteSuccess = function() {};
};
tizen.filesystem.resolve('/opt/usr/media/Downloads', onResolveSuccess, tizen.filesystem.resolve('/opt/usr/media/Downloads', onResolveSuccess, onError);
onError);
} }
@ -140,44 +139,26 @@ var flagDigital = true;
console.log("error "+ JSON.stringify(e)); console.log("error "+ JSON.stringify(e));
} }
tizen.ppm.requestPermission("http://tizen.org/privilege/mediastorage", tizen.ppm.requestPermission("http://tizen.org/privilege/mediastorage", onsuccessPermission, onErrorPermission);
onsuccessPermission, onErrorPermission);
} }
function readWeatherJSON() { function readJSON() {
/* /* - requests permission to view media storage
* - requests permission to view media storage - resolves the file * - resolves the file 'calendarevents'
* 'calendarevents' - opens stream and reads entire file as json * - opens stream and reads entire file as json
*/ */
getJsonFile("weather", function(newweather) { getJsonFile("calendarevents", function(eventlist) {events = eventlist;});
weather = newweather;
console.log(weather);
});
}
function readCalendarJSON() {
/*
* - requests permission to view media storage - resolves the file
* 'calendarevents' - opens stream and reads entire file as json
*/
getJsonFile("calendarevents", function(eventlist) {
events = eventlist;
});
} }
function getNewFingerprintFromServer() { function getNewFingerprintFromServer() {
getFileFromServer("devicefingerprint.json", getFileFromServer("devicefingerprint.json", function() {
"https://longitudecalendar.com/", function() {
console.log("getting device fingerprint from server"); console.log("getting device fingerprint from server");
getJsonFile("devicefingerprint", function(df) { getJsonFile("devicefingerprint", function(df) {deviceFingerprint = df; console.log(deviceFingerprint);});
deviceFingerprint = df;
console.log(deviceFingerprint);
});
}); });
} }
function getDeviceFingerprint() { function getDeviceFingerprint() {
// check if device id set already as global, if it is return // check if device id set already as global, if it is return
if(deviceFingerprint !== null) { if(deviceFingerprint !== null) {
@ -190,26 +171,20 @@ var flagDigital = true;
if(df !== null) { if(df !== null) {
deviceFingerprint = df; deviceFingerprint = df;
} else { } else {
// otherwise, ask the longitude server for a device fingerprint // otherwise, ask the longitude server for a device fingerprint file
// file
getNewFingerprintFromServer(); getNewFingerprintFromServer();
} }
}); });
} }
function getFileFromServer(route, server, callback) { function getFileFromServer(route, callback) {
console.log("getting file"); console.log("getting file");
var server = server; var server = "https://longitudecalendar.com/";
var downloadRequest = new tizen.DownloadRequest(server + route, var downloadRequest = new tizen.DownloadRequest(server + route, STORAGE_SPACE);
STORAGE_SPACE); tizen.systeminfo.getPropertyValue('NETWORK', function(networkInfo) {
tizen.systeminfo
.getPropertyValue(
'NETWORK',
function(networkInfo) {
if (networkInfo.networkType === 'NONE') { if (networkInfo.networkType === 'NONE') {
console console.log('Network connection is not available.Download is not possible.');
.log('Network connection is not available.Download is not possible.');
downloadRequest = null; downloadRequest = null;
} }
}); });
@ -232,21 +207,19 @@ var flagDigital = true;
/* When the download is completed */ /* When the download is completed */
oncompleted: function(id, fullPath) { oncompleted: function(id, fullPath) {
console.log('Completed with id: ' + id + ', full path: ' console.log('Completed with id: ' + id + ', full path: ' + fullPath);
+ fullPath);
callback(); callback();
}, },
/* When the download fails */ /* When the download fails */
onfailed: function(id, error) { onfailed: function(id, error) {
console.log('Failed with id: ' + id + ', error name: ' console.log('Failed with id: ' + id + ', error name: ' + error.name);
+ error.name);
} }
}; };
tizen.download.start(downloadRequest, listener); tizen.download.start(downloadRequest, listener);
} }
async function updateCalendar() { function updateCalendar() {
if(deviceFingerprint === null) { if(deviceFingerprint === null) {
console.log("no fingerprint, loading from file or server"); console.log("no fingerprint, loading from file or server");
@ -258,9 +231,7 @@ var flagDigital = true;
function deleteCallback() { function deleteCallback() {
console.log("done"); console.log("done");
console.log("getting new calendar events"); console.log("getting new calendar events");
getFileFromServer("device/" + deviceFingerprint.deviceName getFileFromServer("device/" + deviceFingerprint.deviceName + "/calendarevents.json", readJSON);
+ "/calendarevents.json", "https://longitudecalendar.com/",
readCalendarJSON);
} }
console.log("deleting calendarevents"); console.log("deleting calendarevents");
@ -269,41 +240,24 @@ var flagDigital = true;
return true; return true;
} }
/* function renderLine(context, p1, p2, thickness, color) {
* Deletes existing weather file gets current geo location gets weather context.save();
* information of current geo location context.beginPath();
*/ context.lineCap = "round";
context.lineWidth = thickness;
function updateLocation(position) { context.moveTo(p1.x, p1.y);
context.lineTo(p2.x, p2.y);
console.log("succes"); context.strokeStyle = color;
context.stroke();
currentGpsPosLat = position.coords.latitude; context.restore();
currentGpsPosLong = position.coords.longitude;
apiKey = "22ef6bf26472a340e8091f42fca3a14a"
console.log(currentGpsPosLat + " -- " + currentGpsPosLong);
console.log("deleting weather");
deleteFile("weather", deleteCallback);
function deleteCallback() {
getFileFromServer("data/2.5/weather?lat=" + currentGpsPosLat
+ "&lon=" + currentGpsPosLong + "&appid=" + apiKey,
"https://api.openweathermap.org/", readWeatherJSON)
}
} }
/** /**
* Renders a circle with specific center, radius, and color * Renders a circle with specific center, radius, and color
*
* @private * @private
* @param {object} * @param {object} context - the context for the circle to be placed in
* context - the context for the circle to be placed in * @param {number} radius - the radius of the circle
* @param {number} * @param {string} color - the color of the circle
* radius - the radius of the circle
* @param {string}
* color - the color of the circle
*/ */
function renderCircle(context, center, radius, color) { function renderCircle(context, center, radius, color) {
context.save(); context.save();
@ -317,14 +271,10 @@ var flagDigital = true;
/** /**
* Renders a circle with specific center, radius, and color * Renders a circle with specific center, radius, and color
*
* @private * @private
* @param {object} * @param {object} context - the context for the circle to be placed in
* context - the context for the circle to be placed in * @param {number} radius - the radius of the circle
* @param {number} * @param {string} color - the color of the circle
* radius - the radius of the circle
* @param {string}
* color - the color of the circle
*/ */
function renderRing(context, center, radius, width, color) { function renderRing(context, center, radius, width, color) {
context.save(); context.save();
@ -337,13 +287,12 @@ var flagDigital = true;
context.restore(); context.restore();
} }
function renderSimpleArc(context, center, radius, thickness, color,
startAngle, endAngle) { function renderSimpleArc(context, center, radius, thickness, color, startAngle, endAngle) {
context.save(); context.save();
context.beginPath(); context.beginPath();
context.arc(center.x, center.y, radius, startAngle * Math.PI / 180., context.arc(center.x, center.y, radius, startAngle * Math.PI / 180., endAngle * Math.PI / 180.);
endAngle * Math.PI / 180.);
context.fillStyle = color; context.fillStyle = color;
context.strokeStyle = color; context.strokeStyle = color;
context.lineWidth = thickness; context.lineWidth = thickness;
@ -352,17 +301,12 @@ var flagDigital = true;
} }
/** /**
* Renders a partial with specific center, radius, and color * Renders a partial with specific center, radius, and color
*
* @private * @private
* @param {object} * @param {object} context - the context for the circle to be placed in
* context - the context for the circle to be placed in * @param {number} radius - the radius of the circle
* @param {number} * @param {string} color - the color of the circle
* radius - the radius of the circle
* @param {string}
* color - the color of the circle
*/ */
function renderArc(context, center, radius, thickness, color, startAngle, function renderArc(context, center, radius, thickness, color, startAngle, endAngle, hardStart, hardStop) {
endAngle, hardStart, hardStop) {
if(hardStart == undefined) { if(hardStart == undefined) {
hardStart = false; hardStart = false;
@ -383,8 +327,7 @@ var flagDigital = true;
} }
if(arcsize < 2*seperation) { if(arcsize < 2*seperation) {
renderCircle(context, polToCart(radius, startAngle + arcsize / 2), renderCircle(context, polToCart(radius, startAngle + arcsize /2 ), 9, color);
9, color);
return; return;
} }
@ -408,8 +351,7 @@ var flagDigital = true;
context.save(); context.save();
context.beginPath(); context.beginPath();
context.arc(center.x, center.y, radius, startAngle * Math.PI / 180., context.arc(center.x, center.y, radius, startAngle * Math.PI / 180., endAngle * Math.PI / 180.);
endAngle * Math.PI / 180.);
context.fillStyle = color; context.fillStyle = color;
context.strokeStyle = color; context.strokeStyle = color;
context.lineWidth = thickness; context.lineWidth = thickness;
@ -451,28 +393,23 @@ var flagDigital = true;
} }
/** /**
* Renders a needle with specific center, angle, start point, end point, * Renders a needle with specific center, angle, start point, end point, width and color
* width and color
*
* @private * @private
* @param {object} * @param {object} context - the context for the needle to be placed in
* context - the context for the needle to be placed in * @param {number} angle - the angle of the needle (0 ~ 360)
* @param {number} * @param {number} startPoint - the start point of the needle (-1.0 ~ 1.0)
* angle - the angle of the needle (0 ~ 360) * @param {number} startPoint - the end point of the needle (-1.0 ~ 1.0)
* @param {number} * @param {number} width - the width of the needle
* startPoint - the start point of the needle (-1.0 ~ 1.0) * @param {string} color - the color of the needle
* @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) { 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 var radius = context.canvas.width / 2,
* Math.cos(angle) * startPoint, dyi = radius * Math.sin(angle) centerX = context.canvas.width / 2,
* startPoint, dxf = radius * Math.cos(angle) * endPoint, dyf = radius centerY = context.canvas.height / 2,
* Math.sin(angle) * endPoint; 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.save();
context.beginPath(); context.beginPath();
@ -496,35 +433,46 @@ var flagDigital = true;
sunColor = "#C0C0C0" sunColor = "#C0C0C0"
} }
sunDistance = document.body.clientWidth / 2 - 80; sunDistance = document.body.clientWidth / 2 - 60;
renderCircle(ctxContent, polToCart(sunDistance, hourToAngle(hour renderCircle(ctxContent, polToCart(sunDistance, hourToAngle(hour + minute / 60)), 16, sunColor);
+ minute / 60)), 22, sunColor); }
function renderSmallSun(date, hour, minute, second) {
sunColor = "#FFD700";
sunDistance = document.body.clientWidth / 2 - 40;
renderCircle(ctxContent, polToCart(sunDistance, hourToAngle(hour + minute / 60)), 10, sunColor);
} }
function renderEarth(date, minute, second) { function renderEarth(date, minute, second) {
var earthColor = "#0077BE"; var earthColor = "#0077BE";
var earthDistance = document.body.clientWidth / 2 - 120; var earthDistance = document.body.clientWidth / 2 - 120;
renderCircle(ctxContent, polToCart(earthDistance, minuteToAngle(minute renderCircle(ctxContent, polToCart(earthDistance, minuteToAngle(minute + second / 60)), 10, earthColor);
+ second / 60)), 14, earthColor);
} }
function renderAnalog(hour, minute, second) {
// hour
var hourAngle = hourToAngle(hour + minute / 60)*2+180;
renderLine(ctxContent, polToCart(document.body.clientWidth / 2 - 120, hourAngle), polToCart(document.body.clientWidth / 2 - 60, hourAngle), 18, '#ffffff');
renderLine(ctxContent, polToCart(document.body.clientWidth / 2 - 120, hourAngle), polToCart(document.body.clientWidth / 2 - 60, hourAngle), 12, '#000000');
// minute
var minuteAngle = minuteToAngle(minute + second / 60);
renderLine(ctxContent, polToCart(document.body.clientWidth / 2 - 120, minuteAngle), polToCart(document.body.clientWidth / 2 - 40, minuteAngle), 18, '#ffffff');
}
/** /**
* Renders text at a specific center, radius, and color * Renders text at a specific center, radius, and color
*
* @private * @private
* @param {object} * @param {object} context - the context for the text to be placed in
* context - the context for the text to be placed in * @param {string} text - the text to be placed
* @param {string} * @param {number} x - the x-coordinate of the text
* text - the text to be placed * @param {number} y - the y-coordinate of the text
* @param {number} * @param {number} textSize - the size of the text in pixel
* x - the x-coordinate of the text * @param {string} color - the color 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) { function renderText(context, text, x, y, textSize, color) {
context.save(); context.save();
@ -540,58 +488,69 @@ var flagDigital = true;
/** /**
* Draws the basic layout of the watch * Draws the basic layout of the watch
*
* @private * @private
*/ */
function drawWatchLayout() { function drawWatchLayout() {
// Clear canvas // Clear canvas
ctxLayout.clearRect(0, 0, ctxLayout.canvas.width, ctxLayout.clearRect(0, 0, ctxLayout.canvas.width, ctxLayout.canvas.height);
ctxLayout.canvas.height);
// Draw the background circle // Draw the background circle
/* /*
* renderCircle(ctxLayout, center, watchRadius, "#000000"); grd = renderCircle(ctxLayout, center, watchRadius, "#000000");
* ctxLayout.createLinearGradient(0, 0, watchRadius * 2, 0); grd = ctxLayout.createLinearGradient(0, 0, watchRadius * 2, 0);
* grd.addColorStop(0, "#000000"); grd.addColorStop(0.5, "#454545"); grd.addColorStop(0, "#000000");
* grd.addColorStop(1, "#000000"); ctxLayout.fillStyle = grd; grd.addColorStop(0.5, "#454545");
* renderCircle(ctxLayout, center, watchRadius * 0.945, grd); grd.addColorStop(1, "#000000");
* renderCircle(ctxLayout, center, watchRadius * 0.7, "#000000"); ctxLayout.fillStyle = grd;
renderCircle(ctxLayout, center, watchRadius * 0.945, grd);
renderCircle(ctxLayout, center, watchRadius * 0.7, "#000000");
*/ */
// Draw the dividers // Draw the dividers
// 60 unit divider // 60 unit divider
/* /*
* for (i = 1; i <= 60; i++) { angle = (i - 15) * (Math.PI * 2) / 60; for (i = 1; i <= 60; i++) {
* renderNeedle(ctxLayout, angle, 0.95, 1.0, 1, "#c4c4c4"); } // 12 unit angle = (i - 15) * (Math.PI * 2) / 60;
* divider for (j = 1; j <= 12; j++) { angle = (j - 3) * (Math.PI * 2) / renderNeedle(ctxLayout, angle, 0.95, 1.0, 1, "#c4c4c4");
* 12; renderNeedle(ctxLayout, angle, 0.7, 0.945, 10, "#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 - // renderText(ctxLayout, "TIZEN WATCH", center.x, center.y - (watchRadius * 0.4), 25, "#999999");
// (watchRadius * 0.4), 25, "#999999");
} }
/** /**
* Draws the content of the watch * Draws the content of the watch
*
* @private * @private
*/ */
function drawWatchContent() { function drawWatchContent() {
var datetime = tizen.time.getCurrentDateTime(); var datetime = tizen.time.getCurrentDateTime();
// Clear canvas
ctxContent.clearRect(0, 0, ctxContent.canvas.width,
ctxContent.canvas.height);
var hour = datetime.getHours(), minute = datetime.getMinutes(), second = datetime // Clear canvas
.getSeconds(), date = datetime.getDate(); ctxContent.clearRect(0, 0, ctxContent.canvas.width, ctxContent.canvas.height);
var hour = datetime.getHours(),
minute = datetime.getMinutes(),
second = datetime.getSeconds(),
date = datetime.getDate();
if(DESIGN === 0) { if(DESIGN === 0) {
renderSun(date, hour, minute, second); renderSun(date, hour, minute, second);
renderEarth(ctxContent, minute, second); renderEarth(ctxContent, minute, second);
} else if(DESIGN === 1) { } else if(DESIGN === 1) {
drawMissionControl(); drawDigitalWatch();
} else if(DESIGN === 2) {
renderSmallSun(date, hour, minute, second);
drawDigitalWatch();
} }
/* if no return from server yet */ /* if no return from server yet */
if(events === null) { if(events === null) {
return; return;
@ -601,8 +560,7 @@ var flagDigital = true;
if(events.kind === "not found") { if(events.kind === "not found") {
deviceFingerprint = null; deviceFingerprint = null;
events = null; events = null;
deleteFile("devicefingerprint", function() { deleteFile("devicefingerprint", function() {});
});
wait_time = SHORT_WAIT; wait_time = SHORT_WAIT;
return; return;
} }
@ -611,17 +569,7 @@ var flagDigital = true;
wait_time = SHORT_WAIT; wait_time = SHORT_WAIT;
if(deviceFingerprint === null) { if(deviceFingerprint === null) {
} else { } else {
renderText(ctxContent, "add new device on", center.x, renderText(ctxContent, deviceFingerprint.deviceName, center.x, center.y, 20, "FF0000");
center.y - 70, 25, "FFFFFF");
renderText(ctxContent, "longitudecalendar.com", center.x,
center.y - 40, 25, "FFFFFF");
if (DESIGN === 0)
renderText(ctxContent, deviceFingerprint.deviceName,
center.x, center.y, 20, "FF0000");
else if (DESIGN === 1) {
renderText(ctxContent, deviceFingerprint.deviceName,
center.x, center.y + 40, 20, "FF0000")
}
} }
return; return;
} }
@ -630,32 +578,29 @@ var flagDigital = true;
var thickness = 18; var thickness = 18;
} else if(DESIGN === 1) { } else if(DESIGN === 1) {
var thickness = 50; var thickness = 50;
} else if(DESIGN === 2) {
var thickness = 18;
} }
console.log("switched to long wait");
wait_time = LONG_WAIT; wait_time = LONG_WAIT;
var wroteEvent = false;
for(var event in events.events){ for(var event in events.events){
var startedBeforeToday = false; var startedBeforeToday = false;
var endsAfterToday = false; var endsAfterToday = false;
var e = events.events[event]; var e = events.events[event];
// check if not today // check if not today
if (e.startDateTime.date.year !== tizen.time.getCurrentDateTime() if(e.startDateTime.date.year !== tizen.time.getCurrentDateTime().getFullYear() ||
.getFullYear() e.startDateTime.date.month !== tizen.time.getCurrentDateTime().getMonth() + 1 ||
|| e.startDateTime.date.month !== tizen.time e.startDateTime.date.day !== tizen.time.getCurrentDateTime().getDate()){
.getCurrentDateTime().getMonth() + 1
|| e.startDateTime.date.day !== tizen.time
.getCurrentDateTime().getDate()) {
// if not today, check if it is an earlier event // if not today, check if it is an earlier event
if (e.startDateTime.date.year < tizen.time.getCurrentDateTime() if(e.startDateTime.date.year < tizen.time.getCurrentDateTime().getFullYear()) {
.getFullYear()) {
startedBeforeToday = true; startedBeforeToday = true;
} else if (e.startDateTime.date.month < tizen.time } else if(e.startDateTime.date.month < tizen.time.getCurrentDateTime().getMonth() + 1) {
.getCurrentDateTime().getMonth() + 1) {
startedBeforeToday = true; startedBeforeToday = true;
} else if (e.startDateTime.date.day < tizen.time } else if(e.startDateTime.date.day < tizen.time.getCurrentDateTime().getDate()) {
.getCurrentDateTime().getDate()) {
startedBeforeToday = true; startedBeforeToday = true;
} else { } else {
continue; continue;
@ -663,22 +608,16 @@ var flagDigital = true;
} }
// check if not today // check if not today
if (e.stopDateTime.date.year !== tizen.time.getCurrentDateTime() if(e.stopDateTime.date.year !== tizen.time.getCurrentDateTime().getFullYear() ||
.getFullYear() e.stopDateTime.date.month !== tizen.time.getCurrentDateTime().getMonth() + 1 ||
|| e.stopDateTime.date.month !== tizen.time e.stopDateTime.date.day !== tizen.time.getCurrentDateTime().getDate()){
.getCurrentDateTime().getMonth() + 1
|| e.stopDateTime.date.day !== tizen.time
.getCurrentDateTime().getDate()) {
// if not check if later date // if not check if later date
if (e.stopDateTime.date.year > tizen.time.getCurrentDateTime() if(e.stopDateTime.date.year > tizen.time.getCurrentDateTime().getFullYear()) {
.getFullYear()) {
endsAfterToday = true; endsAfterToday = true;
} else if (e.stopDateTime.date.month > tizen.time } else if(e.stopDateTime.date.month > tizen.time.getCurrentDateTime().getMonth() + 1) {
.getCurrentDateTime().getMonth() + 1) {
endsAfterToday = true; endsAfterToday = true;
} else if (e.stopDateTime.date.day > tizen.time } else if(e.stopDateTime.date.day > tizen.time.getCurrentDateTime().getDate()) {
.getCurrentDateTime().getDate()) {
endsAfterToday = true; endsAfterToday = true;
} else { } else {
continue; continue;
@ -690,47 +629,88 @@ var flagDigital = true;
var startTime = 0; var startTime = 0;
if(!startedBeforeToday) { if(!startedBeforeToday) {
startTime = e.startDateTime.time.hour startTime = e.startDateTime.time.hour + e.startDateTime.time.minute / 60;
+ e.startDateTime.time.minute / 60;
} }
var stopTime = 24; var stopTime = 24;
if(!endsAfterToday) { if(!endsAfterToday) {
stopTime = e.stopDateTime.time.hour stopTime = e.stopDateTime.time.hour + e.stopDateTime.time.minute / 60;
+ e.stopDateTime.time.minute / 60;
} }
if(DESIGN === 0) { if(DESIGN === 0) {
var edge = document.body.clientWidth / 2 - thickness / 2 - 2; var edge = document.body.clientWidth / 2 - thickness / 2 - 2;
renderArc(ctxContent, center, edge, thickness, e.color, renderArc(ctxContent, center, edge, thickness, e.color, hourToAngle(startTime), hourToAngle(stopTime), startedBeforeToday, endsAfterToday);
hourToAngle(startTime), hourToAngle(stopTime),
startedBeforeToday, endsAfterToday);
} else if(DESIGN === 1) { } else if(DESIGN === 1) {
var edge = document.body.clientWidth / 2 - thickness / 2 - 2; var edge = document.body.clientWidth / 2 - thickness / 2 - 2;
renderArc(ctxContent, center, edge, thickness, e.color, renderArc(ctxContent, center, edge, thickness, e.color, hourToAngle(startTime), hourToAngle(stopTime), true, true);
hourToAngle(startTime), hourToAngle(stopTime), true, } else if(DESIGN === 2) {
true); var edge = document.body.clientWidth / 2 - thickness / 2 - 2;
renderArc(ctxContent, center, edge, thickness, e.color, hourToAngle(startTime), hourToAngle(stopTime), startedBeforeToday, endsAfterToday);
}
if(eventNow(e, hour, minute)) {
console.log("!!!writing name");
wroteEvent = true;
drawEventName(e.name);
} }
} }
if(!wroteEvent) {
drawEventName("");
}
if(DESIGN === 0) { if(DESIGN === 0) {
} else if(DESIGN === 1) { } else if(DESIGN === 1) {
var inner = document.body.clientWidth / 2 - thickness; var inner = document.body.clientWidth / 2 - thickness;
renderSimpleArc(ctxContent, center, 115, 8, "#FFFFFF", renderSimpleArc(ctxContent, center, 115, 8, "#FFFFFF", hourToAngle(20), hourToAngle(20+0.999))
hourToAngle(hour), hourToAngle(hour + 0.999))
for(var i = 0; i < 24; i++) { for(var i = 0; i < 24; i++) {
renderSimpleArc(ctxContent, center, edge, thickness, "#000000", renderSimpleArc(ctxContent, center, edge, thickness, "#000000", i*15-0.8, i*15+0.8);
i * 15 - 0.8, i * 15 + 0.8);
}
} }
} else if(DESIGN === 2) {
} }
function drawMissionControl(datetime) {
var strHours = document.getElementById("str-hours"), strConsole = document
.getElementById("str-console"), strMinutes = document
.getElementById("str-minutes"), datetime = tizen.time }
.getCurrentDateTime(), hour = datetime.getHours(), minute = datetime
.getMinutes(); function eventNow(event, hour, minute) {
if( ((event.startDateTime.time.hour < hour) ||
(event.startDateTime.time.hour <= hour &&
event.startDateTime.time.minute <= minute)) ) {
console.log("start before");
}
if( ((event.stopDateTime.time.hour > hour) ||
(event.stopDateTime.time.hour >= hour &&
event.stopDateTime.time.minute >= minute)) ) {
console.log("stop after");
}
if( ((event.startDateTime.time.hour < hour) ||
(event.startDateTime.time.hour <= hour &&
event.startDateTime.time.minute <= minute)) &&
((event.stopDateTime.time.hour > hour) ||
(event.stopDateTime.time.hour >= hour &&
event.stopDateTime.time.minute >= minute)) ){
return true;
}
return false;
}
function drawEventName(name) {
var strEvent = document.getElementById("str-event");
strEvent.innerHTML = name;
}
function drawDigitalWatch(datetime) {
var strHours = document.getElementById("str-hours"),
strConsole = document.getElementById("str-console"),
strMinutes = document.getElementById("str-minutes"),
datetime = tizen.time.getCurrentDateTime(),
hour = datetime.getHours(),
minute = datetime.getMinutes();
strHours.innerHTML = hour; strHours.innerHTML = hour;
strMinutes.innerHTML = minute; strMinutes.innerHTML = minute;
@ -751,16 +731,16 @@ var flagDigital = true;
strConsole.style.visibility = "hidden"; strConsole.style.visibility = "hidden";
flagConsole = true; flagConsole = true;
} }
} else { }
else {
strConsole.style.visibility = "visible"; strConsole.style.visibility = "visible";
flagConsole = false; flagConsole = false;
} }
} }
/** /**
* Sets to background image as BACKGROUND_URL, and starts timer for normal * Sets to background image as BACKGROUND_URL,
* digital watch mode. * and starts timer for normal digital watch mode.
*
* @private * @private
*/ */
function initDigitalWatch() { function initDigitalWatch() {
@ -777,29 +757,11 @@ var flagDigital = true;
eventsTimeStamp = currentTime; eventsTimeStamp = currentTime;
} }
}
function loopNavigator(offset_ms) {
var d = new Date();
var options = {
enableHighAccuracy : true,
timeout : 5000
};
var currentTime = d.getTime();
if (navigatorTimeStamp + offset_ms < currentTime) {
navigator.geolocation.getCurrentPosition(updateLocation, errorCallback,
options);
navigatorTimeStamp = currentTime;
}
} }
/** /**
* Set default variables * Set default variables
*
* @private * @private
*/ */
function setDefaultVariables() { function setDefaultVariables() {
@ -824,12 +786,10 @@ var flagDigital = true;
/** /**
* Set default event listeners * Set default event listeners
*
* @private * @private
*/ */
function setDefaultEvents() { function setDefaultEvents() {
// add eventListener to update the screen immediately when the device // add eventListener to update the screen immediately when the device wakes up
// wakes up
document.addEventListener("visibilitychange", function() { document.addEventListener("visibilitychange", function() {
if (!document.hidden) { if (!document.hidden) {
// Draw the content of the watch // Draw the content of the watch
@ -840,7 +800,6 @@ var flagDigital = true;
/** /**
* Initiates the application * Initiates the application
*
* @private * @private
*/ */
function init() { function init() {
@ -852,20 +811,11 @@ var flagDigital = true;
drawWatchLayout(); drawWatchLayout();
drawWatchContent(); drawWatchContent();
// Update the content of the watch every second // Update the content of the watch every second
setInterval(function() { setInterval(function() {
drawWatchContent(); drawWatchContent();
loopCalendar(wait_time); loopCalendar(wait_time);
loopNavigator(wait_time);
}, 1000); }, 1000);
}
function errorCallback(error) {
console.log("error");
console.log(error);
} }
window.onload = init; window.onload = init;