Niko/FanucWeb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

canvas object displays the data but data is still empty

Browse Source
This commit is contained in:
Niko Feith 2023-03-02 15:20:36 +01:00
parent 36c493fb15
commit bcdfa5a710
3 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ActiveBOWeb/src/components/MountainCarCanvas.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<canvas id="MCcanvas"/> <canvas id="MCcanvas" flex/>
</template> </template>
<script setup> <script setup>
@ -13,8 +13,11 @@ const canvasWidth = mcstore.width;
const canvasHeight = mcstore.height; const canvasHeight = mcstore.height;
const renderImage = () => { const renderImage = () => {
const { height, width } = mcstore.getDim; const height = mcstore.getHeight;
const { red, green, blue } = mcstore.getRgbArrays; const width = mcstore.getWidth;
const red = mcstore.getRed;
const green = mcstore.getGreen;
const blue = mcstore.getBlue;
const rgbData = new Uint8ClampedArray(height * width * 4); const rgbData = new Uint8ClampedArray(height * width * 4);
for (let i = 0; i < height * width; i++) { for (let i = 0; i < height * width; i++) {
@ -30,10 +33,11 @@ const renderImage = () => {
const drawImage = () => { const drawImage = () => {
if (imageData.value) { 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); const image = new ImageData(imageData.value, canvasWidth, canvasHeight);
ctx.putImageData(image, 0 , 0); context.putImageData(image, 0 , 0);
} }
} }

1
ActiveBOWeb/src/components/RosBar.vue
View File

@ -128,7 +128,6 @@ const rl_feedback_subscriber = new ROSLIB.Topic({
rl_feedback_subscriber.subscribe( (msg) => { rl_feedback_subscriber.subscribe( (msg) => {
mcstore.setDim(msg.height, msg.width); mcstore.setDim(msg.height, msg.width);
mcstore.setRgbArrays(msg.red, msg.green, msg.blue); mcstore.setRgbArrays(msg.red, msg.green, msg.blue);
console.log(msg)
}); });
const rl_service = new ROSLIB.Service({ const rl_service = new ROSLIB.Service({

7
ActiveBOWeb/src/store/MountainCarStore.js
View File

@ -12,8 +12,11 @@ export const useMCStore = defineStore('Mountain Car Store', {
} }
}, },
getters: { getters: {
getRgbArrays: (state) => [state.red, state.green, state.blue], getRed: (state) => state.red,
getDim: (state) => [state.height, state.width], getGreen: (state) => state.green,
getBlue: (state) => state.blue,
getHeight: (state) => state.height,
getWidth: (state) => state.width,
}, },
actions: { actions: {
setRgbArrays(red, green, blue) { setRgbArrays(red, green, blue) {