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

finished BO

Browse Source 
Manual case and BO fully functional
This commit is contained in:
Niko Feith 2023-03-08 16:26:51 +01:00
parent a21bf5b045
commit c0abdae2e8
12 changed files with 463 additions and 382 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
ActiveBOWeb/src/components/ControlPanel.vue
View File

@ -39,11 +39,17 @@
label="nr runs" label="nr runs"
v-model="cstore.nr_runs" v-model="cstore.nr_runs"
:step="1" :step="1"
:min="1" :min="2"
:max="50" :max="50"
thumb-label thumb-label
:disabled="runRef" :disabled="runRef"
/> />
<v-select
:items="acq_funs"
label="Acquisition Function"
v-model="acqSelector"
:disabled="acqRef"
></v-select>
<v-slider <v-slider
class="control-slider" class="control-slider"
label="greedy" label="greedy"
@ -55,7 +61,9 @@
:disabled="greedyRef" :disabled="greedyRef"
/> />
<v-row class="d-flex justify-space-evenly mb-9"> <v-row class="d-flex justify-space-evenly mb-9">
<v-btn color="primary" @click="cstore.setSendWeights()">Send Weights</v-btn> <v-btn color="primary" @click="cstore.setSendWeights()"
>Send Weights</v-btn
>
<v-btn color="secondary" @click="cstore.setRunner()">Run</v-btn> <v-btn color="secondary" @click="cstore.setRunner()">Run</v-btn>
</v-row> </v-row>
</v-col> </v-col>
@ -63,52 +71,64 @@
</template> </template>
<script setup> <script setup>
import {usePStore} from "@/store/PolicyStore"; import { usePStore } from "@/store/PolicyStore";
import {useCStore} from "@/store/ControlStore"; import { useCStore } from "@/store/ControlStore";
import {computed, watch, ref} from "vue"; import { computed, watch, ref } from "vue";
const pstore = usePStore(); const pstore = usePStore();
const cstore = useCStore(); const cstore = useCStore();
const options = cstore.user_modes; const options = cstore.user_modes;
const acq_funs = cstore.acq_funs;
const episodeRef = ref(false); const episodeRef = ref(true);
const runRef = ref(true); const runRef = ref(true);
const acqRef = ref(true);
const greedyRef = ref(true); const greedyRef = ref(true);
const baseFuncsComp = computed({ const baseFuncsComp = computed({
get: () => pstore.nr_weights, get: () => pstore.nr_weights,
set: (value) => pstore.setNrWeights(value), set: (value) => pstore.setNrWeights(value),
}) });
const modeSelector = computed({ const modeSelector = computed({
get: () => cstore.mode, get: () => cstore.mode,
set: (value) => cstore.setUserMode(value) set: (value) => cstore.setUserMode(value),
}) });
watch(() => cstore.getUserMode, () => { const acqSelector = computed({
get: () => cstore.acq_fun,
set: (value) => cstore.setAcq(value),
});
watch(
() => cstore.getUserMode,
() => {
const usrMode = cstore.getUserMode; const usrMode = cstore.getUserMode;
if (usrMode === 'manually') { if (usrMode === "manually") {
episodeRef.value = true; episodeRef.value = true;
runRef.value = true; runRef.value = true;
acqRef.value = true;
greedyRef.value = true; greedyRef.value = true;
} }
if (usrMode === 'BO') { if (usrMode === "BO") {
episodeRef.value = false; episodeRef.value = false;
runRef.value = false; runRef.value = false;
acqRef.value = false;
greedyRef.value = true; greedyRef.value = true;
} }
if (usrMode === 'active BO') { if (usrMode === "active BO") {
episodeRef.value = false; episodeRef.value = false;
runRef.value = false; runRef.value = false;
acqRef.value = false;
greedyRef.value = false; greedyRef.value = false;
} }
}); }
);
</script> </script>
<style scoped> <style scoped>
.control-slider{ .control-slider {
} }
</style> </style>

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

@ -3,14 +3,12 @@
</template> </template>
<script setup> <script setup>
import {onMounted, ref, watch} from "vue"; import { onMounted, ref, watch } from "vue";
import {useMCStore} from "@/store/MountainCarStore"; import { useMCStore } from "@/store/MountainCarStore";
const mcstore = useMCStore(); const mcstore = useMCStore();
const imageData = ref(null); const imageData = ref(null);
const canvasWidth = mcstore.width;
const canvasHeight = mcstore.height;
const renderImage = (width, height) => { const renderImage = (width, height) => {
const red = mcstore.getRed; const red = mcstore.getRed;
@ -21,9 +19,9 @@ const renderImage = (width, height) => {
for (let i = 0; i < height * width; i++) { for (let i = 0; i < height * width; i++) {
const j = i * 4; const j = i * 4;
rgbData[j] = red[i]; rgbData[j] = red[i];
rgbData[j+1] = green[i]; rgbData[j + 1] = green[i];
rgbData[j+2] = blue[i]; rgbData[j + 2] = blue[i];
rgbData[j+3] = 255; rgbData[j + 3] = 255;
} }
imageData.value = rgbData; imageData.value = rgbData;
@ -31,13 +29,13 @@ const renderImage = (width, height) => {
const drawImage = (width, height) => { 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, width, height); const image = new ImageData(imageData.value, width, height);
context.putImageData(image, 0 , 0); context.putImageData(image, 0, 0);
} }
} };
onMounted(() => { onMounted(() => {
const height = mcstore.getHeight; const height = mcstore.getHeight;
@ -46,15 +44,15 @@ onMounted(() => {
drawImage(width, height); drawImage(width, height);
}); });
watch(() => mcstore.trigger, () => { watch(
() => mcstore.trigger,
() => {
const height = mcstore.getHeight; const height = mcstore.getHeight;
const width = mcstore.getWidth; const width = mcstore.getWidth;
renderImage(width, height); renderImage(width, height);
drawImage(width, height); drawImage(width, height);
}); }
);
</script> </script>
<style scoped> <style scoped></style>
</style>

90
ActiveBOWeb/src/components/RewardPlot.vue
View File

@ -1,12 +1,9 @@
<template> <template>
<canvas id="reward-chart"/> <canvas id="reward-chart" />
</template> </template>
<script setup> <script setup>
import { import { onMounted, watch } from "vue";
onMounted,
watch,
} from "vue";
import { Chart } from "chart.js/auto"; import { Chart } from "chart.js/auto";
import { useRStore } from "@/store/RewardStore"; import { useRStore } from "@/store/RewardStore";
@ -17,47 +14,53 @@ let chartHandle;
function buildChart() { function buildChart() {
const reward_mean = store.getMean; const reward_mean = store.getMean;
const reward_std = store.getStd; const reward_std = store.getStd;
const upper_bound = Array(reward_mean.length).fill(0).map((_, i) => reward_mean[i] + 1.96 * reward_std[i]); const upper_bound = Array(reward_mean.length)
const lower_bound = Array(reward_mean.length).fill(0).map((_, i) => reward_mean[i] - 1.96 * reward_std[i]); .fill(0)
const reward_labels = Array(reward_mean.length).fill(0).map((_, i) => i); .map((_, i) => reward_mean[i] + 1.96 * reward_std[i]);
const lower_bound = Array(reward_mean.length)
.fill(0)
.map((_, i) => reward_mean[i] - 1.96 * reward_std[i]);
const reward_labels = Array(reward_mean.length)
.fill(0)
.map((_, i) => i);
const RewardPlot = { const RewardPlot = {
data: { data: {
datasets: [ datasets: [
{ {
label: 'Reward', label: "Reward",
type: 'line', type: "line",
xAxisID: 'x', xAxisID: "x",
yAxisID: 'y', yAxisID: "y",
fill: false, fill: false,
data: reward_mean, data: reward_mean,
borderColor: '#3DC47A', borderColor: "#3DC47A",
borderWidth: 2, borderWidth: 2,
pointRadius: 0, pointRadius: 0,
}, },
{ {
type: 'line', type: "line",
xAxisID: 'x', xAxisID: "x",
yAxisID: 'y', yAxisID: "y",
fill: 0, fill: 0,
data: upper_bound, data: upper_bound,
pointRadius: 0, pointRadius: 0,
borderColor: 'transparent', borderColor: "transparent",
backgroundColor: "rgba(61,196,122,0.5)",
}, },
{ {
type: 'line', type: "line",
xAxisID: 'x', xAxisID: "x",
yAxisID: 'y', yAxisID: "y",
fill: 0, fill: 0,
data: lower_bound, data: lower_bound,
pointRadius: 0, pointRadius: 0,
borderColor: 'transparent', borderColor: "transparent",
backgroundColor: "rgba(61,196,122,0.5)",
}, },
], ],
}, },
options: { options: {
plugins:{ plugins: {
legend: { legend: {
display: false, display: false,
}, },
@ -69,7 +72,7 @@ function buildChart() {
}, },
lineTension: 0, lineTension: 0,
tooltip: { tooltip: {
mode: 'label', mode: "label",
}, },
scales: { scales: {
x: { x: {
@ -81,17 +84,18 @@ function buildChart() {
autoSkip: true, autoSkip: true,
}, },
}, },
y: y: {
{ type: "linear",
type: 'linear',
ticks: { ticks: {
beginAtZero: true, beginAtZero: false,
min: -110,
max: 0,
}, },
}, },
}, },
}, },
}; };
const ctx = document.getElementById('reward-chart'); const ctx = document.getElementById("reward-chart");
// eslint-disable-next-line no-new // eslint-disable-next-line no-new
chartHandle = new Chart(ctx, RewardPlot); chartHandle = new Chart(ctx, RewardPlot);
} }
@ -100,24 +104,28 @@ onMounted(() => {
buildChart(); buildChart();
}); });
watch(() => store.getTrigger, () => { watch(
() => store.getTrigger,
() => {
const reward_mean = store.getMean; const reward_mean = store.getMean;
const reward_std = store.getStd; const reward_std = store.getStd;
const upper_bound = Array(reward_mean.length).fill(0).map((_, i) => reward_mean[i] + 1.96 * reward_std[i]); const upper_bound = Array(reward_mean.length)
const lower_bound = Array(reward_mean.length).fill(0).map((_, i) => reward_mean[i] - 1.96 * reward_std[i]); .fill(0)
.map((_, i) => reward_mean[i] + 1.96 * reward_std[i]);
const lower_bound = Array(reward_mean.length)
.fill(0)
.map((_, i) => reward_mean[i] - 1.96 * reward_std[i]);
const reward_labels = Array(reward_mean.length).fill(0).map((_, i) => i); chartHandle.options.scales.x.labels = Array(reward_mean.length)
.fill(0)
chartHandle.options.scales.x.labels = reward_labels; .map((_, i) => i);
chartHandle.data.datasets[0].data = reward_mean; chartHandle.data.datasets[0].data = reward_mean;
chartHandle.data.datasets[1].data = upper_bound; chartHandle.data.datasets[1].data = upper_bound;
chartHandle.data.datasets[2].data = lower_bound; chartHandle.data.datasets[2].data = lower_bound;
chartHandle.update(); chartHandle.update();
}); }
);
</script> </script>
<style scoped> <style scoped></style>
</style>

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

@ -1,21 +1,24 @@
<template> <template>
<v-navigation-drawer <v-navigation-drawer v-model="store.rosBarOpened" temporary location="right">
v-model="store.rosBarOpened"
temporary
location="right">
<v-container fluid> <v-container fluid>
<v-row justify="space-between"> <v-row justify="space-between">
<v-col cols="6" md="12"> <v-col cols="6" md="12">
<v-text-field v-model="formState.ipaddress" <v-text-field
v-model="formState.ipaddress"
label="IP Address" label="IP Address"
:disabled="connectionState"/> :disabled="connectionState"
<v-text-field v-model="formState.port" />
<v-text-field
v-model="formState.port"
label="Port" label="Port"
:disabled="connectionState"/> :disabled="connectionState"
<v-switch @change="updateConnectionState" />
<v-switch
@change="updateConnectionState"
true-value="connected" true-value="connected"
false-value="not connected" false-value="not connected"
:label="`${formState.connect}`"/> :label="`${formState.connect}`"
/>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
@ -23,20 +26,16 @@
</template> </template>
<script setup> <script setup>
import * as ROS from 'roslib'; import * as ROS from "roslib";
import { useBWStore } from '@/store/BaseWebsiteStore'; import { useBWStore } from "@/store/BaseWebsiteStore";
import { usePStore } from "@/store/PolicyStore"; import { usePStore } from "@/store/PolicyStore";
import {useCStore} from "@/store/ControlStore"; import { useCStore } from "@/store/ControlStore";
import { import { reactive, ref, watch } from "vue";
reactive,
ref,
watch,
} from 'vue';
import * as ROSLIB from "roslib"; import * as ROSLIB from "roslib";
import {useRStore} from "@/store/RewardStore"; import { useRStore } from "@/store/RewardStore";
import {useMCStore} from "@/store/MountainCarStore"; import { useMCStore } from "@/store/MountainCarStore";
const store = useBWStore(); const store = useBWStore();
const pstore = usePStore(); const pstore = usePStore();
@ -45,9 +44,9 @@ const rstore = useRStore();
const mcstore = useMCStore(); const mcstore = useMCStore();
const formState = reactive({ const formState = reactive({
ipaddress: 'localhost', ipaddress: "localhost",
port: '9090', port: "9090",
connect: 'not connected', connect: "not connected",
// connectionState: computed(() => formState.connect !== 'not connected'), // connectionState: computed(() => formState.connect !== 'not connected'),
}); });
@ -56,25 +55,27 @@ const stateCounter = ref([0, 0, 0]);
// Open Connection to ROSBridge and subscribe the topics. // Open Connection to ROSBridge and subscribe the topics.
const ros = new ROS.Ros(); const ros = new ROS.Ros();
ros.on('connection', () => { ros.on("connection", () => {
stateCounter.value[0] += 1; stateCounter.value[0] += 1;
}); });
ros.on('error', (error) => { ros.on("error", (error) => {
stateCounter.value[1] += 1; stateCounter.value[1] += 1;
console.log(error); console.log(error);
}); });
ros.on('close', () => { stateCounter.value[2] += 1; }); ros.on("close", () => {
stateCounter.value[2] += 1;
});
function updateConnectionState() { function updateConnectionState() {
connectionState.value = !connectionState.value; connectionState.value = !connectionState.value;
if (formState.connect === 'not connected') { if (formState.connect === "not connected") {
formState.connect = 'connected'; formState.connect = "connected";
const rosUrl = `ws://${formState.ipaddress}:${formState.port}`; const rosUrl = `ws://${formState.ipaddress}:${formState.port}`;
ros.connect(rosUrl); ros.connect(rosUrl);
} else { } else {
formState.connect = 'not connected'; formState.connect = "not connected";
ros.close(); ros.close();
} }
} }
@ -85,71 +86,101 @@ const lastStateCounter = [0, 0, 0];
watch(stateCounter.value, (newValue) => { watch(stateCounter.value, (newValue) => {
let currentState = 0; let currentState = 0;
for (let i = 0; i < lastStateCounter.length; i += 1) { for (let i = 0; i < lastStateCounter.length; i += 1) {
if ((newValue[i] - lastStateCounter[i]) === 1) { if (newValue[i] - lastStateCounter[i] === 1) {
currentState = i; currentState = i;
} }
lastStateCounter[i] = newValue[i]; lastStateCounter[i] = newValue[i];
} }
if (currentState === 0) { if (currentState === 0) {
store.setRosConState('connected'); store.setRosConState("connected");
} else if (currentState === 1) { } else if (currentState === 1) {
store.setRosConState('error'); store.setRosConState("error");
} else if (currentState === 2) { } else if (currentState === 2) {
store.setRosConState('not connected'); store.setRosConState("not connected");
} }
}); });
// Policy Service // Policy Service
const policy_service = new ROSLIB.Service({ const policy_service = new ROSLIB.Service({
ros: ros, ros: ros,
name: '/policy_srv', name: "/policy_srv",
serviceType: 'active_bo_msgs/srv/WeightToPolicy', serviceType: "active_bo_msgs/srv/WeightToPolicy",
}); });
watch(() => cstore.getSendWeights, () =>{ watch(
() => cstore.getSendWeights,
() => {
const policy_request = new ROSLIB.ServiceRequest({ const policy_request = new ROSLIB.ServiceRequest({
weights: pstore.weights, weights: pstore.weights,
nr_steps: pstore.max_steps, nr_steps: pstore.max_steps,
}) });
policy_service.callService(policy_request, function (result) { policy_service.callService(policy_request, function (result) {
pstore.setPolicy(result.policy) pstore.setPolicy(result.policy);
}); });
}); }
);
// RL Service + Feedback Suscriber // RL Service + Feedback Suscriber
const rl_feedback_subscriber = new ROSLIB.Topic({ const rl_feedback_subscriber = new ROSLIB.Topic({
ros: ros, ros: ros,
name: '/rl_feedback', name: "/rl_feedback",
message: 'active_bo_msgs/msg/ImageFeedback', message: "active_bo_msgs/msg/ImageFeedback",
}); });
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);
}); });
const rl_service = new ROSLIB.Service({ const rl_service = new ROSLIB.Service({
ros: ros, ros: ros,
name: '/rl_srv', name: "/rl_srv",
serviceType: 'active_bo_msgs/srv/RLRollOut', serviceType: "active_bo_msgs/srv/RLRollOut",
}); });
watch(() => cstore.getRunner, () =>{ const bo_service = new ROSLIB.Service({
ros: ros,
name: "/bo_srv",
serviceType: "active_bo_msgs/srv/BO",
});
watch(
() => cstore.getRunner,
() => {
const usr_mode = cstore.getUserMode;
if (usr_mode === "manually") {
const rl_request = new ROSLIB.ServiceRequest({ const rl_request = new ROSLIB.ServiceRequest({
policy: pstore.policy, policy: pstore.policy,
})
rl_service.callService(rl_request, function (rl_result) {
rstore.addMeanManually(rl_result.reward)
}); });
});
rl_service.callService(rl_request, function (rl_response) {
rstore.addMeanManually(rl_response.reward);
});
} else if (usr_mode === "BO") {
const bo_request = new ROSLIB.ServiceRequest({
nr_weights: pstore.nr_weights,
max_steps: pstore.max_steps,
nr_episodes: cstore.nr_episodes,
nr_runs: cstore.nr_runs,
acquisition_function: cstore.acq_fun,
});
bo_service.callService(bo_request, function (bo_response) {
pstore.setPolicy(bo_response.best_policy);
pstore.setWeights(bo_response.best_weights);
rstore.setMean(bo_response.reward_mean);
rstore.setStd(bo_response.reward_std);
});
const rl_request = new ROSLIB.ServiceRequest({
policy: pstore.policy,
});
rl_service.callService(rl_request, () => {});
}
}
);
</script> </script>
<style scoped> <style scoped></style>
</style>

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

@ -10,13 +10,13 @@
</template> </template>
<script setup> <script setup>
import { useBWStore } from '@/store/BaseWebsiteStore'; import { useBWStore } from "@/store/BaseWebsiteStore";
const store = useBWStore(); const store = useBWStore();
</script> </script>
<style scoped> <style scoped>
.sidebar-button{ .sidebar-button {
height: 48px; height: 48px;
width: 48px; width: 48px;
left: -16px; left: -16px;

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

@ -4,18 +4,27 @@
<v-col cols="12" md="8"> <v-col cols="12" md="8">
<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
<policy-plot/> class="tile"
:style="{ height: 'calc(40vh - 24px)', width: '100%' }"
>
<policy-plot />
</v-card> </v-card>
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-card class="tile" :style="{ height: 'calc(20vh - 24px)', width: '100%' }"> <v-card
<weight-tuner/> class="tile"
:style="{ height: 'calc(20vh - 24px)', width: '100%' }"
>
<weight-tuner />
</v-card> </v-card>
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%' }"> <v-card
<reward-plot/> class="tile"
:style="{ height: 'calc(40vh - 24px)', width: '100%' }"
>
<reward-plot />
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
@ -23,13 +32,19 @@
<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
<MountainCarCanvas/> class="tile"
:style="{ height: 'calc(40vh - 24px)', width: '100%' }"
>
<MountainCarCanvas />
</v-card> </v-card>
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-card class="tile" :style="{ height: 'calc(60vh - 48px)', width: '100%' }"> <v-card
<control-panel/> class="tile"
:style="{ height: 'calc(60vh - 48px)', width: '100%' }"
>
<control-panel />
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
@ -47,7 +62,7 @@ import MountainCarCanvas from "@/components/MountainCarCanvas.vue";
</script> </script>
<style scoped> <style scoped>
.sub-layout{ .sub-layout {
padding: 0; padding: 0;
margin: 1px 0 0 0; margin: 1px 0 0 0;
} }

28
ActiveBOWeb/src/components/TopBar.vue
View File

@ -1,10 +1,9 @@
<template> <template>
<v-app-bar id="components-top-bar" class="elevation-1"> <v-app-bar id="components-top-bar" class="elevation-1">
<v-img class="cps-image" :left="true" :src="pic"/> <v-img class="cps-image" :left="true" :src="pic" />
<v-divider vertical class="image-divider"/> <v-divider vertical class="image-divider" />
<v-spacer/> <v-spacer />
<v-btn <v-btn @click="store.toggleRosBar()">
@click="store.toggleRosBar()" >
<v-icon :color="changeRosColor()" large> <v-icon :color="changeRosColor()" large>
mdi-checkbox-blank-circle mdi-checkbox-blank-circle
</v-icon> </v-icon>
@ -14,31 +13,30 @@
</template> </template>
<script setup> <script setup>
import { useBWStore } from '@/store/BaseWebsiteStore'; import { useBWStore } from "@/store/BaseWebsiteStore";
import pic from '../assets/CPS_Logo_White.png'; import pic from "../assets/CPS_Logo_White.png";
const store = useBWStore(); const store = useBWStore();
const changeRosColor = () => { const changeRosColor = () => {
const conState = store.getRosConState; const conState = store.getRosConState;
if (conState === 'not connected') { if (conState === "not connected") {
return 'red'; return "red";
} }
if (conState === 'connected') { if (conState === "connected") {
return 'green'; return "green";
} }
return 'grey'; return "grey";
}; };
</script> </script>
<style scoped> <style scoped>
.cps-image{ .cps-image {
left: 8px; left: 8px;
max-width: 48px; max-width: 48px;
max-height: 48px; max-height: 48px;
} }
.image-divider{ .image-divider {
position: absolute; position: absolute;
left: 64px; left: 64px;
} }

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

@ -1,12 +1,12 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
export const useBWStore = defineStore('Base Website Store', { export const useBWStore = defineStore("Base Website Store", {
state: () => { state: () => {
return { return {
play: false, play: false,
rosBarOpened: true, rosBarOpened: true,
rosConState: 'not connected', rosConState: "not connected",
} };
}, },
getters: { getters: {
getPlay: (state) => state.play, getPlay: (state) => state.play,
@ -23,5 +23,5 @@ export const useBWStore = defineStore('Base Website Store', {
setRosConState(value) { setRosConState(value) {
this.rosConState = value; this.rosConState = value;
}, },
} },
}) });

24
ActiveBOWeb/src/store/ControlStore.js
View File

@ -1,16 +1,22 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
export const useCStore = defineStore('Control Store', { export const useCStore = defineStore("Control Store", {
state: () => { state: () => {
return { return {
mode: 'manually', mode: "manually",
user_modes: ['manually', 'BO', 'active BO'], user_modes: ["manually", "BO", "active BO"],
acq_fun: "Expected Improvement",
acq_funs: [
"Expected Improvement",
"Probability of Improvement",
"Upper Confidence Bound",
],
nr_episodes: 10, nr_episodes: 10,
nr_runs: 1, nr_runs: 2,
greedy: 0, greedy: 0,
sendWeights: false, sendWeights: false,
runner: false, runner: false,
} };
}, },
getters: { getters: {
getUserMode: (state) => state.mode, getUserMode: (state) => state.mode,
@ -19,6 +25,7 @@ export const useCStore = defineStore('Control Store', {
getGreedy: (state) => state.greedy, getGreedy: (state) => state.greedy,
getSendWeights: (state) => state.sendWeights, getSendWeights: (state) => state.sendWeights,
getRunner: (state) => state.runner, getRunner: (state) => state.runner,
getAcq: (state) => state.acq_fun,
}, },
actions: { actions: {
setUserMode(value) { setUserMode(value) {
@ -39,5 +46,8 @@ export const useCStore = defineStore('Control Store', {
setRunner() { setRunner() {
this.runner = !this.runner; this.runner = !this.runner;
}, },
} setAcq(value) {
}) this.acq_fun = value;
},
},
});

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

@ -1,6 +1,6 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
export const useMCStore = defineStore('Mountain Car Store', { export const useMCStore = defineStore("Mountain Car Store", {
state: () => { state: () => {
return { return {
red: Array(153600).fill(120), red: Array(153600).fill(120),
@ -9,7 +9,7 @@ export const useMCStore = defineStore('Mountain Car Store', {
width: 480, width: 480,
height: 320, height: 320,
trigger: false, trigger: false,
} };
}, },
getters: { getters: {
getRed: (state) => state.red, getRed: (state) => state.red,
@ -29,5 +29,5 @@ export const useMCStore = defineStore('Mountain Car Store', {
this.height = height; this.height = height;
this.width = width; this.width = width;
}, },
} },
}) });

8
ActiveBOWeb/src/store/PolicyStore.js
View File

@ -1,13 +1,13 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
export const usePStore = defineStore('Policy Store', { export const usePStore = defineStore("Policy Store", {
state: () => { state: () => {
return { return {
policy: Array(10).fill(0), policy: Array(10).fill(0),
nr_weights: 5, nr_weights: 5,
weights: [-1, -1, 1, 0, 0], weights: [-1, -1, 1, 0, 0],
max_steps: 100, max_steps: 100,
} };
}, },
getters: { getters: {
getPolicy: (state) => state.policy, getPolicy: (state) => state.policy,
@ -30,5 +30,5 @@ export const usePStore = defineStore('Policy Store', {
setMaxSteps(value) { setMaxSteps(value) {
this.max_steps = value; this.max_steps = value;
}, },
} },
}) });

9
ActiveBOWeb/src/store/RewardStore.js
View File

@ -1,12 +1,12 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
export const useRStore = defineStore('Reward Store', { export const useRStore = defineStore("Reward Store", {
state: () => { state: () => {
return { return {
reward_mean: [], reward_mean: [],
reward_std: [], reward_std: [],
trigger: false, trigger: false,
} };
}, },
getters: { getters: {
getMean: (state) => state.reward_mean, getMean: (state) => state.reward_mean,
@ -19,11 +19,12 @@ export const useRStore = defineStore('Reward Store', {
}, },
setStd(value) { setStd(value) {
this.reward_std = value; this.reward_std = value;
this.trigger = !this.trigger;
}, },
addMeanManually(value) { addMeanManually(value) {
this.reward_mean[this.reward_mean.length] = value; this.reward_mean[this.reward_mean.length] = value;
this.reward_std[this.reward_std.length] = 0; this.reward_std[this.reward_std.length] = 0;
this.trigger = !this.trigger; this.trigger = !this.trigger;
}, },
} },
}) });