sundowndev
/
betaflight-configurator
mirror of https://github.com/sundowndev/betaflight-configurator.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #285 from GaryKeeble/Rates-graph-enhancements 

Rates Graph Enhancements
10.3.x-maintenance
Michael Keller 2016-09-19 01:25:48 +12:00 committed by GitHub
parent 5512575051 02338caccc
commit 9d71bb3671
4 changed files with 285 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
js/RateCurve.js
View File

@ -6,6 +6,7 @@ var maxRc = 2000;
var RateCurve = function (useLegacyCurve) {
this.useLegacyCurve = useLegacyCurve;
this.maxAngularVel = null;
this.constrain = function (value, min, max) {
return Math.max(min, Math.min(value, max));
@ -56,6 +57,27 @@ var RateCurve = function (useLegacyCurve) {
context.quadraticCurveTo(width * 11 / 20, height - ((rateY / 2) * (1 - rcExpo)), width, height - rateY);
context.stroke();
}
this.drawStickPosition = function (rcData, rate, rcRate, rcExpo, superExpoActive, deadband, maxAngularVel, context, stickColor) {
const DEFAULT_SIZE = 60; // canvas units, relative size of the stick indicator (larger value is smaller indicator)
const rateScaling = (context.canvas.height / 2) / maxAngularVel;
var currentValue = this.rcCommandRawToDegreesPerSecond(rcData, rate, rcRate, rcExpo, superExpoActive, deadband);
if(rcData!=undefined) {
context.save();
context.fillStyle = stickColor || '#000000';
context.translate(context.canvas.width/2, context.canvas.height/2);
context.beginPath();
context.arc(rcData-1500, -rateScaling * currentValue, context.canvas.height / DEFAULT_SIZE, 0, 2 * Math.PI);
context.fill();
context.restore();
}
return (Math.abs(currentValue)<0.5)?0:currentValue.toFixed(0); // The calculated value in deg/s is returned from the function call for further processing.
}
};
RateCurve.prototype.rcCommandRawToDegreesPerSecond = function (rcData, rate, rcRate, rcExpo, superExpoActive, deadband) {
@ -108,6 +130,12 @@ RateCurve.prototype.getMaxAngularVel = function (rate, rcRate, rcExpo, superExpo
return maxAngularVel;
};
RateCurve.prototype.setMaxAngularVel = function (value) {
this.maxAngularVel = Math.ceil(value/200) * 200;
return this.maxAngularVel;
};
RateCurve.prototype.draw = function (rate, rcRate, rcExpo, superExpoActive, deadband, maxAngularVel, context) {
if (rate !== undefined && rcRate !== undefined && rcExpo !== undefined) {
var height = context.canvas.height;

2
tabs/pid_tuning.css
View File

@ -204,6 +204,8 @@
.tab-pid_tuning .rate_curve {
margin: 0 4px 0px 0;
height: 100%;
min-height: 250px;
min-width: 250px;
border: 1px solid silver;
border-radius: 3px;
background-image: url(../images/paper.jpg);

5
tabs/pid_tuning.html
View File

@ -349,8 +349,9 @@
<tr>
<td>
<div class="spacer" style="margin-top: 10px;">
<div class="rate_curve">
<canvas height="120px" style="width: 100%; height: 100%"></canvas>
<div class="rate_curve" style="position:relative;" >
<canvas id="rate_curve_layer0" height="120px" style="position:absolute; top: 0; left: 0; z-index: 0; height:100%; width:100%;"></canvas>
<canvas id="rate_curve_layer1" height="120px" style="position:absolute; top: 0; left: 0; z-index: 1; height:100%; width:100%;"></canvas>
</div>
</div>
</td>

389
tabs/pid_tuning.js
View File

@ -398,7 +398,7 @@ TABS.pid_tuning.initialize = function (callback) {
}
}
function drawAxes(curveContext, width, height, scaleHeight) {
function drawAxes(curveContext, width, height) {
curveContext.strokeStyle = '#000000';
curveContext.lineWidth = 4;
@ -414,93 +414,8 @@ TABS.pid_tuning.initialize = function (callback) {
curveContext.lineTo(width / 2, height);
curveContext.stroke();
if (scaleHeight <= height / 2) {
curveContext.strokeStyle = '#c0c0c0';
curveContext.lineWidth = 4;
curveContext.beginPath();
curveContext.moveTo(0, height / 2 + scaleHeight);
curveContext.lineTo(width, height / 2 + scaleHeight);
curveContext.stroke();
curveContext.beginPath();
curveContext.moveTo(0, height / 2 - scaleHeight);
curveContext.lineTo(width, height / 2 - scaleHeight);
curveContext.stroke();
}
}
function drawAxisLabel(curveContext, axisLabel, x, y, align, color) {
curveContext.fillStyle = color || '#000000' ;
curveContext.textAlign = align || 'center';
curveContext.fillText(axisLabel, x, y);
}
function drawBalloonLabel(curveContext, axisLabel, x, y, align, color, borderColor, textColor) {
/**
* curveContext is the canvas to draw on
* axisLabel is the string to display in the center of the balloon
* x, y are the coordinates of the point of the balloon
* align is whether the balloon appears to the left (align 'right') or right (align left) of the x,y coordinates
* color, borderColor and textColor are the fill color, border color and text color of the balloon
*/
const DEFAULT_OFFSET = 50; // in canvas scale; this is the horizontal length of the pointer
const DEFAULT_RADIUS = 10; // in canvas scale, this is the radius around the balloon
const fontSize = parseInt(curveContext.font);
// calculate the width and height required for the balloon
const width = (curveContext.measureText(axisLabel).width * 1.2);
const height = fontSize * 1.5; // the balloon is bigger than the text height
const pointerY = y; // always point to the required Y coordinate, even if we move the balloon itself to keep it on the canvas
// setup balloon background
curveContext.fillStyle = color || '#ffffff' ;
curveContext.strokeStyle = borderColor || '#000000' ;
// adjust the coordinates for determine where the balloon background should be drawn
x += ((align=='right')?-(width + DEFAULT_OFFSET):0) + ((align=='left')?DEFAULT_OFFSET:0);
y -= (height/2); if(y<0) y=0; else if(y>curveContext.height) y=curveContext.height; // prevent balloon from going out of canvas
var pointerLength = (height - 2 * DEFAULT_RADIUS ) / 6;
curveContext.beginPath();
curveContext.moveTo(x + DEFAULT_RADIUS, y);
curveContext.lineTo(x + width - DEFAULT_RADIUS, y);
curveContext.quadraticCurveTo(x + width, y, x + width, y + DEFAULT_RADIUS);
if(align=='right') { // point is to the right
curveContext.lineTo(x + width, y + DEFAULT_RADIUS + pointerLength);
curveContext.lineTo(x + width + DEFAULT_OFFSET, pointerY); // point
curveContext.lineTo(x + width, y + height - DEFAULT_RADIUS - pointerLength);
}
curveContext.lineTo(x + width, y + height - DEFAULT_RADIUS);
curveContext.quadraticCurveTo(x + width, y + height, x + width - DEFAULT_RADIUS, y + height);
curveContext.lineTo(x + DEFAULT_RADIUS, y + height);
curveContext.quadraticCurveTo(x, y + height, x, y + height - DEFAULT_RADIUS);
if(align=='left') { // point is to the left
curveContext.lineTo(x, y + height - DEFAULT_RADIUS - pointerLength);
curveContext.lineTo(x - DEFAULT_OFFSET, pointerY); // point
curveContext.lineTo(x, y + DEFAULT_RADIUS - pointerLength);
}
curveContext.lineTo(x, y + DEFAULT_RADIUS);
curveContext.quadraticCurveTo(x, y, x + DEFAULT_RADIUS, y);
curveContext.closePath();
// fill in the balloon background
curveContext.fill();
curveContext.stroke();
// and add the label
drawAxisLabel(curveContext, axisLabel, x + (width/2), y + (height + fontSize)/2 - 4, 'center', textColor);
}
function checkInput(element) {
var value = parseFloat(element.val());
@ -741,84 +656,78 @@ TABS.pid_tuning.initialize = function (callback) {
}
// Getting the DOM elements for curve display
var rcCurveElement = $('.rate_curve canvas').get(0);
var curveContext = rcCurveElement.getContext("2d");
var rcCurveElement = $('.rate_curve canvas#rate_curve_layer0').get(0),
curveContext = rcCurveElement.getContext("2d"),
updateNeeded = true,
maxAngularVel;
// make these variables global scope so that they can be accessed by the updateRates function.
self.maxAngularVelRollElement = $('.pid_tuning .maxAngularVelRoll');
self.maxAngularVelPitchElement = $('.pid_tuning .maxAngularVelPitch');
self.maxAngularVelYawElement = $('.pid_tuning .maxAngularVelYaw');
rcCurveElement.width = 1000;
rcCurveElement.height = 1000;
var maxAngularVelRollElement = $('.pid_tuning .maxAngularVelRoll');
var maxAngularVelPitchElement = $('.pid_tuning .maxAngularVelPitch');
var maxAngularVelYawElement = $('.pid_tuning .maxAngularVelYaw');
var updateNeeded = true;
function updateRates(event) {
function updateRates (event) {
setTimeout(function () { // let global validation trigger and adjust the values first
var targetElement = $(event.target),
targetValue = checkInput(targetElement);
if(event) { // if an event is passed, then use it
var targetElement = $(event.target),
targetValue = checkInput(targetElement);
if (self.currentRates.hasOwnProperty(targetElement.attr('name')) && targetValue !== undefined) {
self.currentRates[targetElement.attr('name')] = targetValue;
if (self.currentRates.hasOwnProperty(targetElement.attr('name')) && targetValue !== undefined) {
self.currentRates[targetElement.attr('name')] = targetValue;
updateNeeded = true;
}
if (targetElement.attr('name') === 'rc_rate' && semver.lt(CONFIG.flightControllerVersion, "2.8.1")) {
self.currentRates.rc_rate_yaw = targetValue;
}
if (targetElement.attr('name') === 'roll_pitch_rate' && semver.lt(CONFIG.apiVersion, "1.7.0")) {
self.currentRates.roll_rate = targetValue;
self.currentRates.pitch_rate = targetValue;
updateNeeded = true;
}
if (targetElement.attr('name') === 'SUPEREXPO_RATES') {
self.currentRates.superexpo = targetElement.is(':checked');
updateNeeded = true;
}
} else { // no event was passed, just force a graph update
updateNeeded = true;
}
if (targetElement.attr('name') === 'rc_rate' && semver.lt(CONFIG.flightControllerVersion, "2.8.1")) {
self.currentRates.rc_rate_yaw = targetValue;
}
if (targetElement.attr('name') === 'roll_pitch_rate' && semver.lt(CONFIG.apiVersion, "1.7.0")) {
self.currentRates.roll_rate = targetValue;
self.currentRates.pitch_rate = targetValue;
updateNeeded = true;
}
if (targetElement.attr('name') === 'SUPEREXPO_RATES') {
self.currentRates.superexpo = targetElement.is(':checked');
updateNeeded = true;
}
if (updateNeeded) {
var curveHeight = rcCurveElement.height;
var curveWidth = rcCurveElement.width;
var lineScale = curveContext.canvas.width / curveContext.canvas.clientWidth;
curveContext.clearRect(0, 0, curveWidth, curveHeight);
curveContext.font = "24pt Verdana, Arial, sans-serif";
var maxAngularVel;
if (!useLegacyCurve) {
maxAngularVel = Math.max(
printMaxAngularVel(self.currentRates.roll_rate, self.currentRates.rc_rate, self.currentRates.rc_expo, self.currentRates.superexpo, self.currentRates.deadband, maxAngularVelRollElement),
printMaxAngularVel(self.currentRates.pitch_rate, self.currentRates.rc_rate, self.currentRates.rc_expo, self.currentRates.superexpo, self.currentRates.deadband, maxAngularVelPitchElement),
printMaxAngularVel(self.currentRates.yaw_rate, self.currentRates.rc_rate_yaw, self.currentRates.rc_yaw_expo, self.currentRates.superexpo, self.currentRates.yawDeadband, maxAngularVelYawElement));
printMaxAngularVel(self.currentRates.roll_rate, self.currentRates.rc_rate, self.currentRates.rc_expo, self.currentRates.superexpo, self.currentRates.deadband, self.maxAngularVelRollElement),
printMaxAngularVel(self.currentRates.pitch_rate, self.currentRates.rc_rate, self.currentRates.rc_expo, self.currentRates.superexpo, self.currentRates.deadband, self.maxAngularVelPitchElement),
printMaxAngularVel(self.currentRates.yaw_rate, self.currentRates.rc_rate_yaw, self.currentRates.rc_yaw_expo, self.currentRates.superexpo, self.currentRates.yawDeadband, self.maxAngularVelYawElement));
// make maxAngularVel multiple of 200deg/s so that the auto-scale doesn't keep changing for small changes of the maximum curve
maxAngularVel = Math.ceil(maxAngularVel/200) * 200;
maxAngularVel = self.rateCurve.setMaxAngularVel(maxAngularVel);
drawAxes(curveContext, curveWidth, curveHeight);
drawAxes(curveContext, curveWidth, curveHeight, (curveHeight / 2) / maxAngularVel * 360);
drawAxisLabel(curveContext, maxAngularVel.toFixed(0) + ' deg/s', (curveWidth / 2) - 10, parseInt(curveContext.font)*1.2, 'right');
} else {
maxAngularVel = 0;
}
curveContext.lineWidth = 4;
curveContext.lineWidth = 2 * lineScale;
drawCurve(self.currentRates.roll_rate, self.currentRates.rc_rate, self.currentRates.rc_expo, self.currentRates.superexpo, self.currentRates.deadband, maxAngularVel, '#ff0000', 0, curveContext);
drawCurve(self.currentRates.pitch_rate, self.currentRates.rc_rate, self.currentRates.rc_expo, self.currentRates.superexpo, self.currentRates.deadband, maxAngularVel, '#00ff00', -4, curveContext);
drawCurve(self.currentRates.yaw_rate, self.currentRates.rc_rate_yaw, self.currentRates.rc_yaw_expo, self.currentRates.superexpo, self.currentRates.yawDeadband, maxAngularVel, '#0000ff', 4, curveContext);
if (!useLegacyCurve && maxAngularVel) {
var maxAngularVelRoll = maxAngularVelRollElement.text() + ' deg/s',
maxAngularVelPitch = maxAngularVelPitchElement.text() + ' deg/s',
maxAngularVelYaw = maxAngularVelYawElement.text() + ' deg/s',
rateScaling = (curveHeight / 2) / maxAngularVel;
drawBalloonLabel(curveContext, maxAngularVelRoll, curveWidth, rateScaling * (maxAngularVel - parseInt(maxAngularVelRoll)), 'right', '#FF8080', '#FF8080', '#000000');
drawBalloonLabel(curveContext, maxAngularVelPitch, curveWidth, rateScaling * (maxAngularVel - parseInt(maxAngularVelPitch)), 'right', '#80FF80', '#80FF80', '#000000');
drawBalloonLabel(curveContext, maxAngularVelYaw, curveWidth, rateScaling * (maxAngularVel - parseInt(maxAngularVelYaw)), 'right', '#8080FF', '#8080FF', '#000000');
}
self.updateRatesLabels();
updateNeeded = false;
}
@ -970,6 +879,7 @@ TABS.pid_tuning.initRatesPreview = function () {
this.model = new Model($('.rates_preview'), $('.rates_preview canvas'));
$(window).on('resize', $.proxy(this.model.resize, this.model));
$(window).on('resize', $.proxy(this.updateRatesLabels, this));
};
TABS.pid_tuning.renderModel = function () {
@ -985,6 +895,9 @@ TABS.pid_tuning.renderModel = function () {
yaw = delta * this.rateCurve.rcCommandRawToDegreesPerSecond(RC.channels[2], this.currentRates.yaw_rate, this.currentRates.rc_rate_yaw, this.currentRates.rc_yaw_expo, this.currentRates.superexpo, this.currentRates.yawDeadband);
this.model.rotateBy(-degToRad(pitch), -degToRad(yaw), -degToRad(roll));
if (this.checkRC()) this.updateRatesLabels(); // has the RC data changed ?
}
};
@ -995,6 +908,9 @@ TABS.pid_tuning.cleanup = function (callback) {
$(window).off('resize', $.proxy(self.model.resize, self.model));
}
$(window).off('resize', $.proxy(this.updateRatesLabels, this));
self.keepRendering = false;
if (callback) callback();
@ -1079,6 +995,22 @@ TABS.pid_tuning.checkUpdateProfile = function (updateRateProfile) {
}
}
TABS.pid_tuning.checkRC = function() {
// Function monitors for change in the primary axes rc received data and returns true if a change is detected.
if (!this.oldRC) { this.oldRC = [RC.channels[0], RC.channels[1], RC.channels[2]]; }
// Monitor RC.channels and detect change of value;
var rateCurveUpdateRequired = false;
for(var i=0; i<this.oldRC.length; i++) { // has the value changed ?
if(this.oldRC[i] != RC.channels[i]) {
this.oldRC[i] = RC.channels[i];
rateCurveUpdateRequired = true; // yes, then an update of the values displayed on the rate curve graph is required
}
}
return rateCurveUpdateRequired;
};
TABS.pid_tuning.updatePidControllerParameters = function () {
if (semver.gte(CONFIG.flightControllerVersion, "3.0.0")) {
if ($('.tab-pid_tuning select[name="controller"]').val() === '0') {
@ -1098,3 +1030,186 @@ TABS.pid_tuning.updatePidControllerParameters = function () {
}
}
}
TABS.pid_tuning.updateRatesLabels = function() {
var self = this;
if (!self.rateCurve.useLegacyCurve && self.rateCurve.maxAngularVel) {
var drawAxisLabel = function(context, axisLabel, x, y, align, color) {
context.fillStyle = color || '#000000' ;
context.textAlign = align || 'center';
context.fillText(axisLabel, x, y);
}
var drawBalloonLabel = function(context, axisLabel, x, y, align, colors, dirty) {
/**
* curveContext is the canvas to draw on
* axisLabel is the string to display in the center of the balloon
* x, y are the coordinates of the point of the balloon
* align is whether the balloon appears to the left (align 'right') or right (align left) of the x,y coordinates
* colors is an object defining color, border and text are the fill color, border color and text color of the balloon
*/
const DEFAULT_OFFSET = 125; // in canvas scale; this is the horizontal length of the pointer
const DEFAULT_RADIUS = 10; // in canvas scale, this is the radius around the balloon
const DEFAULT_MARGIN = 5; // in canvas scale, this is the margin around the balloon when it overlaps
const fontSize = parseInt(context.font);
// calculate the width and height required for the balloon
const width = (context.measureText(axisLabel).width * 1.2);
const height = fontSize * 1.5; // the balloon is bigger than the text height
const pointerY = y; // always point to the required Y
// coordinate, even if we move the balloon itself to keep it on the canvas
// setup balloon background
context.fillStyle = colors.color || '#ffffff' ;
context.strokeStyle = colors.border || '#000000' ;
// correct x position to account for window scaling
x *= context.canvas.clientWidth/context.canvas.clientHeight;
// adjust the coordinates for determine where the balloon background should be drawn
x += ((align=='right')?-(width + DEFAULT_OFFSET):0) + ((align=='left')?DEFAULT_OFFSET:0);
y -= (height/2); if(y<0) y=0; else if(y>context.height) y=context.height; // prevent balloon from going out of canvas
// check that the balloon does not already overlap
for(var i=0; i<dirty.length; i++) {
if((x>=dirty[i].left && x<=dirty[i].right) || (x+width>=dirty[i].left && x+width<=dirty[i].right)) { // does it overlap horizontally
if((y>=dirty[i].top && y<=dirty[i].bottom) || (y+height>=dirty[i].top && y+height<=dirty[i].bottom )) { // this overlaps another balloon
// snap above or snap below
if(y<=(dirty[i].bottom - dirty[i].top) / 2 && (dirty[i].top - height) > 0) {
y = dirty[i].top - height;
} else { // snap down
y = dirty[i].bottom;
}
}
}
}
// Add the draw area to the dirty array
dirty.push({left:x, right:x+width, top:y-DEFAULT_MARGIN, bottom:y+height+DEFAULT_MARGIN});
var pointerLength = (height - 2 * DEFAULT_RADIUS ) / 6;
context.beginPath();
context.moveTo(x + DEFAULT_RADIUS, y);
context.lineTo(x + width - DEFAULT_RADIUS, y);
context.quadraticCurveTo(x + width, y, x + width, y + DEFAULT_RADIUS);
if(align=='right') { // point is to the right
context.lineTo(x + width, y + DEFAULT_RADIUS + pointerLength);
context.lineTo(x + width + DEFAULT_OFFSET, pointerY); // point
context.lineTo(x + width, y + height - DEFAULT_RADIUS - pointerLength);
}
context.lineTo(x + width, y + height - DEFAULT_RADIUS);
context.quadraticCurveTo(x + width, y + height, x + width - DEFAULT_RADIUS, y + height);
context.lineTo(x + DEFAULT_RADIUS, y + height);
context.quadraticCurveTo(x, y + height, x, y + height - DEFAULT_RADIUS);
if(align=='left') { // point is to the left
context.lineTo(x, y + height - DEFAULT_RADIUS - pointerLength);
context.lineTo(x - DEFAULT_OFFSET, pointerY); // point
context.lineTo(x, y + DEFAULT_RADIUS - pointerLength);
}
context.lineTo(x, y + DEFAULT_RADIUS);
context.quadraticCurveTo(x, y, x + DEFAULT_RADIUS, y);
context.closePath();
// fill in the balloon background
context.fill();
context.stroke();
// and add the label
drawAxisLabel(context, axisLabel, x + (width/2), y + (height + fontSize)/2 - 4, 'center', colors.text);
}
const BALLOON_COLORS = {
roll : {color: 'rgba(255,128,128,0.4)', border: 'rgba(255,128,128,0.6)', text: '#000000'},
pitch : {color: 'rgba(128,255,128,0.4)', border: 'rgba(128,255,128,0.6)', text: '#000000'},
yaw : {color: 'rgba(128,128,255,0.4)', border: 'rgba(128,128,255,0.6)', text: '#000000'}
};
var rcStickElement,
stickContext;
if(!rcStickElement) {
rcStickElement = $('.rate_curve canvas#rate_curve_layer1').get(0);
rcStickElement.width = 1000;
rcStickElement.height = 1000;
}
if(!stickContext) stickContext = rcStickElement.getContext("2d");
stickContext.save();
var
maxAngularVelRoll = self.maxAngularVelRollElement.text() + ' deg/s',
maxAngularVelPitch = self.maxAngularVelPitchElement.text() + ' deg/s',
maxAngularVelYaw = self.maxAngularVelYawElement.text() + ' deg/s',
currentValues = [],
balloonsDirty = [],
curveHeight = rcStickElement.height,
curveWidth = rcStickElement.width,
maxAngularVel = self.rateCurve.maxAngularVel,
windowScale = (400 / stickContext.canvas.clientHeight),
rateScale = (curveHeight / 2) / maxAngularVel,
lineScale = stickContext.canvas.width / stickContext.canvas.clientWidth,
textScale = stickContext.canvas.clientHeight / stickContext.canvas.clientWidth;
stickContext.clearRect(0, 0, curveWidth, curveHeight);
// calculate the fontSize based upon window scaling
if(windowScale <= 1) {
stickContext.font = "24pt Verdana, Arial, sans-serif";
} else {
stickContext.font = (24 * windowScale) + "pt Verdana, Arial, sans-serif";
}
if(RC.channels[0] && RC.channels[1] && RC.channels[2]) {
currentValues.push(self.rateCurve.drawStickPosition(RC.channels[0], self.currentRates.roll_rate, self.currentRates.rc_rate, self.currentRates.rc_expo, self.currentRates.superexpo, self.currentRates.deadband, maxAngularVel, stickContext, '#FF8080') + ' deg/s');
currentValues.push(self.rateCurve.drawStickPosition(RC.channels[1], self.currentRates.roll_rate, self.currentRates.rc_rate, self.currentRates.rc_expo, self.currentRates.superexpo, self.currentRates.deadband, maxAngularVel, stickContext, '#80FF80') + ' deg/s');
currentValues.push(self.rateCurve.drawStickPosition(RC.channels[2], self.currentRates.yaw_rate, self.currentRates.rc_rate_yaw, self.currentRates.rc_yaw_expo, self.currentRates.superexpo, self.currentRates.yawDeadband, maxAngularVel, stickContext, '#8080FF') + ' deg/s');
} else {
currentValues = [];
}
stickContext.lineWidth = 1 * lineScale;
// use a custom scale so that the text does not appear stretched
stickContext.scale(textScale,1);
// add the maximum range label
drawAxisLabel(stickContext, maxAngularVel.toFixed(0) + ' deg/s', ((curveWidth / 2) - 10) / textScale, parseInt(stickContext.font)*1.2, 'right');
// and then the balloon labels.
balloonsDirty = []; // reset the dirty balloon draw area (for overlap detection)
// create an array of balloons to draw
var balloons = [
{value: parseInt(maxAngularVelRoll), balloon: function() {drawBalloonLabel(stickContext, maxAngularVelRoll, curveWidth, rateScale * (maxAngularVel - parseInt(maxAngularVelRoll)), 'right', BALLOON_COLORS.roll, balloonsDirty);}},
{value: parseInt(maxAngularVelPitch), balloon: function() {drawBalloonLabel(stickContext, maxAngularVelPitch, curveWidth, rateScale * (maxAngularVel - parseInt(maxAngularVelPitch)), 'right', BALLOON_COLORS.pitch, balloonsDirty);}},
{value: parseInt(maxAngularVelYaw), balloon: function() {drawBalloonLabel(stickContext, maxAngularVelYaw, curveWidth, rateScale * (maxAngularVel - parseInt(maxAngularVelYaw)), 'right', BALLOON_COLORS.yaw, balloonsDirty);}}
];
// and sort them in descending order so the largest value is at the top always
balloons.sort(function(a,b) {return (b.value - a.value)});
// add the current rc values
if(currentValues[0] && currentValues[1] && currentValues[2]) {
balloons.push(
{value: parseInt(currentValues[0]), balloon: function() {drawBalloonLabel(stickContext, currentValues[0], 10, 150, 'none', BALLOON_COLORS.roll, balloonsDirty);}},
{value: parseInt(currentValues[1]), balloon: function() {drawBalloonLabel(stickContext, currentValues[1], 10, 250, 'none', BALLOON_COLORS.pitch, balloonsDirty);}},
{value: parseInt(currentValues[2]), balloon: function() {drawBalloonLabel(stickContext, currentValues[2], 10, 350, 'none', BALLOON_COLORS.yaw, balloonsDirty);}}
);
}
// then display them on the chart
for(var i=0; i<balloons.length; i++) balloons[i].balloon();
stickContext.restore();
}
};