JavaScript Knobs

[rana.shanu]

I came across this site (builtbybuffalo.com/) and half way down there is a section that says few stars and there are 5 circles.I want to experiment similar kind of stuff. I am not a very hard core JS or JQ coder, but i can just play around with the code. So i downloaded http://anthonyterrien.com/knob/ I modified the code to generate something like this(test.eduvative.in/js/). (Not using the readOnly=true; but removing the JS code and using disabled in the input field.) How do i add the flow to the radius, similar to the one i mentioned in the starting (builtbybuffalo.com/), some glow on the radius when it starts to appear and a % sign just next to the values that are there. You may have a look at the code, i have put them on a server that i use to play around:the JS file is : test.eduvative.in/js/js/jquery.knob.js Index file has the index file link. I have saved it as .txt test.eduvative.in/js/index.txt Would be great to get some help on this.

Edited December 16, 2012 by rana.shanu

[justsomeguy]

Are you saying you want to add the animation to that library you downloaded?

[rana.shanu]

In a way yes.I want the radius of the circles to flow like that are there on the site http://builtbybuffalo.com/

[DarkxPunk]

If you want animation, from what I see you can simply just use a timer to increase the number by 1 at a certain speed till its at what you like. Seems to make sense to me... Unless I am missing something.

[rana.shanu]

If you want animation, from what I see you can simply just use a timer to increase the number by 1 at a certain speed till its at what you like. Seems to make sense to me... Unless I am missing something.

i found this

var canvas = document.getElementById('canvasid'),	 width = canvas.width,	 height = canvas.height,	 ctx = canvas.getContext('2d');	function drawTimer(deg) {	  var x = width / 2, // center x	   y = height / 2, // center y	   radius = 100,	   startAngle = 0,	   endAngle = deg * (Math.PI/180),	   counterClockwise = true;	  ctx.clearRect(0, 0, height, width);	  ctx.save();	  ctx.fillStyle = '#fe6';	  // Set circle orientation	  ctx.translate(x, y);	  ctx.rotate(-90 * Math.PI/180);	  ctx.beginPath();	  ctx.arc(0, 0, radius, startAngle, endAngle, counterClockwise);	  ctx.lineTo(0, 0);	  ctx.fill();	}	setInterval(function() {	  // Determine the amount of time elapsed; converted to degrees	  var deg = (elapsedTime / totalTime) * 360;	  drawTimer(deg);	}, 1000);	  	var v, up=0,down=0,i=0		  ,$idir = $("div.idir")		  ,$ival = $("div.ival")		  ,incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); }		  ,decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); };		  $("input.infinite").knob(				  {					 min : 0					 , max : 20					 , stopper : false					 , change : function () {							  if(v > this.cv){									   if(up){											decr();											up=0;										}else{up=1;down=0;}										} else {										if(v < this.cv){											  if(down){													incr();													down=0;											   }else{down=1;up=0;}												}										   }								  v = this.cv;						}  });

This code not exactly for what i want but this for a timer (sort of clock).But i am sure how do i combine this piece and the original code. I have also attached index file and link to JS is http://test.eduvative.in/js/js/jquery.knob.js

index.html