diff --git a/src/js/tabs/pid_tuning.js b/src/js/tabs/pid_tuning.js index f23e0083a2..5f9770d794 100644 --- a/src/js/tabs/pid_tuning.js +++ b/src/js/tabs/pid_tuning.js @@ -2705,20 +2705,32 @@ pid_tuning.updateRatesLabels = function() { const rcRate = self.currentRates.rc_rate; const rcRatePitch = self.currentRates.rc_rate_pitch; + function getOffsetForBalloon(value) { + return curveWidth - (Math.ceil(stickContext.measureText(value).width) / (stickContext.canvas.clientWidth / stickContext.canvas.clientHeight)) - 40; + } + + const angleModeText = `Angle Mode`; + if (self.currentRatesType === FC.RATES_TYPE.ACTUAL) { - drawAxisLabel(stickContext, `Angle Mode`, (curveWidth - 10) / textScale, curveHeight - 250, 'right'); + drawAxisLabel(stickContext, angleModeText, (curveWidth - 10) / textScale, curveHeight - 250, 'right'); const angleCenterSensitivityRoll = (rcRate / maxAngleRollRate * angleLimit).toFixed(1); const angleCenterSensitivityPitch = (rcRatePitch / maxAnglePitchRate * angleLimit).toFixed(1); + const angleCenterSensitivityRollText = `${angleCenterSensitivityRoll}...${angleLimit}`; + const angleCenterSensitivityPitchText = `${angleCenterSensitivityPitch}...${angleLimit}`; + + const angleCenterSensitivityRollOffset = getOffsetForBalloon(angleCenterSensitivityRollText); + const angleCenterSensitivityPitchOffset = getOffsetForBalloon(angleCenterSensitivityPitchText); + balloons.push( - {value: parseInt(angleCenterSensitivityRoll), balloon: function() {drawBalloonLabel(stickContext, `${angleCenterSensitivityRoll}...${angleLimit}`, ((curveWidth / 2) - 10) / textScale, curveHeight - 150, 'none', BALLOON_COLORS.roll, balloonsDirty);}}, - {value: parseInt(angleCenterSensitivityPitch), balloon: function() {drawBalloonLabel(stickContext, `${angleCenterSensitivityPitch}...${angleLimit}`, ((curveWidth / 2) - 10) / textScale, curveHeight - 50, 'none', BALLOON_COLORS.pitch, balloonsDirty);}}, + {value: parseInt(angleCenterSensitivityRoll), balloon: function() {drawBalloonLabel(stickContext, angleCenterSensitivityRollText, angleCenterSensitivityRollOffset, curveHeight - 150, 'none', BALLOON_COLORS.roll, balloonsDirty);}}, + {value: parseInt(angleCenterSensitivityPitch), balloon: function() {drawBalloonLabel(stickContext, angleCenterSensitivityPitchText, angleCenterSensitivityPitchOffset, curveHeight - 50, 'none', BALLOON_COLORS.pitch, balloonsDirty);}}, ); } if (self.currentRatesType === FC.RATES_TYPE.BETAFLIGHT) { - drawAxisLabel(stickContext, `Angle Mode`, (curveWidth - 10) / textScale, curveHeight - 250, 'right'); + drawAxisLabel(stickContext, angleModeText, (curveWidth - 10) / textScale, curveHeight - 250, 'right'); const RC_RATE_INCREMENTAL = 14.54; @@ -2726,14 +2738,20 @@ pid_tuning.updateRatesLabels = function() { const expo = self.currentRates.rc_expo; const rcRateModified = rcRate > 2.0 ? (rcRate - 2.0) * RC_RATE_INCREMENTAL + 2.0: rcRate; const sensitivityFractionRoll = (angleLimit * ((1 - expo) * rcRateModified * 200 / maxAngleRollRate)).toFixed(1); + + const sensitivityFractionRollText = `${sensitivityFractionRoll}...${angleLimit}`; + const sensitivityFractionRollOffset = getOffsetForBalloon(sensitivityFractionRollText); // PITCH const expoPitch = self.currentRates.rc_pitch_expo; const rcRateModifiedPitch = rcRatePitch > 2.0 ? (rcRatePitch - 2.0) * RC_RATE_INCREMENTAL + 2.0: rcRatePitch; const sensitivityFractionPitch = (angleLimit * ((1 - expoPitch) * rcRateModifiedPitch * 200 / maxAnglePitchRate)).toFixed(1); + const sensitivityFractionPitchText = `${sensitivityFractionPitch}...${angleLimit}`; + const sensitivityFractionPitchOffset = getOffsetForBalloon(sensitivityFractionPitchText); + balloons.push( - {value: parseInt(sensitivityFractionRoll), balloon: function() {drawBalloonLabel(stickContext, `${sensitivityFractionRoll}...${angleLimit}`, ((curveWidth / 2) - 10) / textScale, curveHeight - 150, 'none', BALLOON_COLORS.roll, balloonsDirty);}}, - {value: parseInt(sensitivityFractionPitch), balloon: function() {drawBalloonLabel(stickContext, `${sensitivityFractionPitch}...${angleLimit}`, ((curveWidth / 2) - 10) / textScale, curveHeight - 50, 'none', BALLOON_COLORS.pitch, balloonsDirty);}}, + {value: parseInt(sensitivityFractionRoll), balloon: function() {drawBalloonLabel(stickContext, sensitivityFractionRollText, sensitivityFractionRollOffset, curveHeight - 150, 'none', BALLOON_COLORS.roll, balloonsDirty);}}, + {value: parseInt(sensitivityFractionPitch), balloon: function() {drawBalloonLabel(stickContext, sensitivityFractionPitchText, sensitivityFractionPitchOffset, curveHeight - 50, 'none', BALLOON_COLORS.pitch, balloonsDirty);}}, ); }