diff --git a/css/CourierPrimeSansRegular.ttf b/css/CourierPrimeSansRegular.ttf
new file mode 100644
index 0000000..32e795a
Binary files /dev/null and b/css/CourierPrimeSansRegular.ttf differ
diff --git a/css/alba.regular.ttf b/css/alba.regular.ttf
new file mode 100644
index 0000000..b366832
Binary files /dev/null and b/css/alba.regular.ttf differ
diff --git a/css/style.css b/css/style.css
index 6515b3d..b45dfa7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,7 +1,7 @@
@font-face{
font-family: courier;
- src: url('CourierPrimeBold.ttf');
+ src: url('CourierPrimeSansRegular.ttf');
}
@font-face{
@@ -10,7 +10,7 @@
}
.Roboto{
- font-family: courier;
+ font-family: fabiolo;
}
html, body {
@@ -18,7 +18,7 @@ html, body {
height: 100%;
margin: 0;
overflow-y: hidden;
- font-family: "fabiolo";
+ font-family: "courier";
}
@@ -60,16 +60,8 @@ hour&minutes
}
-#rec-time {
- position: relative;
- display: inline-block;
- top: 50%;
- left: 50%;
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
-}
-
-#str-hours {
+#str-just-hours {
+ text-transform: full-width;
font-size: 600%;
font-style: bold;
letter-spacing: -2px;
@@ -79,27 +71,63 @@ hour&minutes
text-align: right;
}
-#str-console {
- font-size: 650%;
+#rec-time {
+ 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: 450%;
font-style: bold;
+ letter-spacing: -10px;
+ float: left;
+ color: white;
+ width: 80px;
+ text-align: right;
+ transform: translate(-5px, 0);
+}
+
+#str-console {
+ font-size: 250%;
float: left;
color: white;
visibility: hidden;
- transform: translate(0, -10px);
+ transform: translate(-6px, 8px);
}
#str-minutes {
- font-size: 600%;
- letter-spacing: -2px;
- font-style: bold;
+ font-size: 450%;
+ letter-spacing: -10px;
float: left;
color: white;
- width: 90px;
+ 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: 200%;
+ color: white;
+ text-align: center;
+ z-index: 2;
+}
+
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 33c9294..6d13c6d 100644
--- a/index.html
+++ b/index.html
@@ -13,11 +13,14 @@
diff --git a/js/app.js b/js/app.js
index 51fd853..c5ca379 100644
--- 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 = 2; // 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
@@ -427,14 +439,10 @@ var flagDigital = true;
function renderSmallSun(date, hour, minute, second) {
- if(hour > 6 && hour < 18)
- sunColor = "#FFD700";
- else {
- sunColor = "#C0C0C0"
- }
+ sunColor = "#FFD700";
sunDistance = document.body.clientWidth / 2 - 40;
- renderCircle(ctxContent, polToCart(sunDistance, hourToAngle(hour + minute / 60)), 12, sunColor);
+ renderCircle(ctxContent, polToCart(sunDistance, hourToAngle(hour + minute / 60)), 10, sunColor);
}
function renderEarth(date, minute, second) {
@@ -444,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
@@ -527,8 +546,8 @@ var flagDigital = true;
} else if(DESIGN === 1) {
drawDigitalWatch();
} else if(DESIGN === 2) {
- drawDigitalWatch();
renderSmallSun(date, hour, minute, second);
+ drawDigitalWatch();
}
@@ -626,6 +645,10 @@ var flagDigital = true;
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)) {
+ drawEventName(e);
+ }
}
if(DESIGN === 0) {
@@ -638,8 +661,25 @@ var flagDigital = true;
} else if(DESIGN === 2) {
}
+
+
+ }
+
+ function eventNow(event, hour, minute) {
+ if( event.startDateTime.time.hour <= hour &&
+ event.startDateTime.time.minute <= minute &&
+ event.stopDateTime.time.hour >= hour &&
+ event.stopDateTime.time.minute >= minute) {
+ return true;
+ }
+ return false;
+ }
+
+ function drawEventName(event) {
+ var strEvent = document.getElementById("str-event");
+ strEvent.innerHTML = event.name;
}
function drawDigitalWatch(datetime) {