Niko/FanucWeb
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

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

@ -2,60 +2,68 @@
<v-row> <v-row>
<v-col> <v-col>
<v-select <v-select
:items="options" :items="options"
label="User Mode" label="User Mode"
v-model="modeSelector" v-model="modeSelector"
></v-select> ></v-select>
<v-slider <v-slider
class="control-slider" class="control-slider"
label="maximum steps" label="maximum steps"
v-model="pstore.max_steps" v-model="pstore.max_steps"
:step="1" :step="1"
:min="10" :min="10"
:max="200" :max="200"
thumb-label thumb-label
/> />
<v-slider <v-slider
class="control-slider" class="control-slider"
label="nr base funcs" label="nr base funcs"
v-model="baseFuncsComp" v-model="baseFuncsComp"
:step="1" :step="1"
:min="2" :min="2"
:max="20" :max="20"
thumb-label thumb-label
/> />
<v-slider <v-slider
class="control-slider" class="control-slider"
label="nr episodes" label="nr episodes"
v-model="cstore.nr_episodes" v-model="cstore.nr_episodes"
:step="1" :step="1"
:min="10" :min="10"
:max="200" :max="200"
thumb-label thumb-label
:disabled="episodeRef" :disabled="episodeRef"
/> />
<v-slider <v-slider
class="control-slider" class="control-slider"
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"
v-model="cstore.greedy" v-model="cstore.greedy"
:step="0.01" :step="0.01"
:min="0" :min="0"
:max="1" :max="1"
thumb-label thumb-label
: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 usrMode = cstore.getUserMode;
if (usrMode === 'manually') {
episodeRef.value = true;
runRef.value = true;
greedyRef.value = true;
}
if (usrMode === 'BO') {
episodeRef.value = false;
runRef.value = false;
greedyRef.value = true;
}
if (usrMode === 'active BO') {
episodeRef.value = false;
runRef.value = false;
greedyRef.value = false;
}
}); });
const acqSelector = computed({
get: () => cstore.acq_fun,
set: (value) => cstore.setAcq(value),
});
watch(
() => cstore.getUserMode,
() => {
const usrMode = cstore.getUserMode;
if (usrMode === "manually") {
episodeRef.value = true;
runRef.value = true;
acqRef.value = true;
greedyRef.value = true;
}
if (usrMode === "BO") {
episodeRef.value = false;
runRef.value = false;
acqRef.value = false;
greedyRef.value = true;
}
if (usrMode === "active BO") {
episodeRef.value = false;
runRef.value = false;
acqRef.value = false;
greedyRef.value = false;
}
}
);
</script> </script>
<style scoped> <style scoped>
.control-slider{ .control-slider {
} }
</style> </style>

40
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(
const height = mcstore.getHeight; () => mcstore.trigger,
const width = mcstore.getWidth; () => {
renderImage(width, height); const height = mcstore.getHeight;
drawImage(width, height); const width = mcstore.getWidth;
}); renderImage(width, height);
drawImage(width, height);
}
);
</script> </script>
<style scoped> <style scoped></style>
</style>

108
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: false,
beginAtZero: true, 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(
const reward_mean = store.getMean; () => store.getTrigger,
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 reward_mean = store.getMean;
const lower_bound = Array(reward_mean.length).fill(0).map((_, i) => reward_mean[i] - 1.96 * reward_std[i]); 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 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>

165
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
label="IP Address" v-model="formState.ipaddress"
:disabled="connectionState"/> label="IP Address"
<v-text-field v-model="formState.port" :disabled="connectionState"
label="Port" />
:disabled="connectionState"/> <v-text-field
<v-switch @change="updateConnectionState" v-model="formState.port"
true-value="connected" label="Port"
false-value="not connected" :disabled="connectionState"
:label="`${formState.connect}`"/> />
<v-switch
@change="updateConnectionState"
true-value="connected"
false-value="not connected"
:label="`${formState.connect}`"
/>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
@ -23,31 +26,27 @@
</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();
const cstore = useCStore(); const cstore = useCStore();
const rstore = useRStore(); 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({
weights: pstore.weights,
nr_steps: pstore.max_steps,
});
const policy_request = new ROSLIB.ServiceRequest({ policy_service.callService(policy_request, function (result) {
weights: pstore.weights, pstore.setPolicy(result.policy);
nr_steps: pstore.max_steps, });
}) }
);
policy_service.callService(policy_request, function (result) {
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,
const rl_request = new ROSLIB.ServiceRequest({ name: "/bo_srv",
policy: pstore.policy, serviceType: "active_bo_msgs/srv/BO",
})
rl_service.callService(rl_request, function (rl_result) {
rstore.addMeanManually(rl_result.reward)
});
}); });
watch(
() => cstore.getRunner,
() => {
const usr_mode = cstore.getUserMode;
if (usr_mode === "manually") {
const rl_request = new ROSLIB.ServiceRequest({
policy: pstore.policy,
});
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;
} }

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

@ -1,27 +1,27 @@
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: {
getPlay: (state) => state.play,
getRosBarOpened: (state) => state.rosBarOpened,
getRosConState: (state) => state.rosConState,
},
actions: {
setPlay() {
this.play = !this.play;
}, },
getters: { toggleRosBar() {
getPlay: (state) => state.play, this.rosBarOpened = !this.rosBarOpened;
getRosBarOpened: (state) => state.rosBarOpened,
getRosConState: (state) => state.rosConState,
}, },
actions: { setRosConState(value) {
setPlay() { this.rosConState = value;
this.play = !this.play; },
}, },
toggleRosBar() { });
this.rosBarOpened = !this.rosBarOpened;
},
setRosConState(value) {
this.rosConState = value;
},
}
})

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

@ -1,43 +1,53 @@
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"],
nr_episodes: 10, acq_fun: "Expected Improvement",
nr_runs: 1, acq_funs: [
greedy: 0, "Expected Improvement",
sendWeights: false, "Probability of Improvement",
runner: false, "Upper Confidence Bound",
} ],
nr_episodes: 10,
nr_runs: 2,
greedy: 0,
sendWeights: false,
runner: false,
};
},
getters: {
getUserMode: (state) => state.mode,
getNrEpisodes: (state) => state.nr_episodes,
getNrRuns: (state) => state.nr_runs,
getGreedy: (state) => state.greedy,
getSendWeights: (state) => state.sendWeights,
getRunner: (state) => state.runner,
getAcq: (state) => state.acq_fun,
},
actions: {
setUserMode(value) {
this.mode = value;
}, },
getters: { setNrEpisodes(value) {
getUserMode: (state) => state.mode, this.nr_episodes = value;
getNrEpisodes: (state) => state.nr_episodes,
getNrRuns: (state) => state.nr_runs,
getGreedy: (state) => state.greedy,
getSendWeights: (state) => state.sendWeights,
getRunner: (state) => state.runner,
}, },
actions: { setNrRuns(value) {
setUserMode(value) { this.nr_runs = value;
this.mode = value; },
}, setGreedy(value) {
setNrEpisodes(value) { this.greedy = value;
this.nr_episodes = value; },
}, setSendWeights() {
setNrRuns(value) { this.sendWeights = !this.sendWeights;
this.nr_runs = value; },
}, setRunner() {
setGreedy(value) { this.runner = !this.runner;
this.greedy = value; },
}, setAcq(value) {
setSendWeights() { this.acq_fun = value;
this.sendWeights = !this.sendWeights; },
}, },
setRunner() { });
this.runner = !this.runner;
},
}
})

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

@ -1,33 +1,33 @@
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),
green: Array(153600).fill(120), green: Array(153600).fill(120),
blue: Array(153600).fill(120), blue: Array(153600).fill(120),
width: 480, width: 480,
height: 320, height: 320,
trigger: false, trigger: false,
} };
},
getters: {
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) {
this.red = red;
this.green = green;
this.blue = blue;
this.trigger = !this.trigger;
}, },
getters: { setDim(height, width) {
getRed: (state) => state.red, this.height = height;
getGreen: (state) => state.green, this.width = width;
getBlue: (state) => state.blue,
getHeight: (state) => state.height,
getWidth: (state) => state.width,
}, },
actions: { },
setRgbArrays(red, green, blue) { });
this.red = red;
this.green = green;
this.blue = blue;
this.trigger = !this.trigger;
},
setDim(height, width) {
this.height = height;
this.width = width;
},
}
})

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

@ -1,34 +1,34 @@
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: {
getPolicy: (state) => state.policy,
getNrWeights: (state) => state.nr_weights,
getWeights: (state) => state.weights,
getMaxSteps: (state) => state.max_steps,
},
actions: {
setPolicy(value) {
this.policy = null;
this.policy = value;
}, },
getters: { setNrWeights(value) {
getPolicy: (state) => state.policy, this.nr_weights = value;
getNrWeights: (state) => state.nr_weights, this.weights = Array(this.nr_weights).fill(0);
getWeights: (state) => state.weights,
getMaxSteps: (state) => state.max_steps,
}, },
actions: { setWeights(value) {
setPolicy(value) { this.weights = value;
this.policy = null; },
this.policy = value; setMaxSteps(value) {
}, this.max_steps = value;
setNrWeights(value) { },
this.nr_weights = value; },
this.weights = Array(this.nr_weights).fill(0); });
},
setWeights(value) {
this.weights = value;
},
setMaxSteps(value) {
this.max_steps = value;
},
}
})

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

@ -1,29 +1,30 @@
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: {
getMean: (state) => state.reward_mean,
getStd: (state) => state.reward_std,
getTrigger: (state) => state.trigger,
},
actions: {
setMean(value) {
this.reward_mean = value;
}, },
getters: { setStd(value) {
getMean: (state) => state.reward_mean, this.reward_std = value;
getStd: (state) => state.reward_std, this.trigger = !this.trigger;
getTrigger: (state) => state.trigger,
}, },
actions: { addMeanManually(value) {
setMean(value) { this.reward_mean[this.reward_mean.length] = value;
this.reward_mean = value; this.reward_std[this.reward_std.length] = 0;
}, this.trigger = !this.trigger;
setStd(value) { },
this.reward_std = value; },
}, });
addMeanManually(value) {
this.reward_mean[this.reward_mean.length] = value;
this.reward_std[this.reward_std.length] = 0;
this.trigger = !this.trigger;
},
}
})