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

adds digital time and event name

Browse Source
This commit is contained in:
Raphael Maenle 2020-10-11 23:40:08 +02:00
parent feddff3fd6
commit a462151406
5 changed files with 99 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
css/CourierPrimeSansRegular.ttf Normal file
View File

Binary file not shown.

BIN
css/alba.regular.ttf Normal file
View File

Binary file not shown.

68
css/style.css
View File

@ -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,23 +71,44 @@ 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 {
@ -103,3 +116,18 @@ hour&minutes
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;
}
}

3
index.html
View File

@ -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">Hello</div>
</div>
<div id="container">

54
js/app.js
View File

@ -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"
}
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) {
@ -640,6 +663,23 @@ var flagDigital = true;
}
}
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) {