image display not working

ActiveBOWeb/src/components/MountainCarCanvas.vue

@@ -1,8 +1,51 @@
 <template>
-
+ <canvas id="MCcanvas"/>
 </template>
 
 <script setup>
+import {onMounted, ref, watch} from "vue";
+import {useMCStore} from "@/store/MountainCarStore";
+
+const mcstore = useMCStore();
+
+const imageData = ref(null);
+const canvasWidth = mcstore.width;
+const canvasHeight = mcstore.height;
+
+const renderImage = () => {
+  const { height, width } = mcstore.getDim;
+  const { red, green, blue } = mcstore.getRgbArrays;
+
+  const rgbData = new Uint8ClampedArray(height * width * 4);
+  for (let i = 0; i < height * width; i++) {
+    const j = i * 4;
+    rgbData[j] = red[i];
+    rgbData[j+1] = green[i];
+    rgbData[j+2] = blue[i];
+    rgbData[j+3] = 255;
+  }
+
+  imageData.value = rgbData;
+};
+
+const drawImage = () => {
+  if (imageData.value) {
+    const ctx = document.getElementById('MCcanvas');
+
+    const image = new ImageData(imageData.value, canvasWidth, canvasHeight);
+    ctx.putImageData(image, 0 , 0);
+  }
+}
+
+onMounted(() => {
+  renderImage();
+  drawImage();
+});
+
+watch(() => mcstore.trigger, () => {
+  renderImage();
+  drawImage();
+});
 
 </script>
 

ActiveBOWeb/src/components/RosBar.vue

@@ -127,6 +127,8 @@ 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({

ActiveBOWeb/src/components/SubLayout.vue

@@ -24,7 +24,7 @@
         <v-row no-gutters>
           <v-col cols="12">
             <v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%' }">
-              <!-- component 4 here -->
+              <MountainCarCanvas/>
             </v-card>
           </v-col>
           <v-col cols="12">
@@ -43,6 +43,7 @@ import WeightTuner from "@/components/WeightTuner.vue";
 import RewardPlot from "@/components/RewardPlot.vue";
 import PolicyPlot from "@/components/PolicyPlot.vue";
 import ControlPanel from "@/components/ControlPanel.vue";
+import MountainCarCanvas from "@/components/MountainCarCanvas.vue";
 </script>
 
 <style scoped>

ActiveBOWeb/src/store/MountainCarStore.js

@@ -3,23 +3,24 @@ import { defineStore } from "pinia";
 export const useMCStore = defineStore('Mountain Car Store', {
     state: () => {
         return {
-            play: false,
+            red: Array(240000).fill(120),
-            rgbArray: Array,
+            green: Array(240000).fill(120),
-            width: 0,
+            blue: Array(240000).fill(120),
-            height: 0,
+            width: 600,
+            height: 400,
+            trigger: false,
         }
     },
     getters: {
-        getPlay: (state) => state.play,
+        getRgbArrays: (state) => [state.red, state.green, state.blue],
-        getRgbArray: (state) => state.rgbarray,
         getDim: (state) => [state.height, state.width],
     },
     actions: {
-        setPlay() {
+        setRgbArrays(red, green, blue) {
-            this.play = !this.play;
+            this.red = red;
-        },
+            this.green = green;
-        setRgbArray(value) {
+            this.blue = blue;
-            this.rgbArray = value;
+            this.trigger = !this.trigger;
         },
         setDim(height, width) {
             this.height = height;