adds weather and location callbacks
This commit is contained in:
		
							
								
								
									
										409
									
								
								js/app.js
									
									
									
									
									
								
							
							
						
						
									
										409
									
								
								js/app.js
									
									
									
									
									
								
							@@ -14,30 +14,25 @@
 | 
			
		||||
 * limitations under the License. 	
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
/* 'downloads' for debugging, 
 | 
			
		||||
 * 'wgt-private' for any release */
 | 
			
		||||
var STORAGE_SPACE = "downloads";
 | 
			
		||||
var SHORT_WAIT = 10000;
 | 
			
		||||
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 events = null;
 | 
			
		||||
var weather = null;
 | 
			
		||||
var deviceFingerprint = null;
 | 
			
		||||
var eventsTimeStamp = 0;
 | 
			
		||||
var navigatorTimeStamp = 0;
 | 
			
		||||
var flagDigital = true;
 | 
			
		||||
 | 
			
		||||
(function() {
 | 
			
		||||
    var canvasLayout,
 | 
			
		||||
        canvasContent,
 | 
			
		||||
        ctxLayout,
 | 
			
		||||
        ctxContent,
 | 
			
		||||
        center,
 | 
			
		||||
        watchRadius;
 | 
			
		||||
	var canvasLayout, canvasContent, ctxLayout, ctxContent, center, watchRadius;
 | 
			
		||||
 | 
			
		||||
	var flagConsole = true;
 | 
			
		||||
 | 
			
		||||
    
 | 
			
		||||
	function deleteFile(name, callback) {
 | 
			
		||||
 | 
			
		||||
		/* successful resolution of wgt-private */
 | 
			
		||||
@@ -59,8 +54,9 @@ var flagDigital = true;
 | 
			
		||||
				dir.deleteFile(dirfile.fullPath, function() {
 | 
			
		||||
					console.log("deleted");
 | 
			
		||||
					callback();
 | 
			
		||||
            	},  
 | 
			
		||||
            	function(e) {console.log(e)});
 | 
			
		||||
				}, function(e) {
 | 
			
		||||
					console.log(e)
 | 
			
		||||
				});
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
@@ -76,7 +72,8 @@ var flagDigital = true;
 | 
			
		||||
			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() {
 | 
			
		||||
@@ -86,9 +83,11 @@ var flagDigital = true;
 | 
			
		||||
 | 
			
		||||
		var onResolveSuccess = function(dir) {
 | 
			
		||||
			var onListFilesSuccess = function(files) {
 | 
			
		||||
     	     files.forEach(function(file) {
 | 
			
		||||
				files
 | 
			
		||||
						.forEach(function(file) {
 | 
			
		||||
							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);
 | 
			
		||||
		};
 | 
			
		||||
 | 
			
		||||
     	 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));
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
    	tizen.ppm.requestPermission("http://tizen.org/privilege/mediastorage", onsuccessPermission, onErrorPermission);
 | 
			
		||||
		tizen.ppm.requestPermission("http://tizen.org/privilege/mediastorage",
 | 
			
		||||
				onsuccessPermission, onErrorPermission);
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
    function readJSON() {
 | 
			
		||||
    	/* - requests permission to view media storage
 | 
			
		||||
    	 * - resolves the file 'calendarevents'
 | 
			
		||||
    	 * - opens stream and reads entire file as json
 | 
			
		||||
	function readWeatherJSON() {
 | 
			
		||||
		/*
 | 
			
		||||
		 * - 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", function() {
 | 
			
		||||
    		console.log("getting device fingerprint from server");
 | 
			
		||||
    		getJsonFile("devicefingerprint", function(df) {deviceFingerprint = df; console.log(deviceFingerprint);});
 | 
			
		||||
		getJsonFile("weather", function(newweather) {
 | 
			
		||||
			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() {
 | 
			
		||||
		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() {
 | 
			
		||||
		// check if device id set already as global, if it is return
 | 
			
		||||
@@ -171,20 +190,26 @@ var flagDigital = true;
 | 
			
		||||
			if (df !== null) {
 | 
			
		||||
				deviceFingerprint = df;
 | 
			
		||||
			} else {
 | 
			
		||||
    			// otherwise, ask the longitude server for a device fingerprint file
 | 
			
		||||
				// otherwise, ask the longitude server for a device fingerprint
 | 
			
		||||
				// file
 | 
			
		||||
				getNewFingerprintFromServer();
 | 
			
		||||
			}
 | 
			
		||||
		});
 | 
			
		||||
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
    function getFileFromServer(route, callback) {
 | 
			
		||||
	function getFileFromServer(route, server, callback) {
 | 
			
		||||
		console.log("getting file");
 | 
			
		||||
    	var server = "https://longitudecalendar.com/";
 | 
			
		||||
    	var downloadRequest = new tizen.DownloadRequest(server + route, STORAGE_SPACE);
 | 
			
		||||
    	tizen.systeminfo.getPropertyValue('NETWORK', function(networkInfo) {
 | 
			
		||||
		var server = server;
 | 
			
		||||
		var downloadRequest = new tizen.DownloadRequest(server + route,
 | 
			
		||||
				STORAGE_SPACE);
 | 
			
		||||
		tizen.systeminfo
 | 
			
		||||
				.getPropertyValue(
 | 
			
		||||
						'NETWORK',
 | 
			
		||||
						function(networkInfo) {
 | 
			
		||||
							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;
 | 
			
		||||
							}
 | 
			
		||||
						});
 | 
			
		||||
@@ -207,19 +232,21 @@ var flagDigital = true;
 | 
			
		||||
 | 
			
		||||
			/* When the download is completed */
 | 
			
		||||
			oncompleted : function(id, fullPath) {
 | 
			
		||||
                console.log('Completed with id: ' + id + ', full path: ' + fullPath);
 | 
			
		||||
				console.log('Completed with id: ' + id + ', full path: '
 | 
			
		||||
						+ fullPath);
 | 
			
		||||
				callback();
 | 
			
		||||
			},
 | 
			
		||||
 | 
			
		||||
			/* When the download fails */
 | 
			
		||||
			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);
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
    function updateCalendar() {
 | 
			
		||||
	async function updateCalendar() {
 | 
			
		||||
 | 
			
		||||
		if (deviceFingerprint === null) {
 | 
			
		||||
			console.log("no fingerprint, loading from file or server");
 | 
			
		||||
@@ -231,7 +258,9 @@ var flagDigital = true;
 | 
			
		||||
		function deleteCallback() {
 | 
			
		||||
			console.log("done");
 | 
			
		||||
			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");
 | 
			
		||||
@@ -240,12 +269,41 @@ var flagDigital = 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
 | 
			
		||||
	 * 
 | 
			
		||||
	 * @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
 | 
			
		||||
	 * @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();
 | 
			
		||||
@@ -259,10 +317,14 @@ var flagDigital = true;
 | 
			
		||||
 | 
			
		||||
	/**
 | 
			
		||||
	 * 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
 | 
			
		||||
	 * @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 renderRing(context, center, radius, width, color) {
 | 
			
		||||
		context.save();
 | 
			
		||||
@@ -275,12 +337,13 @@ var flagDigital = true;
 | 
			
		||||
		context.restore();
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    function renderSimpleArc(context, center, radius, thickness, color, startAngle, endAngle) {
 | 
			
		||||
	function renderSimpleArc(context, center, radius, thickness, color,
 | 
			
		||||
			startAngle, endAngle) {
 | 
			
		||||
		context.save();
 | 
			
		||||
		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.strokeStyle = color;
 | 
			
		||||
		context.lineWidth = thickness;
 | 
			
		||||
@@ -289,12 +352,17 @@ var flagDigital = true;
 | 
			
		||||
	}
 | 
			
		||||
	/**
 | 
			
		||||
	 * 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
 | 
			
		||||
	 * @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, thickness, color, startAngle, endAngle, hardStart, hardStop) {
 | 
			
		||||
	function renderArc(context, center, radius, thickness, color, startAngle,
 | 
			
		||||
			endAngle, hardStart, hardStop) {
 | 
			
		||||
 | 
			
		||||
		if (hardStart == undefined) {
 | 
			
		||||
			hardStart = false;
 | 
			
		||||
@@ -315,7 +383,8 @@ var flagDigital = true;
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
		if (arcsize < 2 * seperation) {
 | 
			
		||||
        	renderCircle(context, polToCart(radius, startAngle + arcsize /2 ), 9, color);
 | 
			
		||||
			renderCircle(context, polToCart(radius, startAngle + arcsize / 2),
 | 
			
		||||
					9, color);
 | 
			
		||||
			return;
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
@@ -339,7 +408,8 @@ var flagDigital = true;
 | 
			
		||||
		context.save();
 | 
			
		||||
		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.strokeStyle = color;
 | 
			
		||||
		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
 | 
			
		||||
     * @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
 | 
			
		||||
	 * @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;
 | 
			
		||||
		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();
 | 
			
		||||
@@ -421,27 +496,35 @@ var flagDigital = true;
 | 
			
		||||
			sunColor = "#C0C0C0"
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
    	sunDistance = document.body.clientWidth / 2 - 60;
 | 
			
		||||
        renderCircle(ctxContent, polToCart(sunDistance, hourToAngle(hour + minute / 60)), 16, sunColor);    	
 | 
			
		||||
		sunDistance = document.body.clientWidth / 2 - 80;
 | 
			
		||||
		renderCircle(ctxContent, polToCart(sunDistance, hourToAngle(hour
 | 
			
		||||
				+ minute / 60)), 22, sunColor);
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	function renderEarth(date, minute, second) {
 | 
			
		||||
 | 
			
		||||
		var earthColor = "#0077BE";
 | 
			
		||||
		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
 | 
			
		||||
	 * 
 | 
			
		||||
	 * @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
 | 
			
		||||
	 * @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();
 | 
			
		||||
@@ -457,57 +540,50 @@ var flagDigital = true;
 | 
			
		||||
 | 
			
		||||
	/**
 | 
			
		||||
	 * Draws the basic layout of the watch
 | 
			
		||||
	 * 
 | 
			
		||||
	 * @private
 | 
			
		||||
	 */
 | 
			
		||||
	function drawWatchLayout() {
 | 
			
		||||
 | 
			
		||||
		// 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
 | 
			
		||||
		/*
 | 
			
		||||
        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");
 | 
			
		||||
		 * 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");
 | 
			
		||||
        }
 | 
			
		||||
		 * 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");
 | 
			
		||||
		// 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();
 | 
			
		||||
 | 
			
		||||
		// 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.getSeconds(),
 | 
			
		||||
        	date = datetime.getDate();
 | 
			
		||||
		var hour = datetime.getHours(), minute = datetime.getMinutes(), second = datetime
 | 
			
		||||
				.getSeconds(), date = datetime.getDate();
 | 
			
		||||
 | 
			
		||||
		if (DESIGN === 0) {
 | 
			
		||||
			renderSun(date, hour, minute, second);
 | 
			
		||||
@@ -516,7 +592,6 @@ var flagDigital = true;
 | 
			
		||||
			drawMissionControl();
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		/* if no return from server yet */
 | 
			
		||||
		if (events === null) {
 | 
			
		||||
			return;
 | 
			
		||||
@@ -526,7 +601,8 @@ var flagDigital = true;
 | 
			
		||||
		if (events.kind === "not found") {
 | 
			
		||||
			deviceFingerprint = null;
 | 
			
		||||
			events = null;
 | 
			
		||||
        	deleteFile("devicefingerprint", function() {});
 | 
			
		||||
			deleteFile("devicefingerprint", function() {
 | 
			
		||||
			});
 | 
			
		||||
			wait_time = SHORT_WAIT;
 | 
			
		||||
			return;
 | 
			
		||||
		}
 | 
			
		||||
@@ -535,7 +611,17 @@ var flagDigital = true;
 | 
			
		||||
			wait_time = SHORT_WAIT;
 | 
			
		||||
			if (deviceFingerprint === null) {
 | 
			
		||||
			} 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;
 | 
			
		||||
		}
 | 
			
		||||
@@ -549,22 +635,27 @@ var flagDigital = true;
 | 
			
		||||
		console.log("switched to long wait");
 | 
			
		||||
		wait_time = LONG_WAIT;
 | 
			
		||||
 | 
			
		||||
        
 | 
			
		||||
		for ( var event in events.events) {
 | 
			
		||||
			var startedBeforeToday = false;
 | 
			
		||||
			var endsAfterToday = false;
 | 
			
		||||
			var e = events.events[event];
 | 
			
		||||
			// check if not today
 | 
			
		||||
        	if(e.startDateTime.date.year !== tizen.time.getCurrentDateTime().getFullYear() ||
 | 
			
		||||
        	   e.startDateTime.date.month !== tizen.time.getCurrentDateTime().getMonth() + 1 || 
 | 
			
		||||
        	   e.startDateTime.date.day !== tizen.time.getCurrentDateTime().getDate()){
 | 
			
		||||
			if (e.startDateTime.date.year !== tizen.time.getCurrentDateTime()
 | 
			
		||||
					.getFullYear()
 | 
			
		||||
					|| 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(e.startDateTime.date.year < tizen.time.getCurrentDateTime().getFullYear()) {
 | 
			
		||||
				if (e.startDateTime.date.year < tizen.time.getCurrentDateTime()
 | 
			
		||||
						.getFullYear()) {
 | 
			
		||||
					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;
 | 
			
		||||
        		} else if(e.startDateTime.date.day < tizen.time.getCurrentDateTime().getDate()) {
 | 
			
		||||
				} else if (e.startDateTime.date.day < tizen.time
 | 
			
		||||
						.getCurrentDateTime().getDate()) {
 | 
			
		||||
					startedBeforeToday = true;
 | 
			
		||||
				} else {
 | 
			
		||||
					continue;
 | 
			
		||||
@@ -572,16 +663,22 @@ var flagDigital = true;
 | 
			
		||||
			}
 | 
			
		||||
 | 
			
		||||
			// check if not today
 | 
			
		||||
        	if(e.stopDateTime.date.year !== tizen.time.getCurrentDateTime().getFullYear() ||
 | 
			
		||||
        	   e.stopDateTime.date.month !== tizen.time.getCurrentDateTime().getMonth() + 1 || 
 | 
			
		||||
        	   e.stopDateTime.date.day !== tizen.time.getCurrentDateTime().getDate()){
 | 
			
		||||
			if (e.stopDateTime.date.year !== tizen.time.getCurrentDateTime()
 | 
			
		||||
					.getFullYear()
 | 
			
		||||
					|| e.stopDateTime.date.month !== tizen.time
 | 
			
		||||
							.getCurrentDateTime().getMonth() + 1
 | 
			
		||||
					|| e.stopDateTime.date.day !== tizen.time
 | 
			
		||||
							.getCurrentDateTime().getDate()) {
 | 
			
		||||
 | 
			
		||||
				// 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;
 | 
			
		||||
        		} else if(e.stopDateTime.date.month > tizen.time.getCurrentDateTime().getMonth() + 1) {
 | 
			
		||||
				} else if (e.stopDateTime.date.month > tizen.time
 | 
			
		||||
						.getCurrentDateTime().getMonth() + 1) {
 | 
			
		||||
					endsAfterToday = true;
 | 
			
		||||
        		} else if(e.stopDateTime.date.day > tizen.time.getCurrentDateTime().getDate()) {
 | 
			
		||||
				} else if (e.stopDateTime.date.day > tizen.time
 | 
			
		||||
						.getCurrentDateTime().getDate()) {
 | 
			
		||||
					endsAfterToday = true;
 | 
			
		||||
				} else {
 | 
			
		||||
					continue;
 | 
			
		||||
@@ -593,41 +690,47 @@ var flagDigital = true;
 | 
			
		||||
 | 
			
		||||
			var startTime = 0;
 | 
			
		||||
			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;
 | 
			
		||||
			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) {
 | 
			
		||||
				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) {
 | 
			
		||||
				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) {
 | 
			
		||||
		} else if (DESIGN === 1) {
 | 
			
		||||
			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++) {
 | 
			
		||||
    	    	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) {
 | 
			
		||||
            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();
 | 
			
		||||
		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;
 | 
			
		||||
		strMinutes.innerHTML = minute;
 | 
			
		||||
@@ -648,16 +751,16 @@ var flagDigital = true;
 | 
			
		||||
				strConsole.style.visibility = "hidden";
 | 
			
		||||
				flagConsole = true;
 | 
			
		||||
			}
 | 
			
		||||
            }
 | 
			
		||||
            else {
 | 
			
		||||
		} else {
 | 
			
		||||
			strConsole.style.visibility = "visible";
 | 
			
		||||
			flagConsole = false;
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	/**
 | 
			
		||||
         * Sets to background image as BACKGROUND_URL,
 | 
			
		||||
         * and starts timer for normal digital watch mode.
 | 
			
		||||
	 * Sets to background image as BACKGROUND_URL, and starts timer for normal
 | 
			
		||||
	 * digital watch mode.
 | 
			
		||||
	 * 
 | 
			
		||||
	 * @private
 | 
			
		||||
	 */
 | 
			
		||||
	function initDigitalWatch() {
 | 
			
		||||
@@ -674,11 +777,29 @@ var flagDigital = true;
 | 
			
		||||
			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
 | 
			
		||||
	 * 
 | 
			
		||||
	 * @private
 | 
			
		||||
	 */
 | 
			
		||||
	function setDefaultVariables() {
 | 
			
		||||
@@ -703,10 +824,12 @@ var flagDigital = true;
 | 
			
		||||
 | 
			
		||||
	/**
 | 
			
		||||
	 * Set default event listeners
 | 
			
		||||
	 * 
 | 
			
		||||
	 * @private
 | 
			
		||||
	 */
 | 
			
		||||
	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() {
 | 
			
		||||
			if (!document.hidden) {
 | 
			
		||||
				// Draw the content of the watch
 | 
			
		||||
@@ -717,6 +840,7 @@ var flagDigital = true;
 | 
			
		||||
 | 
			
		||||
	/**
 | 
			
		||||
	 * Initiates the application
 | 
			
		||||
	 * 
 | 
			
		||||
	 * @private
 | 
			
		||||
	 */
 | 
			
		||||
	function init() {
 | 
			
		||||
@@ -728,11 +852,20 @@ var flagDigital = true;
 | 
			
		||||
		drawWatchLayout();
 | 
			
		||||
		drawWatchContent();
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		// Update the content of the watch every second
 | 
			
		||||
		setInterval(function() {
 | 
			
		||||
			drawWatchContent();
 | 
			
		||||
			loopCalendar(wait_time);
 | 
			
		||||
			loopNavigator(wait_time);
 | 
			
		||||
 | 
			
		||||
		}, 1000);
 | 
			
		||||
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	function errorCallback(error) {
 | 
			
		||||
		console.log("error");
 | 
			
		||||
		console.log(error);
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	window.onload = init;
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user