From d6df567f140a2bd8b2ac5ce885f0b1bfe2ace5a1 Mon Sep 17 00:00:00 2001
From: eric <eric.emj.johnson@gmail.com>
Date: Sat, 2 Mar 2024 16:48:46 -0600
Subject: [PATCH] virtual-horizon: fixed issue with roll axis rendered
 backwards. fixed issue with horizon not visable until vehicle moves

---
 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 8cb545ce1..41429609e 100644
--- a/src/components/widgets/VirtualHorizon.vue
+++ b/src/components/widgets/VirtualHorizon.vue
@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { useElementSize } from '@vueuse/core'
 import gsap from 'gsap'
-import { computed, nextTick, reactive, ref, toRefs, watch } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
 
 import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { degrees, radians, resetCanvas } from '@/libs/utils'
@@ -237,7 +237,7 @@ watch(pitchAngleDeg, () => {
 })
 
 watch(rollAngleDeg, () => {
-  gsap.to(renderVariables, 0.1, { rollAngleDegrees: rollAngleDeg.value })
+  gsap.to(renderVariables, 0.1, { rollAngleDegrees: -1 * rollAngleDeg.value })
 })
 
 // Update canvas whenever reference variables changes
@@ -245,6 +245,12 @@ watch(renderVariables, () => {
   if (!widgetStore.isWidgetVisible(widget.value)) return
   nextTick(() => renderCanvas())
 })
+
+onMounted(() => {
+  if (canvasRef.value === undefined || canvasRef.value === null) return
+  if (canvasContext.value === undefined) canvasContext.value = canvasRef.value.getContext('2d')
+  renderCanvas()
+})
 </script>
 
 <style scoped>