Database Reference
In-Depth Information
To draw the gauge over each counter, first the canvas context needs to be
obtained:
$('*[data-canvas-gauge]').each(function(i,elt) {
fixup(elt)
var name = $(elt).attr("data-canvas-gauge");
var ctx = elt.getContext("2d");
The
fixup
function, implemented in
dashboard/public/
javascripts/canvas .js
, makes some slight alterations to the position
of the canvas wrapper. This positions the canvas properly in the center of
the rear panel as well as sets the resolution of the canvas surface to match
that of the element:
function fixup(elt) {
var $elt = $(elt);
var $wrap = $elt.parent();
var $parent = $wrap.parent();
var pos = $parent.position();
$wrap.width($parent.width());
$wrap.height($parent.height());
elt.width = $parent.width();
elt.height= $parent.height();
}
A canvas element actually has two sizes: the size of the element itself, set by
the
style
attribution, and the size of the canvas surface, set by the
width
and
height
attributes. This is often confusing for first-time canvas users,
and the preceding code takes the opportunity to make the canvas resolution
the same as the element size for ease of use.
Now that a surface context has been obtained and the canvas is moved
into the proper location, drawing can begin. Elements are created using
various “pen movement” commands, such as
moveTo
and
lineTo
, and
curve commands, such as
arcTo
. These are then either outlined using the
stroke
commandorfilledusingthe
fill
command.Thesurface,likemost
similar implementations, also has convenience functions for rectangles. In
this case the gauge is drawn with a
drawGauge
function, implemented
