fixes incorrect event name appearnece

adds digital time and event name
updated css with b fabiolo font
2020-10-24 15:31:41 +02:00 · 2020-10-11 23:40:08 +02:00 · 2020-10-03 23:01:23 +02:00 · 2020-10-03 18:40:20 +02:00
8 changed files with 150 additions and 18 deletions
--- a/calenderwatch_client.wgt
+++ b/calenderwatch_client.wgt
--- a/css/CourierPrimeBold.ttf
+++ b/css/CourierPrimeBold.ttf
--- a/css/CourierPrimeSansRegular.ttf
+++ b/css/CourierPrimeSansRegular.ttf
--- a/css/alba.regular.ttf
+++ b/css/alba.regular.ttf
--- a/css/fabiolo-smallcap-regular.ttf
+++ b/css/fabiolo-smallcap-regular.ttf
--- a/css/style.css
+++ b/css/style.css
@@ -1,11 +1,16 @@

@font-face{
-    font-family: roboto;
-    src: url('JetBrainsMono-Bold.ttf');
+    font-family: courier;
+    src: url('CourierPrimeSansRegular.ttf');
+}
+
+@font-face{
+	font-family: fabiolo;
+	src: url('fabiolo-smallcap-regular.ttf')
 }

 .Roboto{
-    font-family: roboto;
+    font-family: fabiolo;
 }

 html, body {
@@ -13,7 +18,7 @@ html, body {
    height: 100%;
    margin: 0;
    overflow-y: hidden;
-    font-family: "roboto";
+    font-family: "courier";
    
 }

@@ -22,7 +27,7 @@ html, body {
    display: -webkit-flex;
    -webkit-align-items: center;
    width: 100%;
-    height: 100%
+    height: 100%;
 }

 #canvas-layout {
@@ -45,7 +50,6 @@ hour&minutes
 */
 #digital-body {
    position: absolute;
-    width: 70%;
    width: 360px;
    height: 360px;
    top: 0px;
@@ -53,41 +57,83 @@ hour&minutes
    background-size: 100%;
    background-repeat: no-repeat;
    overflow: hidden;
+  
+}
+
+#str-just-hours {
+	text-transform: full-width;
+    font-size: 600%;
+    font-style: bold;
+    letter-spacing: -2px;
+    float: left;
+    color: white;
+    width: 90px;
+    text-align: right;
 }

 #rec-time {
-  margin: 0;
-  position: absolute;
-  top: 50%;
+  position: relative;
+  display: inline-block;
+  top: 40%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
+  z-index: 1;
 }

 #str-hours {
-    font-size: 370%;
+    font-size: 450%;
    font-style: bold;
+    letter-spacing: -10px;
    float: left;
    color: white;
+    width: 80px;
+    text-align: right;
+    transform: translate(-5px, 0);
 }

 #str-console {
-    font-size: 370%;
-    font-style: bold;
+    font-size: 250%;
    float: left;
    color: white;
    visibility: hidden;
+    transform: translate(-6px, 8px);
 }

 #str-minutes {
-    font-size: 370%;
-    font-style: bold;
+    font-size: 450%;
+    letter-spacing: -10px;
    float: left;
    color: white;
+    width: 70px;
+    text-align: left;
+    transform: translate(-15px, 0);
+    
 }

 #str-ampm {
    font-size: 280%;
    color: white;
    padding-top: 20%;
+}
+
+#str-event {
+position: absolute;
+  display: inline-block;
+  top:60%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  font-size: 175%;
+  color: white;
+  text-align: center;
+  z-index: 2;
+  line-height: 100%;
+  overflow: hidden;
+   text-overflow: ellipsis;
+   display: -webkit-box;
+   -webkit-line-clamp: 2; /* number of lines to show */
+   -webkit-box-orient: vertical;
+}
+	
 }
--- a/index.html
+++ b/index.html
@@ -13,11 +13,14 @@
 <body>

    <div id="digital-body">
+      	<div id="str-just-hours"></div>
+    
    	<div id="rec-time">
    	<div id="str-hours"></div>
    	<div id="str-console">:</div>
    	<div id="str-minutes"></div>
    	</div>
+    	<div id="str-event"></div>
    </div>
 	
    <div id="container">
--- a/js/app.js
+++ b/js/app.js
@@ -20,7 +20,7 @@
 var STORAGE_SPACE = "downloads";
 var SHORT_WAIT = 10000;
 var LONG_WAIT = 30000; // 600000
-var DESIGN = 1; // 0 - longitude, 1 - mission control
+var DESIGN = 2; // 0 - longitude, 1 - mission control, 2 - longitude
 var wait_time = LONG_WAIT;
 var events = null;
 var deviceFingerprint = null;
@@ -240,6 +240,18 @@ var flagDigital = true;
    	return true;
    }
    
+    function renderLine(context, p1, p2, thickness, color) {
+    	context.save();
+    	context.beginPath();
+    	context.lineCap = "round";
+    	context.lineWidth = thickness;
+    	context.moveTo(p1.x, p1.y);
+    	context.lineTo(p2.x, p2.y);
+    	context.strokeStyle = color;
+    	context.stroke();
+    	context.restore();
+    }
+    
    /**
     * Renders a circle with specific center, radius, and color
     * @private
@@ -425,6 +437,14 @@ var flagDigital = true;
        renderCircle(ctxContent, polToCart(sunDistance, hourToAngle(hour + minute / 60)), 16, sunColor);    	
    }
    
+    function renderSmallSun(date, hour, minute, second) {
+    	
+		sunColor = "#FFD700";
+    	
+    	sunDistance = document.body.clientWidth / 2 - 40;
+        renderCircle(ctxContent, polToCart(sunDistance, hourToAngle(hour + minute / 60)), 10, sunColor);    	
+    }
+    
    function renderEarth(date, minute, second) {
    	
 		var earthColor = "#0077BE";
@@ -432,6 +452,17 @@ var flagDigital = true;
        renderCircle(ctxContent, polToCart(earthDistance, minuteToAngle(minute + second / 60)), 10, earthColor);    	
    }

+    function renderAnalog(hour, minute, second) {
+    	// hour 
+		    	var hourAngle = hourToAngle(hour + minute / 60)*2+180;
+    	renderLine(ctxContent, polToCart(document.body.clientWidth / 2 - 120, hourAngle), polToCart(document.body.clientWidth / 2 - 60, hourAngle), 18, '#ffffff');
+    	renderLine(ctxContent, polToCart(document.body.clientWidth / 2 - 120, hourAngle), polToCart(document.body.clientWidth / 2 - 60, hourAngle), 12, '#000000'); 
+    	// minute
+    	var minuteAngle = minuteToAngle(minute + second / 60);
+    	renderLine(ctxContent, polToCart(document.body.clientWidth / 2 - 120, minuteAngle), polToCart(document.body.clientWidth / 2 - 40, minuteAngle), 18, '#ffffff'); 
+    }
+    
+    

    /**
     * Renders text at a specific center, radius, and color
@@ -513,7 +544,10 @@ var flagDigital = true;
            renderSun(date, hour, minute, second);
            renderEarth(ctxContent, minute, second);
       } else if(DESIGN === 1) {
-        	drawMissionControl();
+        	drawDigitalWatch();
+        } else if(DESIGN === 2) {
+        	 renderSmallSun(date, hour, minute, second);
+        	 drawDigitalWatch();
        }
    	

@@ -544,11 +578,13 @@ var flagDigital = true;
        	var thickness = 18;
        } else if(DESIGN === 1) {
        	var thickness = 50;
+        } else if(DESIGN === 2) {
+        	var thickness = 18;
        }
        
-        console.log("switched to long wait");
        wait_time = LONG_WAIT;
        
+        var wroteEvent = false;
        
        for(var event in events.events){
        	var startedBeforeToday = false;
@@ -606,9 +642,23 @@ var flagDigital = true;
        	} 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);   
+        	} else if(DESIGN === 2) {
+                var edge = document.body.clientWidth / 2 - thickness / 2 - 2;
+        		renderArc(ctxContent, center, edge, thickness, e.color, hourToAngle(startTime), hourToAngle(stopTime), startedBeforeToday, endsAfterToday);     	
        	}
+        	
+            if(eventNow(e, hour, minute)) {
+            	console.log("!!!writing name");
+            	wroteEvent = true;
+            	drawEventName(e.name);
+            }
    	}
        
+        if(!wroteEvent) {
+        	drawEventName("");
+        }
+        
+        
        if(DESIGN === 0) {
    	} else if(DESIGN === 1) {
    		var inner = document.body.clientWidth / 2 - thickness;
@@ -616,12 +666,45 @@ var flagDigital = true;
    	    for(var i = 0; i < 24; i++) {
    	    	renderSimpleArc(ctxContent, center, edge, thickness, "#000000", i*15-0.8, i*15+0.8);
    	    }
+    	} else if(DESIGN === 2) {
+    		
    	}
+        
+

       
    }
    
-    function drawMissionControl(datetime) {
+    function eventNow(event, hour, minute) {
+    	if( ((event.startDateTime.time.hour < hour) || 
+       		 (event.startDateTime.time.hour <= hour &&
+   			event.startDateTime.time.minute <= minute)) ) {
+    		console.log("start before");
+		}
+    	
+    	if( ((event.stopDateTime.time.hour > hour) ||
+       		 (event.stopDateTime.time.hour >= hour &&
+       		event.stopDateTime.time.minute >= minute)) ) {
+    		console.log("stop after");
+    	}
+    	
+    	if( ((event.startDateTime.time.hour < hour) || 
+    		 (event.startDateTime.time.hour <= hour &&
+			event.startDateTime.time.minute <= minute)) &&
+    		((event.stopDateTime.time.hour > hour) ||
+    		 (event.stopDateTime.time.hour >= hour &&
+    		event.stopDateTime.time.minute >= minute)) ){
+    		return true;
+    	}
+    	return false;
+    }
+    
+    function drawEventName(name) {
+        var strEvent = document.getElementById("str-event");
+        strEvent.innerHTML = name;
+    }
+    
+    function drawDigitalWatch(datetime) {
            var strHours = document.getElementById("str-hours"),
                strConsole = document.getElementById("str-console"),
                strMinutes = document.getElementById("str-minutes"),
Author	SHA1	Message	Date
raphael	1152e61384	fixes incorrect event name appearnece	2020-10-24 15:31:41 +02:00
raphael	a462151406	adds digital time and event name	2020-10-11 23:40:08 +02:00
raphael	feddff3fd6	updated css with b fabiolo font	2020-10-03 23:01:23 +02:00
raphael	2770c31e6d	adds scturcture for mixed design	2020-10-03 18:40:20 +02:00