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

Compare commits

base: raphael:longitude-digital
Branches Tags
raphael:master
raphael:longitude-digital
raphael:weather
raphael:dev
..
compare: raphael:master
Branches Tags
raphael:longitude-digital
raphael:weather
raphael:dev
raphael:master

No commits in common. "longitude-digital" and "master" have entirely different histories.
longitude- ... master

8 changed files with 18 additions and 150 deletions
Show Stats Expand all files Collapse all files

BIN
calenderwatch_client.wgt
View File

Binary file not shown.

BIN
css/CourierPrimeBold.ttf
View File

Binary file not shown.

BIN
css/CourierPrimeSansRegular.ttf
View File

Binary file not shown.

BIN
css/alba.regular.ttf
View File

Binary file not shown.

BIN
css/fabiolo-smallcap-regular.ttf
View File

Binary file not shown.

74
css/style.css
View File

@ -1,16 +1,11 @@
@font-face{ @font-face{
font-family: courier; font-family: roboto;
src: url('CourierPrimeSansRegular.ttf'); src: url('JetBrainsMono-Bold.ttf');
}
@font-face{
font-family: fabiolo;
src: url('fabiolo-smallcap-regular.ttf')
} }
.Roboto{ .Roboto{
font-family: fabiolo; font-family: roboto;
} }
html, body { html, body {
@ -18,7 +13,7 @@ html, body {
height: 100%; height: 100%;
margin: 0; margin: 0;
overflow-y: hidden; overflow-y: hidden;
font-family: "courier"; font-family: "roboto";
} }
@ -27,7 +22,7 @@ html, body {
display: -webkit-flex; display: -webkit-flex;
-webkit-align-items: center; -webkit-align-items: center;
width: 100%; width: 100%;
height: 100%; height: 100%
} }
#canvas-layout { #canvas-layout {
@ -50,6 +45,7 @@ hour&minutes
*/ */
#digital-body { #digital-body {
position: absolute; position: absolute;
width: 70%;
width: 360px; width: 360px;
height: 360px; height: 360px;
top: 0px; top: 0px;
@ -57,83 +53,41 @@ hour&minutes
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
overflow: hidden; 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 { #rec-time {
position: relative; margin: 0;
display: inline-block; position: absolute;
top: 40%; top: 50%;
left: 50%; left: 50%;
-ms-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 1;
} }
#str-hours { #str-hours {
font-size: 450%; font-size: 370%;
font-style: bold; font-style: bold;
letter-spacing: -10px;
float: left; float: left;
color: white; color: white;
width: 80px;
text-align: right;
transform: translate(-5px, 0);
} }
#str-console { #str-console {
font-size: 250%; font-size: 370%;
font-style: bold;
float: left; float: left;
color: white; color: white;
visibility: hidden; visibility: hidden;
transform: translate(-6px, 8px);
} }
#str-minutes { #str-minutes {
font-size: 450%; font-size: 370%;
letter-spacing: -10px; font-style: bold;
float: left; float: left;
color: white; color: white;
width: 70px;
text-align: left;
transform: translate(-15px, 0);
} }
#str-ampm { #str-ampm {
font-size: 280%; font-size: 280%;
color: white; color: white;
padding-top: 20%; 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;
}
} }

3
index.html
View File

@ -13,14 +13,11 @@
<body> <body>
<div id="digital-body"> <div id="digital-body">
<div id="str-just-hours"></div>
<div id="rec-time"> <div id="rec-time">
<div id="str-hours"></div> <div id="str-hours"></div>
<div id="str-console">:</div> <div id="str-console">:</div>
<div id="str-minutes"></div> <div id="str-minutes"></div>
</div> </div>
<div id="str-event"></div>
</div> </div>
<div id="container"> <div id="container">

91
js/app.js
View File

@ -20,7 +20,7 @@
var STORAGE_SPACE = "downloads"; var STORAGE_SPACE = "downloads";
var SHORT_WAIT = 10000; var SHORT_WAIT = 10000;
var LONG_WAIT = 30000; // 600000 var LONG_WAIT = 30000; // 600000
var DESIGN = 2; // 0 - longitude, 1 - mission control, 2 - longitude var DESIGN = 1; // 0 - longitude, 1 - mission control
var wait_time = LONG_WAIT; var wait_time = LONG_WAIT;
var events = null; var events = null;
var deviceFingerprint = null; var deviceFingerprint = null;
@ -240,18 +240,6 @@ var flagDigital = true;
return 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 * Renders a circle with specific center, radius, and color
* @private * @private
@ -437,14 +425,6 @@ var flagDigital = true;
renderCircle(ctxContent, polToCart(sunDistance, hourToAngle(hour + minute / 60)), 16, sunColor); 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) { function renderEarth(date, minute, second) {
var earthColor = "#0077BE"; var earthColor = "#0077BE";
@ -452,17 +432,6 @@ var flagDigital = true;
renderCircle(ctxContent, polToCart(earthDistance, minuteToAngle(minute + second / 60)), 10, earthColor); 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 * Renders text at a specific center, radius, and color
@ -544,10 +513,7 @@ var flagDigital = true;
renderSun(date, hour, minute, second); renderSun(date, hour, minute, second);
renderEarth(ctxContent, minute, second); renderEarth(ctxContent, minute, second);
} else if(DESIGN === 1) { } else if(DESIGN === 1) {
drawDigitalWatch(); drawMissionControl();
} else if(DESIGN === 2) {
renderSmallSun(date, hour, minute, second);
drawDigitalWatch();
} }
@ -578,13 +544,11 @@ var flagDigital = true;
var thickness = 18; var thickness = 18;
} else if(DESIGN === 1) { } else if(DESIGN === 1) {
var thickness = 50; var thickness = 50;
} else if(DESIGN === 2) {
var thickness = 18;
} }
console.log("switched to long wait");
wait_time = LONG_WAIT; wait_time = LONG_WAIT;
var wroteEvent = false;
for(var event in events.events){ for(var event in events.events){
var startedBeforeToday = false; var startedBeforeToday = false;
@ -642,23 +606,9 @@ var flagDigital = true;
} else if(DESIGN === 1) { } else if(DESIGN === 1) {
var edge = document.body.clientWidth / 2 - thickness / 2 - 2; var edge = document.body.clientWidth / 2 - thickness / 2 - 2;
renderArc(ctxContent, center, edge, thickness, e.color, hourToAngle(startTime), hourToAngle(stopTime), true, true); 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) { if(DESIGN === 0) {
} else if(DESIGN === 1) { } else if(DESIGN === 1) {
var inner = document.body.clientWidth / 2 - thickness; var inner = document.body.clientWidth / 2 - thickness;
@ -666,45 +616,12 @@ var flagDigital = true;
for(var i = 0; i < 24; i++) { for(var i = 0; i < 24; i++) {
renderSimpleArc(ctxContent, center, edge, thickness, "#000000", i*15-0.8, i*15+0.8); renderSimpleArc(ctxContent, center, edge, thickness, "#000000", i*15-0.8, i*15+0.8);
} }
} else if(DESIGN === 2) {
} }
} }
function eventNow(event, hour, minute) { function drawMissionControl(datetime) {
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"), var strHours = document.getElementById("str-hours"),
strConsole = document.getElementById("str-console"), strConsole = document.getElementById("str-console"),
strMinutes = document.getElementById("str-minutes"), strMinutes = document.getElementById("str-minutes"),