adds mission overview design
This commit is contained in:
parent
4ac6b4b792
commit
dfdcc1780a
BIN
calenderwatch_client.wgt
Normal file
BIN
calenderwatch_client.wgt
Normal file
Binary file not shown.
@ -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%;
|
||||
}
|
||||
@ -10,10 +10,12 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
<canvas id="canvas-layout"></canvas>
|
||||
<canvas id="canvas-content"></canvas>
|
||||
</div>
|
||||
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
245
js/app.js
245
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();
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user