HTML5/JavaScript Radial Counter Library

2 yrs
JavaScript
2 yrs
HTML5
2 yrs
Awesomeness

When I started designing my new portfolio theme, I wanted the ability to present my technical skills in a more interesting way. That led me to the idea of counters. I needed the counters to display the amount of time that i’ve worked with a specific language/framework. The one gotcha was, I would have to keep the counters up to date. Thus, I arrived at a design for the counters, which required options for…

  • custom styles
  • custom text
  • self-managed durations

Psssst. Here’s a link to the demo and the library’s source code! Have a gander!

Easy Setup

Through the magic of the HTML5 <canvas> tag, the library provides an easy method of drawing arcs. How easy? Here’s all the HTML you need to render a counter:

<div id='canvas_wrapper' class='wrapper'>
  <canvas id='my_canvas' width='200' height='200'></canvas>
  <div id='canvas_content'>
    <span id='year'>2</span> <span id='year_suffix'>yr</span>
  </div>
</div>

Then, I can include the FHCounterClass script on any page. The script provides the FHCounterClass.draw_arc() function. This function is responsible for rendering the arc using the settings determined by the FHCounterClass.set_arc_properties() function. For example:

var FHCounter = new FHCounterClass( 'my_canvas' );
// put any customizations in this object argument or run with the default settings
FHCounter.set_arc_properties({
  'stroke_color': 'green'
});
FHCounter.draw_arc();

Since the provided settings were simply stroke_color: green the arc is drawn using filled-in default settings. Like so:

2 yrs

The settings that can be modified via the set_arc_properties() function are:

Property Name Purpose Default
stroke_width (int) the width of the arc 10 (px)
stroke_color (string) the color of the arc  “#fde244”
bg_stroke (bool) whether or not a background arc is drawn  true
bg_stroke_color (string) the color of the background arc  “#222222”
start_year (object) the reference year  Date object of 08/02/2012
year (object) the variable year (this changes)  Date object of 08/02/2012
year_text (string) part of the text displayed in the counter (i.e. the “2” in “2 yrs”)  depends on start_year & year options
year_suffix (string) part of the text displayed in the counter (i.e. the “yrs” in ” 2 yrs”)  “yr”
x (int) the x-coordinate of the origin of the arc  half the width of the arc (px)
y (int) the y-coordinate of the origin of the arc  half the height of the arc (px)
radius (int) the radius of the arc  half the width of the arc minus 10 (px)
initial_angle (int) the angle that the arc starts drawing from; depends on the start_year & year options  0 (radians)
final_angle (int) the angle that the arc finishes drawing at; depends on the start_year & year options  2 * Math.PI (radians)
anti_clockwise (bool) whether or not the arc draws counter-clockwise  true
anim_speed (int) the speed of the animation, larger numbers take longer  30

Some of the settings are fairly self-explanatory, such as the initial_angle and final_angle. However, the start_year and year settings can be a little confusing.

Configure and Forget

The start_year and year properties are the options that are most likely to cause confusion. The main functionality of the counter is actually keeping track of the time spent working on a particular skill. The year property takes a date and uses it to find the elapsed time between then and now. The elapsed time is then displayed in the counter. For example, my JavaScript counter (on the front page and below) has a year setting of 08/02/2012. Since four years have past since then, the resulting counter text reads “~ 4 yrs”.

2 yrs

The year property also interacts with the start_year property. The start_year property is used to determine the maximum fullness of the arc. The result of the calculation above, the elapsed time, is divided by the date stored in the start_year property to find how far the arc should render. When that quotient is found, the initial_angle and final_angle properties are updated (if the values have not been set via the set_arc_properties() function).

The difference between these calculations seems more obvious when looking at a counter such as the one for my GruntJS knowledge. The following counter is copy-pasted from my front page. The start_year property is set to 08/02/2013 and the year property is 08/21/2015. Since the time between 08/21/2015 and today’s date (when ever you are reading this) is less than the time between 08/02/2013 and today’s date, the arc is only partially filled. If you are reading this article before 08/21/2016, then the counter text will read “< 1 yr”. If you are reading this article after 08/21/2016, the counter text will read “~ X yrs” where X is greater than or equal to one.

2 yrs

Note: I’ll be coming back to update this post as changes are needed.