From 2423047b9feaf83593fae17f255442a0ec720b8d Mon Sep 17 00:00:00 2001
From: 2deep4real <denis.peters@udo.edu>
Date: Mon, 29 Jun 2015 08:53:22 +0200
Subject: [PATCH] exchange dom based clock with canvas based clock on standard
layout canvas based clock now in panels/clock dom based clock now in
panels/clock_old
---
config/layouts/test.json | 30 --
panels/{clock2 => clock}/background.svg | 0
panels/clock/script.js | 386 ++++++++++++++----
panels/clock/style.less | 160 +-------
panels/clock/template.html | 18 +-
panels/clock2/script.js | 302 --------------
panels/clock2/style.less | 3 -
panels/clock2/template.html | 4 -
.../{clock => clock_old}/biber/background.svg | 0
panels/{clock => clock_old}/biber/biber.svg | 0
panels/{clock => clock_old}/biber/hour.svg | 0
panels/{clock => clock_old}/biber/minute.svg | 0
panels/{clock => clock_old}/biber/second.svg | 0
panels/clock_old/script.js | 94 +++++
panels/clock_old/style.less | 159 ++++++++
panels/clock_old/template.html | 14 +
16 files changed, 570 insertions(+), 600 deletions(-)
delete mode 100644 config/layouts/test.json
rename panels/{clock2 => clock}/background.svg (100%)
mode change 100755 => 100644 panels/clock/script.js
mode change 100755 => 100644 panels/clock/style.less
mode change 100755 => 100644 panels/clock/template.html
delete mode 100644 panels/clock2/script.js
delete mode 100644 panels/clock2/style.less
delete mode 100644 panels/clock2/template.html
rename panels/{clock => clock_old}/biber/background.svg (100%)
rename panels/{clock => clock_old}/biber/biber.svg (100%)
rename panels/{clock => clock_old}/biber/hour.svg (100%)
rename panels/{clock => clock_old}/biber/minute.svg (100%)
rename panels/{clock => clock_old}/biber/second.svg (100%)
create mode 100755 panels/clock_old/script.js
create mode 100755 panels/clock_old/style.less
create mode 100755 panels/clock_old/template.html
diff --git a/config/layouts/test.json b/config/layouts/test.json
deleted file mode 100644
index 181e7f4..0000000
--- a/config/layouts/test.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
- "type" : "ysplit",
- "cut" : 90,
- "up" : {
- "type" : "xsplit",
- "cut" : 50,
- "left" : {
- "type" : "ysplit",
- "cut" : 30,
- "up" : {
- "type" : "panel",
- "name" : "clock2"
- },
- "down" : {
- "type" : "panel",
- "name" : "GameOfLife"
- }
- },
- "right" : {
- "type" : "panel",
- "name" : "departure",
- "config" : "oh14"
- }
- },
- "down" : {
- "type" : "panel",
- "name" : "scrollbar",
- "config": "oh14"
- }
-}
diff --git a/panels/clock2/background.svg b/panels/clock/background.svg
similarity index 100%
rename from panels/clock2/background.svg
rename to panels/clock/background.svg
diff --git a/panels/clock/script.js b/panels/clock/script.js
old mode 100755
new mode 100644
index fb4ed75..f1b6b14
--- a/panels/clock/script.js
+++ b/panels/clock/script.js
@@ -1,94 +1,302 @@
-this.loaded = function(panel, config) {
- this.clock = {
- hour: panel.find("[data-clock-hand=hour]"),
- minute: panel.find("[data-clock-hand=minute]"),
- second: panel.find("[data-clock-hand=second]"),
- digitalContainer : panel.find("[data-clock=digital]"),
- digital : panel.find("[data-clock=digital] span"),
- datum: panel.find("[data-clock=datum]"),
- "config": config,
- lasttext: "",
- lastdate: ""
- };
-
- var self = { 'me': this };
-
-
- var r = function() {
- var svg = panel.find('[data-clock=analog]');
- var imgs = panel.find('[data-clock=analog] img');
- var w = panel.width();
- var h = panel.height();
- var q = (w<h?w:h);
- svg.css({"height":q + "px","width":q + "px"});
- imgs.css({"height":q + "px","width":q + "px"});
- var fsh = h/53;
- var fsw = (w-q)/(220);
-
- var fs = (fsh<fsw?fsh:fsw);
- var lh = q;
-
- this.clock.digitalContainer.textfill(
- {
- maxFontPixels:-1
- });
- };
-
+var DCC;
- self.c = function() {updateTime.call(self.me)};
- self.r = function() {r.call(self.me)};
-
-
- self.c();
- setTimeout ( self.r , 100);
- setInterval( self.c , 500);
- $(window).resize( self.r );
-}
+this.loaded = function(panel, config) {
-var rotateElement = function (id, angle) {
- id.css('transform', 'rotate('+angle+'deg)');
+ var DigitalCanvasClock = function() {
+ var
+ me = this,
+ analBGFile = "panels/clock2/background.svg",
+ 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 = "#FFF",
+ sdColor = "#EEE",
+ icColor = "#000",
+ 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%
+
+ init = function() {
+ if (fontsReady) {
+ digiBackground = document.createElement('canvas');
+ analBackground = document.createElement('canvas');
+ me.resize($(panel).width(), $(panel).height());
+ loop();
+ } else {
+ setTimeout(init,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 - 1).attr('height', size - 1);
+ }
+ if (!!digiClock) {
+ $(digiClock).attr('width', width - 1).attr('height', size - 1);
+ }
+ } else {
+ var size = height > width / 2 ? width / 2 : height;
+ if (!!analClock) {
+ $(analClock).attr('width', size - 1).attr('height', height - 1);
+ width -= size;
+ }
+ if (!!digiClock) {
+ $(digiClock).attr('width', width - 1).attr('height', height - 1);
+ }
+ }
+ 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;
+ abgc.fillRect(-analogX, -analogY, analogWidth, analogHeight);
+ abgc.fillStyle = "black";
+ abgc.drawImage(analBGImg, -analogRad, -analogRad, analogRad * 2, analogRad * 2);
+ }
+
+ analBGImg.onload = function() {
+ init();
+ }
+ analBGImg.src = analBGFile;
+ }
+
+ DCC = new DigitalCanvasClock();
+
+ r = function() {
+ resize(panel);
+ }
+
+ $(window).resize(r);
}
-var updateTime = function() { // rotate clock element
- var months = ["Januar","Februar","März","April","Mai","Juni","Juli",
- "August","September","Oktober","November","Dezember"];
- var days = ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"];
- var date = new Date();
- // date
- var t = date.getDay();
- var d = date.getDate();
- var m = date.getMonth();
- var y = date.getFullYear();
- // time
- var h = date.getHours();
- if (h.toString().length < 2)
- h = "0" + h;
- var i = date.getMinutes();
- if (i.toString().length < 2)
- i = "0" + i;
- var s = date.getSeconds();
- if (s.toString().length < 2)
- s = "0" + s;
-
- var newtext=h+":"+i+":"+s;
- if (newtext != this.clock.lasttext) {
- this.clock.lasttext = newtext;
- this.clock.digital.text(newtext);
-
- rotateElement(this.clock.hour, 30 * h + 0.5 * i);
- rotateElement(this.clock.minute, 6 * i);
- rotateElement(this.clock.second, 6 * s);
- var newdate = days[t] + ", " + d + "." + months[m] + ", " + y;
- if (newdate != this.clock.lastdate) {
- this.clock.lastdate = newdate;
- this.clock.datum.text(newdate);
- }
- }
-/* $("[panel=time] [clock] [number=h0]").html(h.toString()[0]);
- $("[panel=time] [clock] [number=h1]").html(h.toString()[1]);
- $("[panel=time] [clock] [number=m0]").html(i.toString()[0]);
- $("[panel=time] [clock] [number=m1]").html(i.toString()[1]);
- $("[panel=time] [clock] [number=s0]").html(s.toString()[0]);
- $("[panel=time] [clock] [number=s1]").html(s.toString()[1]);
- $("[panel=time] [date]").html(days[t] + ", " + d + "." + months[m] + ", " + y);*/
+var resize = function(panel) {
+ DCC.resize($(panel).width(), $(panel).height());
}
diff --git a/panels/clock/style.less b/panels/clock/style.less
old mode 100755
new mode 100644
index a867361..cb9c242
--- a/panels/clock/style.less
+++ b/panels/clock/style.less
@@ -1,159 +1,3 @@
-[data-clock=right],[data-clock=analog] {
+[data-analog-clock] {
float:left;
- height:100%;
-}
-[data-clock=analog] {
- display: block;
-}
-[data-clock=analog] img {
- width: 200px;
- height: 200px;
- position: absolute;
-}
-[data-biber] {
- opacity: 0.3;
-}
-[data-clock=right]{
-}
-[data-clock=digital] {
- display: -webkit-box;
--webkit-box-pack: justify;
--webkit-box-align: center;
-display: -moz-box;
--moz-box-pack: justify;
--moz-box-align: center;
-display: -ms-flexbox;
--ms-flex-pack: justify;
--ms-flex-align: center;
-display: box;
-box-pack: justify;
-box-align: center;
-height:100%;
-
-}
-[data-clock]{
-
- font-family: lcd;
-}
-
-[data-clock=digital] {
-
- @keyframes clock24 {
- from {top: 0%;}
- to {top: -2400%;}
- }
-
- @keyframes clock60 {
- from {top: 0%;}
- to {top: -6000%;}
- }
-
- @keyframes clockPulse {
- 0% {color: #AA0000;}
- 50% {color: #550000;}
- 100% {color: #AA0000;}
- }
-
- [data-clock] {
- position: relative;
- width: 400px;
- height: 200px;
- overflow: hidden;
- padding: 0px;
- text-align: center;
- background-color: #000000;
- color: #550000;
- box-sizing: border-box;
- }
-
- [data-clock] [data-clock-seperator] {
- position: relative;
- display: inline-table;
- top: -20px;
- height: 120px;
- font-size: 150px;
- line-height: 150px;
- margin-top: -20px;
- width: 5px;
- text-align: center;
- margin-left: -20px;
- margin-right: -20px;
- }
-
- [data-clock] [data-clock-number] {
- margin-top: -10px;
- }
-
- [data-clock] [data-clock-number=hour], [data-clock] [data-clock-number=minute] {
- position: relative;
- display: inline-table;
- font-size: 150px;
- line-height: 150px;
- text-align: center;
- overflow: hidden;
- }
-
- [data-clock] [data-clock-number=second] {
- position: relative;
- display: inline-table;
- margin-left: 5px;
- font-size: 75px;
- line-height: 150px;
- text-align: center;
- overflow: hidden;
- }
-
- [data-clock] [data-clock-number] [data-clock-indicator] {
- position: absolute;
- color: #AA0000;
- text-align: center;
- top: 0px;
- }
-
- [data-clock=css] [data-clock-number=hour] [data-clock-indicator] {
- animation: clock24 86400s steps(24) infinite;
- }
-
- [data-clock=css] [data-clock-number=minute] [data-clock-indicator] {
- animation: clock60 3600s steps(60) infinite;
- }
-
- [data-clock=css] [data-clock-number=second] [data-clock-indicator] {
- animation: clock60 60s steps(60) infinite;
- }
-
- [data-clock=css] [data-clock-seperator] {
- animation: clockPulse 1s steps(1) infinite;
- }
-
- [data-clock-date] {
- position: relative;
- display: inline-table;
- display: inline-table;
- height: 75px;
- font-size: 75px;
- line-height: 75px;
- text-align: center;
- margin-top: -60px;
- margin-left: -20px;
- margin-right: -20px;
- }
-
- [data-clock-date] [data-clock-date-background] {
- position: absolute;
- display: inline-table;
- text-align: center;
- top: 0px;
- left: 0px;
- }
-
- [data-clock-date] [data-clock-date-indicator] {
- position: absolute;
- display: inline-table;
- text-align: center;
- top: 0px;
- left: 0px;
- color: #AA0000;
- }
-
-}
+}
\ No newline at end of file
diff --git a/panels/clock/template.html b/panels/clock/template.html
old mode 100755
new mode 100644
index a432d8c..6c4da64
--- a/panels/clock/template.html
+++ b/panels/clock/template.html
@@ -1,14 +1,4 @@
-<div data-clock=analog>
- <img src="panels/clock/biber/background.svg"/>
- <img data-biber src="panels/clock/biber/biber.svg"/>
- <img data-clock-hand="hour" src="panels/clock/biber/hour.svg"/>
- <img data-clock-hand="minute" src="panels/clock/biber/minute.svg"/>
- <img data-clock-hand="second" src="panels/clock/biber/second.svg"/>
-</div>
-<div data-clock="digital">
- <span></span>
-</div><!--
-<div data-clock="right">
- <div data-clock="datum">
- </div>
-</div>-->
+<canvas data-analog-clock>
+</canvas>
+<canvas data-digital-clock>
+</canvas>
diff --git a/panels/clock2/script.js b/panels/clock2/script.js
deleted file mode 100644
index f1b6b14..0000000
--- a/panels/clock2/script.js
+++ /dev/null
@@ -1,302 +0,0 @@
-var DCC;
-
-this.loaded = function(panel, config) {
-
- var DigitalCanvasClock = function() {
- var
- me = this,
- analBGFile = "panels/clock2/background.svg",
- 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 = "#FFF",
- sdColor = "#EEE",
- icColor = "#000",
- 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%
-
- init = function() {
- if (fontsReady) {
- digiBackground = document.createElement('canvas');
- analBackground = document.createElement('canvas');
- me.resize($(panel).width(), $(panel).height());
- loop();
- } else {
- setTimeout(init,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 - 1).attr('height', size - 1);
- }
- if (!!digiClock) {
- $(digiClock).attr('width', width - 1).attr('height', size - 1);
- }
- } else {
- var size = height > width / 2 ? width / 2 : height;
- if (!!analClock) {
- $(analClock).attr('width', size - 1).attr('height', height - 1);
- width -= size;
- }
- if (!!digiClock) {
- $(digiClock).attr('width', width - 1).attr('height', height - 1);
- }
- }
- 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;
- abgc.fillRect(-analogX, -analogY, analogWidth, analogHeight);
- abgc.fillStyle = "black";
- abgc.drawImage(analBGImg, -analogRad, -analogRad, analogRad * 2, analogRad * 2);
- }
-
- analBGImg.onload = function() {
- init();
- }
- analBGImg.src = analBGFile;
- }
-
- DCC = new DigitalCanvasClock();
-
- r = function() {
- resize(panel);
- }
-
- $(window).resize(r);
-}
-
-var resize = function(panel) {
- DCC.resize($(panel).width(), $(panel).height());
-}
diff --git a/panels/clock2/style.less b/panels/clock2/style.less
deleted file mode 100644
index cb9c242..0000000
--- a/panels/clock2/style.less
+++ /dev/null
@@ -1,3 +0,0 @@
-[data-analog-clock] {
- float:left;
-}
\ No newline at end of file
diff --git a/panels/clock2/template.html b/panels/clock2/template.html
deleted file mode 100644
index 6c4da64..0000000
--- a/panels/clock2/template.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<canvas data-analog-clock>
-</canvas>
-<canvas data-digital-clock>
-</canvas>
diff --git a/panels/clock/biber/background.svg b/panels/clock_old/biber/background.svg
similarity index 100%
rename from panels/clock/biber/background.svg
rename to panels/clock_old/biber/background.svg
diff --git a/panels/clock/biber/biber.svg b/panels/clock_old/biber/biber.svg
similarity index 100%
rename from panels/clock/biber/biber.svg
rename to panels/clock_old/biber/biber.svg
diff --git a/panels/clock/biber/hour.svg b/panels/clock_old/biber/hour.svg
similarity index 100%
rename from panels/clock/biber/hour.svg
rename to panels/clock_old/biber/hour.svg
diff --git a/panels/clock/biber/minute.svg b/panels/clock_old/biber/minute.svg
similarity index 100%
rename from panels/clock/biber/minute.svg
rename to panels/clock_old/biber/minute.svg
diff --git a/panels/clock/biber/second.svg b/panels/clock_old/biber/second.svg
similarity index 100%
rename from panels/clock/biber/second.svg
rename to panels/clock_old/biber/second.svg
diff --git a/panels/clock_old/script.js b/panels/clock_old/script.js
new file mode 100755
index 0000000..fb4ed75
--- /dev/null
+++ b/panels/clock_old/script.js
@@ -0,0 +1,94 @@
+this.loaded = function(panel, config) {
+ this.clock = {
+ hour: panel.find("[data-clock-hand=hour]"),
+ minute: panel.find("[data-clock-hand=minute]"),
+ second: panel.find("[data-clock-hand=second]"),
+ digitalContainer : panel.find("[data-clock=digital]"),
+ digital : panel.find("[data-clock=digital] span"),
+ datum: panel.find("[data-clock=datum]"),
+ "config": config,
+ lasttext: "",
+ lastdate: ""
+ };
+
+ var self = { 'me': this };
+
+
+ var r = function() {
+ var svg = panel.find('[data-clock=analog]');
+ var imgs = panel.find('[data-clock=analog] img');
+ var w = panel.width();
+ var h = panel.height();
+ var q = (w<h?w:h);
+ svg.css({"height":q + "px","width":q + "px"});
+ imgs.css({"height":q + "px","width":q + "px"});
+ var fsh = h/53;
+ var fsw = (w-q)/(220);
+
+ var fs = (fsh<fsw?fsh:fsw);
+ var lh = q;
+
+ this.clock.digitalContainer.textfill(
+ {
+ maxFontPixels:-1
+ });
+ };
+
+
+ self.c = function() {updateTime.call(self.me)};
+ self.r = function() {r.call(self.me)};
+
+
+ self.c();
+ setTimeout ( self.r , 100);
+ setInterval( self.c , 500);
+ $(window).resize( self.r );
+}
+
+var rotateElement = function (id, angle) {
+ id.css('transform', 'rotate('+angle+'deg)');
+}
+var updateTime = function() { // rotate clock element
+ var months = ["Januar","Februar","März","April","Mai","Juni","Juli",
+ "August","September","Oktober","November","Dezember"];
+ var days = ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"];
+ var date = new Date();
+ // date
+ var t = date.getDay();
+ var d = date.getDate();
+ var m = date.getMonth();
+ var y = date.getFullYear();
+ // time
+ var h = date.getHours();
+ if (h.toString().length < 2)
+ h = "0" + h;
+ var i = date.getMinutes();
+ if (i.toString().length < 2)
+ i = "0" + i;
+ var s = date.getSeconds();
+ if (s.toString().length < 2)
+ s = "0" + s;
+
+ var newtext=h+":"+i+":"+s;
+ if (newtext != this.clock.lasttext) {
+ this.clock.lasttext = newtext;
+ this.clock.digital.text(newtext);
+
+ rotateElement(this.clock.hour, 30 * h + 0.5 * i);
+ rotateElement(this.clock.minute, 6 * i);
+ rotateElement(this.clock.second, 6 * s);
+ var newdate = days[t] + ", " + d + "." + months[m] + ", " + y;
+ if (newdate != this.clock.lastdate) {
+ this.clock.lastdate = newdate;
+ this.clock.datum.text(newdate);
+ }
+ }
+/* $("[panel=time] [clock] [number=h0]").html(h.toString()[0]);
+ $("[panel=time] [clock] [number=h1]").html(h.toString()[1]);
+ $("[panel=time] [clock] [number=m0]").html(i.toString()[0]);
+ $("[panel=time] [clock] [number=m1]").html(i.toString()[1]);
+ $("[panel=time] [clock] [number=s0]").html(s.toString()[0]);
+ $("[panel=time] [clock] [number=s1]").html(s.toString()[1]);
+ $("[panel=time] [date]").html(days[t] + ", " + d + "." + months[m] + ", " + y);*/
+
+}
diff --git a/panels/clock_old/style.less b/panels/clock_old/style.less
new file mode 100755
index 0000000..a867361
--- /dev/null
+++ b/panels/clock_old/style.less
@@ -0,0 +1,159 @@
+[data-clock=right],[data-clock=analog] {
+ float:left;
+ height:100%;
+}
+[data-clock=analog] {
+ display: block;
+}
+[data-clock=analog] img {
+ width: 200px;
+ height: 200px;
+ position: absolute;
+}
+[data-biber] {
+ opacity: 0.3;
+}
+[data-clock=right]{
+}
+[data-clock=digital] {
+ display: -webkit-box;
+-webkit-box-pack: justify;
+-webkit-box-align: center;
+display: -moz-box;
+-moz-box-pack: justify;
+-moz-box-align: center;
+display: -ms-flexbox;
+-ms-flex-pack: justify;
+-ms-flex-align: center;
+display: box;
+box-pack: justify;
+box-align: center;
+height:100%;
+
+}
+[data-clock]{
+
+ font-family: lcd;
+}
+
+[data-clock=digital] {
+
+ @keyframes clock24 {
+ from {top: 0%;}
+ to {top: -2400%;}
+ }
+
+ @keyframes clock60 {
+ from {top: 0%;}
+ to {top: -6000%;}
+ }
+
+ @keyframes clockPulse {
+ 0% {color: #AA0000;}
+ 50% {color: #550000;}
+ 100% {color: #AA0000;}
+ }
+
+ [data-clock] {
+ position: relative;
+ width: 400px;
+ height: 200px;
+ overflow: hidden;
+ padding: 0px;
+ text-align: center;
+ background-color: #000000;
+ color: #550000;
+ box-sizing: border-box;
+ }
+
+ [data-clock] [data-clock-seperator] {
+ position: relative;
+ display: inline-table;
+ top: -20px;
+ height: 120px;
+ font-size: 150px;
+ line-height: 150px;
+ margin-top: -20px;
+ width: 5px;
+ text-align: center;
+ margin-left: -20px;
+ margin-right: -20px;
+ }
+
+ [data-clock] [data-clock-number] {
+ margin-top: -10px;
+ }
+
+ [data-clock] [data-clock-number=hour], [data-clock] [data-clock-number=minute] {
+ position: relative;
+ display: inline-table;
+ font-size: 150px;
+ line-height: 150px;
+ text-align: center;
+ overflow: hidden;
+ }
+
+ [data-clock] [data-clock-number=second] {
+ position: relative;
+ display: inline-table;
+ margin-left: 5px;
+ font-size: 75px;
+ line-height: 150px;
+ text-align: center;
+ overflow: hidden;
+ }
+
+ [data-clock] [data-clock-number] [data-clock-indicator] {
+ position: absolute;
+ color: #AA0000;
+ text-align: center;
+ top: 0px;
+ }
+
+ [data-clock=css] [data-clock-number=hour] [data-clock-indicator] {
+ animation: clock24 86400s steps(24) infinite;
+ }
+
+ [data-clock=css] [data-clock-number=minute] [data-clock-indicator] {
+ animation: clock60 3600s steps(60) infinite;
+ }
+
+ [data-clock=css] [data-clock-number=second] [data-clock-indicator] {
+ animation: clock60 60s steps(60) infinite;
+ }
+
+ [data-clock=css] [data-clock-seperator] {
+ animation: clockPulse 1s steps(1) infinite;
+ }
+
+ [data-clock-date] {
+ position: relative;
+ display: inline-table;
+ display: inline-table;
+ height: 75px;
+ font-size: 75px;
+ line-height: 75px;
+ text-align: center;
+ margin-top: -60px;
+ margin-left: -20px;
+ margin-right: -20px;
+ }
+
+ [data-clock-date] [data-clock-date-background] {
+ position: absolute;
+ display: inline-table;
+ text-align: center;
+ top: 0px;
+ left: 0px;
+ }
+
+ [data-clock-date] [data-clock-date-indicator] {
+ position: absolute;
+ display: inline-table;
+ text-align: center;
+ top: 0px;
+ left: 0px;
+ color: #AA0000;
+ }
+
+}
diff --git a/panels/clock_old/template.html b/panels/clock_old/template.html
new file mode 100755
index 0000000..a432d8c
--- /dev/null
+++ b/panels/clock_old/template.html
@@ -0,0 +1,14 @@
+<div data-clock=analog>
+ <img src="panels/clock/biber/background.svg"/>
+ <img data-biber src="panels/clock/biber/biber.svg"/>
+ <img data-clock-hand="hour" src="panels/clock/biber/hour.svg"/>
+ <img data-clock-hand="minute" src="panels/clock/biber/minute.svg"/>
+ <img data-clock-hand="second" src="panels/clock/biber/second.svg"/>
+</div>
+<div data-clock="digital">
+ <span></span>
+</div><!--
+<div data-clock="right">
+ <div data-clock="datum">
+ </div>
+</div>-->
--
GitLab