Merge branch 'dev' of git.maenle.net:raphael/calenderwatch_client into dev

adds jqurey, removes ':' when in longitude
adds hour indicator
2020-10-02 22:43:31 +02:00 · 2020-10-02 22:42:02 +02:00 · 2020-08-15 10:14:46 +02:00 · 2020-08-13 21:40:31 +02:00 · 2020-08-13 21:04:08 +02:00
6 changed files with 257 additions and 68 deletions
--- a/calenderwatch_client.wgt
+++ b/calenderwatch_client.wgt
--- a/css/JetBrainsMono-Bold.ttf
+++ b/css/JetBrainsMono-Bold.ttf
--- a/css/style.css
+++ b/css/style.css
@ -1,10 +1,23 @@
+
+@font-face{
+    font-family: roboto;
+    src: url('JetBrainsMono-Bold.ttf');
+}
+
+.Roboto{
+    font-family: roboto;
+}
+
 html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow-y: hidden;
+    font-family: "roboto";
+    
 }

+
 #container {
    display: -webkit-flex;
    -webkit-align-items: center;
@ -19,9 +32,62 @@ html, body {
    z-index: 1;
 }

+
 #canvas-content {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
+}
+
+/*
+hour&minutes
+*/
+#digital-body {
+    position: absolute;
+    width: 70%;
+    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: 370%;
+    font-style: bold;
+    float: left;
+    color: white;
+}
+
+#str-console {
+    font-size: 370%;
+    font-style: bold;
+    float: left;
+    color: white;
+    visibility: hidden;
+}
+
+#str-minutes {
+    font-size: 370%;
+    font-style: bold;
+    float: left;
+    color: white;
+}
+
+#str-ampm {
+    font-size: 280%;
+    color: white;
+    padding-top: 20%;
 }
--- a/index.html
+++ b/index.html
@ -6,14 +6,26 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Canvas Watch - Canvas API & Time API" />
    <title>Canvas Watch</title>
+   
    <link rel="stylesheet" type="text/css" href="css/style.css" />
 </head>

 <body>
+
+    <div id="digital-body">
+    	<div id="rec-time">
+    	<div id="str-hours"></div>
+    	<div id="str-console">:</div>
+    	<div id="str-minutes"></div>
+    	</div>
+    </div>
+	
    <div id="container">
        <canvas id="canvas-layout"></canvas>
        <canvas id="canvas-content"></canvas>
    </div>
+    
+
    <script src="js/app.js"></script>
 </body>

--- 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;
+    	    renderSimpleArc(ctxContent, center, 115, 8, "#FFFFFF", hourToAngle(20), hourToAngle(20+0.999))
+    	    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();
    }
 });
--- a/js/jquery-3.5.1.min.js
+++ b/js/jquery-3.5.1.min.js
Author	SHA1	Message	Date
raphael	c46e0be089	Merge branch 'dev' of git.maenle.net:raphael/calenderwatch_client into dev	2020-10-02 22:43:31 +02:00
raphael	433ddb4a68	adds jqurey, removes ':' when in longitude	2020-10-02 22:42:02 +02:00
raphael	d972fbb7ca	adds hour indicator	2020-08-15 10:14:46 +02:00
raphael	84687f3c73	updates font	2020-08-13 21:40:31 +02:00
raphael	dfdcc1780a	adds mission overview design	2020-08-13 21:04:08 +02:00