diff --git a/calenderwatch_client.wgt b/calenderwatch_client.wgt
new file mode 100644
index 0000000..c399ac3
Binary files /dev/null and b/calenderwatch_client.wgt differ
diff --git a/css/style.css b/css/style.css
index d47f9cd..92e3d86 100644
--- a/css/style.css
+++ b/css/style.css
@@ -3,6 +3,8 @@ html, body {
height: 100%;
margin: 0;
overflow-y: hidden;
+ font-family: "Courier New", Courier, monospace;
+
}
#container {
@@ -19,9 +21,62 @@ html, body {
z-index: 1;
}
+
#canvas-content {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
+}
+
+/*
+hour&minutes
+*/
+#digital-body {
+ position: absolute;
+ width: 50%;
+ width: 360px;
+ height: 360px;
+ top: 0px;
+ left: 0px;
+ background-size: 100%;
+ background-repeat: no-repeat;
+ overflow: hidden;
+}
+
+#rec-time {
+ margin: 0;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+}
+
+#str-hours {
+ font-size: 450%;
+ font-style: bold;
+ float: left;
+ color: white;
+}
+
+#str-console {
+ font-size: 450%;
+ font-style: bold;
+ float: left;
+ color: white;
+}
+
+#str-minutes {
+ font-size: 450%;
+ font-style: bold;
+ float: left;
+ color: white;
+ font-family: "Courier New", Courier, monospace;
+}
+
+#str-ampm {
+ font-size: 200%;
+ color: white;
+ padding-top: 20%;
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 66de0dc..a552865 100644
--- a/index.html
+++ b/index.html
@@ -10,10 +10,12 @@
+
+
diff --git a/js/app.js b/js/app.js
index a26a4a2..2add72a 100644
--- a/js/app.js
+++ b/js/app.js
@@ -17,13 +17,15 @@
/* 'downloads' for debugging,
* 'wgt-private' for any release */
-var STORAGE_SPACE = "wgt-private";
+var STORAGE_SPACE = "downloads";
var SHORT_WAIT = 10000;
-var LONG_WAIT = 600000;
+var LONG_WAIT = 30000; // 600000
+var DESIGN = 1; // 0 - longitude, 1 - mission control
var wait_time = LONG_WAIT;
var events = null;
var deviceFingerprint = null;
var eventsTimeStamp = 0;
+var flagDigital = true;
(function() {
var canvasLayout,
@@ -33,6 +35,8 @@ var eventsTimeStamp = 0;
center,
watchRadius;
+ var flagConsole = true;
+
function deleteFile(name, callback) {
@@ -148,34 +152,35 @@ var eventsTimeStamp = 0;
}
function getNewFingerprintFromServer() {
- getFileFromServer("/devicefingerprint.json", function() {
- console.log("getting device fingerprint from server")
- getJsonFile("devicefingerprint", function(df) {devicefingerprint = df; console.log(devicefingerprint)});
+ getFileFromServer("devicefingerprint.json", 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
- if(deviceFingerprint != null)
+ if(deviceFingerprint !== null) {
return;
+ }
// otherwise, check if there is a devicefingerprint file in wgt-private
// if there is, open it up and get your device ID from it
getJsonFile("devicefingerprint", function(df) {
- if(df != null) {
+ if(df !== null) {
deviceFingerprint = df;
} else {
// otherwise, ask the longitude server for a device fingerprint file
getNewFingerprintFromServer();
}
- })
+ });
}
function getFileFromServer(route, callback) {
console.log("getting file");
- var server = "https://longitudecalendar.com/"
+ var server = "https://longitudecalendar.com/";
var downloadRequest = new tizen.DownloadRequest(server + route, STORAGE_SPACE);
tizen.systeminfo.getPropertyValue('NETWORK', function(networkInfo) {
if (networkInfo.networkType === 'NONE') {
@@ -216,7 +221,7 @@ var eventsTimeStamp = 0;
function updateCalendar() {
- if(deviceFingerprint == null) {
+ if(deviceFingerprint === null) {
console.log("no fingerprint, loading from file or server");
getDeviceFingerprint();
wait_time = SHORT_WAIT;
@@ -252,7 +257,36 @@ var eventsTimeStamp = 0;
context.restore();
}
+ /**
+ * Renders a circle with specific center, radius, and color
+ * @private
+ * @param {object} context - the context for the circle to be placed in
+ * @param {number} radius - the radius of the circle
+ * @param {string} color - the color of the circle
+ */
+ function renderRing(context, center, radius, width, color) {
+ context.save();
+ context.beginPath();
+ context.arc(center.x, center.y, radius, 0, 2 * Math.PI);
+ context.strokeStyle = color;
+ context.lineWidth = width;
+ context.stroke();
+ context.closePath();
+ context.restore();
+ }
+
+ 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.fillStyle = color;
+ context.strokeStyle = color;
+ context.lineWidth = thickness;
+ context.stroke();
+ context.restore();
+ }
/**
* Renders a partial with specific center, radius, and color
* @private
@@ -260,14 +294,16 @@ var eventsTimeStamp = 0;
* @param {number} radius - the radius of the circle
* @param {string} color - the color of the circle
*/
- function renderArc(context, center, radius, color, startAngle, endAngle, hardStart, hardStop) {
+ function renderArc(context, center, radius, thickness, color, startAngle, endAngle, hardStart, hardStop) {
- if(hardStart == undefined)
+ if(hardStart == undefined) {
hardStart = false;
- if(hardStop == undefined)
+ }
+ if(hardStop == undefined) {
hardStop= false;
+ }
- seperation = 5;
+ var seperation = 3;
// if arc size smaller than separation for circles or circle,
// draw a circle
@@ -283,27 +319,30 @@ var eventsTimeStamp = 0;
return;
}
- if(!hardStart)
+ if(!hardStart) {
startAngle += seperation;
+ }
- if(startAngle >= 360)
+ if(startAngle >= 360) {
startAngle -= 360;
+ }
- if(!hardStop)
+ if(!hardStop) {
endAngle -= seperation;
+ }
- if(endAngle<0)
+ if(endAngle<0) {
endAngle += 360;
+ }
-
- // else draw an arc and two circles
+ // otherwise draw an arc and two circles
context.save();
context.beginPath();
context.arc(center.x, center.y, radius, startAngle * Math.PI / 180., endAngle * Math.PI / 180.);
context.fillStyle = color;
context.strokeStyle = color;
- context.lineWidth = 18;
+ context.lineWidth = thickness;
context.stroke();
context.restore();
@@ -326,7 +365,7 @@ var eventsTimeStamp = 0;
hour -= 18;
else
hour += 6;
- angle = (hour) * 15;
+ var angle = (hour) * 15;
return angle;
}
@@ -421,12 +460,10 @@ var eventsTimeStamp = 0;
* @private
*/
function drawWatchLayout() {
- var i,
- j;
// Clear canvas
ctxLayout.clearRect(0, 0, ctxLayout.canvas.width, ctxLayout.canvas.height);
-
+
// Draw the background circle
/*
renderCircle(ctxLayout, center, watchRadius, "#000000");
@@ -461,27 +498,32 @@ var eventsTimeStamp = 0;
* @private
*/
function drawWatchContent() {
- var datetime = tizen.time.getCurrentDateTime(),
- hour = datetime.getHours(),
- minute = datetime.getMinutes(),
- second = datetime.getSeconds(),
- date = datetime.getDate();
+ var datetime = tizen.time.getCurrentDateTime();
// Clear canvas
ctxContent.clearRect(0, 0, ctxContent.canvas.width, ctxContent.canvas.height);
- // Draw the hour needle
- renderSun(date, hour, minute, second);
- // Draw the minute needle
-
- renderEarth(ctxContent, minute, second);
-
+
+ var hour = datetime.getHours(),
+ minute = datetime.getMinutes(),
+ second = datetime.getSeconds(),
+ date = datetime.getDate();
+
+ if(DESIGN === 0) {
+ renderSun(date, hour, minute, second);
+ renderEarth(ctxContent, minute, second);
+ } else if(DESIGN === 1) {
+ drawMissionControl();
+ }
+
+
/* if no return from server yet */
- if(events == null)
+ if(events === null) {
return;
+ }
/* if device not on server anymore */
- if(events.kind == "not found") {
+ if(events.kind === "not found") {
deviceFingerprint = null;
events = null;
deleteFile("devicefingerprint", function() {});
@@ -489,7 +531,7 @@ var eventsTimeStamp = 0;
return;
}
/* if device not registered */
- if(events.kind == "unregistered") {
+ if(events.kind === "unregistered") {
wait_time = SHORT_WAIT;
if(deviceFingerprint === null) {
} else {
@@ -497,66 +539,133 @@ var eventsTimeStamp = 0;
}
return;
}
+
+ if(DESIGN === 0) {
+ var thickness = 18;
+ } else if(DESIGN === 1) {
+ var thickness = 50;
+ }
console.log("switched to long wait");
wait_time = LONG_WAIT;
- /* else: device registered and all events saved */
- var thickness = 18;
- var edge = document.body.clientWidth / 2 - thickness / 2 - 2;
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
+ } else {
continue;
+ }
}
// 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.startDateTime.date.year > tizen.time.getCurrentDateTime().getFullYear())
+ if(e.stopDateTime.date.year > tizen.time.getCurrentDateTime().getFullYear()) {
endsAfterToday = true;
- else if(e.startDateTime.date.month > tizen.time.getCurrentDateTime().getMonth() + 1)
+ } else if(e.stopDateTime.date.month > tizen.time.getCurrentDateTime().getMonth() + 1) {
endsAfterToday = true;
- else if(e.startDateTime.date.day > tizen.time.getCurrentDateTime().getDate())
+ } else if(e.stopDateTime.date.day > tizen.time.getCurrentDateTime().getDate()) {
endsAfterToday = true;
- else
+ } else {
continue;
+ }
+ }
+ if(startedBeforeToday && endsAfterToday) {
+ continue;
}
- if(startedBeforeToday && endsAfterToday)
- continue;
-
var startTime = 0;
- if(!startedBeforeToday)
+ if(!startedBeforeToday) {
startTime = e.startDateTime.time.hour + e.startDateTime.time.minute / 60;
-
- var stopTime = 0;
- if(!endsAfterToday)
+ }
+ var stopTime = 24;
+ if(!endsAfterToday) {
stopTime = e.stopDateTime.time.hour + e.stopDateTime.time.minute / 60;
-
- renderArc(ctxContent, center, edge, e.color, hourToAngle(startTime), hourToAngle(stopTime), startedBeforeToday, endsAfterToday);
- }
+ }
+
+ 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);
+ } 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);
+ }
+ }
+
+ if(DESIGN === 0) {
+ } else if(DESIGN === 1) {
+ var inner = document.body.clientWidth / 2 - thickness;
+ // renderRing(ctxContent, center, inner, 4, "#FFFFFF");
+ for(var i = 0; i < 24; i++) {
+ 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();
+
+ strHours.innerHTML = hour;
+ strMinutes.innerHTML = minute;
+
+ if (hour < 10) {
+ strHours.innerHTML = "0" + hour;
+ }
+ if (minute < 10) {
+ strMinutes.innerHTML = "0" + minute;
+ }
+
+ // Each 0.5 second the visibility of flagConsole is changed.
+ if(flagDigital) {
+ if (flagConsole) {
+ strConsole.style.visibility = "visible";
+ flagConsole = false;
+ } else {
+ strConsole.style.visibility = "hidden";
+ flagConsole = true;
+ }
+ }
+ else {
+ strConsole.style.visibility = "visible";
+ flagConsole = false;
+ }
+ }
+
+ /**
+ * Sets to background image as BACKGROUND_URL,
+ * and starts timer for normal digital watch mode.
+ * @private
+ */
+ function initDigitalWatch() {
+ flagDigital = true;
+ document.getElementById("digital-body").style.backgroundImage = BACKGROUND_URL;
+ interval = setInterval(updateTime, 500);
+ }
+
function loopCalendar(offset_ms) {
var d = new Date();
var currentTime = d.getTime();
@@ -635,13 +744,13 @@ document.addEventListener('ambientmodechanged', function(ev) {
/* Change the UI for ambient mode */
//updateAmbientWatchFaceDOM(); // function to rearange DOM for AOD mode
-
+ flagDigital = false;
updateTime();
} else {
/* Change the UI for normal mode */
// updateNormalWatchFaceDOM(); // function to rearange DOM for AOD mode
-
+ flagDigital = true;
updateTime();
}
});