Skip to content
Snippets Groups Projects
Commit b3a34964 authored by 2deep4real's avatar 2deep4real
Browse files

+ canvas clock for test 

+ fonts for canvas clock
+ webfontloader
parent 01f0a88f
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 291 additions and 326 deletions
config/layouts/test.json 0 → 100644
+ 30
− 0
View file @ b3a34964
{
"type" : "ysplit",
"cut" : 90,
"up" : {
"type" : "xsplit",
"cut" : 50,
"left" : {
"type" : "ysplit",
"cut" : 20,
"up" : {
"type" : "panel",
"name" : "clock2"
},
"down" : {
"type" : "panel",
"name" : "GameOfLife"
}
},
"right" : {
"type" : "panel",
"name" : "departure",
"config" : "oh14"
}
},
"down" : {
"type" : "panel",
"name" : "scrollbar",
"config": "oh14"
}
}
css/font.css
+ 14
− 0
View file @ b3a34964
......@@ -39,3 +39,17 @@
font-weight: 400;
src: url(font/lcd_clock.ttf) format('truetype');
}
@font-face {
font-family: 'time-medium';
font-style: normal;
font-weight: 400;
src: url(font/time-medium.ttf) format('truetype');
}
@font-face {
font-family: 'time-fat';
font-style: normal;
font-weight: 400;
src: url(font/time-fat.ttf) format('truetype');
}
\ No newline at end of file
panels/clock2/time-fat.ttf → css/font/time-fat.ttf 100755 → 100644
+0 B (+0%)
View file @ b3a34964
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
panels/clock2/time-medium.ttf → css/font/time-medium.ttf 100755 → 100644
+0 B (+0%)
View file @ b3a34964
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
index.php
+ 11
− 0
View file @ b3a34964
......@@ -15,11 +15,22 @@
<script type="text/javascript" src="js/panelAPI.js"></script>
<script type="text/javascript">
//<![CDATA[
var fontsReady = false;
WebFontConfig = {
custom : {
families : ['time-medium', 'time-fat'],
urls : ['fonts.css']
},
active : function() {
fontsReady = true;
}
};
$(document).ready(function(){
layout.loadLayout("<?= isset( $_GET["layout"] ) ? $_GET["layout"] : "oh14" ?>"); // test
});
//]]>
</script>
<script src="js/webfontloader.js"></script>
</head>
<body>
<div data-container="main">
......
js/webfontloader.js 0 → 100644
+ 17
− 0
View file @ b3a34964
/* Web Font Loader v1.6.3 - (c) Adobe Systems, Google. License: Apache 2.0 */
(function(){function aa(a,b,c){return a.call.apply(a.bind,arguments)}function ba(a,b,c){if(!a)throw Error();if(2<arguments.length){var d=Array.prototype.slice.call(arguments,2);return function(){var c=Array.prototype.slice.call(arguments);Array.prototype.unshift.apply(c,d);return a.apply(b,c)}}return function(){return a.apply(b,arguments)}}function m(a,b,c){m=Function.prototype.bind&&-1!=Function.prototype.bind.toString().indexOf("native code")?aa:ba;return m.apply(null,arguments)}var n=Date.now||function(){return+new Date};function r(a,b){this.C=a;this.q=b||a;this.D=this.q.document}r.prototype.createElement=function(a,b,c){a=this.D.createElement(a);if(b)for(var d in b)b.hasOwnProperty(d)&&("style"==d?a.style.cssText=b[d]:a.setAttribute(d,b[d]));c&&a.appendChild(this.D.createTextNode(c));return a};function s(a,b,c){a=a.D.getElementsByTagName(b)[0];a||(a=document.documentElement);a&&a.lastChild&&a.insertBefore(c,a.lastChild)}
function t(a,b,c){b=b||[];c=c||[];for(var d=a.className.split(/\s+/),f=0;f<b.length;f+=1){for(var e=!1,g=0;g<d.length;g+=1)if(b[f]===d[g]){e=!0;break}e||d.push(b[f])}b=[];for(f=0;f<d.length;f+=1){e=!1;for(g=0;g<c.length;g+=1)if(d[f]===c[g]){e=!0;break}e||b.push(d[f])}a.className=b.join(" ").replace(/\s+/g," ").replace(/^\s+|\s+$/,"")}function u(a,b){for(var c=a.className.split(/\s+/),d=0,f=c.length;d<f;d++)if(c[d]==b)return!0;return!1}
function v(a){if("string"===typeof a.ca)return a.ca;var b=a.q.location.protocol;"about:"==b&&(b=a.C.location.protocol);return"https:"==b?"https:":"http:"}function w(a,b){var c=a.createElement("link",{rel:"stylesheet",href:b,media:"all"}),d=!1;c.onload=function(){d||(d=!0)};c.onerror=function(){d||(d=!0)};s(a,"head",c)}
function x(a,b,c,d){var f=a.D.getElementsByTagName("head")[0];if(f){var e=a.createElement("script",{src:b}),g=!1;e.onload=e.onreadystatechange=function(){g||this.readyState&&"loaded"!=this.readyState&&"complete"!=this.readyState||(g=!0,c&&c(null),e.onload=e.onreadystatechange=null,"HEAD"==e.parentNode.tagName&&f.removeChild(e))};f.appendChild(e);setTimeout(function(){g||(g=!0,c&&c(Error("Script load timeout")))},d||5E3);return e}return null};function y(a){this.ba=a||"-"}y.prototype.d=function(a){for(var b=[],c=0;c<arguments.length;c++)b.push(arguments[c].replace(/[\W_]+/g,"").toLowerCase());return b.join(this.ba)};function z(a,b){this.U=a;this.M=4;this.G="n";var c=(b||"n4").match(/^([nio])([1-9])$/i);c&&(this.G=c[1],this.M=parseInt(c[2],10))}z.prototype.getName=function(){return this.U};function A(a){return a.G+a.M}function ca(a){var b=4,c="n",d=null;a&&((d=a.match(/(normal|oblique|italic)/i))&&d[1]&&(c=d[1].substr(0,1).toLowerCase()),(d=a.match(/([1-9]00|normal|bold)/i))&&d[1]&&(/bold/i.test(d[1])?b=7:/[1-9]00/.test(d[1])&&(b=parseInt(d[1].substr(0,1),10))));return c+b};function da(a,b){this.a=a;this.j=a.q.document.documentElement;this.I=b;this.f="wf";this.e=new y("-");this.Y=!1!==b.events;this.v=!1!==b.classes}function ea(a){a.v&&t(a.j,[a.e.d(a.f,"loading")]);B(a,"loading")}function C(a){if(a.v){var b=u(a.j,a.e.d(a.f,"active")),c=[],d=[a.e.d(a.f,"loading")];b||c.push(a.e.d(a.f,"inactive"));t(a.j,c,d)}B(a,"inactive")}function B(a,b,c){if(a.Y&&a.I[b])if(c)a.I[b](c.getName(),A(c));else a.I[b]()};function fa(){this.u={}}function ga(a,b,c){var d=[],f;for(f in b)if(b.hasOwnProperty(f)){var e=a.u[f];e&&d.push(e(b[f],c))}return d};function D(a,b){this.a=a;this.A=b;this.g=this.a.createElement("span",{"aria-hidden":"true"},this.A)}function F(a){s(a.a,"body",a.g)}
function G(a){var b;b=[];for(var c=a.U.split(/,\s*/),d=0;d<c.length;d++){var f=c[d].replace(/['"]/g,"");-1==f.indexOf(" ")?b.push(f):b.push("'"+f+"'")}b=b.join(",");c="normal";"o"===a.G?c="oblique":"i"===a.G&&(c="italic");return"display:block;position:absolute;top:-9999px;left:-9999px;font-size:300px;width:auto;height:auto;line-height:normal;margin:0;padding:0;font-variant:normal;white-space:nowrap;font-family:"+b+";"+("font-style:"+c+";font-weight:"+(a.M+"00")+";")}
D.prototype.remove=function(){var a=this.g;a.parentNode&&a.parentNode.removeChild(a)};function H(a,b,c,d,f,e,g){this.N=a;this.aa=b;this.a=c;this.h=d;this.A=g||"BESbswy";this.p={};this.L=f||3E3;this.S=e||null;this.w=this.o=this.m=null;this.m=new D(this.a,this.A);this.o=new D(this.a,this.A);this.w=new D(this.a,this.A);a=new z("serif",A(this.h));a=G(a);this.m.g.style.cssText=a;a=new z("sans-serif",A(this.h));a=G(a);this.o.g.style.cssText=a;a=new z("monospace",A(this.h));a=G(a);this.w.g.style.cssText=a;F(this.m);F(this.o);F(this.w);this.p.serif=this.m.g.offsetWidth;this.p["sans-serif"]=
this.o.g.offsetWidth;this.p.monospace=this.w.g.offsetWidth}var I={ga:"serif",fa:"sans-serif",ea:"monospace"},J=null;function K(){if(null===J){var a=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent);J=!!a&&(536>parseInt(a[1],10)||536===parseInt(a[1],10)&&11>=parseInt(a[2],10))}return J}
H.prototype.start=function(){this.da=n();var a=new z(this.h.getName()+",serif",A(this.h)),a=G(a);this.m.g.style.cssText=a;a=new z(this.h.getName()+",sans-serif",A(this.h));a=G(a);this.o.g.style.cssText=a;L(this)};function M(a,b,c){for(var d in I)if(I.hasOwnProperty(d)&&b===a.p[I[d]]&&c===a.p[I[d]])return!0;return!1}
function L(a){var b=a.m.g.offsetWidth,c=a.o.g.offsetWidth,d;(d=b===a.p.serif&&c===a.p["sans-serif"])||(d=K()&&M(a,b,c));d?n()-a.da>=a.L?K()&&M(a,b,c)&&(null===a.S||a.S.hasOwnProperty(a.h.getName()))?N(a,a.N):N(a,a.aa):ha(a):N(a,a.N)}function ha(a){setTimeout(m(function(){L(this)},a),50)}function N(a,b){a.m.remove();a.o.remove();a.w.remove();b(a.h)};function O(a,b,c){this.a=a;this.s=b;this.J=0;this.W=this.R=!1;this.L=c}O.prototype.Z=function(a){var b=this.s;b.v&&t(b.j,[b.e.d(b.f,a.getName(),A(a).toString(),"active")],[b.e.d(b.f,a.getName(),A(a).toString(),"loading"),b.e.d(b.f,a.getName(),A(a).toString(),"inactive")]);B(b,"fontactive",a);this.W=!0;P(this)};
O.prototype.$=function(a){var b=this.s;if(b.v){var c=u(b.j,b.e.d(b.f,a.getName(),A(a).toString(),"active")),d=[],f=[b.e.d(b.f,a.getName(),A(a).toString(),"loading")];c||d.push(b.e.d(b.f,a.getName(),A(a).toString(),"inactive"));t(b.j,d,f)}B(b,"fontinactive",a);P(this)};function P(a){0==--a.J&&a.R&&(a.W?(a=a.s,a.v&&t(a.j,[a.e.d(a.f,"active")],[a.e.d(a.f,"loading"),a.e.d(a.f,"inactive")]),B(a,"active")):C(a.s))};function Q(a){this.C=a;this.t=new fa;this.T=0;this.O=this.P=!0}Q.prototype.load=function(a){this.a=new r(this.C,a.context||this.C);this.P=!1!==a.events;this.O=!1!==a.classes;ia(this,new da(this.a,a),a)};
function ja(a,b,c,d,f){var e=0==--a.T;(a.O||a.P)&&setTimeout(function(){var a=f||null,l=d||null||{};if(0===c.length&&e)C(b.s);else{b.J+=c.length;e&&(b.R=e);for(var k=0;k<c.length;k++){var h=c[k],p=l[h.getName()],q=b.s,E=h;q.v&&t(q.j,[q.e.d(q.f,E.getName(),A(E).toString(),"loading")]);B(q,"fontloading",E);q=null;q=new H(m(b.Z,b),m(b.$,b),b.a,h,b.L,a,p);q.start()}}},0)}
function ia(a,b,c){var d=[],f=c.timeout;ea(b);var d=ga(a.t,c,a.a),e=new O(a.a,b,f);a.T=d.length;b=0;for(c=d.length;b<c;b++)d[b].load(function(b,c,d){ja(a,e,b,c,d)})};function R(a,b,c){this.H=a?a:b+ka;this.k=[];this.K=[];this.X=c||""}var ka="//fonts.googleapis.com/css";R.prototype.d=function(){if(0==this.k.length)throw Error("No fonts to load!");if(-1!=this.H.indexOf("kit="))return this.H;for(var a=this.k.length,b=[],c=0;c<a;c++)b.push(this.k[c].replace(/ /g,"+"));a=this.H+"?family="+b.join("%7C");0<this.K.length&&(a+="&subset="+this.K.join(","));0<this.X.length&&(a+="&text="+encodeURIComponent(this.X));return a};function S(a){this.k=a;this.V=[];this.F={}}
var T={latin:"BESbswy",cyrillic:"&#1081;&#1103;&#1046;",greek:"&#945;&#946;&#931;",khmer:"&#x1780;&#x1781;&#x1782;",Hanuman:"&#x1780;&#x1781;&#x1782;"},la={thin:"1",extralight:"2","extra-light":"2",ultralight:"2","ultra-light":"2",light:"3",regular:"4",book:"4",medium:"5","semi-bold":"6",semibold:"6","demi-bold":"6",demibold:"6",bold:"7","extra-bold":"8",extrabold:"8","ultra-bold":"8",ultrabold:"8",black:"9",heavy:"9",l:"3",r:"4",b:"7"},ma={i:"i",italic:"i",n:"n",normal:"n"},na=/^(thin|(?:(?:extra|ultra)-?)?light|regular|book|medium|(?:(?:semi|demi|extra|ultra)-?)?bold|black|heavy|l|r|b|[1-9]00)?(n|i|normal|italic)?$/;
S.prototype.parse=function(){for(var a=this.k.length,b=0;b<a;b++){var c=this.k[b].split(":"),d=c[0].replace(/\+/g," "),f=["n4"];if(2<=c.length){var e;var g=c[1];e=[];if(g)for(var g=g.split(","),l=g.length,k=0;k<l;k++){var h;h=g[k];if(h.match(/^[\w-]+$/))if(h=na.exec(h.toLowerCase()),null==h)h="";else{var p;p=h[1];if(null==p||""==p)p="4";else{var q=la[p];p=q?q:isNaN(p)?"4":p.substr(0,1)}h=h[2];h=[null==h||""==h?"n":ma[h],p].join("")}else h="";h&&e.push(h)}0<e.length&&(f=e);3==c.length&&(c=c[2],e=[],
c=c?c.split(","):e,0<c.length&&(c=T[c[0]])&&(this.F[d]=c))}this.F[d]||(c=T[d])&&(this.F[d]=c);for(c=0;c<f.length;c+=1)this.V.push(new z(d,f[c]))}};function U(a,b){this.a=a;this.c=b}var oa={Arimo:!0,Cousine:!0,Tinos:!0};U.prototype.load=function(a){for(var b=this.a,c=new R(this.c.api,v(b),this.c.text),d=this.c.families,f=d.length,e=0;e<f;e++){var g=d[e].split(":");3==g.length&&c.K.push(g.pop());var l="";2==g.length&&""!=g[1]&&(l=":");c.k.push(g.join(l))}d=new S(d);d.parse();w(b,c.d());a(d.V,d.F,oa)};function V(a,b){this.a=a;this.c=b;this.Q=[]}V.prototype.B=function(a){var b=this.a;return v(this.a)+(this.c.api||"//f.fontdeck.com/s/css/js/")+(b.q.location.hostname||b.C.location.hostname)+"/"+a+".js"};
V.prototype.load=function(a){var b=this.c.id,c=this.a.q,d=this;b?(c.__webfontfontdeckmodule__||(c.__webfontfontdeckmodule__={}),c.__webfontfontdeckmodule__[b]=function(b,c){for(var g=0,l=c.fonts.length;g<l;++g){var k=c.fonts[g];d.Q.push(new z(k.name,ca("font-weight:"+k.weight+";font-style:"+k.style)))}a(d.Q)},x(this.a,this.B(b),function(b){b&&a([])})):a([])};function W(a,b){this.a=a;this.c=b}W.prototype.B=function(a){return(this.c.api||"https://use.typekit.net")+"/"+a+".js"};W.prototype.load=function(a){var b=this.c.id,c=this.a.q;b?x(this.a,this.B(b),function(b){if(b)a([]);else if(c.Typekit&&c.Typekit.config&&c.Typekit.config.fn){b=c.Typekit.config.fn;for(var f=[],e=0;e<b.length;e+=2)for(var g=b[e],l=b[e+1],k=0;k<l.length;k++)f.push(new z(g,l[k]));try{c.Typekit.load({events:!1,classes:!1})}catch(h){}a(f)}},2E3):a([])};function X(a,b){this.a=a;this.c=b}X.prototype.B=function(a,b){var c=v(this.a),d=(this.c.api||"fast.fonts.net/jsapi").replace(/^.*http(s?):(\/\/)?/,"");return c+"//"+d+"/"+a+".js"+(b?"?v="+b:"")};X.prototype.load=function(a){var b=this.c.projectId,c=this.c.version;if(b){var d=this.a.q;x(this.a,this.B(b,c),function(c){if(c)a([]);else if(d["__mti_fntLst"+b]){c=d["__mti_fntLst"+b]();var e=[];if(c)for(var g=0;g<c.length;g++)e.push(new z(c[g].fontfamily));a(e)}else a([])}).id="__MonotypeAPIScript__"+b}else a([])};function Y(a,b){this.a=a;this.c=b}Y.prototype.load=function(a){var b,c,d=this.c.urls||[],f=this.c.families||[],e=this.c.testStrings||{};b=0;for(c=d.length;b<c;b++)w(this.a,d[b]);d=[];b=0;for(c=f.length;b<c;b++){var g=f[b].split(":");if(g[1])for(var l=g[1].split(","),k=0;k<l.length;k+=1)d.push(new z(g[0],l[k]));else d.push(new z(g[0]))}a(d,e)};var Z=new Q(window);Z.t.u.custom=function(a,b){return new Y(b,a)};Z.t.u.fontdeck=function(a,b){return new V(b,a)};Z.t.u.monotype=function(a,b){return new X(b,a)};Z.t.u.typekit=function(a,b){return new W(b,a)};Z.t.u.google=function(a,b){return new U(b,a)};var $={load:m(Z.load,Z)};"function"===typeof define&&define.amd?define(function(){return $}):"undefined"!==typeof module&&module.exports?module.exports=$:(window.WebFont=$,window.WebFontConfig&&Z.load(window.WebFontConfig));}());
panels/clock2/clock.css deleted 100755 → 0
+ 0
− 117
View file @ 01f0a88f
@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
panels/clock2/clock.js deleted 100755 → 0
+ 0
− 79
View file @ 01f0a88f
$(document).ready(init());
var
ClockCssIndicator,
ClockCssSeperator,
ClockHour,
ClockMinute,
ClockSecond,
ClockSeperator,
clockDate;
function init() {
var date = new Date();
var delay = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
ClockCssIndicator = $('[data-clock=css] [data-clock-number] [data-clock-indicator]');
ClockCssSeperator = $('[data-clock=css] [data-clock-seperator]');
ClockHour = $('[data-clock=js] [data-clock-number=hour] [data-clock-indicator]');
ClockMinute = $('[data-clock=js] [data-clock-number=minute] [data-clock-indicator]');
ClockSecond = $('[data-clock=js] [data-clock-number=second] [data-clock-indicator]');
ClockSeperator = $('[data-clock=js] [data-clock-seperator]');
clockDate = $('[data-clock] [data-clock-date-indicator]');
setInterval(updateTime, 10);
updateTime();
updateDate();
setDelay();
$(document).on("visibilitychange", function(e) {
if (document.visible) setDelay();
});
}
function setDelay() {
var date = new Date();
var delay = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds() + date.getMilliseconds() / 1000;
$(ClockCssIndicator).css('animation-delay', -(delay) + 's');
$(ClockCssSeperator).css('animation-delay', -(date.getMilliseconds() / 1000) + 's');
// + (date.getMilliseconds() / 1000)
console.log('clock-delay: ' + (-delay) +'s');
console.log('next in: ' + (86400-delay) +'s');
setTimeout(function() {
updateDate();
}, (86400-delay)*1000);
}
function updateTime() {
var date = new Date();
// 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;
$(ClockHour).html(h);
$(ClockMinute).html(i);
$(ClockSecond).html(s);
$(ClockSeperator).css('color', (date.getMilliseconds() > 500) ? '#550000' : '#AA0000')
}
function updateDate() {
var months = ["jan","feb","mar","apr","may","jun","jul",
"aug","sep","oct","nov","dec"];
var days = ["su","mo","tu","we","th","fr","sa"];
var date = new Date();
// date
var t = date.getDay();
var d = date.getDate();
if (d.toString().length < 2)
d = "0" + d;
var m = date.getMonth();
var y = date.getFullYear();
$(clockDate).html(days[t] + " " + d + " " + months[m] + " " + y);
}
\ No newline at end of file
panels/clock2/font.css deleted 100755 → 0
+ 0
− 32
View file @ 01f0a88f
@font-face {
font-family: 'time-thin';
font-style: normal;
font-weight: 400;
src: url(time-thin.ttf) format('truetype');
}
@font-face {
font-family: 'time-medium';
font-style: normal;
font-weight: 400;
src: url(time-medium.ttf) format('truetype');
}
@font-face {
font-family: 'time-fat';
font-style: normal;
font-weight: 400;
src: url(time-fat.ttf) format('truetype');
}
[data-font=time-thin] {
font-family: time-thin;
}
[data-font=time-medium] {
font-family: time-medium;
}
[data-font=time-fat] {
font-family: time-fat;
}
\ No newline at end of file
panels/clock2/index.html deleted 100755 → 0
+ 0
− 94
View file @ 01f0a88f
<?php
Header("content-type:text/html;charset=utf-8");
?>
<!DOCTYPE html>
<html>
<head>
<meta name="robots" content="noindex, nofollow">
<meta http-equiv="content-type" content="text/html; charset=utf8">
<link rel="stylesheet" href="clock.css"/>
<link rel="stylesheet" href="font.css"/>
<script src="jquery.js"></script>
<script async src="clock.js"></script>
</head>
<body>
<h1>CSS</h1>
<div data-clock="css" data-font="time-medium">
<div data-clock-number="hour">
88
<div data-clock-indicator>
00<br>01<br>02<br>03<br>04<br>05<br>06<br>07<br>08<br>09<br>
10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>
20<br>21<br>22<br>23
</div>
</div>
<div data-clock-seperator data-font="time-fat">
:
</div>
<div data-clock-number="minute">
88
<div data-clock-indicator>
00<br>01<br>02<br>03<br>04<br>05<br>06<br>07<br>08<br>09<br>
10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>
20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>
30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>
40<br>41<br>42<br>43<br>44<br>45<br>46<br>47<br>48<br>49<br>
50<br>51<br>52<br>53<br>54<br>55<br>56<br>57<br>58<br>59
</div>
</div>
<div data-clock-number="second">
88
<div data-clock-indicator>
00<br>01<br>02<br>03<br>04<br>05<br>06<br>07<br>08<br>09<br>
10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>
20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>
30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>
40<br>41<br>42<br>43<br>44<br>45<br>46<br>47<br>48<br>49<br>
50<br>51<br>52<br>53<br>54<br>55<br>56<br>57<br>58<br>59
</div>
</div>
<div data-clock-date>
00 00 000 0000
<div data-clock-date-background>
** ** *** ****
</div>
<div data-clock-date-indicator>
th 01 jan 1970
</div>
</div>
</div>
<h1>JS (10ms)</h1>
<div data-clock="js" data-font="time-medium">
<div data-clock-number="hour">
88
<div data-clock-indicator>
00
</div>
</div>
<div data-clock-seperator data-font="time-fat">
:
</div>
<div data-clock-number="minute">
88
<div data-clock-indicator>
00
</div>
</div>
<div data-clock-number="second">
88
<div data-clock-indicator>
00
</div>
</div>
<div data-clock-date>
00 00 000 0000
<div data-clock-date-background>
** ** *** ****
</div>
<div data-clock-date-indicator>
th 01 jan 1970
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
panels/clock2/jquery.js deleted 100755 → 0
+ 0
− 4
View file @ 01f0a88f
This diff is collapsed.
panels/clock2/script.js 0 → 100644
+ 217
− 0
View file @ b3a34964
var DCC;
this.loaded = function(panel, config) {
var DigitalCanvasClock = function() {
var
me = this,
useBackground = true,
usePulse = true,
clockContainer = panel.find("canvas[data-clock]")[0],
clockBackground = null,
fgc = clockContainer.getContext("2d"),
bgc = null,
bgColor = "#FFF",
sdColor = "#DDD",
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 (16:9)
canvasWidth = 0,
canvasHeight = 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
// 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) {
clockBackground = document.createElement('canvas');
me.calc();
loop();
} else {
setTimeout(init,0);
}
}
loop = function(delta) {
me.render();
window.requestAnimationFrame(loop);
}
this.container() = function() {
return clockContainer;
}
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;
}
this.calc = function() {
// canvas size
canvasWidth = $(clockContainer).width();
canvasHeight = $(clockContainer).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;
} else {
clockWidth = canvasWidth;
clockHeight = canvasHeight;
}
clockX = canvasWidth / 2 - clockWidth / 2;
clockY = canvasHeight / 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;
if (battery) {
batteryX = clockX + clockHeight * 157.25 / 100;
batteryY = clockY + clockHeight * 25 / 100;
batteryR = smlFontSize / 8;
batteryL = clockWidth / 100;
batteryDX = batteryX - smlFontSize / 6;
batteryDY = batteryY - smlFontSize / 6;
batteryDW = smlFontSize / 3;
batteryDH = smlFontSize / 3;
}
// background
clockBackground.width = canvasWidth;
clockBackground.height = canvasHeight;
bgc = clockBackground.getContext("2d");
renderBackground();
}
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
h = date.getHours(),
i = date.getMinutes(),
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 (useBackground) {
fgc.drawImage(clockBackground, 0, 0);
} else {
fgc.fillStyle = bgColor;
fgc.fillRect(0, 0, canvasWidth, canvasHeight);
}
fgc.fillStyle = icColor;
if (!usePulse || !seperatorOn) {
fgc.font = fatFont;
fgc.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";
}
}
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";
}
init();
}
DCC = new DigitalCanvasClock();
var r = function() {
resize(panel);
}
$(window).resize(r);
}
var resize = function(panel) {
$(DCC.container()).attr('width', $(panel).width()).attr('height', $(panel).height());
DCC.calc();
}
panels/clock2/template.html 0 → 100644
+ 2
− 0
View file @ b3a34964
<canvas data-clock style="cursor: none;">
</canvas>
panels/clock2/time-thin.ttf deleted 100755 → 0
NaN GiB (NaN%)
View file @ 01f0a88f
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment