Compare commits
3 Commits
Author | SHA1 | Date | |
---|---|---|---|
a26016bcaa | |||
9f6d5ccc1f | |||
0fb84634e2 |
Binary file not shown.
@ -14,5 +14,7 @@
|
|||||||
<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>
|
||||||
|
409
js/app.js
409
js/app.js
@ -14,30 +14,25 @@
|
|||||||
* 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 = 1; // 0 - longitude, 1 - mission control
|
var DESIGN = 0; // 0 - longitude, 1 - mission control
|
||||||
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,
|
var canvasLayout, canvasContent, ctxLayout, ctxContent, center, watchRadius;
|
||||||
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 */
|
||||||
@ -59,8 +54,9 @@ var flagDigital = true;
|
|||||||
dir.deleteFile(dirfile.fullPath, function() {
|
dir.deleteFile(dirfile.fullPath, function() {
|
||||||
console.log("deleted");
|
console.log("deleted");
|
||||||
callback();
|
callback();
|
||||||
},
|
}, function(e) {
|
||||||
function(e) {console.log(e)});
|
console.log(e)
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -76,7 +72,8 @@ var flagDigital = true;
|
|||||||
console.log("error " + JSON.stringify(e));
|
console.log("error " + JSON.stringify(e));
|
||||||
}
|
}
|
||||||
|
|
||||||
tizen.ppm.requestPermission("http://tizen.org/privilege/mediastorage", onsuccessPermission, onErrorPermission);
|
tizen.ppm.requestPermission("http://tizen.org/privilege/mediastorage",
|
||||||
|
onsuccessPermission, onErrorPermission);
|
||||||
}
|
}
|
||||||
|
|
||||||
function clearDownloads() {
|
function clearDownloads() {
|
||||||
@ -86,9 +83,11 @@ var flagDigital = true;
|
|||||||
|
|
||||||
var onResolveSuccess = function(dir) {
|
var onResolveSuccess = function(dir) {
|
||||||
var onListFilesSuccess = function(files) {
|
var onListFilesSuccess = function(files) {
|
||||||
files.forEach(function(file) {
|
files
|
||||||
|
.forEach(function(file) {
|
||||||
if (!file.isDirectory) {
|
if (!file.isDirectory) {
|
||||||
dir.deleteFile(file.fullPath, onDeleteSuccess, onError);
|
dir.deleteFile(file.fullPath, onDeleteSuccess,
|
||||||
|
onError);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@ -96,9 +95,11 @@ 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, onError);
|
tizen.filesystem.resolve('/opt/usr/media/Downloads', onResolveSuccess,
|
||||||
|
onError);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -139,25 +140,43 @@ var flagDigital = true;
|
|||||||
console.log("error " + JSON.stringify(e));
|
console.log("error " + JSON.stringify(e));
|
||||||
}
|
}
|
||||||
|
|
||||||
tizen.ppm.requestPermission("http://tizen.org/privilege/mediastorage", onsuccessPermission, onErrorPermission);
|
tizen.ppm.requestPermission("http://tizen.org/privilege/mediastorage",
|
||||||
|
onsuccessPermission, onErrorPermission);
|
||||||
}
|
}
|
||||||
|
|
||||||
function readJSON() {
|
function readWeatherJSON() {
|
||||||
/* - requests permission to view media storage
|
/*
|
||||||
* - resolves the file 'calendarevents'
|
* - requests permission to view media storage - resolves the file
|
||||||
* - opens stream and reads entire file as json
|
* 'calendarevents' - opens stream and reads entire file as json
|
||||||
*/
|
*/
|
||||||
|
|
||||||
getJsonFile("calendarevents", function(eventlist) {events = eventlist;});
|
getJsonFile("weather", function(newweather) {
|
||||||
}
|
weather = newweather;
|
||||||
|
console.log(weather);
|
||||||
function getNewFingerprintFromServer() {
|
|
||||||
getFileFromServer("devicefingerprint.json", function() {
|
|
||||||
console.log("getting device fingerprint from server");
|
|
||||||
getJsonFile("devicefingerprint", function(df) {deviceFingerprint = df; console.log(deviceFingerprint);});
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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() {
|
||||||
|
getFileFromServer("devicefingerprint.json",
|
||||||
|
"https://longitudecalendar.com/", function() {
|
||||||
|
console.log("getting device fingerprint from server");
|
||||||
|
getJsonFile("devicefingerprint", function(df) {
|
||||||
|
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
|
||||||
@ -171,20 +190,26 @@ var flagDigital = true;
|
|||||||
if (df !== null) {
|
if (df !== null) {
|
||||||
deviceFingerprint = df;
|
deviceFingerprint = df;
|
||||||
} else {
|
} else {
|
||||||
// otherwise, ask the longitude server for a device fingerprint file
|
// otherwise, ask the longitude server for a device fingerprint
|
||||||
|
// file
|
||||||
getNewFingerprintFromServer();
|
getNewFingerprintFromServer();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getFileFromServer(route, callback) {
|
function getFileFromServer(route, server, callback) {
|
||||||
console.log("getting file");
|
console.log("getting file");
|
||||||
var server = "https://longitudecalendar.com/";
|
var server = server;
|
||||||
var downloadRequest = new tizen.DownloadRequest(server + route, STORAGE_SPACE);
|
var downloadRequest = new tizen.DownloadRequest(server + route,
|
||||||
tizen.systeminfo.getPropertyValue('NETWORK', function(networkInfo) {
|
STORAGE_SPACE);
|
||||||
|
tizen.systeminfo
|
||||||
|
.getPropertyValue(
|
||||||
|
'NETWORK',
|
||||||
|
function(networkInfo) {
|
||||||
if (networkInfo.networkType === 'NONE') {
|
if (networkInfo.networkType === 'NONE') {
|
||||||
console.log('Network connection is not available.Download is not possible.');
|
console
|
||||||
|
.log('Network connection is not available.Download is not possible.');
|
||||||
downloadRequest = null;
|
downloadRequest = null;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -207,19 +232,21 @@ 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: ' + fullPath);
|
console.log('Completed with id: ' + id + ', full path: '
|
||||||
|
+ 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: ' + error.name);
|
console.log('Failed with id: ' + id + ', error name: '
|
||||||
|
+ error.name);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
tizen.download.start(downloadRequest, listener);
|
tizen.download.start(downloadRequest, listener);
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateCalendar() {
|
async 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");
|
||||||
@ -231,7 +258,9 @@ 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 + "/calendarevents.json", readJSON);
|
getFileFromServer("device/" + deviceFingerprint.deviceName
|
||||||
|
+ "/calendarevents.json", "https://longitudecalendar.com/",
|
||||||
|
readCalendarJSON);
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("deleting calendarevents");
|
console.log("deleting calendarevents");
|
||||||
@ -240,12 +269,41 @@ var flagDigital = true;
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Deletes existing weather file gets current geo location gets weather
|
||||||
|
* information of current geo location
|
||||||
|
*/
|
||||||
|
|
||||||
|
function updateLocation(position) {
|
||||||
|
|
||||||
|
console.log("succes");
|
||||||
|
|
||||||
|
currentGpsPosLat = position.coords.latitude;
|
||||||
|
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} context - the context for the circle to be placed in
|
* @param {object}
|
||||||
* @param {number} radius - the radius of the circle
|
* context - the context for the circle to be placed in
|
||||||
* @param {string} color - the color of the circle
|
* @param {number}
|
||||||
|
* 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();
|
||||||
@ -259,10 +317,14 @@ 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} context - the context for the circle to be placed in
|
* @param {object}
|
||||||
* @param {number} radius - the radius of the circle
|
* context - the context for the circle to be placed in
|
||||||
* @param {string} color - the color of the circle
|
* @param {number}
|
||||||
|
* 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();
|
||||||
@ -275,12 +337,13 @@ var flagDigital = true;
|
|||||||
context.restore();
|
context.restore();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function renderSimpleArc(context, center, radius, thickness, color,
|
||||||
function renderSimpleArc(context, center, radius, thickness, color, startAngle, endAngle) {
|
startAngle, endAngle) {
|
||||||
context.save();
|
context.save();
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
|
|
||||||
context.arc(center.x, center.y, radius, startAngle * Math.PI / 180., endAngle * Math.PI / 180.);
|
context.arc(center.x, center.y, radius, startAngle * 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;
|
||||||
@ -289,12 +352,17 @@ 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} context - the context for the circle to be placed in
|
* @param {object}
|
||||||
* @param {number} radius - the radius of the circle
|
* context - the context for the circle to be placed in
|
||||||
* @param {string} color - the color of the circle
|
* @param {number}
|
||||||
|
* radius - the radius of the circle
|
||||||
|
* @param {string}
|
||||||
|
* color - the color of the circle
|
||||||
*/
|
*/
|
||||||
function renderArc(context, center, radius, thickness, color, startAngle, endAngle, hardStart, hardStop) {
|
function renderArc(context, center, radius, thickness, color, startAngle,
|
||||||
|
endAngle, hardStart, hardStop) {
|
||||||
|
|
||||||
if (hardStart == undefined) {
|
if (hardStart == undefined) {
|
||||||
hardStart = false;
|
hardStart = false;
|
||||||
@ -315,7 +383,8 @@ var flagDigital = true;
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (arcsize < 2 * seperation) {
|
if (arcsize < 2 * seperation) {
|
||||||
renderCircle(context, polToCart(radius, startAngle + arcsize /2 ), 9, color);
|
renderCircle(context, polToCart(radius, startAngle + arcsize / 2),
|
||||||
|
9, color);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -339,7 +408,8 @@ var flagDigital = true;
|
|||||||
context.save();
|
context.save();
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
|
|
||||||
context.arc(center.x, center.y, radius, startAngle * Math.PI / 180., endAngle * Math.PI / 180.);
|
context.arc(center.x, center.y, radius, startAngle * 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;
|
||||||
@ -381,23 +451,28 @@ var flagDigital = true;
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Renders a needle with specific center, angle, start point, end point, width and color
|
* Renders a needle with specific center, angle, start point, end point,
|
||||||
|
* width and color
|
||||||
|
*
|
||||||
* @private
|
* @private
|
||||||
* @param {object} context - the context for the needle to be placed in
|
* @param {object}
|
||||||
* @param {number} angle - the angle of the needle (0 ~ 360)
|
* context - the context for the needle to be placed in
|
||||||
* @param {number} startPoint - the start point of the needle (-1.0 ~ 1.0)
|
* @param {number}
|
||||||
* @param {number} startPoint - the end point of the needle (-1.0 ~ 1.0)
|
* angle - the angle of the needle (0 ~ 360)
|
||||||
* @param {number} width - the width of the needle
|
* @param {number}
|
||||||
* @param {string} color - the color of the needle
|
* 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) {
|
function renderNeedle(context, angle, startPoint, endPoint, width, color) {
|
||||||
var radius = context.canvas.width / 2,
|
var radius = context.canvas.width / 2, centerX = context.canvas.width / 2, centerY = context.canvas.height / 2, dxi = radius
|
||||||
centerX = context.canvas.width / 2,
|
* Math.cos(angle) * startPoint, dyi = radius * Math.sin(angle)
|
||||||
centerY = context.canvas.height / 2,
|
* startPoint, dxf = radius * Math.cos(angle) * endPoint, dyf = radius
|
||||||
dxi = radius * Math.cos(angle) * startPoint,
|
* Math.sin(angle) * endPoint;
|
||||||
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();
|
||||||
@ -421,27 +496,35 @@ var flagDigital = true;
|
|||||||
sunColor = "#C0C0C0"
|
sunColor = "#C0C0C0"
|
||||||
}
|
}
|
||||||
|
|
||||||
sunDistance = document.body.clientWidth / 2 - 60;
|
sunDistance = document.body.clientWidth / 2 - 80;
|
||||||
renderCircle(ctxContent, polToCart(sunDistance, hourToAngle(hour + minute / 60)), 16, sunColor);
|
renderCircle(ctxContent, polToCart(sunDistance, hourToAngle(hour
|
||||||
|
+ minute / 60)), 22, 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 + second / 60)), 10, earthColor);
|
renderCircle(ctxContent, polToCart(earthDistance, minuteToAngle(minute
|
||||||
|
+ second / 60)), 14, earthColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Renders text at a specific center, radius, and color
|
* Renders text at a specific center, radius, and color
|
||||||
|
*
|
||||||
* @private
|
* @private
|
||||||
* @param {object} context - the context for the text to be placed in
|
* @param {object}
|
||||||
* @param {string} text - the text to be placed
|
* context - the context for the text to be placed in
|
||||||
* @param {number} x - the x-coordinate of the text
|
* @param {string}
|
||||||
* @param {number} y - the y-coordinate of the text
|
* text - the text to be placed
|
||||||
* @param {number} textSize - the size of the text in pixel
|
* @param {number}
|
||||||
* @param {string} color - the color of the text
|
* 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) {
|
function renderText(context, text, x, y, textSize, color) {
|
||||||
context.save();
|
context.save();
|
||||||
@ -457,57 +540,50 @@ 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.canvas.height);
|
ctxLayout.clearRect(0, 0, ctxLayout.canvas.width,
|
||||||
|
ctxLayout.canvas.height);
|
||||||
|
|
||||||
// Draw the background circle
|
// Draw the background circle
|
||||||
/*
|
/*
|
||||||
renderCircle(ctxLayout, center, watchRadius, "#000000");
|
* renderCircle(ctxLayout, center, watchRadius, "#000000"); grd =
|
||||||
grd = ctxLayout.createLinearGradient(0, 0, watchRadius * 2, 0);
|
* ctxLayout.createLinearGradient(0, 0, watchRadius * 2, 0);
|
||||||
grd.addColorStop(0, "#000000");
|
* grd.addColorStop(0, "#000000"); grd.addColorStop(0.5, "#454545");
|
||||||
grd.addColorStop(0.5, "#454545");
|
* grd.addColorStop(1, "#000000"); ctxLayout.fillStyle = grd;
|
||||||
grd.addColorStop(1, "#000000");
|
* renderCircle(ctxLayout, center, watchRadius * 0.945, grd);
|
||||||
ctxLayout.fillStyle = grd;
|
* renderCircle(ctxLayout, center, watchRadius * 0.7, "#000000");
|
||||||
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++) {
|
* for (i = 1; i <= 60; i++) { angle = (i - 15) * (Math.PI * 2) / 60;
|
||||||
angle = (i - 15) * (Math.PI * 2) / 60;
|
* renderNeedle(ctxLayout, angle, 0.95, 1.0, 1, "#c4c4c4"); } // 12 unit
|
||||||
renderNeedle(ctxLayout, angle, 0.95, 1.0, 1, "#c4c4c4");
|
* divider for (j = 1; j <= 12; j++) { angle = (j - 3) * (Math.PI * 2) /
|
||||||
}
|
* 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 - (watchRadius * 0.4), 25, "#999999");
|
// renderText(ctxLayout, "TIZEN WATCH", center.x, center.y -
|
||||||
|
// (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
|
// Clear canvas
|
||||||
ctxContent.clearRect(0, 0, ctxContent.canvas.width, ctxContent.canvas.height);
|
ctxContent.clearRect(0, 0, ctxContent.canvas.width,
|
||||||
|
ctxContent.canvas.height);
|
||||||
|
|
||||||
|
var hour = datetime.getHours(), minute = datetime.getMinutes(), second = datetime
|
||||||
var hour = datetime.getHours(),
|
.getSeconds(), date = datetime.getDate();
|
||||||
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);
|
||||||
@ -516,7 +592,6 @@ var flagDigital = true;
|
|||||||
drawMissionControl();
|
drawMissionControl();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* if no return from server yet */
|
/* if no return from server yet */
|
||||||
if (events === null) {
|
if (events === null) {
|
||||||
return;
|
return;
|
||||||
@ -526,7 +601,8 @@ 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;
|
||||||
}
|
}
|
||||||
@ -535,7 +611,17 @@ var flagDigital = true;
|
|||||||
wait_time = SHORT_WAIT;
|
wait_time = SHORT_WAIT;
|
||||||
if (deviceFingerprint === null) {
|
if (deviceFingerprint === null) {
|
||||||
} else {
|
} else {
|
||||||
renderText(ctxContent, deviceFingerprint.deviceName, center.x, center.y, 20, "FF0000");
|
renderText(ctxContent, "add new device on", center.x,
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
@ -549,22 +635,27 @@ var flagDigital = true;
|
|||||||
console.log("switched to long wait");
|
console.log("switched to long wait");
|
||||||
wait_time = LONG_WAIT;
|
wait_time = LONG_WAIT;
|
||||||
|
|
||||||
|
|
||||||
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().getFullYear() ||
|
if (e.startDateTime.date.year !== tizen.time.getCurrentDateTime()
|
||||||
e.startDateTime.date.month !== tizen.time.getCurrentDateTime().getMonth() + 1 ||
|
.getFullYear()
|
||||||
e.startDateTime.date.day !== tizen.time.getCurrentDateTime().getDate()){
|
|| e.startDateTime.date.month !== tizen.time
|
||||||
|
.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().getFullYear()) {
|
if (e.startDateTime.date.year < tizen.time.getCurrentDateTime()
|
||||||
|
.getFullYear()) {
|
||||||
startedBeforeToday = true;
|
startedBeforeToday = true;
|
||||||
} else if(e.startDateTime.date.month < tizen.time.getCurrentDateTime().getMonth() + 1) {
|
} else if (e.startDateTime.date.month < tizen.time
|
||||||
|
.getCurrentDateTime().getMonth() + 1) {
|
||||||
startedBeforeToday = true;
|
startedBeforeToday = true;
|
||||||
} else if(e.startDateTime.date.day < tizen.time.getCurrentDateTime().getDate()) {
|
} else if (e.startDateTime.date.day < tizen.time
|
||||||
|
.getCurrentDateTime().getDate()) {
|
||||||
startedBeforeToday = true;
|
startedBeforeToday = true;
|
||||||
} else {
|
} else {
|
||||||
continue;
|
continue;
|
||||||
@ -572,16 +663,22 @@ var flagDigital = true;
|
|||||||
}
|
}
|
||||||
|
|
||||||
// check if not today
|
// check if not today
|
||||||
if(e.stopDateTime.date.year !== tizen.time.getCurrentDateTime().getFullYear() ||
|
if (e.stopDateTime.date.year !== tizen.time.getCurrentDateTime()
|
||||||
e.stopDateTime.date.month !== tizen.time.getCurrentDateTime().getMonth() + 1 ||
|
.getFullYear()
|
||||||
e.stopDateTime.date.day !== tizen.time.getCurrentDateTime().getDate()){
|
|| e.stopDateTime.date.month !== tizen.time
|
||||||
|
.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().getFullYear()) {
|
if (e.stopDateTime.date.year > tizen.time.getCurrentDateTime()
|
||||||
|
.getFullYear()) {
|
||||||
endsAfterToday = true;
|
endsAfterToday = true;
|
||||||
} else if(e.stopDateTime.date.month > tizen.time.getCurrentDateTime().getMonth() + 1) {
|
} else if (e.stopDateTime.date.month > tizen.time
|
||||||
|
.getCurrentDateTime().getMonth() + 1) {
|
||||||
endsAfterToday = true;
|
endsAfterToday = true;
|
||||||
} else if(e.stopDateTime.date.day > tizen.time.getCurrentDateTime().getDate()) {
|
} else if (e.stopDateTime.date.day > tizen.time
|
||||||
|
.getCurrentDateTime().getDate()) {
|
||||||
endsAfterToday = true;
|
endsAfterToday = true;
|
||||||
} else {
|
} else {
|
||||||
continue;
|
continue;
|
||||||
@ -593,41 +690,47 @@ var flagDigital = true;
|
|||||||
|
|
||||||
var startTime = 0;
|
var startTime = 0;
|
||||||
if (!startedBeforeToday) {
|
if (!startedBeforeToday) {
|
||||||
startTime = e.startDateTime.time.hour + e.startDateTime.time.minute / 60;
|
startTime = e.startDateTime.time.hour
|
||||||
|
+ e.startDateTime.time.minute / 60;
|
||||||
}
|
}
|
||||||
var stopTime = 24;
|
var stopTime = 24;
|
||||||
if (!endsAfterToday) {
|
if (!endsAfterToday) {
|
||||||
stopTime = e.stopDateTime.time.hour + e.stopDateTime.time.minute / 60;
|
stopTime = e.stopDateTime.time.hour
|
||||||
|
+ 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, hourToAngle(startTime), hourToAngle(stopTime), startedBeforeToday, endsAfterToday);
|
renderArc(ctxContent, center, edge, thickness, e.color,
|
||||||
|
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, hourToAngle(startTime), hourToAngle(stopTime), true, true);
|
renderArc(ctxContent, center, edge, thickness, e.color,
|
||||||
|
hourToAngle(startTime), hourToAngle(stopTime), true,
|
||||||
|
true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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", hourToAngle(20), hourToAngle(20+0.999))
|
renderSimpleArc(ctxContent, center, 115, 8, "#FFFFFF",
|
||||||
|
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", i*15-0.8, i*15+0.8);
|
renderSimpleArc(ctxContent, center, edge, thickness, "#000000",
|
||||||
|
i * 15 - 0.8, i * 15 + 0.8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawMissionControl(datetime) {
|
function drawMissionControl(datetime) {
|
||||||
var strHours = document.getElementById("str-hours"),
|
var strHours = document.getElementById("str-hours"), strConsole = document
|
||||||
strConsole = document.getElementById("str-console"),
|
.getElementById("str-console"), strMinutes = document
|
||||||
strMinutes = document.getElementById("str-minutes"),
|
.getElementById("str-minutes"), datetime = tizen.time
|
||||||
datetime = tizen.time.getCurrentDateTime(),
|
.getCurrentDateTime(), hour = datetime.getHours(), minute = datetime
|
||||||
hour = datetime.getHours(),
|
.getMinutes();
|
||||||
minute = datetime.getMinutes();
|
|
||||||
|
|
||||||
strHours.innerHTML = hour;
|
strHours.innerHTML = hour;
|
||||||
strMinutes.innerHTML = minute;
|
strMinutes.innerHTML = minute;
|
||||||
@ -648,16 +751,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,
|
* Sets to background image as BACKGROUND_URL, and starts timer for normal
|
||||||
* and starts timer for normal digital watch mode.
|
* digital watch mode.
|
||||||
|
*
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
function initDigitalWatch() {
|
function initDigitalWatch() {
|
||||||
@ -674,11 +777,29 @@ 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() {
|
||||||
@ -703,10 +824,12 @@ 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 wakes up
|
// add eventListener to update the screen immediately when the device
|
||||||
|
// 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
|
||||||
@ -717,6 +840,7 @@ var flagDigital = true;
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Initiates the application
|
* Initiates the application
|
||||||
|
*
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
function init() {
|
function init() {
|
||||||
@ -728,11 +852,20 @@ 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;
|
||||||
|
Loading…
Reference in New Issue
Block a user