From 55ec1d062d2fb4b02a7555eebab81f5fa421d30e Mon Sep 17 00:00:00 2001 From: Rafael Araujo Lehmkuhl Date: Fri, 20 Oct 2023 19:18:03 -0300 Subject: [PATCH] Use gradient on `VirtualHorizon` colors --- src/components/widgets/VirtualHorizon.vue | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/widgets/VirtualHorizon.vue b/src/components/widgets/VirtualHorizon.vue index 09d5e3c84..84749d928 100644 --- a/src/components/widgets/VirtualHorizon.vue +++ b/src/components/widgets/VirtualHorizon.vue @@ -84,9 +84,15 @@ const renderCanvas = (): void => { const zeroPitchLineHeight = pitchGainFactor * (renderVariables.pitchAngleDegrees / 90) * outerCircleRadius // Draw virtual horizon ground and sky - ctx.fillStyle = 'rgb(69, 144, 190)' + const skyGradient = ctx.createLinearGradient(0, -outerCircleRadius, 0, outerCircleRadius) + skyGradient.addColorStop(0, 'rgb(69, 144, 190)') + skyGradient.addColorStop(1, 'rgb(137, 190, 228)') + ctx.fillStyle = skyGradient ctx.fillRect(-1.5 * outerCircleRadius, zeroPitchLineHeight, +3 * outerCircleRadius, -3 * outerCircleRadius) - ctx.fillStyle = 'rgb(152, 104, 76)' + const groundGradient = ctx.createLinearGradient(0, -outerCircleRadius, 0, outerCircleRadius) + groundGradient.addColorStop(0, 'rgb(176, 117, 80)') + groundGradient.addColorStop(1, 'rgb(200, 149, 98)') + ctx.fillStyle = groundGradient ctx.fillRect(-1.5 * outerCircleRadius, zeroPitchLineHeight, +3 * outerCircleRadius, 3 * outerCircleRadius) // Draw virtual horizon moving line