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

manual finished

Browse Source
This commit is contained in:
Niko Feith 2023-03-06 13:38:43 +01:00
parent ef70c30ed6
commit 351b63da6b
3 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template> <template>
<canvas id="MCcanvas" flex/> <canvas id="MCcanvas" width="480" height="320" />
</template> </template>
<script setup> <script setup>
@ -12,9 +12,7 @@ const imageData = ref(null);
const canvasWidth = mcstore.width; const canvasWidth = mcstore.width;
const canvasHeight = mcstore.height; const canvasHeight = mcstore.height;
const renderImage = () => { const renderImage = (width, height) => {
const height = mcstore.getHeight;
const width = mcstore.getWidth;
const red = mcstore.getRed; const red = mcstore.getRed;
const green = mcstore.getGreen; const green = mcstore.getGreen;
const blue = mcstore.getBlue; const blue = mcstore.getBlue;
@ -31,24 +29,28 @@ const renderImage = () => {
imageData.value = rgbData; imageData.value = rgbData;
}; };
const drawImage = () => { const drawImage = (width, height) => {
if (imageData.value) { if (imageData.value) {
const canvas = document.getElementById('MCcanvas'); const canvas = document.getElementById('MCcanvas');
const context = canvas.getContext('2d') const context = canvas.getContext('2d')
const image = new ImageData(imageData.value, canvasWidth, canvasHeight); const image = new ImageData(imageData.value, width, height);
context.putImageData(image, 0 , 0); context.putImageData(image, 0 , 0);
} }
} }
onMounted(() => { onMounted(() => {
renderImage(); const height = mcstore.getHeight;
drawImage(); const width = mcstore.getWidth;
renderImage(width, height);
drawImage(width, height);
}); });
watch(() => mcstore.trigger, () => { watch(() => mcstore.trigger, () => {
renderImage(); const height = mcstore.getHeight;
drawImage(); const width = mcstore.getWidth;
renderImage(width, height);
drawImage(width, height);
}); });
</script> </script>

4
ActiveBOWeb/src/components/SubLayout.vue
View File

@ -23,8 +23,8 @@
<v-col cols="12" md="4"> <v-col cols="12" md="4">
<v-row no-gutters> <v-row no-gutters>
<v-col cols="12"> <v-col cols="12">
<v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%' }"> <v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%'}">
<MountainCarCanvas/> <MountainCarCanvas/>
</v-card> </v-card>
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">

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

@ -3,11 +3,11 @@ import { defineStore } from "pinia";
export const useMCStore = defineStore('Mountain Car Store', { export const useMCStore = defineStore('Mountain Car Store', {
state: () => { state: () => {
return { return {
red: Array(240000).fill(120), red: Array(153600).fill(120),
green: Array(240000).fill(120), green: Array(153600).fill(120),
blue: Array(240000).fill(120), blue: Array(153600).fill(120),
width: 600, width: 480,
height: 400, height: 320,
trigger: false, trigger: false,
} }
}, },