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
Show whitespace changes
Inline Side-by-side
config/layouts/test.json
+ 1
− 1
View file @ f2e46efb
......@@ -6,7 +6,7 @@
"cut" : 50,
"left" : {
"type" : "ysplit",
"cut" : 20,
"cut" : 30,
"up" : {
"type" : "panel",
"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) {
var DigitalCanvasClock = function() {
var
me = this,
analBGFile = "panels/clock2/biber/background.svg",
analBGImg = new Image(),
useBackground = true,
usePulse = true,
clockContainer = panel.find("canvas[data-clock]")[0],
clockBackground = null,
fgc = clockContainer.getContext("2d"),
bgc = null,
digiClock = panel.find("canvas[data-digital-clock]")[0],
analClock = panel.find("canvas[data-analog-clock]")[0],
digiBackground = null,
analBackground = null,
dfgc = digiClock ? digiClock.getContext("2d") : null,
dbgc = null,
afgc = analClock ? analClock.getContext("2d") : null,
abgc = null,
bgColor = "#FFF",
sdColor = "#DDD",
icColor = "#000",
......@@ -20,8 +26,8 @@ this.loaded = function(panel, config) {
lastSecond = -1,
seperatorOn = false,
// sizes (16:9)
canvasWidth = 0,
canvasHeight = 0,
digitalWidth = 0,
digitalHeight = 0,
clockWidth = 0,
clockHeight = 0,
clockX = 0,
......@@ -35,6 +41,10 @@ this.loaded = function(panel, config) {
clockTimeY = 0, // height * 58.148%
clockSeperatorY = 0, // height * 47.037%
dateY = 0, // width / 2
// sizes (1:1)
analogWidth = 0,
analogHeight = 0,
analogRad = 0,
// font
fatFont = "", // width * 43.75%
bigFont = "", // width * 43.75%
......@@ -45,8 +55,9 @@ this.loaded = function(panel, config) {
init = function() {
if (fontsReady) {
clockBackground = document.createElement('canvas');
me.calc();
digiBackground = document.createElement('canvas');
analBackground = document.createElement('canvas');
me.resize($(panel).width(), $(panel).height());
loop();
} else {
setTimeout(init,0);
......@@ -58,8 +69,16 @@ this.loaded = function(panel, config) {
window.requestAnimationFrame(loop);
}
this.container = function() {
return clockContainer;
this.resize = function(width, height) {
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) {
......@@ -86,24 +105,29 @@ this.loaded = function(panel, config) {
usePulse = value;
}
this.calc = function() {
calc = function() {
if (!!digiClock) calcDigital();
if (!!analClock) calcAnalog();
}
calcDigital = function() {
// canvas size
canvasWidth = $(clockContainer).width();
canvasHeight = $(clockContainer).height();
digitalWidth = $(digiClock).width();
digitalHeight = $(digiClock).height();
// clock size
var ratio = canvasWidth * 9 / 16;
if (ratio > canvasHeight) {
clockWidth = canvasHeight * 16 / 9;
clockHeight = canvasHeight;
} else if (ratio < canvasHeight) {
clockWidth = canvasWidth;
clockHeight = canvasWidth * 9 / 16;
var ratio = digitalWidth * 9 / 16;
if (ratio > digitalHeight) {
clockWidth = digitalHeight * 16 / 9;
clockHeight = digitalHeight;
} else if (ratio < digitalHeight) {
clockWidth = digitalWidth;
clockHeight = digitalWidth * 9 / 16;
} else {
clockWidth = canvasWidth;
clockHeight = canvasHeight;
clockWidth = digitalWidth;
clockHeight = digitalHeight;
}
clockX = canvasWidth / 2 - clockWidth / 2;
clockY = canvasHeight / 2 - clockHeight / 2;
clockX = digitalWidth / 2 - clockWidth / 2;
clockY = digitalHeight / 2 - clockHeight / 2;
// fonts
var
bigFontSize = clockWidth * 43.75 / 100,
......@@ -121,22 +145,32 @@ this.loaded = function(panel, config) {
dateX = clockX + clockWidth * 1.875 / 100;
dateY = clockY + clockWidth / 2;
// background
clockBackground.width = canvasWidth;
clockBackground.height = canvasHeight;
bgc = clockBackground.getContext("2d");
renderBackground();
digiBackground.width = digitalWidth;
digiBackground.height = digitalHeight;
dbgc = digiBackground.getContext("2d");
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() {
date = new Date();
var
s = date.getSeconds(),
ms = date.getMilliseconds();
if ((usePulse && ((ms > 500 && seperatorOn) || (ms < 500 && !seperatorOn))) || s != lastSecond) {
lastSecond = s;
var ms = date.getMilliseconds();
if ((ms > 500 && seperatorOn) || (ms < 500 && !seperatorOn)) {
var
h = date.getHours(),
i = date.getMinutes(),
s = date.getSeconds(),
t = date.getDay(),
d = date.getDate(),
m = date.getMonth(),
......@@ -149,52 +183,108 @@ this.loaded = function(panel, config) {
i = "0" + i;
if (s.toString().length < 2)
s = "0" + s;
if (useBackground) {
fgc.drawImage(clockBackground, 0, 0);
} else {
fgc.fillStyle = bgColor;
fgc.fillRect(0, 0, canvasWidth, canvasHeight);
if (!!dfgc) renderDigital(h, i, s, t, d, m, y);
if (!!afgc && s != lastSecond) renderAnalog(h, i, s);
lastSecond = s;
}
}
fgc.fillStyle = icColor;
if (!usePulse || !seperatorOn) {
fgc.font = fatFont;
fgc.fillText(":", clockSeperatorX, clockSeperatorY);
renderDigital = function(h, i, s, t, d, m, y) {
dfgc.drawImage(digiBackground, 0, 0);
dfgc.fillStyle = icColor;
if (!seperatorOn) {
dfgc.font = fatFont;
dfgc.fillText(":", clockSeperatorX, clockSeperatorY);
seperatorOn = true;
} else {
seperatorOn = false;
}
fgc.font = bigFont;
fgc.fillText(h, clockHourX, clockTimeY);
fgc.fillText(i, clockMinuteX, clockTimeY);
fgc.font = smlFont;
fgc.fillText(s, clockSecondX, clockTimeY);
fgc.fillText(dayNames[t] + " " + d + " " + monthNames[m] + " " + y, dateX, dateY);
fgc.fillStyle = "black";
dfgc.font = bigFont;
dfgc.fillText(h, clockHourX, clockTimeY);
dfgc.fillText(i, clockMinuteX, clockTimeY);
dfgc.font = smlFont;
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);
}
}
renderHand = function(pos, length, width) {
afgc.beginPath();
afgc.lineWidth = width;
afgc.lineCap = "round";
afgc.moveTo(0,0);
afgc.rotate(pos);
afgc.lineTo(0, -length);
afgc.stroke();
afgc.rotate(-pos);
}
renderDigiBackground = function() {
dbgc.fillStyle = bgColor;
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";
}
renderBackground = function() {
bgc.fillStyle = bgColor;
bgc.fillRect(0, 0, canvasWidth, canvasHeight);
bgc.fillStyle = sdColor;
bgc.font = fatFont;
bgc.fillText(":", clockSeperatorX, clockSeperatorY);
bgc.font = bigFont;
bgc.fillText("88", clockHourX, clockTimeY);
bgc.fillText("88", clockMinuteX, clockTimeY);
bgc.font = smlFont;
bgc.fillText("88", clockSecondX, clockTimeY);
bgc.fillText("00 00 000 0000", dateX, dateY);
bgc.fillText("** ** *** ****", dateX, dateY);
bgc.fillStyle = "black";
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();
var r = function() {
r = function() {
resize(panel);
}
......@@ -202,6 +292,5 @@ this.loaded = function(panel, config) {
}
var resize = function(panel) {
$(DCC.container()).attr('width', $(panel).width()).attr('height', $(panel).height());
DCC.calc();
DCC.resize($(panel).width(), $(panel).height());
}
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>
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 to comment