Select Git revision
Forked from
FS Info TU Dortmund / Infoscreen / Infoscreen
195 commits behind the upstream repository.
Tilman Vatteroth authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
script.js 19.88 KiB
function Clock(panel, config) {
this.canvas = panel[0].querySelector("canvas");
this.pane = this.canvas.getContext("2d");
this.bgCanvas = document.createElement("canvas");
this.bgPane = this.bgCanvas.getContext("2d");
this.monthNames = ["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"];
this.dayNames = ["so","mo","di","mi","do","fr","sa"];
this.data = {
panel: {
widht: 0,
height: 0
},
bounds: {
outer: {
x: 0,
y: 0,
widht: 0,
height: 0
},
inner: {
x: 0,
y: 0,
widht: 0,
height: 0
}
},
colors: {
background: "#000",
foreground: "#fff",
shaddow: "#333"
},
fonts: {
fat: "time-fat",
medium: "time-medium"
},
aClock: {
bgImage: "background.svg",
radius: 0,
center: {
x: 0,
y: 0
},
bounds: {
outer: {
x: 0,
y: 0,
widht: 0,
height: 0
},
inner: {
x: 0,
y: 0,
widht: 0,
height: 0
}
}
},
dClock: {
fonts: {
fat: "",
big: "",
small: ""
},
bounds: {
outer: {
x: 0,
y: 0,
widht: 0, height: 0
},
inner: {
x: 0,
y: 0,
widht: 0,
height: 0
}
},
positions: {
hour : {
x: 0,
y: 0,
},
pulse : {
x: 0,
y: 0,
},
minute : {
x: 0,
y: 0,
},
second : {
x: 0,
y: 0,
}
}
},
dDate: {
font: "",
bounds: {
outer: {
x: 0,
y: 0,
widht: 0,
height: 0
},
inner: {
x: 0,
y: 0,
widht: 0,
height: 0
}
},
position: {
x: 0,
y: 0
}
}
};
this.resize = function(width, height) {
this.data.panel.width = width;
this.data.panel.height = height;
// canvas
this.canvas.width = this.data.panel.width;
this.canvas.height = this.data.panel.height;
this.pane = this.canvas.getContext("2d");
// bgCanvas
this.bgCanvas.width = this.data.panel.width;
this.bgCanvas.height = this.data.panel.height;
this.bgPane = this.bgCanvas.getContext("2d");
// outer bounds
this.data.bounds.outer.x = 10;
this.data.bounds.outer.y = 10;
this.data.bounds.outer.width = width - 20;
this.data.bounds.outer.height = height - 20;
var ratio = this.data.bounds.outer.width / this.data.bounds.outer.height;
if (ratio > 1.5) {
// widget
if (this.data.bounds.outer.height * 3 < this.data.bounds.outer.width) {
this.data.bounds.inner.height = this.data.bounds.outer.height;
this.data.bounds.inner.width = this.data.bounds.outer.height * 3;
} else {
this.data.bounds.inner.height = this.data.bounds.outer.width / 3;
this.data.bounds.inner.width = this.data.bounds.outer.width;
}
this.data.bounds.inner.x = this.data.bounds.outer.x + (this.data.bounds.outer.width - this.data.bounds.inner.width) / 2;
this.data.bounds.inner.y = this.data.bounds.outer.y + (this.data.bounds.outer.height - this.data.bounds.inner.height) / 2;
// dClock
this.data.dClock.bounds.outer.x = this.data.bounds.inner.x + this.data.bounds.inner.width * 0.4;
this.data.dClock.bounds.outer.y = this.data.bounds.inner.y;
this.data.dClock.bounds.outer.width = this.data.bounds.inner.width * 0.6;
this.data.dClock.bounds.outer.height = this.data.bounds.inner.height * 0.6;
// dDate
this.data.dDate.bounds.outer.x = this.data.bounds.inner.x + this.data.bounds.inner.width * 0.4;
this.data.dDate.bounds.outer.y = this.data.bounds.inner.y + this.data.bounds.inner.height * 0.6;
this.data.dDate.bounds.outer.width = this.data.bounds.inner.width * 0.6;
this.data.dDate.bounds.outer.height = this.data.bounds.inner.height * 0.4;
// aClock
this.data.aClock.bounds.outer.x = this.data.bounds.inner.x;
this.data.aClock.bounds.outer.y = this.data.bounds.inner.y;
this.data.aClock.bounds.outer.width = this.data.bounds.inner.width * 0.4;
this.data.aClock.bounds.outer.height = this.data.bounds.inner.height;
} else if (ratio < 1) {
// widget
if (this.data.bounds.outer.height * 0.7 < this.data.bounds.outer.width) {
this.data.bounds.inner.height = this.data.bounds.outer.height;
this.data.bounds.inner.width = this.data.bounds.outer.height * 0.7;
} else {
this.data.bounds.inner.height = this.data.bounds.outer.width / 0.7;
this.data.bounds.inner.width = this.data.bounds.outer.width;
}
this.data.bounds.inner.x = this.data.bounds.outer.x + (this.data.bounds.outer.width - this.data.bounds.inner.width) / 2;
this.data.bounds.inner.y = this.data.bounds.outer.y + (this.data.bounds.outer.height - this.data.bounds.inner.height) / 2;
// dClock
this.data.dClock.bounds.outer.x = this.data.bounds.inner.x;
this.data.dClock.bounds.outer.y = this.data.bounds.inner.y + this.data.bounds.inner.height * 0.7;
this.data.dClock.bounds.outer.width = this.data.bounds.inner.width;
this.data.dClock.bounds.outer.height = this.data.bounds.inner.height * 0.2;
// dDate
this.data.dDate.bounds.outer.x = this.data.bounds.inner.x;
this.data.dDate.bounds.outer.y = this.data.bounds.inner.y + this.data.bounds.inner.height * 0.9;
this.data.dDate.bounds.outer.width = this.data.bounds.inner.width;
this.data.dDate.bounds.outer.height = this.data.bounds.inner.height * 0.1;
// aClock
this.data.aClock.bounds.outer.x = this.data.bounds.inner.x;
this.data.aClock.bounds.outer.y = this.data.bounds.inner.y;
this.data.aClock.bounds.outer.width = this.data.bounds.inner.width;
this.data.aClock.bounds.outer.height = this.data.bounds.inner.height * 0.7;
} else {
// widget
if (this.data.bounds.outer.height * 2 < this.data.bounds.outer.width) {
this.data.bounds.inner.height = this.data.bounds.outer.height;
this.data.bounds.inner.width = this.data.bounds.outer.height * 2;
} else {
this.data.bounds.inner.height = this.data.bounds.outer.width / 2;
this.data.bounds.inner.width = this.data.bounds.outer.width;
}
this.data.bounds.inner.x = this.data.bounds.outer.x + (this.data.bounds.outer.width - this.data.bounds.inner.width) / 2;
this.data.bounds.inner.y = this.data.bounds.outer.y + (this.data.bounds.outer.height - this.data.bounds.inner.height) / 2;
// dClock
this.data.dClock.bounds.outer.x = this.data.bounds.inner.x + this.data.bounds.inner.width / 3;
this.data.dClock.bounds.outer.y = this.data.bounds.inner.y;
this.data.dClock.bounds.outer.width = this.data.bounds.inner.width - this.data.bounds.inner.width / 3;
this.data.dClock.bounds.outer.height = this.data.bounds.inner.height - this.data.bounds.inner.height / 3;
// dDate
this.data.dDate.bounds.outer.x = this.data.bounds.inner.x; this.data.dDate.bounds.outer.y = this.data.bounds.inner.y + this.data.bounds.inner.height / 3 * 2;
this.data.dDate.bounds.outer.width = this.data.bounds.inner.width;
this.data.dDate.bounds.outer.height = this.data.bounds.inner.height / 3;
// aClock
this.data.aClock.bounds.outer.x = this.data.bounds.inner.x;
this.data.aClock.bounds.outer.y = this.data.bounds.inner.y;
this.data.aClock.bounds.outer.width = this.data.bounds.inner.width / 3;
this.data.aClock.bounds.outer.height = this.data.bounds.inner.height - + this.data.bounds.inner.height / 3;
}
resizeDClock();
resizeDDate();
resizeAClock();
renderBG();
}
this.render = function() {
var
date = new Date(),
n = date.getMilliseconds(),
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;
// background
this.pane.fillStyle = this.data.colors.background;
this.pane.fillRect(0, 0, this.data.panel.width, this.data.panel.height);
this.pane.drawImage(this.bgCanvas, 0, 0);
// foreground dClock
this.pane.fillStyle = this.data.colors.foreground;
this.pane.font = this.data.dClock.fonts.fat;
if (n < 500) this.pane.fillText(":", this.data.dClock.positions.pulse.x, this.data.dClock.positions.pulse.y);
this.pane.font = this.data.dClock.fonts.big;
this.pane.fillText(h, this.data.dClock.positions.hour.x, this.data.dClock.positions.hour.y);
this.pane.fillText(i, this.data.dClock.positions.minute.x, this.data.dClock.positions.minute.y);
this.pane.font = this.data.dClock.fonts.small;
this.pane.fillText(s, this.data.dClock.positions.second.x, this.data.dClock.positions.second.y);
// foreground dDate
this.pane.font = this.data.dDate.font;
this.pane.fillText(this.dayNames[t] + " " + d + " " + this.monthNames[m] + " " + y, this.data.dDate.position.x, this.data.dDate.position.y);
// foreground aClock
this.pane.strokeStyle = this.data.colors.foreground;
//hour
var hour = ((h % 12) * Math.PI / 6) + (i * Math.PI / (6 * 60)) + (s * Math.PI / (360 * 60));
renderHand(hour, this.data.aClock.radius * 0.5, this.data.aClock.radius * 0.07);
//minute
var minute = (i * Math.PI / 30) + (s * Math.PI / (30 * 60));
renderHand(minute, this.data.aClock.radius * 0.8, this.data.aClock.radius * 0.07);
// second
var second = (s * Math.PI / 30);
renderHand(second, this.data.aClock.radius * 0.9, this.data.aClock.radius * 0.02);
// debug
//renderDebug();
}
var renderHand = function(pos, length, width) {
this.pane.beginPath();
this.pane.lineWidth = width;
this.pane.lineCap = "round";
this.pane.translate(this.data.aClock.center.x, this.data.aClock.center.y); this.pane.moveTo(0, 0);
this.pane.rotate(pos);
this.pane.lineTo(0, -length);
this.pane.stroke();
this.pane.rotate(-pos);
this.pane.translate(-this.data.aClock.center.x, -this.data.aClock.center.y);
this.pane.lineWidth = 1;
}.bind(this);
var renderBG = function() {
// background dClock
this.bgPane.fillStyle = this.data.colors.shaddow;
this.bgPane.font = this.data.dClock.fonts.fat;
this.bgPane.fillText(":", this.data.dClock.positions.pulse.x, this.data.dClock.positions.pulse.y);
this.bgPane.font = this.data.dClock.fonts.big;
this.bgPane.fillText("88", this.data.dClock.positions.hour.x, this.data.dClock.positions.hour.y);
this.bgPane.fillText("88", this.data.dClock.positions.minute.x, this.data.dClock.positions.minute.y);
this.bgPane.font = this.data.dClock.fonts.small;
this.bgPane.fillText("88", this.data.dClock.positions.second.x, this.data.dClock.positions.second.y);
// background dDate
this.bgPane.font = this.data.dDate.font;
this.bgPane.fillText("00 00 000 0000", this.data.dDate.position.x, this.data.dDate.position.y);
this.bgPane.fillText("** ** *** ****", this.data.dDate.position.x, this.data.dDate.position.y);
if (typeof this.data.aClock.bgImage == "string") {
var img = new Image();
img.onload = function(e) {
this.data.aClock.bgImage = e.target;
this.bgPane.drawImage(
this.data.aClock.bgImage,
this.data.aClock.bounds.inner.x,
this.data.aClock.bounds.inner.y,
this.data.aClock.bounds.inner.width,
this.data.aClock.bounds.inner.height
);
}.bind(this);
img.src = "panels/clock/"+this.data.aClock.bgImage;
} else {
this.bgPane.drawImage(
this.data.aClock.bgImage,
this.data.aClock.bounds.inner.x,
this.data.aClock.bounds.inner.y,
this.data.aClock.bounds.inner.width,
this.data.aClock.bounds.inner.height
);
}
}.bind(this);
var resizeDClock = function() {
var aspect = 6 / 16;
var ratio = this.data.dClock.bounds.outer.width * aspect;
if (ratio > this.data.dClock.bounds.outer.height) {
this.data.dClock.bounds.inner.width = this.data.dClock.bounds.outer.height / aspect;
this.data.dClock.bounds.inner.height = this.data.dClock.bounds.outer.height;
} else if (ratio < this.data.dClock.bounds.outer.height) {
this.data.dClock.bounds.inner.width = this.data.dClock.bounds.outer.width;
this.data.dClock.bounds.inner.height = this.data.dClock.bounds.outer.width * aspect;
} else {
this.data.dClock.bounds.inner.width = this.data.dClock.bounds.outer.width;
this.data.dClock.bounds.inner.height = this.data.dClock.bounds.outer.height;
}
this.data.dClock.bounds.inner.x = this.data.dClock.bounds.outer.x + (this.data.dClock.bounds.outer.width - this.data.dClock.bounds.inner.width) / 2;
this.data.dClock.bounds.inner.y = this.data.dClock.bounds.outer.y + (this.data.dClock.bounds.outer.height - this.data.dClock.bounds.inner.height) / 2;
this.data.dClock.positions.pulse.x = this.data.dClock.bounds.inner.x + this.data.dClock.bounds.inner.width * 0.315;
this.data.dClock.positions.pulse.y = this.data.dClock.bounds.inner.y + this.data.dClock.bounds.inner.height * 0.72;
this.data.dClock.positions.hour.x = this.data.dClock.bounds.inner.x + this.data.dClock.bounds.inner.width * 0.02;
this.data.dClock.positions.hour.y = this.data.dClock.bounds.inner.y + this.data.dClock.bounds.inner.height * 0.88;
this.data.dClock.positions.minute.x = this.data.dClock.bounds.inner.x + this.data.dClock.bounds.inner.width * 0.43;
this.data.dClock.positions.minute.y = this.data.dClock.bounds.inner.y + this.data.dClock.bounds.inner.height * 0.88;
this.data.dClock.positions.second.x = this.data.dClock.bounds.inner.x + this.data.dClock.bounds.inner.width * 0.79; this.data.dClock.positions.second.y = this.data.dClock.bounds.inner.y + this.data.dClock.bounds.inner.height * 0.85;
var
bigFontSize = this.data.dClock.bounds.inner.height * 1.3,
smlFontSize = this.data.dClock.bounds.inner.height * 0.7;
this.data.dClock.fonts.fat = bigFontSize + "px " + this.data.fonts.fat;
this.data.dClock.fonts.big = bigFontSize + "px " + this.data.fonts.medium;
this.data.dClock.fonts.small = smlFontSize + "px " + this.data.fonts.medium;
}.bind(this);
var resizeDDate = function() {
var aspect = 2.3 / 16;
var ratio = this.data.dDate.bounds.outer.width * aspect;
if (ratio > this.data.dDate.bounds.outer.height) {
this.data.dDate.bounds.inner.width = this.data.dDate.bounds.outer.height / aspect;
this.data.dDate.bounds.inner.height = this.data.dDate.bounds.outer.height;
} else if (ratio < this.data.dDate.bounds.outer.height) {
this.data.dDate.bounds.inner.width = this.data.dDate.bounds.outer.width;
this.data.dDate.bounds.inner.height = this.data.dDate.bounds.outer.width * aspect;
} else {
this.data.dDate.bounds.inner.width = this.data.dDate.bounds.outer.width;
this.data.dDate.bounds.inner.height = this.data.dDate.bounds.outer.height;
}
this.data.dDate.bounds.inner.x = this.data.dDate.bounds.outer.x + (this.data.dDate.bounds.outer.width - this.data.dDate.bounds.inner.width) / 2;
this.data.dDate.bounds.inner.y = this.data.dDate.bounds.outer.y + (this.data.dDate.bounds.outer.height - this.data.dDate.bounds.inner.height) / 2;
this.data.dDate.position.x = this.data.dDate.bounds.inner.x + this.data.dDate.bounds.inner.width * 0.02;
this.data.dDate.position.y = this.data.dDate.bounds.inner.y + this.data.dDate.bounds.inner.height * 0.88;
var fontSize = this.data.dDate.bounds.inner.height * 1.3;
this.data.dDate.font = fontSize + "px " + this.data.fonts.medium;
}.bind(this);
var resizeAClock = function() {
if (this.data.aClock.bounds.outer.width > this.data.aClock.bounds.outer.height) {
this.data.aClock.bounds.inner.width = this.data.aClock.bounds.outer.height;
this.data.aClock.bounds.inner.height = this.data.aClock.bounds.outer.height;
} else if (this.data.aClock.bounds.outer.width < this.data.aClock.bounds.outer.height) {
this.data.aClock.bounds.inner.width = this.data.aClock.bounds.outer.width;
this.data.aClock.bounds.inner.height = this.data.aClock.bounds.outer.width;
} else {
this.data.aClock.bounds.inner.width = this.data.aClock.bounds.outer.width;
this.data.aClock.bounds.inner.height = this.data.aClock.bounds.outer.height;
}
this.data.aClock.bounds.inner.x = this.data.aClock.bounds.outer.x + (this.data.aClock.bounds.outer.width - this.data.aClock.bounds.inner.width) / 2;
this.data.aClock.bounds.inner.y = this.data.aClock.bounds.outer.y + (this.data.aClock.bounds.outer.height - this.data.aClock.bounds.inner.height) / 2;
this.data.aClock.center.x = this.data.aClock.bounds.inner.x + this.data.aClock.bounds.inner.width / 2;
this.data.aClock.center.y = this.data.aClock.bounds.inner.y + this.data.aClock.bounds.inner.height / 2;
this.data.aClock.radius = this.data.aClock.bounds.inner.height * 0.45;
}.bind(this);
var renderDebug = function() {
// panel bounds
this.pane.strokeStyle = "#ff0";
this.pane.strokeRect(this.data.bounds.inner.x, this.data.bounds.inner.y, this.data.bounds.inner.width, this.data.bounds.inner.height);
this.pane.strokeStyle = "#0ff";
this.pane.strokeRect(this.data.bounds.outer.x, this.data.bounds.outer.y, this.data.bounds.outer.width, this.data.bounds.outer.height);
// inner bounds
this.pane.strokeStyle = "#0f0";
this.pane.strokeRect(this.data.dClock.bounds.inner.x, this.data.dClock.bounds.inner.y, this.data.dClock.bounds.inner.width, this.data.dClock.bounds.inner.height);
this.pane.strokeRect(this.data.dDate.bounds.inner.x, this.data.dDate.bounds.inner.y, this.data.dDate.bounds.inner.width, this.data.dDate.bounds.inner.height);
this.pane.strokeRect(this.data.aClock.bounds.inner.x, this.data.aClock.bounds.inner.y, this.data.aClock.bounds.inner.width, this.data.aClock.bounds.inner.height);
// outer bounds
this.pane.strokeStyle = "#f0f";
this.pane.strokeRect(this.data.dClock.bounds.outer.x, this.data.dClock.bounds.outer.y, this.data.dClock.bounds.outer.width, this.data.dClock.bounds.outer.height);
this.pane.strokeRect(this.data.dDate.bounds.outer.x, this.data.dDate.bounds.outer.y, this.data.dDate.bounds.outer.width, this.data.dDate.bounds.outer.height);
this.pane.strokeRect(this.data.aClock.bounds.outer.x, this.data.aClock.bounds.outer.y, this.data.aClock.bounds.outer.width, this.data.aClock.bounds.outer.height);
this.pane.strokeStyle = "";
}.bind(this);
}
this.loaded = function(panel, config) {
var clock = new Clock(panel, config);
window.addEventListener("resize", function() {
clock.resize(panel[0].clientWidth, panel[0].clientHeight);
}.bind(this));
function tick() {
clock.render();
window.requestAnimationFrame(function() {
tick();
}, 0);
}
clock.resize(panel[0].clientWidth, panel[0].clientHeight);
tick();
};