Skip to content
Snippets Groups Projects
Commit f2e46efb authored by 2deep4real's avatar 2deep4real
Browse files

+ clock2/background.svg [mixed 'background' and 'bieber'] 

+ clock2/style.less
added analogClock to clock-panel
TODO calculate better sizing for analogClock canvas
parent 2b2df0f5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
config/layouts/test.json
+ 1
− 1
View file @ f2e46efb
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
"cut" : 50, "cut" : 50,
"left" : { "left" : {
"type" : "ysplit", "type" : "ysplit",
"cut" : 20, "cut" : 30,
"up" : { "up" : {
"type" : "panel", "type" : "panel",
"name" : "clock2" "name" : "clock2"
......
panels/clock2/background.svg 0 → 100644
+ 2319
− 0
View file @ f2e46efb
Source diff could not be displayed: it is too large. Options to address this: view the blob.
panels/clock2/script.js
+ 161
− 72
View file @ f2e46efb
...@@ -5,12 +5,18 @@ this.loaded = function(panel, config) { ...@@ -5,12 +5,18 @@ this.loaded = function(panel, config) {
var DigitalCanvasClock = function() { var DigitalCanvasClock = function() {
var var
me = this, me = this,
analBGFile = "panels/clock2/biber/background.svg",
analBGImg = new Image(),
useBackground = true, useBackground = true,
usePulse = true, usePulse = true,
clockContainer = panel.find("canvas[data-clock]")[0], digiClock = panel.find("canvas[data-digital-clock]")[0],
clockBackground = null, analClock = panel.find("canvas[data-analog-clock]")[0],
fgc = clockContainer.getContext("2d"), digiBackground = null,
bgc = null, analBackground = null,
dfgc = digiClock ? digiClock.getContext("2d") : null,
dbgc = null,
afgc = analClock ? analClock.getContext("2d") : null,
abgc = null,
bgColor = "#FFF", bgColor = "#FFF",
sdColor = "#DDD", sdColor = "#DDD",
icColor = "#000", icColor = "#000",
...@@ -20,8 +26,8 @@ this.loaded = function(panel, config) { ...@@ -20,8 +26,8 @@ this.loaded = function(panel, config) {
lastSecond = -1, lastSecond = -1,
seperatorOn = false, seperatorOn = false,
// sizes (16:9) // sizes (16:9)
canvasWidth = 0, digitalWidth = 0,
canvasHeight = 0, digitalHeight = 0,
clockWidth = 0, clockWidth = 0,
clockHeight = 0, clockHeight = 0,
clockX = 0, clockX = 0,
...@@ -35,6 +41,10 @@ this.loaded = function(panel, config) { ...@@ -35,6 +41,10 @@ this.loaded = function(panel, config) {
clockTimeY = 0, // height * 58.148% clockTimeY = 0, // height * 58.148%
clockSeperatorY = 0, // height * 47.037% clockSeperatorY = 0, // height * 47.037%
dateY = 0, // width / 2 dateY = 0, // width / 2
// sizes (1:1)
analogWidth = 0,
analogHeight = 0,
analogRad = 0,
// font // font
fatFont = "", // width * 43.75% fatFont = "", // width * 43.75%
bigFont = "", // width * 43.75% bigFont = "", // width * 43.75%
...@@ -45,8 +55,9 @@ this.loaded = function(panel, config) { ...@@ -45,8 +55,9 @@ this.loaded = function(panel, config) {
init = function() { init = function() {
if (fontsReady) { if (fontsReady) {
clockBackground = document.createElement('canvas'); digiBackground = document.createElement('canvas');
me.calc(); analBackground = document.createElement('canvas');
me.resize($(panel).width(), $(panel).height());
loop(); loop();
} else { } else {
setTimeout(init,0); setTimeout(init,0);
...@@ -58,8 +69,16 @@ this.loaded = function(panel, config) { ...@@ -58,8 +69,16 @@ this.loaded = function(panel, config) {
window.requestAnimationFrame(loop); window.requestAnimationFrame(loop);
} }
this.container = function() { this.resize = function(width, height) {
return clockContainer; var size = height > width / 2 ? width / 2 : height;
if (!!analClock) {
$(analClock).attr('width', size - 1).attr('height', size - 1);
width -= size;
}
if (!!digiClock) {
$(digiClock).attr('width', width - 1).attr('height', height - 1);
}
calc();
} }
this.indicatorColor = function(color) { this.indicatorColor = function(color) {
...@@ -85,25 +104,30 @@ this.loaded = function(panel, config) { ...@@ -85,25 +104,30 @@ this.loaded = function(panel, config) {
if (typeof value === 'boolean') if (typeof value === 'boolean')
usePulse = value; usePulse = value;
} }
calc = function() {
if (!!digiClock) calcDigital();
if (!!analClock) calcAnalog();
}
this.calc = function() { calcDigital = function() {
// canvas size // canvas size
canvasWidth = $(clockContainer).width(); digitalWidth = $(digiClock).width();
canvasHeight = $(clockContainer).height(); digitalHeight = $(digiClock).height();
// clock size // clock size
var ratio = canvasWidth * 9 / 16; var ratio = digitalWidth * 9 / 16;
if (ratio > canvasHeight) { if (ratio > digitalHeight) {
clockWidth = canvasHeight * 16 / 9; clockWidth = digitalHeight * 16 / 9;
clockHeight = canvasHeight; clockHeight = digitalHeight;
} else if (ratio < canvasHeight) { } else if (ratio < digitalHeight) {
clockWidth = canvasWidth; clockWidth = digitalWidth;
clockHeight = canvasWidth * 9 / 16; clockHeight = digitalWidth * 9 / 16;
} else { } else {
clockWidth = canvasWidth; clockWidth = digitalWidth;
clockHeight = canvasHeight; clockHeight = digitalHeight;
} }
clockX = canvasWidth / 2 - clockWidth / 2; clockX = digitalWidth / 2 - clockWidth / 2;
clockY = canvasHeight / 2 - clockHeight / 2; clockY = digitalHeight / 2 - clockHeight / 2;
// fonts // fonts
var var
bigFontSize = clockWidth * 43.75 / 100, bigFontSize = clockWidth * 43.75 / 100,
...@@ -121,22 +145,32 @@ this.loaded = function(panel, config) { ...@@ -121,22 +145,32 @@ this.loaded = function(panel, config) {
dateX = clockX + clockWidth * 1.875 / 100; dateX = clockX + clockWidth * 1.875 / 100;
dateY = clockY + clockWidth / 2; dateY = clockY + clockWidth / 2;
// background // background
clockBackground.width = canvasWidth; digiBackground.width = digitalWidth;
clockBackground.height = canvasHeight; digiBackground.height = digitalHeight;
bgc = clockBackground.getContext("2d"); dbgc = digiBackground.getContext("2d");
renderBackground(); renderDigiBackground();
}
calcAnalog = function() {
analogWidth = $(analClock).width();
analogHeight = $(analClock).height();
analogRad = analogWidth * 0.5;
afgc.translate(analogWidth / 2, analogWidth / 2);
// background
analBackground.width = analogWidth;
analBackground.height = analogHeight;
abgc = analBackground.getContext("2d");
renderAnalBackground();
} }
this.render = function() { this.render = function() {
date = new Date(); date = new Date();
var var ms = date.getMilliseconds();
s = date.getSeconds(), if ((ms > 500 && seperatorOn) || (ms < 500 && !seperatorOn)) {
ms = date.getMilliseconds();
if ((usePulse && ((ms > 500 && seperatorOn) || (ms < 500 && !seperatorOn))) || s != lastSecond) {
lastSecond = s;
var var
h = date.getHours(), h = date.getHours(),
i = date.getMinutes(), i = date.getMinutes(),
s = date.getSeconds(),
t = date.getDay(), t = date.getDay(),
d = date.getDate(), d = date.getDate(),
m = date.getMonth(), m = date.getMonth(),
...@@ -149,52 +183,108 @@ this.loaded = function(panel, config) { ...@@ -149,52 +183,108 @@ this.loaded = function(panel, config) {
i = "0" + i; i = "0" + i;
if (s.toString().length < 2) if (s.toString().length < 2)
s = "0" + s; s = "0" + s;
if (useBackground) { if (!!dfgc) renderDigital(h, i, s, t, d, m, y);
fgc.drawImage(clockBackground, 0, 0); if (!!afgc && s != lastSecond) renderAnalog(h, i, s);
} else { lastSecond = s;
fgc.fillStyle = bgColor; }
fgc.fillRect(0, 0, canvasWidth, canvasHeight); }
}
fgc.fillStyle = icColor; renderDigital = function(h, i, s, t, d, m, y) {
if (!usePulse || !seperatorOn) { dfgc.drawImage(digiBackground, 0, 0);
fgc.font = fatFont; dfgc.fillStyle = icColor;
fgc.fillText(":", clockSeperatorX, clockSeperatorY); if (!seperatorOn) {
seperatorOn = true; dfgc.font = fatFont;
} else { dfgc.fillText(":", clockSeperatorX, clockSeperatorY);
seperatorOn = false; seperatorOn = true;
} } else {
fgc.font = bigFont; seperatorOn = false;
fgc.fillText(h, clockHourX, clockTimeY); }
fgc.fillText(i, clockMinuteX, clockTimeY); dfgc.font = bigFont;
fgc.font = smlFont; dfgc.fillText(h, clockHourX, clockTimeY);
fgc.fillText(s, clockSecondX, clockTimeY); dfgc.fillText(i, clockMinuteX, clockTimeY);
fgc.fillText(dayNames[t] + " " + d + " " + monthNames[m] + " " + y, dateX, dateY); dfgc.font = smlFont;
fgc.fillStyle = "black"; dfgc.fillText(s, clockSecondX, clockTimeY);
dfgc.fillText(dayNames[t] + " " + d + " " + monthNames[m] + " " + y, dateX, dateY);
dfgc.fillStyle = "black";
}
renderAnalog = function(h, i, s) {
//debugger;
afgc.drawImage(analBackground, -(analogWidth / 2), -(analogHeight / 2));
afgc.strokeStyle = icColor;
//drawNumbers();
//hour
var hour=((h % 12) * Math.PI / 6) + (i * Math.PI / (6 * 60)) + (s * Math.PI / (360 * 60));
renderHand(hour, analogRad * 0.5, analogRad * 0.07);
//minute
var minute = (i * Math.PI / 30) + (s * Math.PI / (30 * 60));
renderHand(minute, analogRad * 0.8, analogRad * 0.07);
// second
var second = (s * Math.PI / 30);
renderHand(second, analogRad * 0.9, analogRad * 0.02);
afgc.strokeStyle = "black";
}
drawNumbers = function() {
var ang;
afgc.font = analogRad * 0.15 + "px arial";
afgc.textBaseline = "middle";
afgc.textAlign = "center";
for(var num = 1; num < 13; num++){
ang = num * Math.PI / 6;
afgc.rotate(ang);
afgc.translate(0, -analogRad * 0.85);
afgc.rotate(-ang);
afgc.fillText(num.toString(), 0, 0);
afgc.rotate(ang);
afgc.translate(0, analogRad * 0.85);
afgc.rotate(-ang);
} }
} }
renderBackground = function() { renderHand = function(pos, length, width) {
bgc.fillStyle = bgColor; afgc.beginPath();
bgc.fillRect(0, 0, canvasWidth, canvasHeight); afgc.lineWidth = width;
bgc.fillStyle = sdColor; afgc.lineCap = "round";
bgc.font = fatFont; afgc.moveTo(0,0);
bgc.fillText(":", clockSeperatorX, clockSeperatorY); afgc.rotate(pos);
bgc.font = bigFont; afgc.lineTo(0, -length);
bgc.fillText("88", clockHourX, clockTimeY); afgc.stroke();
bgc.fillText("88", clockMinuteX, clockTimeY); afgc.rotate(-pos);
bgc.font = smlFont; }
bgc.fillText("88", clockSecondX, clockTimeY);
bgc.fillText("00 00 000 0000", dateX, dateY); renderDigiBackground = function() {
bgc.fillText("** ** *** ****", dateX, dateY); dbgc.fillStyle = bgColor;
bgc.fillStyle = "black"; dbgc.fillRect(0, 0, digitalWidth, digitalHeight);
dbgc.fillStyle = sdColor;
dbgc.font = fatFont;
dbgc.fillText(":", clockSeperatorX, clockSeperatorY);
dbgc.font = bigFont;
dbgc.fillText("88", clockHourX, clockTimeY);
dbgc.fillText("88", clockMinuteX, clockTimeY);
dbgc.font = smlFont;
dbgc.fillText("88", clockSecondX, clockTimeY);
dbgc.fillText("00 00 000 0000", dateX, dateY);
dbgc.fillText("** ** *** ****", dateX, dateY);
dbgc.fillStyle = "black";
} }
init(); renderAnalBackground = function() {
abgc.fillStyle = bgColor;
abgc.fillRect(0, 0, analogWidth, analogHeight);
abgc.fillStyle = "black";
abgc.drawImage(analBGImg, 0, 0, analogWidth, analogHeight);
}
analBGImg.onload = function() {
init();
}
analBGImg.src = analBGFile;
} }
DCC = new DigitalCanvasClock(); DCC = new DigitalCanvasClock();
var r = function() { r = function() {
resize(panel); resize(panel);
} }
...@@ -202,6 +292,5 @@ this.loaded = function(panel, config) { ...@@ -202,6 +292,5 @@ this.loaded = function(panel, config) {
} }
var resize = function(panel) { var resize = function(panel) {
$(DCC.container()).attr('width', $(panel).width()).attr('height', $(panel).height()); DCC.resize($(panel).width(), $(panel).height());
DCC.calc();
} }
panels/clock2/style.less 0 → 100644
+ 3
− 0
View file @ f2e46efb
[data-analog-clock] {
float:left;
}
\ No newline at end of file
panels/clock2/template.html
+ 3
− 1
View file @ f2e46efb
<canvas data-clock style="cursor: none;"> <canvas data-analog-clock>
</canvas>
<canvas data-digital-clock>
</canvas> </canvas>
tmp/clock2.css 0 → 100644
+ 3
− 0
View file @ f2e46efb
[data-template=clock2] [data-analog-clock] {
float: left;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment