JAVASCRIPT 19
Jquery.thooClock.js Guest on 11th July 2020 11:53:35 AM
  1. // thooClock, a jQuery Clock with alarm function
  2. // by Thomas Haaf aka thooyork, http://www.smart-sign.com
  3. // Twitter: @thooyork
  4. // Version 0.9.20
  5. // Copyright (c) 2013 thooyork
  6.  
  7. // MIT License, http://opensource.org/licenses/MIT
  8.  
  9.  
  10. (function( $ ) {
  11.  
  12.     $.fn.thooClock = function(options) {
  13.        
  14.         this.each(function() {
  15.  
  16.         var cnv,
  17.                 ctx,
  18.                 el,
  19.                 defaults,
  20.                 settings,
  21.                 radius,
  22.                 dialColor,
  23.                 dialBackgroundColor,
  24.                 secondHandColor,
  25.                 minuteHandColor,
  26.                 hourHandColor,
  27.                 alarmHandColor,
  28.                 alarmHandTipColor,
  29.                 hourCorrection,
  30.                 x,
  31.                 y;
  32.  
  33.        defaults = {
  34.                 size:250,
  35.                 dialColor:'#000000',
  36.                 dialBackgroundColor:'transparent',
  37.                 secondHandColor:'#F3A829',
  38.                 minuteHandColor:'#222222',
  39.                 hourHandColor:'#222222',
  40.                 alarmHandColor:'#FFFFFF',
  41.                 alarmHandTipColor:'#026729',
  42.                 hourCorrection:'+0',
  43.                 alarmCount:1,
  44.                 showNumerals:true
  45.             };
  46.  
  47.             settings = $.extend({}, defaults, options);
  48.  
  49.             el = this;
  50.  
  51.             el.size = settings.size;
  52.             el.dialColor = settings.dialColor;
  53.             el.dialBackgroundColor = settings.dialBackgroundColor;
  54.             el.secondHandColor = settings.secondHandColor;
  55.             el.minuteHandColor = settings.minuteHandColor;
  56.             el.hourHandColor = settings.hourHandColor;
  57.             el.alarmHandColor = settings.alarmHandColor;
  58.             el.alarmHandTipColor = settings.alarmHandTipColor;
  59.             el.hourCorrection = settings.hourCorrection;
  60.             el.showNumerals = settings.showNumerals;
  61.  
  62.             el.brandText = settings.brandText;
  63.             el.brandText2 = settings.brandText2;
  64.            
  65.             el.alarmCount = settings.alarmCount;
  66.             el.alarmTime = settings.alarmTime;
  67.             el.onAlarm = settings.onAlarm;
  68.             el.offAlarm = settings.offAlarm;
  69.  
  70.             el.onEverySecond = settings.onEverySecond;
  71.  
  72.             x=0; //loopCounter for Alarm
  73.            
  74.             cnv = document.createElement('canvas');
  75.             ctx = cnv.getContext('2d');
  76.  
  77.             cnv.width = this.size;
  78.             cnv.height = this.size;
  79.             //append canvas to element
  80.             $(cnv).appendTo(el);
  81.  
  82.             radius = parseInt(el.size/2, 10);
  83.             //translate 0,0 to center of circle:
  84.             ctx.translate(radius, radius);
  85.  
  86.             //set alarmtime from outside:
  87.            
  88.             $.fn.thooClock.setAlarm = function(newtime){
  89.                     var thedate;
  90.                     if(newtime instanceof Date){
  91.                         //keep date object
  92.                         thedate=newtime;
  93.                     }
  94.                     else{
  95.                                                 //convert from string formatted like hh[:mm[:ss]]]
  96.                                                 var arr = newtime.split(':');
  97.                                                 thedate=new Date();
  98.                                                 for(var i= 0; i <3 ; i++){
  99.                                                         //force to int
  100.                                                         arr[i]=Math.floor(arr[i]);
  101.                                                         //check if NaN or invalid min/sec
  102.                                                         if( arr[i] !==arr[i] || arr[i] > 59) arr[i]=0 ;
  103.                                                         //no more than 24h
  104.                                                         if( i==0 && arr[i] > 23) arr[i]=0 ;
  105.                                                 }
  106.                                                 thedate.setHours(arr[0],arr[1],arr[2]);
  107.                     }
  108.                     //alert(el.id);
  109.                     el.alarmTime = thedate;  
  110.             };
  111.  
  112.             $.fn.thooClock.clearAlarm = function(){
  113.                     el.alarmTime = undefined;
  114.                     startClock(0,0);
  115.                     $(el).trigger('offAlarm');
  116.             };
  117.        
  118.  
  119.             function toRadians(deg){
  120.                 return ( Math.PI / 180 ) * deg;
  121.             }    
  122.  
  123.             function drawDial(color, bgcolor){
  124.                 var dialRadius,
  125.                     dialBackRadius,
  126.                     i,
  127.                     ang,
  128.                     sang,
  129.                     cang,
  130.                     sx,
  131.                     sy,
  132.                     ex,
  133.                     ey,
  134.                     nx,
  135.                     ny,
  136.                     text,
  137.                     textSize,
  138.                     textWidth,
  139.                     brandtextWidth,
  140.                     brandtextWidth2;
  141.  
  142.                 dialRadius = parseInt(radius-(el.size/50), 10);
  143.                 dialBackRadius = radius-(el.size/400);
  144.  
  145.                 ctx.beginPath();
  146.                 ctx.arc(0,0,dialBackRadius,0,360,false);
  147.                 ctx.fillStyle = bgcolor;
  148.                 ctx.fill();
  149.  
  150.                  
  151.                 for (i=1; i<=60; i+=1) {
  152.                     ang=Math.PI/30*i;
  153.                     sang=Math.sin(ang);
  154.                     cang=Math.cos(ang);
  155.                     //hour marker/numeral
  156.                     if (i % 5 === 0) {
  157.                         ctx.lineWidth = parseInt(el.size/50,10);
  158.                         sx = sang * (dialRadius - dialRadius/9);
  159.                         sy = cang * -(dialRadius - dialRadius/9);
  160.                         ex = sang * dialRadius;
  161.                         ey = cang * - dialRadius;
  162.                         nx = sang * (dialRadius - dialRadius/4.2);
  163.                         ny = cang * -(dialRadius - dialRadius/4.2);
  164.                         text = i/5;
  165.                         ctx.textBaseline = 'middle';
  166.                         textSize = parseInt(el.size/13,10);
  167.                         ctx.font = '100 ' + textSize + 'px helvetica';
  168.                         textWidth = ctx.measureText (text).width;
  169.                         ctx.beginPath();
  170.                         ctx.fillStyle = color;
  171.  
  172.                         if(el.showNumerals){
  173.                             ctx.fillText(text,nx-(textWidth/2),ny);
  174.                         }
  175.                     //minute marker
  176.                     } else {
  177.                        ctx.lineWidth = parseInt(el.size/100,10);
  178.                         sx = sang * (dialRadius - dialRadius/20);
  179.                         sy = cang * -(dialRadius - dialRadius/20);
  180.                         ex = sang * dialRadius;
  181.                         ey = cang * - dialRadius;
  182.                     }
  183.  
  184.                     ctx.beginPath();
  185.                     ctx.strokeStyle = color;
  186.                     ctx.lineCap = "round";
  187.                     ctx.moveTo(sx,sy);
  188.                     ctx.lineTo(ex,ey);
  189.                     ctx.stroke();
  190.                 }
  191.  
  192.                 if(el.brandText !== undefined){
  193.                     ctx.font = '100 ' + parseInt(el.size/28,10) + 'px helvetica';
  194.                     brandtextWidth = ctx.measureText (el.brandText).width;
  195.                     ctx.fillText(el.brandText,-(brandtextWidth/2),(el.size/6));
  196.                 }
  197.  
  198.                 if(el.brandText2 !== undefined){
  199.                     ctx.textBaseline = 'middle';
  200.                     ctx.font = '100 ' + parseInt(el.size/44,10) + 'px helvetica';
  201.                     brandtextWidth2 = ctx.measureText (el.brandText2).width;
  202.                     ctx.fillText(el.brandText2,-(brandtextWidth2/2),(el.size/5));
  203.                 }
  204.  
  205.             }
  206.  
  207.  
  208.             function twelvebased(hour){
  209.                 if(hour >= 12){
  210.                     hour = hour - 12;
  211.                 }
  212.                 return hour;
  213.             }
  214.  
  215.  
  216.  
  217.             function drawHand(length){
  218.                ctx.beginPath();
  219.                ctx.moveTo(0,0);
  220.                ctx.lineTo(0, length * -1);
  221.                ctx.stroke();
  222.             }
  223.            
  224.  
  225.             function drawSecondHand(seconds, color){
  226.                 var shlength = (radius)-(el.size/40);
  227.                
  228.                 ctx.save();
  229.                 ctx.lineWidth = parseInt(el.size/150,10);
  230.                 ctx.lineCap = "round";
  231.                 ctx.strokeStyle = color;
  232.                 ctx.rotate( toRadians(seconds * 6));
  233.  
  234.                 ctx.shadowColor = 'rgba(0,0,0,.5)';
  235.                 ctx.shadowBlur = parseInt(el.size/80,10);
  236.                 ctx.shadowOffsetX = parseInt(el.size/200,10);
  237.                 ctx.shadowOffsetY = parseInt(el.size/200,10);
  238.  
  239.                 drawHand(shlength);
  240.  
  241.                 //tail of secondhand
  242.                 ctx.beginPath();
  243.                 ctx.moveTo(0,0);
  244.                 ctx.lineTo(0, shlength/15);
  245.                 ctx.lineWidth = parseInt(el.size/30,10);
  246.                 ctx.stroke();
  247.  
  248.                 //round center
  249.                 ctx.beginPath();
  250.                 ctx.arc(0, 0, parseInt(el.size/30,10), 0, 360, false);
  251.                 ctx.fillStyle = color;
  252.  
  253.                 ctx.fill();
  254.                 ctx.restore();
  255.             }
  256.  
  257.             function drawMinuteHand(minutes, color){
  258.                 var mhlength = el.size/2.2;
  259.                 ctx.save();
  260.                 ctx.lineWidth = parseInt(el.size/50,10);
  261.                 ctx.lineCap = "round";
  262.                 ctx.strokeStyle = color;
  263.                 ctx.rotate( toRadians(minutes * 6));
  264.  
  265.                 ctx.shadowColor = 'rgba(0,0,0,.5)';
  266.                 ctx.shadowBlur = parseInt(el.size/50,10);
  267.                 ctx.shadowOffsetX = parseInt(el.size/250,10);
  268.                 ctx.shadowOffsetY = parseInt(el.size/250,10);
  269.  
  270.                 drawHand(mhlength);
  271.                 ctx.restore();
  272.             }
  273.  
  274.             function drawHourHand(hours, color){
  275.                 var hhlength = el.size/3;
  276.                 ctx.save();
  277.                 ctx.lineWidth = parseInt(el.size/25, 10);
  278.                 ctx.lineCap = "round";
  279.                 ctx.strokeStyle = color;
  280.                 ctx.rotate( toRadians(hours * 30));
  281.  
  282.                 ctx.shadowColor = 'rgba(0,0,0,.5)';
  283.                 ctx.shadowBlur = parseInt(el.size/50, 10);
  284.                 ctx.shadowOffsetX = parseInt(el.size/300, 10);
  285.                 ctx.shadowOffsetY = parseInt(el.size/300, 10);
  286.  
  287.                 drawHand(hhlength);
  288.                 ctx.restore();
  289.             }
  290.  
  291.             function timeToDecimal(time){
  292.                 var h,
  293.                     m;
  294.                 if(time !== undefined){
  295.                     h = twelvebased(time.getHours());
  296.                     m = time.getMinutes();
  297.                 }
  298.                 return parseInt(h,10) + (m/60);
  299.             }
  300.  
  301.             function drawAlarmHand(alarm, color, tipcolor){
  302.  
  303.                 var ahlength = el.size/2.4;
  304.                
  305.                 ctx.save();
  306.                 ctx.lineWidth = parseInt(el.size/30, 10);
  307.                 ctx.lineCap = "butt";
  308.                 ctx.strokeStyle = color;
  309.  
  310.                 //decimal equivalent to hh:mm
  311.                 alarm = timeToDecimal(alarm);
  312.                 ctx.rotate( toRadians(alarm * 30));
  313.  
  314.                 ctx.shadowColor = 'rgba(0,0,0,.5)';
  315.                 ctx.shadowBlur = parseInt(el.size/55, 10);
  316.                 ctx.shadowOffsetX = parseInt(el.size/300, 10);
  317.                 ctx.shadowOffsetY = parseInt(el.size/300, 10);
  318.  
  319.                 //drawHand(ahlength);
  320.  
  321.                 ctx.beginPath();
  322.                 ctx.moveTo(0,0);
  323.                 ctx.lineTo(0, (ahlength-(el.size/10)) * -1);
  324.                 ctx.stroke();
  325.  
  326.                 ctx.beginPath();
  327.                 ctx.strokeStyle = tipcolor;
  328.                 ctx.moveTo(0, (ahlength-(el.size/10)) * -1);
  329.                 ctx.lineTo(0, (ahlength) * -1);
  330.                 ctx.stroke();
  331.  
  332.                 //round center
  333.                 ctx.beginPath();
  334.                 ctx.arc(0, 0, parseInt(el.size/24, 10), 0, 360, false);
  335.                 ctx.fillStyle = color;
  336.                 ctx.fill();
  337.                 ctx.restore();
  338.             }
  339.  
  340.             function numberCorrection(num){
  341.                 if(num !== '+0' && num !== ''){
  342.                     if(num.charAt(0) === '+'){
  343.                         //addNum
  344.                         return + num.charAt(1);
  345.                     }
  346.                     else{
  347.                         //subNum
  348.                         return - num.charAt(1);
  349.                     }
  350.                 }
  351.                 else{
  352.                     return 0;
  353.                 }
  354.             }
  355.  
  356.             //listener
  357.             if(el.onAlarm !== undefined){
  358.                 $(el).on('onAlarm', function(e){
  359.                         el.onAlarm();
  360.                         e.preventDefault();
  361.                         e.stopPropagation();
  362.                 });
  363.             }
  364.  
  365.             if(el.onEverySecond !== undefined){
  366.                 $(el).on('onEverySecond', function(e){
  367.                     el.onEverySecond();
  368.                     e.preventDefault();
  369.                 });
  370.             }
  371.  
  372.             if(el.offAlarm !== undefined){
  373.                     $(el).on('offAlarm', function(e){
  374.                     el.offAlarm();
  375.                         e.stopPropagation();
  376.                     e.preventDefault();
  377.                         });
  378.                         }
  379.  
  380.             y=0;
  381.  
  382.             function startClock(x,y){
  383.                 var theDate,
  384.                     s,
  385.                     m,
  386.                     hours,
  387.                     mins,
  388.                     h,
  389.                     exth,
  390.                     extm,
  391.                     allExtM,
  392.                     allAlarmM,
  393.                     atime;
  394.  
  395.                 theDate = new Date();
  396.                 s = theDate.getSeconds();
  397.                 mins = theDate.getMinutes();
  398.                 m = mins + (s/60);
  399.                 hours = theDate.getHours();
  400.                 h = twelvebased(hours + numberCorrection(el.hourCorrection)) + (m/60);
  401.  
  402.                 ctx.clearRect(-radius,-radius,el.size,el.size);
  403.  
  404.                 drawDial(el.dialColor, el.dialBackgroundColor);
  405.  
  406.                 if(el.alarmTime !== undefined){
  407.                     drawAlarmHand(el.alarmTime, el.alarmHandColor, el.alarmHandTipColor);
  408.                 }
  409.                 drawHourHand(h, el.hourHandColor);
  410.                 drawMinuteHand(m, el.minuteHandColor);
  411.                 drawSecondHand(s, el.secondHandColor);
  412.  
  413.                 //trigger every second custom event
  414.                 y+=1;
  415.                 if(y===1){
  416.                     $(el).trigger('onEverySecond');
  417.                     y=0;
  418.                 }
  419.                
  420.                 if(el.alarmTime !== undefined){
  421.                     allExtM = (el.alarmTime.getHours()*60*60) + (el.alarmTime.getMinutes() *60) + el.alarmTime.getSeconds();
  422.                 }
  423.  
  424.                 allAlarmM = (hours*60*60) + (mins*60) + s;
  425.  
  426.                 //set alarm loop counter
  427.                 //if(h >= timeToDecimal(twelvebased(el.alarmTime)){
  428.  
  429.                 //alarmMinutes greater than passed Minutes;
  430.                 if(allAlarmM >= allExtM){
  431.                     x+=1;
  432.                 }
  433.                 //trigger alarm for as many times as i < alarmCount
  434.                 if(x <= el.alarmCount && x !== 0){
  435.                    $(el).trigger('onAlarm');
  436.                 }
  437.                 var synced_delay= 1000 - ((new Date().getTime()) % 1000);
  438.                 setTimeout(function(){startClock(x,y);},synced_delay);
  439.             }
  440.  
  441.             startClock(x,y);
  442.  
  443.    });//return each this;
  444.   };    
  445.  
  446. }(jQuery));

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.