From bcdfa5a7103f45a7ea458b2f2cbc2cfef9566365 Mon Sep 17 00:00:00 2001
From: "nikolaus.feith" <nikolaus.feith@unileoben.ac.at>
Date: Thu, 2 Mar 2023 15:20:36 +0100
Subject: [PATCH] canvas object displays the data but data is still empty

---
 ActiveBOWeb/src/components/MountainCarCanvas.vue | 14 +++++++++-----
 ActiveBOWeb/src/components/RosBar.vue            |  1 -
 ActiveBOWeb/src/store/MountainCarStore.js        |  7 +++++--
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/ActiveBOWeb/src/components/MountainCarCanvas.vue b/ActiveBOWeb/src/components/MountainCarCanvas.vue
index f577ab5..d5c1b75 100644
--- a/ActiveBOWeb/src/components/MountainCarCanvas.vue
+++ b/ActiveBOWeb/src/components/MountainCarCanvas.vue
@@ -1,5 +1,5 @@
 <template>
- <canvas id="MCcanvas"/>
+ <canvas id="MCcanvas" flex/>
 </template>
 
 <script setup>
@@ -13,8 +13,11 @@ const canvasWidth = mcstore.width;
 const canvasHeight = mcstore.height;
 
 const renderImage = () => {
-  const { height, width } = mcstore.getDim;
-  const { red, green, blue } = mcstore.getRgbArrays;
+  const height = mcstore.getHeight;
+  const width = mcstore.getWidth;
+  const red = mcstore.getRed;
+  const green = mcstore.getGreen;
+  const blue = mcstore.getBlue;
 
   const rgbData = new Uint8ClampedArray(height * width * 4);
   for (let i = 0; i < height * width; i++) {
@@ -30,10 +33,11 @@ const renderImage = () => {
 
 const drawImage = () => {
   if (imageData.value) {
-    const ctx = document.getElementById('MCcanvas');
+    const canvas = document.getElementById('MCcanvas');
+    const context = canvas.getContext('2d')
 
     const image = new ImageData(imageData.value, canvasWidth, canvasHeight);
-    ctx.putImageData(image, 0 , 0);
+    context.putImageData(image, 0 , 0);
   }
 }
 
diff --git a/ActiveBOWeb/src/components/RosBar.vue b/ActiveBOWeb/src/components/RosBar.vue
index 7ffdac9..295df7e 100644
--- a/ActiveBOWeb/src/components/RosBar.vue
+++ b/ActiveBOWeb/src/components/RosBar.vue
@@ -128,7 +128,6 @@ const rl_feedback_subscriber = new ROSLIB.Topic({
 rl_feedback_subscriber.subscribe( (msg) => {
   mcstore.setDim(msg.height, msg.width);
   mcstore.setRgbArrays(msg.red, msg.green, msg.blue);
-  console.log(msg)
 });
 
 const rl_service = new ROSLIB.Service({
diff --git a/ActiveBOWeb/src/store/MountainCarStore.js b/ActiveBOWeb/src/store/MountainCarStore.js
index ba03bd8..dd1e861 100644
--- a/ActiveBOWeb/src/store/MountainCarStore.js
+++ b/ActiveBOWeb/src/store/MountainCarStore.js
@@ -12,8 +12,11 @@ export const useMCStore = defineStore('Mountain Car Store', {
         }
     },
     getters: {
-        getRgbArrays: (state) => [state.red, state.green, state.blue],
-        getDim: (state) => [state.height, state.width],
+        getRed: (state) => state.red,
+        getGreen: (state) => state.green,
+        getBlue: (state) => state.blue,
+        getHeight: (state) => state.height,
+        getWidth: (state) => state.width,
     },
     actions: {
         setRgbArrays(red, green, blue) {