Forked from
FS Info TU Dortmund / Infoscreen / Infoscreen
470 commits behind the upstream repository.
-
Tilman Vatteroth authoredTilman Vatteroth authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
script.js 9.01 KiB
var DCC;
this.loaded = function(panel, config) {
var DigitalCanvasClock = function() {
var
me = this,
analBGFile = "panels/clock/background.png",
analBGImg = new Image(),
analogFactor = 0.9,
useBackground = true,
usePulse = true,
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 = "#080808",
sdColor = "#111",
icColor = "#FFF",
date = new Date(),
monthNames = ["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],
dayNames = ["su","mo","tu","we","th","fr","sa"],
lastSecond = -1,
seperatorOn = false,
// sizes digital (16:9)
digitalWidth = 0,
digitalHeight = 0,
clockWidth = 0,
clockHeight = 0,
clockX = 0,
clockY = 0,
// clock
clockHourX = 0, // width * 4.375%
clockSeperatorX = 0, // height * 60.185%
clockMinuteX = 0, // width * 47.083%
clockSecondX = 0, // height * 145.185%
dateX = 0, // width * 1.875%
clockTimeY = 0, // height * 58.148%
clockSeperatorY = 0, // height * 47.037%
dateY = 0, // width / 2
// sizes analog (1:1)
analogWidth = 0,
analogHeight = 0,
analogX = 0,
analogY = 0,
analogRad = 0,
// font
fatFont = "", // width * 43.75%
bigFont = "", // width * 43.75%
smlFont = "", // width * 18.75%
fatFontPost = "time-fat", // width * 43.75%
bigFontPost = "time-medium", // width * 43.75%
smlFontPost = "time-medium"; // width * 18.75%
inita = function() {
if (window.fontsReady) {
digiBackground = document.createElement('canvas');
analBackground = document.createElement('canvas');
me.resize($(panel).width(), $(panel).height());
loop();
} else {
setTimeout(inita,0);
}
}
loop = function(delta) {
me.render();
window.requestAnimationFrame(loop);
}
this.resize = function(width, height) {
if (height > width) {
var size = height / 2;
if (!!analClock) {
$(analClock).attr('width', width).attr('height', size);
}
if (!!digiClock) {
$(digiClock).attr('width', width).attr('height', size);
}
} else {
var size = height > width / 2 ? width / 2 : height;
if (!!analClock) {
$(analClock).attr('width', size).attr('height', height);
}
if (!!digiClock) {
$(digiClock).attr('width', width - size - 6).attr('height', height);
}
}
calc();
}
this.indicatorColor = function(color) {
icColor = color || icColor;
}
this.shaddowColor = function(color) {
sdColor = color || sdColor;
renderBackground();
}
this.backgroundColor = function(color) {
bgColor = color || bgColor;
renderBackground();
}
this.enableBackground = function(value) {
if (typeof value === 'boolean')
useBackground = value;
}
this.enablePulse = function(value) {
if (typeof value === 'boolean')
usePulse = value;
}
calc = function() {
if (!!digiClock) calcDigital();
if (!!analClock) calcAnalog();
}
calcDigital = function() {
// canvas size
digitalWidth = $(digiClock).width();
digitalHeight = $(digiClock).height();
// clock size
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 = digitalWidth;
clockHeight = digitalHeight;
}
clockX = digitalWidth / 2 - clockWidth / 2;
clockY = digitalHeight / 2 - clockHeight / 2;
// fonts
var
bigFontSize = clockWidth * 43.75 / 100,
smlFontSize = clockWidth * 18.75 / 100;
fatFont = bigFontSize + "px " + fatFontPost;
bigFont = bigFontSize + "px " + bigFontPost;
smlFont = smlFontSize + "px " + smlFontPost;
// positions
clockHourX = clockX + clockWidth * 4.375 / 100;
clockMinuteX = clockX + clockWidth * 47.083 / 100;
clockSecondX = clockX + clockHeight * 145.185 / 100;
clockTimeY = clockY + clockHeight * 58.148 / 100;
clockSeperatorX = clockX + clockHeight * 60.185 / 100;
clockSeperatorY = clockY + clockHeight * 47.037 / 100;
dateX = clockX + clockWidth * 1.875 / 100;
dateY = clockY + clockWidth / 2;
// background
digiBackground.width = digitalWidth;
digiBackground.height = digitalHeight;
dbgc = digiBackground.getContext("2d");
renderDigiBackground();
}
calcAnalog = function() {
analogWidth = $(analClock).width();
analogHeight = $(analClock).height();
// clock size
var size;
if (analogWidth > analogHeight) {
size = analogHeight;
} else {
size = analogWidth;
}
analogRad = size * (analogFactor / 2);
analogX = analogWidth / 2;
analogY = analogHeight / 2;
afgc.translate(analogX, analogY);
// background
analBackground.width = analogWidth;
analBackground.height = analogHeight;
abgc = analBackground.getContext("2d");
abgc.translate(analogX, analogY);
renderAnalBackground();
}
this.render = function() {
date = new Date();
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(),
y = date.getFullYear();
if (d.toString().length < 2)
d = "0" + d;
if (h.toString().length < 2)
h = "0" + h;
if (i.toString().length < 2)
i = "0" + i; if (s.toString().length < 2)
s = "0" + s;
if (!!dfgc) renderDigital(h, i, s, t, d, m, y);
if (!!afgc && s != lastSecond) renderAnalog(h, i, s);
lastSecond = s;
}
}
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;
}
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, -analogX, -analogY);
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";
}
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";
}
renderAnalBackground = function() {
abgc.fillStyle = bgColor;
console.log(analBGImg);
var
bc = document.createElement('canvas'),
steps = Math.ceil(Math.log(analBGImg.width / (analogRad * 2)) / Math.log(2)) - 1,
bctx;
bc.width = analBGImg.width;
bc.height = analBGImg.height;
bctx = bc.getContext('2d');
bctx.drawImage(analBGImg, 0, 0, bc.width, bc.height);
for (var i = 0; i < steps; ++i) {
var oc = document.createElement('canvas');
oc.width = bc.width * 0.5;
oc.height = bc.height * 0.5;
bctx = oc.getContext('2d');
bctx.drawImage(bc, 0, 0, oc.width, oc.height);
bc = oc;
}
abgc.fillRect(-analogX, -analogY, analogWidth, analogHeight);
abgc.fillStyle = "black";
//abgc.drawImage(buffer, -analogRad, -analogRad, analogRad * 2, analogRad * 2);
abgc.drawImage(bc, -analogRad, -analogRad, analogRad * 2, analogRad * 2);
}
analBGImg.onload = function() {
inita();
}
analBGImg.src = analBGFile;
}
DCC = new DigitalCanvasClock();
r = function() {
resize(panel);
}
$(window).resize(r);
}
var resize = function(panel) {
DCC.resize($(panel).width(), $(panel).height());
}