From 7152b4c5e9d37f77d7a8e06fff456eb6a596347b Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <tilman.vatteroth@udo.edu>
Date: Mon, 12 Mar 2018 17:39:16 +0100
Subject: [PATCH] merge clockclass in script
---
panels/clock/script.js | 420 ++++++++++++++++++++++++++++++++++++++++-
1 file changed, 419 insertions(+), 1 deletion(-)
diff --git a/panels/clock/script.js b/panels/clock/script.js
index ff61b99..37f20be 100755
--- a/panels/clock/script.js
+++ b/panels/clock/script.js
@@ -1,3 +1,421 @@
+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);
@@ -16,4 +434,4 @@ this.loaded = function(panel, config) {
clock.resize(panel[0].clientWidth, panel[0].clientHeight);
tick();
-};
\ No newline at end of file
+};
--
GitLab