Creating a Visual Wheel using HTML5 Canvas and JavaScript

  October 27, 2014       Zinnia Nandy

Images (and all sorts of images if I may add) have been an inherent part of web pages since almost the inception of the browser, or at least since most of us remember anyway. I mean, can you imagine a world with web pages without images? While people have used them in the most innovative of ways, the most a web developer could do with images in terms of dynamic manipulation was to make them animated gifs or use JavaScript to update their styles and make them appear, disappear and move around, while the image itself remained unchanged. A few years down, application servers allowed for server-side dynamic creation of images, but once an image was displayed on the browser, its content couldn’t be updated unless the image itself was replaced….. until now!

Introducing the wonderful HTML5 Canvas: an element that is basically used to draw graphics using scripting, usually with the world’s favourite JavaScript. It utilises the HTML5 Canvas API that helps create graphics on the fly right within the browser as the page renders. As with anything HTML, there’s a bunch of information about Canvas on the web so we’re not going to go into detail of what it is. Instead here is my first simple (if you can call it that) experience with it that made me once again fall in love with HTML5 and the beautiful things it has allowed us to do compared to the dark ages.

A recent project of mine involved creating a ‘Visual wheel’ where the users can select options by clicking on each sector of the wheel. When clicked, the user’s selection was to be stored in the backend, which in our case was obviously Salesforce.com. But the reason to create the wheel dynamically was that the data displayed in the band was to also come from Salesforce.

The algorithm involves the use of trigonometry to calculate the angle differences. To start with we created a few CSS classes like “band” which have attributes like inner radius, outer radius and circle and “arc” which have attributes like start angle and end angle, text and text alignment. Then JavaScript was used to create methods to draw the arcs and to highlight areas on mouseover, and for it to react on mouse click.

For drawing the five concentric circles we defined a function called “band” and passed it the following parameters which were required to draw the circles:

  • The first parameter is “center” which is the center point of the circle to be drawn.
  • Second is the “min-radius” which selects the minimum radius of the circle.
  • Third is the “max-radius” which selects the maximum radius of the circle.
  • And lastly I have used “bandNo” which defines the number of concentric circles we are going to draw.

The next step is to divide each part of the circle into five separate section. For this I have defined a function called “arc” which takes the start angle and the stop angle for the arc as parameters along with the “band” and “text” parameter.

Collaboration Diagram

Collaboration Diagram

The band with distinct sections is given in the screenshot attached below:

Distinct sections

 

 

 

 

img3

 

 

 

 

 

 

 

 

When mouse is hovered on a specific section it gets highlighted. As you can see for the section “Being healthy and safe” the 3rd point is highlighted in the screenshot.

The code for the entire solution is given here:
http://plnkr.co/edit/HnG8nHCkEFHbJDmZCRCl

Let’s go through the code in detail:

There are three main classes that play an important role in creating the canvas:

1) Point.
This object stores the centre point of the circle.

1-Point

2) Band.
This object is responsible to draw the concentric circles around the object Point.

2-Band

 

This object is initialize with a constructor the parameters of which are listed below.

i) Point – object which contains the centre coordinates.
ii) minRadius – this defines the distance of the inner circle from the centre.
iii) maxRadius – This defines the distance of the outer circle from the centre.
iv) bandNo – this is the text that defines the current band.

If at all only one circle has to be drawn, then minRadius == maxRadius.

3) Arc
“arc” object divides the band into sections. This object has a constructor with the following parameters.

i) Band – instance of Band object which contains the information of the current circle.
ii) startAngle –Defines the starting angle of the arc.
iii) endAngle – defines the end angle of the arc.
iv) text – the text to be display in the arc.
v) arcNo- the arc number.
vi) alignment- defines where the text is to be aligned (left/right/centre).

Arc

 

Steps to Draw Concentric circles:

1) Create an instance of Point which defines the centre point.
2) Create instances of Band objects depending on the number of bands required.
3) Create instances of Arc depending on the number of sections required in a band.
The start angle and end angle in the arc object needs to be converted to quadrants which is achieved by multiplying the numerical value with Pi.
Eg. For creating 6 sections around in a band, following are the instance of Arc object.

4-arcobject

Where r1 represent the band instance.

4) After creating the instances of the all the 3 objects according to requirement, drallAll method is called.

drawAll method loops through each arc instance which is passed to drawArc method to draw the section (arc).
drawArc method contains the canvas context which draws the section by retrieving information from the arc instance.

Highlighting arc:

5-HighlightingArc

The function track_mouse tracks the position of mouse. The current position is passed to checkMousePos method. Inside the checkMousePos, each arc instance is checked against the current position. If current position is inside an arc, the particular arc is highlighted.

So there you have it – a simple way to create powerful dynamic images in your web pages with HTML5. Used Canvas yourself? Share your experience and thoughts on the above or questions you may have in the comments below.

If you would like to discuss any part of your Salesforce implementation with a Salesforce consultant, please get in touch with us.