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

edited minute visualization

Browse Source
This commit is contained in:
Raphael Maenle
2020-03-14 10:03:19 +01:00
parent 8a1d8c6882
commit 0789c5456f
12 changed files with 773 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
js/app.js
View File

@@ -14,6 +14,9 @@
* limitations under the License.
*/
var events;
var eventsTimeStamp = 0;
(function() {
var canvasLayout,
canvasContent,
@@ -27,12 +30,34 @@
xhr.open('GET', path, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
console.log("status " + this.status);
if (this.status == 0) {
var file = new File([this.response], 'temp');
var fileReader = new FileReader();
fileReader.addEventListener('load', function(){
console.log(fileReader.result);
events = JSON.parse(fileReader.result);
var onError = function(e) {
console.log('Error!' + e.message);
};
var onResolveSuccess = function(dir) {
var onListFilesSuccess = function(files) {
files.forEach(function(file) {
if (!file.isDirectory) {
dir.deleteFile(file.fullPath, onDeleteSuccess, onError);
}
});
};
dir.listFiles(onListFilesSuccess, onError);
};
var onDeleteSuccess = function() {};
tizen.filesystem.resolve('/opt/usr/media/Downloads', onResolveSuccess, onError);
});
fileReader.readAsText(file);
}
@@ -41,7 +66,7 @@
}
function getJSON() {
var downloadRequest = new tizen.DownloadRequest('http://download.tizen.org/tools/README.txt', 'downloads');
var downloadRequest = new tizen.DownloadRequest('http://raphael.maenle.net/calendarevents.json', 'downloads');
tizen.systeminfo.getPropertyValue('NETWORK', function(networkInfo) {
if (networkInfo.networkType === 'NONE') {
console.log('Network connection is not available.Download is not possible.');
@@ -51,9 +76,7 @@
var listener = {
/* When the download progresses (interval is platform-dependent) */
onprogress: function(id, receivedSize, totalSize) {
console.log('Received with id: ' + id + ', ' + receivedSize + '/' + totalSize);
},
onprogress: function(id, receivedSize, totalSize) {},
/* When the user pauses the download */
onpaused: function(id) {
@@ -68,7 +91,6 @@
/* When the download is completed */
oncompleted: function(id, fullPath) {
console.log('Completed with id: ' + id + ', full path: ' + fullPath);
readJSON(fullPath);
},
@@ -77,10 +99,7 @@
console.log('Failed with id: ' + id + ', error name: ' + error.name);
}
};
console.log("starting download");
downloadId = tizen.download.start(downloadRequest, listener);
console.log(tizen.download.getState(downloadId));
console.log("done");
}
/**
@@ -108,17 +127,27 @@
* @param {number} radius - the radius of the circle
* @param {string} color - the color of the circle
*/
function renderArc(context, center, radius, color, startAngle, endAngle) {
function renderArc(context, center, radius, color, startAngle, endAngle, hardStart, hardStop) {
if(hardStart == undefined)
hardStart = false;
if(hardStop == undefined)
hardStop= false;
context.save();
context.beginPath();
seperation = 5;
startAngle += seperation;
if(!hardStart)
startAngle += seperation;
if(startAngle >= 360)
startAngle -= 360;
endAngle -= seperation;
if(!hardStop)
endAngle -= seperation;
if(endAngle<0)
endAngle += 360;
context.arc(center.x, center.y, radius, startAngle * Math.PI / 180., endAngle * Math.PI / 180.);
@@ -128,8 +157,10 @@
context.stroke();
context.restore();
renderCircle(context, polToCart(radius, startAngle), 9, color);
renderCircle(context, polToCart(radius, endAngle), 9, color);
if(!hardStart)
renderCircle(context, polToCart(radius, startAngle), 9, color);
if(!hardStop)
renderCircle(context, polToCart(radius, endAngle), 9, color);
}
function polToCart(radius, angle) {
@@ -141,7 +172,23 @@
}
function hourToAngle(hour) {
if(hour >= 18)
hour -= 18;
else
hour += 6;
angle = (hour) * 15;
return angle;
}
function minuteToAngle(minute) {
if(minute >= 15)
minute -= 15;
else
minute += 45;
angle = (minute / 60) * 360;
return angle;
}
/**
@@ -173,6 +220,29 @@
context.closePath();
context.restore();
}
/**
* Renders the 24h sun around the watch
*/
function renderSun(date, hour, minute, second) {
if(hour > 6 && hour < 18)
sunColor = "#FFD700";
else {
sunColor = "#C0C0C0"
}
sunDistance = document.body.clientWidth / 2 - 60;
renderCircle(ctxContent, polToCart(sunDistance, hourToAngle(hour + minute / 60)), 16, sunColor);
}
function renderEarth(date, minute, second) {
earthColor = "#0077BE";
earthDistance = document.body.clientWidth / 2 - 120;
renderCircle(ctxContent, polToCart(earthDistance, minuteToAngle(minute + second / 60)), 10, earthColor);
}
/**
* Renders text at a specific center, radius, and color
@@ -234,7 +304,8 @@
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");
}
/**
@@ -250,38 +321,104 @@
// Clear canvas
ctxContent.clearRect(0, 0, ctxContent.canvas.width, ctxContent.canvas.height);
// Draw the hour needle
renderNeedle(ctxContent, Math.PI * (((hour + minute / 60) / 6) - 0.5), 0, 0.50, 3, "#454545");
renderSun(date, hour, minute, second);
// Draw the minute needle
renderNeedle(ctxContent, Math.PI * (((minute + second / 60) / 30) - 0.5), 0, 0.70, 3, "#454545");
renderEarth(ctxContent, minute, second);
// renderNeedle(ctxContent, Math.PI * (((minute + second / 60) / 30) - 0.5), 0, 0.70, 3, "#454545");
// Draw the minute/hour circle
// renderCircle(ctxContent, center, 8, "#454545");
thickness = 18;
edge = document.body.clientWidth / 2 - thickness / 2 - 2;
renderArc(ctxContent, center, edge, "#808080", 75, 195); // sleep
renderArc(ctxContent, center, edge, "#FF0000", 210, 277.5); // work
renderArc(ctxContent, center, edge, "#FFFF00", 277.5, 292.5); // lunch
renderArc(ctxContent, center, edge, "#FF0000", 292.5, 352.5); // work
// Draw the second needle
ctxContent.shadowOffsetX = 4;
ctxContent.shadowOffsetY = 4;
renderNeedle(ctxContent, Math.PI * ((second / 30) - 0.5), -0.10, 0.85, 1, "#c4c4c4");
// ctxContent.shadowOffsetX = 4;
// ctxContent.shadowOffsetY = 4;
// renderNeedle(ctxContent, Math.PI * ((second / 30) - 0.5), -0.10, 0.85, 1, "#c4c4c4");
// Draw the second circle
ctxContent.shadowOffsetX = 0;
ctxContent.shadowOffsetY = 0;
renderCircle(ctxContent, center, 5, "#c4c4c4");
// ctxContent.shadowOffsetX = 0;
// ctxContent.shadowOffsetY = 0;
// renderCircle(ctxContent, center, 5, "#c4c4c4");
// Draw the center circle
renderCircle(ctxContent, center, 2, "#454545");
// renderCircle(ctxContent, center, 2, "#454545");
// Draw the text for date
renderText(ctxContent, date, center.x, center.y + (watchRadius * 0.5), 25, "#999999");
// renderText(ctxContent, date, center.x, center.y + (watchRadius * 0.5), 25, "#999999");
if(events == null)
return;
thickness = 18;
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 not today, check if it is an earlier event
if(e.startDateTime.date.year < tizen.time.getCurrentDateTime().getFullYear())
startedBeforeToday = true;
else if(e.startDateTime.date.month < tizen.time.getCurrentDateTime().getMonth() + 1)
startedBeforeToday = true;
else if(e.startDateTime.date.day < tizen.time.getCurrentDateTime().getDate())
startedBeforeToday = true;
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 not check if later date
if(e.startDateTime.date.year > tizen.time.getCurrentDateTime().getFullYear())
endsAfterToday = true;
else if(e.startDateTime.date.month > tizen.time.getCurrentDateTime().getMonth() + 1)
endsAfterToday = true;
else if(e.startDateTime.date.day > tizen.time.getCurrentDateTime().getDate())
endsAfterToday = true;
else
continue;
}
if(startedBeforeToday && endsAfterToday)
continue;
var startTime = 0;
if(!startedBeforeToday)
startTime = e.startDateTime.time.hour + e.startDateTime.time.minute / 60;
var stopTime = 0;
if(!endsAfterToday)
stopTime = e.stopDateTime.time.hour + e.stopDateTime.time.minute / 60;
renderArc(ctxContent, center, edge, e.color, hourToAngle(startTime), hourToAngle(stopTime), startedBeforeToday, endsAfterToday);
}
}
function updateCalendar(offset_ms) {
var d = new Date();
var currentTime = d.getTime();
console.log("current Time: " + currentTime);
if(eventsTimeStamp + offset_ms < currentTime){
console.log("updating Events");
getJSON();
eventsTimeStamp = currentTime;
}
}
/**
@@ -337,6 +474,7 @@
// Update the content of the watch every second
setInterval(function() {
drawWatchContent();
updateCalendar(60000);
}, 1000);
}