// Fonds generated by http://textout-canvas.topworst.com/ // You may use the generator to make your own font and just copy and paste here. //Jeka911 made it... http://jeka911.wordpress.com //Feel free to use it var ctout_margins = new Array(255); var ctout_img = new Image();ctout_margins[32] = 1;ctout_margins[33] = 5;ctout_margins[34] = 12;ctout_margins[35] = 18;ctout_margins[36] = 19;ctout_margins[37] = 20;ctout_margins[38] = 30;ctout_margins[39] = 38;ctout_margins[40] = 42;ctout_margins[41] = 48;ctout_margins[42] = 54;ctout_margins[43] = 55;ctout_margins[44] = 56;ctout_margins[45] = 62;ctout_margins[46] = 66;ctout_margins[47] = 70;ctout_margins[48] = 78;ctout_margins[49] = 87;ctout_margins[50] = 92;ctout_margins[51] = 100;ctout_margins[52] = 108;ctout_margins[53] = 117;ctout_margins[54] = 125;ctout_margins[55] = 133;ctout_margins[56] = 139;ctout_margins[57] = 147;ctout_margins[58] = 155;ctout_margins[59] = 159;ctout_margins[60] = 160;ctout_margins[61] = 184;ctout_margins[62] = 185;ctout_margins[63] = 209;ctout_margins[64] = 217;ctout_margins[65] = 218;ctout_margins[66] = 227;ctout_margins[67] = 236;ctout_margins[68] = 245;ctout_margins[69] = 254;ctout_margins[70] = 261;ctout_margins[71] = 268;ctout_margins[72] = 278;ctout_margins[73] = 287;ctout_margins[74] = 291;ctout_margins[75] = 297;ctout_margins[76] = 305;ctout_margins[77] = 312;ctout_margins[78] = 322;ctout_margins[79] = 331;ctout_margins[80] = 341;ctout_margins[81] = 349;ctout_margins[82] = 359;ctout_margins[83] = 367;ctout_margins[84] = 376;ctout_margins[85] = 383;ctout_margins[86] = 392;ctout_margins[87] = 400;ctout_margins[88] = 411;ctout_margins[89] = 420;ctout_margins[90] = 428;ctout_margins[91] = 434;ctout_margins[92] = 435;ctout_margins[93] = 443;ctout_margins[94] = 444;ctout_margins[95] = 472;ctout_margins[96] = 473;ctout_margins[97] = 474;ctout_margins[98] = 481;ctout_margins[99] = 489;ctout_margins[100] = 496;ctout_margins[101] = 504;ctout_margins[102] = 511;ctout_margins[103] = 516;ctout_margins[104] = 524;ctout_margins[105] = 531;ctout_margins[106] = 535;ctout_margins[107] = 541;ctout_margins[108] = 549;ctout_margins[109] = 554;ctout_margins[110] = 564;ctout_margins[111] = 571;ctout_margins[112] = 579;ctout_margins[113] = 587;ctout_margins[114] = 595;ctout_margins[115] = 600;ctout_margins[116] = 607;ctout_margins[117] = 612;ctout_margins[118] = 619;ctout_margins[119] = 626;ctout_margins[120] = 636;ctout_margins[121] = 643;ctout_margins[122] = 650;ctout_margins[123] = 655;ctout_margins[124] = 656;ctout_margins[125] = 657;ctout_margins[126] = 658;ctout_margins[127] = 659;ctout_margins[128] = 667;ctout_margins[129] = 675;ctout_margins[130] = 683;ctout_margins[131] = 691;ctout_margins[132] = 699;ctout_margins[133] = 707;ctout_margins[134] = 715;ctout_margins[135] = 723;ctout_margins[136] = 731;ctout_margins[137] = 739;ctout_margins[138] = 747;ctout_margins[139] = 755;ctout_margins[140] = 763;ctout_margins[141] = 771;ctout_margins[142] = 779;ctout_margins[143] = 787;ctout_margins[144] = 795;ctout_margins[145] = 803;ctout_margins[146] = 811;ctout_margins[147] = 819;ctout_margins[148] = 827;ctout_margins[149] = 835;ctout_margins[150] = 843;ctout_margins[151] = 851;ctout_margins[152] = 859;ctout_margins[153] = 867;ctout_margins[154] = 875;ctout_margins[155] = 883;ctout_margins[156] = 891;ctout_margins[157] = 899;ctout_margins[158] = 907;ctout_margins[159] = 915;ctout_margins[160] = 923;ctout_margins[161] = 924;ctout_margins[162] = 925;ctout_margins[163] = 926;ctout_margins[164] = 936;ctout_margins[165] = 937;ctout_margins[166] = 938;ctout_margins[167] = 939;ctout_margins[168] = 940;ctout_margins[169] = 941;ctout_margins[170] = 942;ctout_margins[171] = 943;ctout_margins[172] = 944;ctout_margins[173] = 945;ctout_margins[174] = 946;ctout_margins[175] = 947;ctout_margins[176] = 948;ctout_margins[177] = 949;ctout_margins[178] = 950;ctout_margins[179] = 951;ctout_margins[180] = 952;ctout_margins[181] = 953;ctout_margins[182] = 954;ctout_margins[183] = 955;ctout_margins[184] = 959;ctout_margins[185] = 960;ctout_margins[186] = 961;ctout_margins[187] = 962;ctout_margins[188] = 963;ctout_margins[189] = 971;ctout_margins[190] = 980;ctout_margins[191] = 990;ctout_margins[192] = 991;ctout_margins[193] = 992;ctout_margins[194] = 993;ctout_margins[195] = 994;ctout_margins[196] = 995;ctout_margins[197] = 996;ctout_margins[198] = 997;ctout_margins[199] = 998;ctout_margins[200] = 999;ctout_margins[201] = 1000;ctout_margins[202] = 1001;ctout_margins[203] = 1002;ctout_margins[204] = 1003;ctout_margins[205] = 1004;ctout_margins[206] = 1005;ctout_margins[207] = 1006;ctout_margins[208] = 1007;ctout_margins[209] = 1008;ctout_margins[210] = 1009;ctout_margins[211] = 1010;ctout_margins[212] = 1011;ctout_margins[213] = 1012;ctout_margins[214] = 1013;ctout_margins[215] = 1014;ctout_margins[216] = 1015;ctout_margins[217] = 1016;ctout_margins[218] = 1017;ctout_margins[219] = 1018;ctout_margins[220] = 1019;ctout_margins[221] = 1020;ctout_margins[222] = 1021;ctout_margins[223] = 1022;ctout_margins[224] = 1023;ctout_margins[225] = 1024;ctout_margins[226] = 1025;ctout_margins[227] = 1026;ctout_margins[228] = 1027;ctout_margins[229] = 1028;ctout_margins[230] = 1029;ctout_margins[231] = 1030;ctout_margins[232] = 1031;ctout_margins[233] = 1032;ctout_margins[234] = 1033;ctout_margins[235] = 1034;ctout_margins[236] = 1035;ctout_margins[237] = 1036;ctout_margins[238] = 1037;ctout_margins[239] = 1038;ctout_margins[240] = 1039;ctout_margins[241] = 1040;ctout_margins[242] = 1041;ctout_margins[243] = 1042;ctout_margins[244] = 1043;ctout_margins[245] = 1044;ctout_margins[246] = 1045;ctout_margins[247] = 1046;ctout_margins[248] = 1047;ctout_margins[249] = 1048;ctout_margins[250] = 1049;ctout_margins[251] = 1050;ctout_margins[252] = 1051;ctout_margins[253] = 1052;ctout_margins[254] = 1053;ctout_margins[255] = 1054; ctout_img.src = 'data:image/png;base64,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'; function ctout_textout(ctx,x,y,str) { var shift = 0; try { for (var i =0; i 255) { red1 = 255; } else if (red1 < 0) { red1 = 0; } if (green1 > 255) { green1 = 255; } else if (green1 < 0) { green1 = 0; } if (blue1 > 255) { blue1 = 255; } else if (blue1 < 0) { blue1 = 0; } result = "rgb(" + red1 + "," + green1 + "," + blue1 + ")"; return result; } function formatTime (h, m) { if (m < 10 && h < 10) { return "0" + (h + ":0") + m; } else if (m < 10) { return h + ":0" + m; } else if (h < 10) { return "0" + (h + ":") + m; } else { return h + ":" + m; } } function canvasclock_polEval (a, x) { var result = x * x * x + a * x * x - a * x; if (result > 3 || result < -3) { result = result - 2 * Math.round (result / 2); } while (result > 1 || result < 0) { if (result < 0) { result = -result; } else if (result > 1) { result = 1 - (result - 1); } } return result; } function canvasclock_periodicFunc (a, x) { var x1 = canvasclock_polEval (a, x); var t = Math.sin (x1 * Math.PI * 2); return (1 + t) / 2; } function getColorValue (d, winkel) { var par1 = canvasclock_thetaPar; if (isNaN (par1)) { par1 = 0; } var par2 = canvasclock_distPar; if (isNaN (par2)) { par2 = 0; } return (canvasclock_periodicFunc (par1, winkel) + canvasclock_polEval (par2, 1 - d)) / 2 } // Start of the function canvasclock_drive()... var currentId = canvasclock_processId[canvasId]; if( currentId > processId ) { // Another process has been started. return; } var canvas = document.getElementById (canvasId); if (canvas.getContext) { var d = new Date (); // uncomment the following two lines when testing random times, eg. for // adjusting the font etc. //d.setHours(Math.round(simulHours) % 24); simulHours = simulHours + 0.1; //d.setMinutes(Math.round(w) % 60); var ctx = canvas.getContext ('2d'); var cw = canvas.width; var ch = canvas.height; var squareSize = Math.min (cw, ch); // Set values to default values when == -1 if( w == -1 ) { w = squareSize / 2; } if( quadrant == - 1 ) { quadrant = 3; } if( round == -1 ) { round = 0; } if( lastDeg == -1 ) { lastDeg = 0; } if( lastSize == -1 ) { lastSize = squareSize; } if( lastTime == -1 ) { lastTime = processId; } if( desiredSecondsPerFullCircle == -1 ) { desiredSecondsPerFullCircle = 60; } if( deltaW <= 0) { deltaW = 1; } if (lastSize != squareSize || drawBlackBgDisk == true ) { ctx.fillStyle = "rgb(0,0,0)"; ctx.beginPath (); ctx.arc (cw / 2, ch / 2, squareSize / 2, 0, Math.PI * 2, true); ctx.stroke (); ctx.closePath (); ctx.fill (); lastSize = squareSize; } if( squareSize > 199 ) { ctx.fillStyle = "rgb(" + 0 + "," + 0 + "," + 0 + ")"; ctx.beginPath (); ctx.arc (cw / 2, ch / 2, 46, 0, Math.PI * 2, true); ctx.stroke (); ctx.closePath (); ctx.fill (); var hours = d.getHours (); var xStart = cw / 2 - 41; // Computation of offset because to display the time xx:yy // such that the : is in the middle. // Needs to be adapted for other fonts. if (hours % 10 == 1 || (hours > 9 && hours < 20)) { if (hours == 11) { xStart = xStart + 12; } else { // date contains exactly one figure '1' xStart = xStart + 6; } } ctfont_large_textout (ctx, xStart, ch / 2 - 20, formatTime (d.getHours (), d.getMinutes ())); } else { ctx.fillStyle = "rgb(" + 0 + "," + 0+ "," + 0 + ")"; ctx.beginPath (); ctx.arc (cw / 2, ch / 2, 24, 0, Math.PI * 2, true); ctx.stroke (); ctx.closePath (); ctx.fill (); var hours = d.getHours (); var xStart = cw / 2 - 20; // Computation of offset because to display the time xx:yy // such that the : is in the middle. // Needs to be adapted for other fonts. if (hours % 10 == 1 || (hours > 9 && hours < 20)) { if (hours == 11) { xStart = xStart + 6; } else { // date contains exactly one figure '1' xStart = xStart + 4; } } ctout_textout (ctx, xStart, ch / 2 - 10, formatTime (d.getHours (), d.getMinutes ())); } if (isNaN (deltaW)) { deltaW = squareSize / 2; } if (deltaW > squareSize / 2) { deltaW = squareSize / 2; } w = w + deltaW; if (w >= squareSize) { w = w - squareSize; quadrant = quadrant + 1; if (quadrant > 3) { round = round + 1; quadrant = 0; } } var uMax = squareSize + deltaW; var wC = 2 * ((w / squareSize) - 0.5); var xC1, yC1; if (quadrant == 0) { xC1 = 1; yC1 = wC; } else if (quadrant == 2) { xC1 = -1; yC1 = -wC; } else if (quadrant == 3) { xC1 = wC; yC1 = -1; } else // (quadrant == 1) { xC1 = -wC; yC1 = 1; } var wt = (Math.atan2 (yC1, xC1) + Math.PI) / (2 * Math.PI); wt = wt - 0.25; // Makes wt == 0 when line points up. if (wt < 0) { wt = wt + 1; } var wt1 = d.getSeconds (); var secs = 60 * wt; if (round < 2) { if (wt1 > secs) { deltaW = squareSize / 6; setTimeout ("canvasclock_drive("+processId+",\'" + canvasId + "\'," + colorModel + "," + hC+","+mC+","+bgC+","+ w + "," + round + "," + quadrant + "," + lastDeg + "," + lastSize + "," + lastTime + "," + desiredSecondsPerFullCircle + "," + deltaW + ",false)", 50); return; } else { round = 2; dddPar = 1; } } var canvasclock_alpha = secs / colorModel; var canvasclock_beta = secs / (colorModel / 2); var canvasclock_alpha = secs / colorModel; var canvasclock_beta = secs / (colorModel / 2); var sA = Math.sin (canvasclock_alpha * 2 * Math.PI); var cA = Math.cos (canvasclock_alpha * 2 * Math.PI); var sB = Math.sin (canvasclock_beta * Math.PI); var cB = Math.cos (canvasclock_beta * Math.PI); var deltaWt = wt1 - wt * 60; if (deltaWt < -30) { deltaWt = deltaWt + 60; } else if (deltaWt > 30) { deltaWt = deltaWt + 30; } if (round > 3 && Math.abs (deltaWt) > 3) { round = 0; } desiredSecondsPerFullCircle = 60 - 5 * deltaWt; var minutes = d.getMinutes () + d.getSeconds () / 60; var canvasclock_thetaPar = minutes - 30; var drawMinuteHand = false; var wt60 = wt * 60; if (wt60 <= minutes) { drawMinuteHand = true; } var drawHoursHand = false; var hours = d.getHours () % 12 + (d.getMinutes () / 60); var canvasclock_distPar = 2 * (hours + d.getSeconds () / 3600) - 12; var wt12 = wt * 12; if (wt12 < hours) { drawHoursHand = true; } deltaU= Math.ceil (deltaW); for (var u = 0; u < uMax;) { var uN = (u / uMax); u = u + uN * (deltaU - 1) + 1; var xC = xC1 * uN; var yC = yC1 * uN; var xN = (xC + 1) / 2; var yN = (yC + 1) / 2; var x = xN * cw - 1; var y = yN * ch - 1; if (x < 1) { x = 0; } if (y < 1) { y = 0; } if (x > cw - 1) { x = cw - 1; } if (y > ch - 1) { y = ch - 1; } if (x < cw && y <= ch) { var d = Math.sqrt (xC * xC + yC * yC); if (d < 1) { var cv = getColorValue (d, wt); if (d > 0.99) { ctx.fillStyle = "rgb(0,0,0)"; break; } else if (drawHoursHand == true && d < 1 / 1.61803399) { // golden ratio. var blue = canvasclock_polEval(hC, cv); ctx.fillStyle = getColor (0, blue, 1); } else if (drawMinuteHand == true) { var red = canvasclock_polEval(mC,cv); ctx.fillStyle = getColor (1, 0, red); } else // draw the area not covered by minutes or hours { var green = canvasclock_polEval(bgC, cv); ctx.fillStyle = getColor (green, 1, 0.5 ); } var deltaX, deltaY; var sss = 2; var d0 = Math.ceil (1 + (sss - 1) * uN); if (d0 > sss) { d0 = sss; } if (d0 < 1) { d0 = 1; } if (d0 == 1) { deltaX = 0; deltaY = 0; } else { deltaX = d0 / 2; deltaY = d0 / 2} ctx.fillRect (x - deltaX, y - deltaX, d0, d0); //ctx.fillRect(x ,y ,1,1); } } } var now = new Date (); var timeNow = now.getTime (); if (timeNow - lastTime > 200) { var deltaArc = wt - lastDeg; if (deltaArc < 0) { deltaArc = deltaArc + 1; } lastDeg = wt; var deltaMillies = timeNow - lastTime; lastTime = timeNow; var secondsPerFullCircle = (deltaMillies / deltaArc) / 1000; if (isNaN (desiredSecondsPerFullCircle) || desiredSecondsPerFullCircle < 1) { desiredSecondsPerFullCircle = 60; } var deltaWNew = deltaW * secondsPerFullCircle / desiredSecondsPerFullCircle; if (isNaN (deltaWNew)) { deltaWNew = 5; } else if (deltaWNew > (deltaW * 1.9)) { delatWNew = deltaW * 1.9; } if( round > -1 ) { deltaW = deltaWNew; } } var command = "canvasclock_drive("+processId+",\'" + canvasId + "\'," + colorModel + "," + hC+","+mC+","+bgC+","+ w + "," + round + "," + quadrant + "," + lastDeg + "," + lastSize + "," + lastTime + "," + desiredSecondsPerFullCircle + "," + deltaW + ",false)"; setTimeout(command,99); } } function canvasclock_stop(elementId) { canvasclock_processId[elementId] = (new Date).getTime (); } function canvasclock_start (elementId, colorModel, hoursGranularity, minutesGranularity, backgroundGranularity, drawBlackBgDisk ) { // Default values for parameters. if (isNaN (colorModel)) { colorModel = 120; } if( isNaN(hoursGranularity)) { hoursGranularity = 10; } if( isNaN(minutesGranularity)) { minutesGranularity = 100; } if( isNaN(backgroundGranularity)) { backgroundGranularity = -1000; } // colorModel is not allowed to be zero as we divide by this number. if (Math.abs(colorModel) < 0.000001 ) { colorModel = 0.000001; } if( drawBlackBgDisk != true && drawBlackBgDisk != false) { // alert("bla="+drawBlackBgDisk); drawBlackBgDisk = true; } var tNow = (new Date).getTime (); canvasclock_processId[elementId] = tNow; canvasclock_drive(tNow, elementId, colorModel, hoursGranularity, minutesGranularity, backgroundGranularity, -1, -1, -1, -1, -1,-1, -1, -1, drawBlackBgDisk ); }