node-red-contrib-smartnode-hook
Version:
this project is dependenced by the node-red-contrib-smartnode for some IoT display function
1,182 lines (886 loc) • 39 kB
JavaScript
// version: 2014-11-15
/**
* o--------------------------------------------------------------------------------o
* | This file is part of the RGraph package - you can learn more at: |
* | |
* | http://www.rgraph.net |
* | |
* | This package is licensed under the Creative Commons BY-NC license. That means |
* | that for non-commercial purposes it's free to use and for business use there's |
* | a 99 GBP per-company fee to pay. You can read the full license here: |
* | |
* | http://www.rgraph.net/license |
* o--------------------------------------------------------------------------------o
*/
RGraph = window.RGraph || {isRGraph: true};
/**
* The constructor
*
* @param object id The canvas tag ID
* @param array min The minimum value
* @param array max The maximum value
* @param array value The indicated value
*/
RGraph.CornerGauge = function (conf)
{
/**
* Allow for object config style
*/
if ( typeof conf === 'object'
&& typeof conf.min === 'number'
&& typeof conf.max === 'number'
&& typeof conf.value !== 'undefined'
&& typeof conf.id === 'string') {
var id = conf.id
var canvas = document.getElementById(id);
var min = conf.min;
var max = conf.max;
var value = conf.value;
var parseConfObjectForOptions = true; // Set this so the config is parsed (at the end of the constructor)
} else {
var id = conf;
var canvas = document.getElementById(id);
var min = arguments[1];
var max = arguments[2];
var value = arguments[3];
}
// Get the canvas and context objects
this.id = id;
this.canvas = canvas;
this.context = this.canvas.getContext ? this.canvas.getContext("2d", {alpha: (typeof id === 'object' && id.alpha === false) ? false : true}) : null;
this.canvas.__object__ = this;
this.type = 'cornergauge';
this.min = min;
this.max = max;
this.value = RGraph.stringsToNumbers(value);
this.angles = {};
this.angles.needle = [];
this.centerpin = {};
this.isRGraph = true;
this.currentValue = null;
this.uid = RGraph.CreateUID();
this.canvas.uid = this.canvas.uid ? this.canvas.uid : RGraph.CreateUID();
this.coordsText = [];
this.original_colors = [];
this.firstDraw = true; // After the first draw this will be false
/**
* Range checking
*/
if (typeof(this.value) == 'object') {
for (var i=0; i<this.value.length; ++i) {
if (this.value[i] > this.max) this.value[i] = max;
if (this.value[i] < this.min) this.value[i] = min;
}
} else {
if (this.value > this.max) this.value = max;
if (this.value < this.min) this.value = min;
}
/**
* Compatibility with older browsers
*/
//RGraph.OldBrowserCompat(this.context);
// Various config type stuff
this.properties =
{
'chart.centerx': null,
'chart.centery': null,
'chart.radius': null,
'chart.gutter.left': 25,
'chart.gutter.right': 25,
'chart.gutter.top': 25,
'chart.gutter.bottom': 25,
'chart.strokestyle': 'black',
'chart.linewidth': 2,
'chart.title': '',
'chart.title.vpos': 0.5,
'chart.title.size': null,
'chart.title.x': null,
'chart.title.y': null,
'chart.title.bold': true,
'chart.text.font': 'Arial',
'chart.text.color': '#666',
'chart.text.size': 10,
'chart.background.gradient.color1': '#ddd',
'chart.background.gradient.color2': 'white',
'chart.shadow': true,
'chart.shadow.color': 'gray',
'chart.shadow.offsetx': 0,
'chart.shadow.offsety': 0,
'chart.shadow.blur': 15,
'chart.scale.decimals': 0,
'chart.scale.point': '.',
'chart.scale.thousand': ',',
'chart.units.pre': '',
'chart.units.post': '',
'chart.resizable': false,
'chart.chart.resize.handle.background': null,
'chart.adjustable': false,
'chart.annotatable': false,
'chart.annotate.color': 'black',
'chart.colors.ranges': null,
'chart.red.start': min + (0.9 * (this.max - min)),
'chart.green.end': min + (0.7 * (this.max - min)),
'chart.red.color': 'red',
'chart.yellow.color': 'yellow',
'chart.green.color': '#0f0',
'chart.value.text': true,
'chart.value.text.units.pre': '',
'chart.value.text.units.post': '',
'chart.value.text.boxed': true,
'chart.value.text.font': 'Arial',
'chart.value.text.size': 18,
'chart.value.text.bold': false,
'chart.value.text.decimals': 0,
'chart.centerpin.stroke': 'rgba(0,0,0,0)',
'chart.centerpin.fill': null, // Set in the DrawCenterpin function
'chart.centerpin.color': 'blue',
'chart.needle.colors': ['#ccc', '#D5604D', 'red', 'green', 'yellow'],
'chart.zoom.factor': 1.5,
'chart.zoom.fade.in': true,
'chart.zoom.fade.out': true,
'chart.zoom.hdir': 'right',
'chart.zoom.vdir': 'down',
'chart.zoom.frames': 25,
'chart.zoom.delay': 16.666,
'chart.zoom.shadow': true,
'chart.zoom.background': true
}
/*
* Translate half a pixel for antialiasing purposes - but only if it hasn't beeen
* done already
*/
if (!this.canvas.__rgraph_aa_translated__) {
this.context.translate(0.5,0.5);
this.canvas.__rgraph_aa_translated__ = true;
}
// Short variable names
var RG = RGraph;
var ca = this.canvas;
var co = ca.getContext('2d');
var prop = this.properties;
var jq = jQuery;
var pa = RG.Path;
var win = window;
var doc = document;
var ma = Math;
/**
* An all encompassing accessor
*
* @param string name The name of the property
* @param mixed value The value of the property
*/
this.set =
this.Set = function (name, value)
{
/**
* the number of arguments is only one and it's an
* object - parse it for configuration data and return.
*/
if (arguments.length === 1 && typeof arguments[0] === 'object') {
RG.parseObjectStyleConfig(this, arguments[0]);
return this;
}
name = name.toLowerCase();
/**
* This should be done first - prepend the property name with "chart." if necessary
*/
if (name.substr(0,6) != 'chart.') {
name = 'chart.' + name;
}
prop[name] = value;
return this;
};
/**
* An all encompassing accessor
*
* @param string name The name of the property
*/
this.get =
this.Get = function (name)
{
/**
* This should be done first - prepend the property name with "chart." if necessary
*/
if (name.substr(0,6) != 'chart.') {
name = 'chart.' + name;
}
return prop[name];
};
/**
* The function you call to draw the line chart
*/
this.draw =
this.Draw = function ()
{
/**
* Fire the onbeforedraw event
*/
RG.FireCustomEvent(this, 'onbeforedraw');
/**
* Store the value (for animation primarily
*/
this.currentValue = this.value;
if (typeof this.gutterLeft == 'undefined') {
this.gutterLeft = prop['chart.gutter.left'];
this.gutterRight = prop['chart.gutter.right'];
this.gutterTop = prop['chart.gutter.top'];
this.gutterBottom = prop['chart.gutter.bottom'];
}
/**
* Work out the radius first
*/
this.radius = Math.min(
(ca.width - this.gutterLeft - this.gutterRight),
(ca.height - this.gutterTop - this.gutterBottom)
);
if (typeof(prop['chart.radius']) == 'number') this.radius = prop['chart.radius'];
/**
* Now use the radius in working out the centerX/Y
*/
this.centerx = (ca.width / 2) - (this.radius / 2) + Math.max(30, this.radius * 0.1);
this.centery = (ca.height / 2) + (this.radius / 2) - (this.radius * 0.1);
/**
* Stop this growing uncontrollably
*/
this.coordsText = [];
if (typeof prop['chart.centerx'] === 'number') this.centerx = prop['chart.centerx'];
if (typeof prop['chart.centery'] === 'number') this.centery = prop['chart.centery'];
/**
* Parse the colors for gradients. Its down here so that the center X/Y can be used
*/
if (!this.colorsParsed) {
this.parseColors();
// Don't want to do this again
this.colorsParsed = true;
}
/**
* Start with the background
*/
this.DrawBackGround();
/**
* Draw the tickmarks
*/
this.DrawTickmarks();
/**
* Draw the color bands
*/
this.DrawColorBands();
/**
* Draw the label/value in text
*/
this.DrawLabel();
/**
* Start with the labels/scale
*/
this.DrawLabels();
/**
* Draw the needle(s)
*/
if (typeof this.value === 'object') {
for (var i=0,len=this.value.length; i<len; ++i) {
this.DrawNeedle(
i,
this.value[i],
this.radius - 65
);
}
} else {
this.DrawNeedle(0, this.value, this.radius - 65);
}
/**
* Draw the centerpin of the needle
*/
this.DrawCenterpin();
/**
* Draw the title
*/
var size = prop['chart.title.size'] ? prop['chart.title.size'] : prop['chart.text.size'] + 2
prop['chart.title.y'] = this.centery + 20 - this.radius - ((1.5 * size) / 2);
RGraph.DrawTitle(this,
prop['chart.title'],
this.guttertop,
this.centerx + (this.radius / 2),
size);
/**
* Setup the context menu if required
*/
if (prop['chart.contextmenu']) {
RGraph.ShowContext(this);
}
/**
* This function enables resizing
*/
if (prop['chart.resizable']) {
RGraph.AllowResizing(this);
}
/**
* This installs the event listeners
*/
RGraph.InstallEventListeners(this);
/**
* Fire the onfirstdraw event
*/
if (this.firstDraw) {
RG.fireCustomEvent(this, 'onfirstdraw');
this.firstDraw = false;
this.firstDrawFunc();
}
/**
* Fire the RGraph ondraw event
*/
RGraph.FireCustomEvent(this, 'ondraw');
return this;
};
/**
* Draw the background
*/
this.drawBackGround =
this.DrawBackGround = function ()
{
if (prop['chart.shadow']) {
RGraph.SetShadow(this, prop['chart.shadow.color'], prop['chart.shadow.offsetx'], prop['chart.shadow.offsety'], prop['chart.shadow.blur']);
}
co.strokeStyle = prop['chart.strokestyle'];
co.lineWidth = prop['chart.linewidth'] ? prop['chart.linewidth'] : 0.0001;
/**
* Draw the corner circle first
*/
co.beginPath();
co.arc(this.centerx,this.centery,30,0,RGraph.TWOPI,false);
co.stroke();
/**
* Draw the quarter circle background
*/
co.beginPath();
co.moveTo(this.centerx - 20, this.centery + 20);
co.arc(this.centerx - 20,this.centery + 20,this.radius,RGraph.PI + RGraph.HALFPI, RGraph.TWOPI,false);
co.closePath();
co.fill();
co.stroke();
// ==================================================================================================================== //
RG.NoShadow(this);
co.strokeStyle = prop['chart.strokestyle'];
co.lineWidth = prop['chart.linewidth'] ? prop['chart.linewidth'] : 0.0001;
/**
* Draw the quarter circle background
*/
co.beginPath();
co.moveTo(this.centerx - 20, this.centery + 20);
co.arc(this.centerx - 20,this.centery + 20,this.radius,RGraph.PI + RGraph.HALFPI, RGraph.TWOPI,false);
co.closePath();
co.stroke();
// ==================================================================================================================== //
/**
* Draw the background background again but with no shadow on
*/
RGraph.NoShadow(this);
co.lineWidth = 0;
co.fillStyle = RGraph.RadialGradient(this, this.centerx,this.centery, 0,
this.centerx, this.centery, this.radius * 0.5,
prop['chart.background.gradient.color1'],
prop['chart.background.gradient.color2']);
// Go over the bulge again in the gradient
co.beginPath();
co.moveTo(this.centerx, this.centery);
co.arc(this.centerx,this.centery,30,0,RGraph.TWOPI,0);
co.closePath();
co.fill();
// Go over the main part of the gauge with just the fill
co.beginPath();
co.moveTo(this.centerx - 20, this.centery + 20);
co.lineTo(this.centerx - 20, this.centery + 20 - this.radius);
co.arc(this.centerx - 20,this.centery + 20,this.radius,RGraph.PI + RGraph.HALFPI,RGraph.TWOPI,false);
co.closePath();
co.fill();
// Draw the gray background lines.
co.beginPath();
co.lineWidth = 1;
co.strokeStyle = '#eee';
for (var i=0; i<=5; ++i) {
var p1 = RG.getRadiusEndPoint(this.centerx, this.centery, (RGraph.HALFPI / 5 * i) + RGraph.PI + RGraph.HALFPI, 30);
var p2 = RG.getRadiusEndPoint(this.centerx, this.centery, (RGraph.HALFPI / 5 * i) + RGraph.PI + RGraph.HALFPI, this.radius - 90);
co.moveTo(p1[0], p1[1]);
co.lineTo(p2[0], p2[1]);
}
co.stroke();
};
/**
* Draw the needle
*/
this.drawNeedle =
this.DrawNeedle = function (index, value, radius)
{
var grad = RG.RadialGradient(this, this.centerx, this.centery, 0,
this.centerx, this.centery, 20,
'rgba(0,0,0,0)', prop['chart.needle.colors'][index])
this.angles.needle[index] = (((value - this.min) / (this.max - this.min)) * RG.HALFPI) + RG.PI + RG.HALFPI;
co.lineWidth = 1
co.strokeStyle = 'rgba(0,0,0,0)';
co.fillStyle = grad;
co.beginPath();
co.moveTo(this.centerx, this.centery);
co.arc(this.centerx,
this.centery,
10,
this.angles.needle[index] - RG.HALFPI,
this.angles.needle[index] - RG.HALFPI + 0.000001,
false);
co.arc(this.centerx,
this.centery,
radius - 30,
this.angles.needle[index],
this.angles.needle[index] + 0.000001,
false);
co.arc(this.centerx,
this.centery,
10,
this.angles.needle[index] + RG.HALFPI,
this.angles.needle[index] + RG.HALFPI + 0.000001,
false);
co.stroke();
co.fill();
};
/**
* Draw the centerpin for the needle
*/
this.drawCenterpin =
this.DrawCenterpin = function ()
{
if (!prop['chart.centerpin.fill']) {
prop['chart.centerpin.fill'] = RG.RadialGradient(this, this.centerx + 5,
this.centery - 5,
0,
this.centerx + 5,
this.centery - 5,
20,
'white',
prop['chart.centerpin.color'])
}
co.strokeStyle = prop['chart.centerpin.stroke'];
co.fillStyle = prop['chart.centerpin.fill'];
co.beginPath();
co.lineWidth = 2;
co.arc(this.centerx,this.centery, 15,0,RGraph.TWOPI,false);
co.stroke();
co.fill();
};
/**
* Drawthe labels
*/
this.drawLabels =
this.DrawLabels = function ()
{
var numLabels = 6;
co.fillStyle = prop['chart.text.color'];
for (var i=0; i<numLabels; ++i) {
co.beginPath();
var num = Number(this.min + ((this.max - this.min) * (i / (numLabels - 1)))).toFixed(prop['chart.scale.decimals']);
num = RG.number_format(this, num, prop['chart.units.pre'], prop['chart.units.post']);
var angle = (i * 18) / (180 / RG.PI);
RG.Text2(this,{'font':prop['chart.text.font'],
'size':prop['chart.text.size'],
'x':this.centerx + ma.sin(angle) * (this.radius - 53),
'y':this.centery - ma.cos(angle) * (this.radius - 53),
'text':String(num),
'valign':'top',
'halign':'center',
'angle': 90 * (i / (numLabels - 1)),
'tag': 'scale'
});
co.fill();
}
};
/**
* Drawthe tickmarks
*/
this.drawTickmarks =
this.DrawTickmarks = function ()
{
var bigTicks = 5;
var smallTicks = 25;
/**
* Draw the smaller tickmarks
*/
for (var i=0; i<smallTicks; ++i) {
co.beginPath();
var angle = (RG.HALFPI / (smallTicks - 1)) * i
co.lineWidth = 1;
co.arc(this.centerx,
this.centery,
this.radius - 44,
RG.PI + RG.HALFPI + angle,
RG.PI + RG.HALFPI + angle + 0.0001,
false);
co.arc(this.centerx,
this.centery,
this.radius - 46,
RG.PI + RG.HALFPI + angle,
RG.PI + RG.HALFPI + angle + 0.0001,
false);
co.stroke();
}
/**
* Now draw the larger tickmarks
*/
for (var i=0; i<bigTicks; ++i) {
co.beginPath();
var angle = (RG.HALFPI / (bigTicks - 1)) * i
co.lineWidth = 1;
co.arc(this.centerx,
this.centery,
this.radius - 43,
RG.PI + RG.HALFPI + angle,
RG.PI + RG.HALFPI + angle + 0.0001,
false);
co.arc(this.centerx,
this.centery,
this.radius - 47,
RG.PI + RG.HALFPI + angle,
RG.PI + RG.HALFPI + angle + 0.0001,
false);
co.stroke();
}
};
/**
* This draws the green background to the tickmarks
*/
this.DrawColorBands = function ()
{
if (RG.is_array(prop['chart.colors.ranges'])) {
var ranges = prop['chart.colors.ranges'];
for (var i=0,len=ranges.length; i<len; ++i) {
co.fillStyle = ranges[i][2];
co.lineWidth = 0;
co.beginPath();
co.arc(this.centerx,
this.centery,
this.radius - 54 - (prop['chart.text.size'] * 1.5),
(((ranges[i][0] - this.min) / (this.max - this.min)) * RG.HALFPI) + (RG.PI + RG.HALFPI),
(((ranges[i][1] - this.min) / (this.max - this.min)) * RG.HALFPI) + (RG.PI + RG.HALFPI),
false);
co.arc(this.centerx,
this.centery,
this.radius - 54 - 10 - (prop['chart.text.size'] * 1.5),
(((ranges[i][1] - this.min) / (this.max - this.min)) * RG.HALFPI) + (RG.PI + RG.HALFPI),
(((ranges[i][0] - this.min) / (this.max - this.min)) * RG.HALFPI) + (RG.PI + RG.HALFPI),
true);
co.closePath();
co.fill();
}
return;
}
/**
* Draw the GREEN region
*/
co.strokeStyle = prop['chart.green.color'];
co.fillStyle = prop['chart.green.color'];
var greenStart = RG.PI + RG.HALFPI;
var greenEnd = greenStart + (RG.TWOPI - greenStart) * ((prop['chart.green.end'] - this.min) / (this.max - this.min))
co.beginPath();
co.arc(this.centerx, this.centery, this.radius - 54 - (prop['chart.text.size'] * 1.5), greenStart, greenEnd, false);
co.arc(this.centerx, this.centery, this.radius - 54 - (prop['chart.text.size'] * 1.5) - 10, greenEnd, greenStart, true);
co.fill();
/**
* Draw the YELLOW region
*/
co.strokeStyle = prop['chart.yellow.color'];
co.fillStyle = prop['chart.yellow.color'];
var yellowStart = greenEnd;
var yellowEnd = (((prop['chart.red.start'] - this.min) / (this.max - this.min)) * RG.HALFPI) + RG.PI + RG.HALFPI;
co.beginPath();
co.arc(this.centerx, this.centery, this.radius - 54 - (prop['chart.text.size'] * 1.5), yellowStart, yellowEnd, false);
co.arc(this.centerx, this.centery, this.radius - 54 - (prop['chart.text.size'] * 1.5) - 10, yellowEnd, yellowStart, true);
co.fill();
/**
* Draw the RED region
*/
co.strokeStyle = prop['chart.red.color'];
co.fillStyle = prop['chart.red.color'];
var redStart = yellowEnd;
var redEnd = RGraph.TWOPI;
co.beginPath();
co.arc(this.centerx, this.centery, this.radius - 54 - (prop['chart.text.size'] * 1.5), redStart, redEnd, false);
co.arc(this.centerx, this.centery, this.radius - 54 - (prop['chart.text.size'] * 1.5) - 10, redEnd, redStart, true);
co.fill();
};
/**
* Draw the value in text
*/
this.drawLabel =
this.DrawLabel = function ()
{
if (prop['chart.value.text']) {
co.strokeStyle = prop['chart.text.color'];
co.fillStyle = prop['chart.text.color'];
var value = typeof(this.value) == 'number' ? this.value.toFixed(prop['chart.value.text.decimals']) : this.value;
if (typeof(value) == 'object') {
for (var i=0; i<value.length; ++i) {
value[i] = parseFloat(value[i]).toFixed(prop['chart.value.text.decimals']);
}
value = value.toString();
}
RG.Text2(this,{'font':prop['chart.value.text.font'],
'size':prop['chart.value.text.size'],
'x':this.centerx + (ma.cos((RG.PI / 180) * 45) * (this.radius / 3)),
'y':this.centery - (ma.sin((RG.PI / 180) * 45) * (this.radius / 3)),
'text': prop['chart.value.text.units.pre'] + value + prop['chart.value.text.units.post'],
'valign':'center',
'halign':'center',
'bounding':prop['chart.value.text.boxed'],
'boundingFill':'white',
'bold': prop['chart.value.text.bold'],
'tag': 'value.text'
});
}
};
/**
* A placeholder function
*
* @param object The event object
*/
this.getShape = function (e) {};
/**
* A getValue method
*
* @param object e An event object
*/
this.getValue = function (e)
{
var mouseXY = RGraph.getMouseXY(e);
var mouseX = mouseXY[0];
var mouseY = mouseXY[1];
var angle = RG.getAngleByXY(this.centerx, this.centery, mouseX, mouseY);
if (angle > RG.TWOPI && angle < (RG.PI + RG.HALFPI)) {
return null;
}
var value = ((angle - (RG.PI + RG.HALFPI)) / (RG.TWOPI - (RG.PI + RG.HALFPI))) * (this.max - this.min);
value = value + this.min;
if (value < this.min) {
value = this.min
}
if (value > this.max) {
value = this.max
}
// Special case for this chart
if (mouseX > this.centerx && mouseY > this.centery) {
value = this.max;
}
return value;
};
/**
* The getObjectByXY() worker method. Don't call this call:
*
* RGraph.ObjectRegistry.getObjectByXY(e)
*
* @param object e The event object
*/
this.getObjectByXY = function (e)
{
var mouseXY = RGraph.getMouseXY(e);
if (
mouseXY[0] > (this.centerx - 5)
&& mouseXY[0] < (this.centerx + this.radius)
&& mouseXY[1] > (this.centery - this.radius)
&& mouseXY[1] < (this.centery + 5)
&& RG.getHypLength(this.centerx, this.centery, mouseXY[0], mouseXY[1]) <= this.radius
) {
return this;
}
};
/**
* This method handles the adjusting calculation for when the mouse is moved
*
* @param object e The event object
*/
this.adjusting_mousemove =
this.Adjusting_mousemove = function (e)
{
/**
* Handle adjusting for the Bar
*/
if (prop['chart.adjustable'] && RG.Registry.Get('chart.adjusting') && RG.Registry.Get('chart.adjusting').uid == this.uid) {
this.value = this.getValue(e);
RG.Clear(ca);
RG.RedrawCanvas(ca);
RG.FireCustomEvent(this, 'onadjust');
}
};
/**
* This method returns the appropriate angle for a value
*
* @param number value The value to get the angle for
*/
this.getAngle = function (value)
{
if (value < this.min || value > this.max) {
return null;
}
var angle = ((value - this.min) / (this.max - this.min)) * RG.HALFPI
angle += (RG.PI + RG.HALFPI);
return angle;
};
/**
* This allows for easy specification of gradients
*/
this.parseColors = function ()
{
// Save the original colors so that they can be restored when the canvas is reset
if (this.original_colors.length === 0) {
this.original_colors['chart.colors.ranges'] = RG.array_clone(prop['chart.colors.ranges']);
this.original_colors['chart.green.color'] = RG.array_clone(prop['chart.green.color']);
this.original_colors['chart.yellow.color'] = RG.array_clone(prop['chart.yellow.color']);
this.original_colors['chart.red.color'] = RG.array_clone(prop['chart.red.color']);
}
if (!RG.is_null(prop['chart.colors.ranges'])) {
for (var i=0; i<prop['chart.colors.ranges'].length; ++i) {
prop['chart.colors.ranges'][i][2] = this.parseSingleColorForGradient(prop['chart.colors.ranges'][i][2]);
}
} else {
prop['chart.green.color'] = this.parseSingleColorForGradient(prop['chart.green.color']);
prop['chart.yellow.color'] = this.parseSingleColorForGradient(prop['chart.yellow.color']);
prop['chart.red.color'] = this.parseSingleColorForGradient(prop['chart.red.color']);
}
};
/**
* Use this function to reset the object to the post-constructor state. Eg reset colors if
* need be etc
*/
this.reset = function ()
{
};
/**
* This parses a single color value
*/
this.parseSingleColorForGradient = function (color)
{
if (!color || typeof(color) != 'string') {
return color;
}
if (color.match(/^gradient\((.*)\)$/i)) {
var parts = RegExp.$1.split(':');
var radius_start = this.radius - 54 - prop['chart.text.size'];
var radius_end = radius_start - 15;
// Create the gradient
var grad = co.createRadialGradient(this.centerx, this.centery, radius_start, this.centerx, this.centery, radius_end);
var diff = 1 / (parts.length - 1);
grad.addColorStop(0, RG.trim(parts[0]));
for (var j=1,len=parts.length; j<len; ++j) {
grad.addColorStop(j * diff, RG.trim(parts[j]));
}
}
return grad ? grad : color;
};
/**
* Using a function to add events makes it easier to facilitate method chaining
*
* @param string type The type of even to add
* @param function func
*/
this.on = function (type, func)
{
if (type.substr(0,2) !== 'on') {
type = 'on' + type;
}
this[type] = func;
return this;
};
/**
* This function runs once only
* (put at the end of the file (before any effects))
*/
this.firstDrawFunc = function ()
{
};
/**
* CornerGauge Grow
*
* This effect gradually increases the represented value
*
* @param object obj The chart object
* @param Not used - pass null
* @param function An optional callback function
*/
this.grow = function ()
{
var opt = arguments[0];
var callback = arguments[1];
var numFrames = 30;
var frame = 0;
var obj = this;
// Single pointer
if (typeof this.value === 'number') {
var origValue = Number(this.currentValue);
if (this.currentValue === null) {
this.currentValue = this.min;
origValue = this.min;
}
var newValue = this.value;
var diff = newValue - origValue;
var step = (diff / numFrames);
var frame = 0;
var iterator = function ()
{
frame++;
obj.value = ((frame / numFrames) * diff) + origValue
if (obj.value > obj.max) obj.value = obj.max;
if (obj.value < obj.min) obj.value = obj.min;
RGraph.Clear(obj.canvas);
RGraph.RedrawCanvas(obj.canvas);
if (frame < 30) {
RGraph.Effects.updateCanvas(iterator);
} else if (typeof callback === 'function') {
callback(obj);
}
};
iterator();
// Multiple pointers
} else {
if (obj.currentValue == null) {
obj.currentValue = [];
for (var i=0,len=obj.value.length; i<len; ++i) {
obj.currentValue[i] = obj.min;
}
origValue = RG.array_clone(obj.currentValue);
}
var origValue = RG.array_clone(obj.currentValue);
var newValue = RG.array_clone(obj.value);
var diff = [];
var step = [];
for (var i=0,len=newValue.length; i<len; ++i) {
diff[i] = newValue[i] - Number(obj.currentValue[i]);
step[i] = (diff[i] / numFrames);
}
var max = this.max;
var min = this.min;
var iterator = function ()
{
frame++;
for (var i=0,len=obj.value.length; i<len; ++i) {
obj.value[i] = ((frame / numFrames) * diff[i]) + origValue[i];
if (obj.value[i] > max) obj.value[i] = max;
if (obj.value[i] < min) obj.value[i] = min;
RG.clear(obj.canvas);
RG.redrawCanvas(obj.canvas);
}
if (frame < 30) {
RG.Effects.updateCanvas(iterator);
} else if (typeof callback === 'function') {
callback(obj);
}
};
iterator();
}
return this;
}
/**
* Register the object
*/
RG.Register(this);
/**
* This is the 'end' of the constructor so if the first argument
* contains configuration dsta - handle that.
*/
if (parseConfObjectForOptions) {
RG.parseObjectStyleConfig(this, conf.options);
}
};