Database Reference
In-Depth Information
When the time comes to draw the arc, the
d
attribute of each path element
is modified appropriately. The
back
element, unlike the canvas case, only
needs to be drawn once with maximum length. The front element is
modified each time the value is updated by this function in
public/
javascripts/svg.js
:
$('*[data-counter-gauge]').each(function(i,elt) {
var dim = fixup(elt)
var name = $(elt).attr("data-counter-gauge");
drawArc($(elt).children(".back"),dim,1);
var front = $(elt).children(".front");
var max = 0;
$(document).on('data:'+name,function(event,data) {
if(data > max) max = data;
drawArc(front,dim,data/max);
});
});
The primary work is in the computation of the arc in the path element
itself. This is implemented in
public/javascripts/svg.js
using a bit
of trigonometry via the
drawArc
function:
var mid = (2.4-0.6)*0.56 + 0.6;
function drawArc(elt,dim,pct) {
var cx = dim.width/2;
var cy = dim.height/2;
var r = Math.min(cx,cy) - 12.5;
var angle = ((2.4-0.6)*pct + 0.6)*Math.PI;
var sx = cx + r*Math.cos(0.6*Math.PI);
var sy = cy + r*Math.sin(0.6*Math.PI);
var ex = cx + r*Math.cos(angle);
var ey = cy + r*Math.sin(angle);
elt.attr("d",["M",sx,sy,"A",r,r,0,
angle <= mid*Math.PI ? 0 : 1,1,
ex,ey].join(" "));
}
Like many scene description languages, SVG is not particularly designed for
ease of use. This leads to functions like the one presented in this section,
