finished BO
Manual case and BO fully functional
This commit is contained in:
parent
a21bf5b045
commit
c0abdae2e8
@ -2,60 +2,68 @@
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-select
|
||||
:items="options"
|
||||
label="User Mode"
|
||||
v-model="modeSelector"
|
||||
:items="options"
|
||||
label="User Mode"
|
||||
v-model="modeSelector"
|
||||
></v-select>
|
||||
<v-slider
|
||||
class="control-slider"
|
||||
label="maximum steps"
|
||||
v-model="pstore.max_steps"
|
||||
:step="1"
|
||||
:min="10"
|
||||
:max="200"
|
||||
thumb-label
|
||||
class="control-slider"
|
||||
label="maximum steps"
|
||||
v-model="pstore.max_steps"
|
||||
:step="1"
|
||||
:min="10"
|
||||
:max="200"
|
||||
thumb-label
|
||||
/>
|
||||
<v-slider
|
||||
class="control-slider"
|
||||
label="nr base funcs"
|
||||
v-model="baseFuncsComp"
|
||||
:step="1"
|
||||
:min="2"
|
||||
:max="20"
|
||||
thumb-label
|
||||
class="control-slider"
|
||||
label="nr base funcs"
|
||||
v-model="baseFuncsComp"
|
||||
:step="1"
|
||||
:min="2"
|
||||
:max="20"
|
||||
thumb-label
|
||||
/>
|
||||
<v-slider
|
||||
class="control-slider"
|
||||
label="nr episodes"
|
||||
v-model="cstore.nr_episodes"
|
||||
:step="1"
|
||||
:min="10"
|
||||
:max="200"
|
||||
thumb-label
|
||||
:disabled="episodeRef"
|
||||
class="control-slider"
|
||||
label="nr episodes"
|
||||
v-model="cstore.nr_episodes"
|
||||
:step="1"
|
||||
:min="10"
|
||||
:max="200"
|
||||
thumb-label
|
||||
:disabled="episodeRef"
|
||||
/>
|
||||
<v-slider
|
||||
class="control-slider"
|
||||
label="nr runs"
|
||||
v-model="cstore.nr_runs"
|
||||
:step="1"
|
||||
:min="1"
|
||||
:max="50"
|
||||
thumb-label
|
||||
:disabled="runRef"
|
||||
class="control-slider"
|
||||
label="nr runs"
|
||||
v-model="cstore.nr_runs"
|
||||
:step="1"
|
||||
:min="2"
|
||||
:max="50"
|
||||
thumb-label
|
||||
:disabled="runRef"
|
||||
/>
|
||||
<v-select
|
||||
:items="acq_funs"
|
||||
label="Acquisition Function"
|
||||
v-model="acqSelector"
|
||||
:disabled="acqRef"
|
||||
></v-select>
|
||||
<v-slider
|
||||
class="control-slider"
|
||||
label="greedy"
|
||||
v-model="cstore.greedy"
|
||||
:step="0.01"
|
||||
:min="0"
|
||||
:max="1"
|
||||
thumb-label
|
||||
:disabled="greedyRef"
|
||||
class="control-slider"
|
||||
label="greedy"
|
||||
v-model="cstore.greedy"
|
||||
:step="0.01"
|
||||
:min="0"
|
||||
:max="1"
|
||||
thumb-label
|
||||
:disabled="greedyRef"
|
||||
/>
|
||||
<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-row>
|
||||
</v-col>
|
||||
@ -63,52 +71,64 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {usePStore} from "@/store/PolicyStore";
|
||||
import {useCStore} from "@/store/ControlStore";
|
||||
import {computed, watch, ref} from "vue";
|
||||
import { usePStore } from "@/store/PolicyStore";
|
||||
import { useCStore } from "@/store/ControlStore";
|
||||
import { computed, watch, ref } from "vue";
|
||||
|
||||
const pstore = usePStore();
|
||||
const cstore = useCStore();
|
||||
|
||||
const options = cstore.user_modes;
|
||||
const acq_funs = cstore.acq_funs;
|
||||
|
||||
const episodeRef = ref(false);
|
||||
const episodeRef = ref(true);
|
||||
const runRef = ref(true);
|
||||
const acqRef = ref(true);
|
||||
const greedyRef = ref(true);
|
||||
|
||||
const baseFuncsComp = computed({
|
||||
get: () => pstore.nr_weights,
|
||||
set: (value) => pstore.setNrWeights(value),
|
||||
})
|
||||
});
|
||||
|
||||
const modeSelector = computed({
|
||||
get: () => cstore.mode,
|
||||
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;
|
||||
}
|
||||
set: (value) => cstore.setUserMode(value),
|
||||
});
|
||||
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
.control-slider{
|
||||
.control-slider {
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -3,14 +3,12 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref, watch} from "vue";
|
||||
import {useMCStore} from "@/store/MountainCarStore";
|
||||
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 = (width, height) => {
|
||||
const red = mcstore.getRed;
|
||||
@ -21,9 +19,9 @@ const renderImage = (width, height) => {
|
||||
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;
|
||||
rgbData[j + 1] = green[i];
|
||||
rgbData[j + 2] = blue[i];
|
||||
rgbData[j + 3] = 255;
|
||||
}
|
||||
|
||||
imageData.value = rgbData;
|
||||
@ -31,13 +29,13 @@ const renderImage = (width, height) => {
|
||||
|
||||
const drawImage = (width, height) => {
|
||||
if (imageData.value) {
|
||||
const canvas = document.getElementById('MCcanvas');
|
||||
const context = canvas.getContext('2d')
|
||||
const canvas = document.getElementById("MCcanvas");
|
||||
const context = canvas.getContext("2d");
|
||||
|
||||
const image = new ImageData(imageData.value, width, height);
|
||||
context.putImageData(image, 0 , 0);
|
||||
context.putImageData(image, 0, 0);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const height = mcstore.getHeight;
|
||||
@ -46,15 +44,15 @@ onMounted(() => {
|
||||
drawImage(width, height);
|
||||
});
|
||||
|
||||
watch(() => mcstore.trigger, () => {
|
||||
const height = mcstore.getHeight;
|
||||
const width = mcstore.getWidth;
|
||||
renderImage(width, height);
|
||||
drawImage(width, height);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => mcstore.trigger,
|
||||
() => {
|
||||
const height = mcstore.getHeight;
|
||||
const width = mcstore.getWidth;
|
||||
renderImage(width, height);
|
||||
drawImage(width, height);
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
<template>
|
||||
<canvas id="reward-chart"/>
|
||||
<canvas id="reward-chart" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
watch,
|
||||
} from "vue";
|
||||
import { onMounted, watch } from "vue";
|
||||
import { Chart } from "chart.js/auto";
|
||||
import { useRStore } from "@/store/RewardStore";
|
||||
|
||||
@ -17,47 +14,53 @@ let chartHandle;
|
||||
function buildChart() {
|
||||
const reward_mean = store.getMean;
|
||||
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);
|
||||
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);
|
||||
const RewardPlot = {
|
||||
data: {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Reward',
|
||||
type: 'line',
|
||||
xAxisID: 'x',
|
||||
yAxisID: 'y',
|
||||
label: "Reward",
|
||||
type: "line",
|
||||
xAxisID: "x",
|
||||
yAxisID: "y",
|
||||
fill: false,
|
||||
data: reward_mean,
|
||||
borderColor: '#3DC47A',
|
||||
borderColor: "#3DC47A",
|
||||
borderWidth: 2,
|
||||
pointRadius: 0,
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
xAxisID: 'x',
|
||||
yAxisID: 'y',
|
||||
type: "line",
|
||||
xAxisID: "x",
|
||||
yAxisID: "y",
|
||||
fill: 0,
|
||||
data: upper_bound,
|
||||
pointRadius: 0,
|
||||
borderColor: 'transparent',
|
||||
|
||||
borderColor: "transparent",
|
||||
backgroundColor: "rgba(61,196,122,0.5)",
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
xAxisID: 'x',
|
||||
yAxisID: 'y',
|
||||
type: "line",
|
||||
xAxisID: "x",
|
||||
yAxisID: "y",
|
||||
fill: 0,
|
||||
data: lower_bound,
|
||||
pointRadius: 0,
|
||||
borderColor: 'transparent',
|
||||
|
||||
borderColor: "transparent",
|
||||
backgroundColor: "rgba(61,196,122,0.5)",
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
plugins:{
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
@ -69,7 +72,7 @@ function buildChart() {
|
||||
},
|
||||
lineTension: 0,
|
||||
tooltip: {
|
||||
mode: 'label',
|
||||
mode: "label",
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
@ -81,17 +84,18 @@ function buildChart() {
|
||||
autoSkip: true,
|
||||
},
|
||||
},
|
||||
y:
|
||||
{
|
||||
type: 'linear',
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
type: "linear",
|
||||
ticks: {
|
||||
beginAtZero: false,
|
||||
min: -110,
|
||||
max: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
const ctx = document.getElementById('reward-chart');
|
||||
const ctx = document.getElementById("reward-chart");
|
||||
// eslint-disable-next-line no-new
|
||||
chartHandle = new Chart(ctx, RewardPlot);
|
||||
}
|
||||
@ -100,24 +104,28 @@ onMounted(() => {
|
||||
buildChart();
|
||||
});
|
||||
|
||||
watch(() => store.getTrigger, () => {
|
||||
const reward_mean = store.getMean;
|
||||
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]);
|
||||
watch(
|
||||
() => store.getTrigger,
|
||||
() => {
|
||||
const reward_mean = store.getMean;
|
||||
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 = reward_labels;
|
||||
chartHandle.data.datasets[0].data = reward_mean;
|
||||
chartHandle.data.datasets[1].data = upper_bound;
|
||||
chartHandle.data.datasets[2].data = lower_bound;
|
||||
|
||||
chartHandle.update();
|
||||
});
|
||||
chartHandle.options.scales.x.labels = Array(reward_mean.length)
|
||||
.fill(0)
|
||||
.map((_, i) => i);
|
||||
chartHandle.data.datasets[0].data = reward_mean;
|
||||
chartHandle.data.datasets[1].data = upper_bound;
|
||||
chartHandle.data.datasets[2].data = lower_bound;
|
||||
|
||||
chartHandle.update();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,21 +1,24 @@
|
||||
<template>
|
||||
<v-navigation-drawer
|
||||
v-model="store.rosBarOpened"
|
||||
temporary
|
||||
location="right">
|
||||
<v-navigation-drawer v-model="store.rosBarOpened" temporary location="right">
|
||||
<v-container fluid>
|
||||
<v-row justify="space-between">
|
||||
<v-col cols="6" md="12">
|
||||
<v-text-field v-model="formState.ipaddress"
|
||||
label="IP Address"
|
||||
:disabled="connectionState"/>
|
||||
<v-text-field v-model="formState.port"
|
||||
label="Port"
|
||||
:disabled="connectionState"/>
|
||||
<v-switch @change="updateConnectionState"
|
||||
true-value="connected"
|
||||
false-value="not connected"
|
||||
:label="`${formState.connect}`"/>
|
||||
<v-text-field
|
||||
v-model="formState.ipaddress"
|
||||
label="IP Address"
|
||||
:disabled="connectionState"
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="formState.port"
|
||||
label="Port"
|
||||
:disabled="connectionState"
|
||||
/>
|
||||
<v-switch
|
||||
@change="updateConnectionState"
|
||||
true-value="connected"
|
||||
false-value="not connected"
|
||||
:label="`${formState.connect}`"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
@ -23,31 +26,27 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as ROS from 'roslib';
|
||||
import { useBWStore } from '@/store/BaseWebsiteStore';
|
||||
import * as ROS from "roslib";
|
||||
import { useBWStore } from "@/store/BaseWebsiteStore";
|
||||
import { usePStore } from "@/store/PolicyStore";
|
||||
import {useCStore} from "@/store/ControlStore";
|
||||
import { useCStore } from "@/store/ControlStore";
|
||||
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
watch,
|
||||
} from 'vue';
|
||||
import { reactive, ref, watch } from "vue";
|
||||
|
||||
import * as ROSLIB from "roslib";
|
||||
import {useRStore} from "@/store/RewardStore";
|
||||
import {useMCStore} from "@/store/MountainCarStore";
|
||||
import { useRStore } from "@/store/RewardStore";
|
||||
import { useMCStore } from "@/store/MountainCarStore";
|
||||
|
||||
const store = useBWStore();
|
||||
const store = useBWStore();
|
||||
const pstore = usePStore();
|
||||
const cstore = useCStore();
|
||||
const rstore = useRStore();
|
||||
const mcstore = useMCStore();
|
||||
|
||||
const formState = reactive({
|
||||
ipaddress: 'localhost',
|
||||
port: '9090',
|
||||
connect: 'not connected',
|
||||
ipaddress: "localhost",
|
||||
port: "9090",
|
||||
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.
|
||||
const ros = new ROS.Ros();
|
||||
ros.on('connection', () => {
|
||||
ros.on("connection", () => {
|
||||
stateCounter.value[0] += 1;
|
||||
});
|
||||
|
||||
ros.on('error', (error) => {
|
||||
ros.on("error", (error) => {
|
||||
stateCounter.value[1] += 1;
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
ros.on('close', () => { stateCounter.value[2] += 1; });
|
||||
ros.on("close", () => {
|
||||
stateCounter.value[2] += 1;
|
||||
});
|
||||
|
||||
function updateConnectionState() {
|
||||
connectionState.value = !connectionState.value;
|
||||
if (formState.connect === 'not connected') {
|
||||
formState.connect = 'connected';
|
||||
if (formState.connect === "not connected") {
|
||||
formState.connect = "connected";
|
||||
const rosUrl = `ws://${formState.ipaddress}:${formState.port}`;
|
||||
ros.connect(rosUrl);
|
||||
} else {
|
||||
formState.connect = 'not connected';
|
||||
formState.connect = "not connected";
|
||||
ros.close();
|
||||
}
|
||||
}
|
||||
@ -85,71 +86,101 @@ const lastStateCounter = [0, 0, 0];
|
||||
watch(stateCounter.value, (newValue) => {
|
||||
let currentState = 0;
|
||||
for (let i = 0; i < lastStateCounter.length; i += 1) {
|
||||
if ((newValue[i] - lastStateCounter[i]) === 1) {
|
||||
if (newValue[i] - lastStateCounter[i] === 1) {
|
||||
currentState = i;
|
||||
}
|
||||
lastStateCounter[i] = newValue[i];
|
||||
}
|
||||
if (currentState === 0) {
|
||||
store.setRosConState('connected');
|
||||
store.setRosConState("connected");
|
||||
} else if (currentState === 1) {
|
||||
store.setRosConState('error');
|
||||
store.setRosConState("error");
|
||||
} else if (currentState === 2) {
|
||||
store.setRosConState('not connected');
|
||||
store.setRosConState("not connected");
|
||||
}
|
||||
});
|
||||
|
||||
// Policy Service
|
||||
const policy_service = new ROSLIB.Service({
|
||||
ros: ros,
|
||||
name: '/policy_srv',
|
||||
serviceType: 'active_bo_msgs/srv/WeightToPolicy',
|
||||
name: "/policy_srv",
|
||||
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({
|
||||
weights: pstore.weights,
|
||||
nr_steps: pstore.max_steps,
|
||||
})
|
||||
|
||||
policy_service.callService(policy_request, function (result) {
|
||||
pstore.setPolicy(result.policy)
|
||||
});
|
||||
});
|
||||
policy_service.callService(policy_request, function (result) {
|
||||
pstore.setPolicy(result.policy);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
// RL Service + Feedback Suscriber
|
||||
const rl_feedback_subscriber = new ROSLIB.Topic({
|
||||
ros: ros,
|
||||
name: '/rl_feedback',
|
||||
message: 'active_bo_msgs/msg/ImageFeedback',
|
||||
name: "/rl_feedback",
|
||||
message: "active_bo_msgs/msg/ImageFeedback",
|
||||
});
|
||||
|
||||
rl_feedback_subscriber.subscribe( (msg) => {
|
||||
rl_feedback_subscriber.subscribe((msg) => {
|
||||
mcstore.setDim(msg.height, msg.width);
|
||||
mcstore.setRgbArrays(msg.red, msg.green, msg.blue);
|
||||
});
|
||||
|
||||
const rl_service = new ROSLIB.Service({
|
||||
ros: ros,
|
||||
name: '/rl_srv',
|
||||
serviceType: 'active_bo_msgs/srv/RLRollOut',
|
||||
name: "/rl_srv",
|
||||
serviceType: "active_bo_msgs/srv/RLRollOut",
|
||||
});
|
||||
|
||||
watch(() => cstore.getRunner, () =>{
|
||||
|
||||
const rl_request = new ROSLIB.ServiceRequest({
|
||||
policy: pstore.policy,
|
||||
})
|
||||
|
||||
rl_service.callService(rl_request, function (rl_result) {
|
||||
rstore.addMeanManually(rl_result.reward)
|
||||
});
|
||||
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({
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@ -10,13 +10,13 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useBWStore } from '@/store/BaseWebsiteStore';
|
||||
import { useBWStore } from "@/store/BaseWebsiteStore";
|
||||
|
||||
const store = useBWStore();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar-button{
|
||||
.sidebar-button {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
left: -16px;
|
||||
|
||||
@ -4,18 +4,27 @@
|
||||
<v-col cols="12" md="8">
|
||||
<v-row no-gutters>
|
||||
<v-col cols="12">
|
||||
<v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%' }">
|
||||
<policy-plot/>
|
||||
<v-card
|
||||
class="tile"
|
||||
:style="{ height: 'calc(40vh - 24px)', width: '100%' }"
|
||||
>
|
||||
<policy-plot />
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-card class="tile" :style="{ height: 'calc(20vh - 24px)', width: '100%' }">
|
||||
<weight-tuner/>
|
||||
<v-card
|
||||
class="tile"
|
||||
:style="{ height: 'calc(20vh - 24px)', width: '100%' }"
|
||||
>
|
||||
<weight-tuner />
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%' }">
|
||||
<reward-plot/>
|
||||
<v-card
|
||||
class="tile"
|
||||
:style="{ height: 'calc(40vh - 24px)', width: '100%' }"
|
||||
>
|
||||
<reward-plot />
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@ -23,13 +32,19 @@
|
||||
<v-col cols="12" md="4">
|
||||
<v-row no-gutters>
|
||||
<v-col cols="12">
|
||||
<v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%'}">
|
||||
<MountainCarCanvas/>
|
||||
<v-card
|
||||
class="tile"
|
||||
:style="{ height: 'calc(40vh - 24px)', width: '100%' }"
|
||||
>
|
||||
<MountainCarCanvas />
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-card class="tile" :style="{ height: 'calc(60vh - 48px)', width: '100%' }">
|
||||
<control-panel/>
|
||||
<v-card
|
||||
class="tile"
|
||||
:style="{ height: 'calc(60vh - 48px)', width: '100%' }"
|
||||
>
|
||||
<control-panel />
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@ -47,7 +62,7 @@ import MountainCarCanvas from "@/components/MountainCarCanvas.vue";
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sub-layout{
|
||||
.sub-layout {
|
||||
padding: 0;
|
||||
margin: 1px 0 0 0;
|
||||
}
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
<template>
|
||||
<v-app-bar id="components-top-bar" class="elevation-1">
|
||||
<v-img class="cps-image" :left="true" :src="pic"/>
|
||||
<v-divider vertical class="image-divider"/>
|
||||
<v-spacer/>
|
||||
<v-btn
|
||||
@click="store.toggleRosBar()" >
|
||||
<v-img class="cps-image" :left="true" :src="pic" />
|
||||
<v-divider vertical class="image-divider" />
|
||||
<v-spacer />
|
||||
<v-btn @click="store.toggleRosBar()">
|
||||
<v-icon :color="changeRosColor()" large>
|
||||
mdi-checkbox-blank-circle
|
||||
</v-icon>
|
||||
@ -14,31 +13,30 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useBWStore } from '@/store/BaseWebsiteStore';
|
||||
import pic from '../assets/CPS_Logo_White.png';
|
||||
import { useBWStore } from "@/store/BaseWebsiteStore";
|
||||
import pic from "../assets/CPS_Logo_White.png";
|
||||
|
||||
const store = useBWStore();
|
||||
|
||||
const changeRosColor = () => {
|
||||
const conState = store.getRosConState;
|
||||
if (conState === 'not connected') {
|
||||
return 'red';
|
||||
if (conState === "not connected") {
|
||||
return "red";
|
||||
}
|
||||
if (conState === 'connected') {
|
||||
return 'green';
|
||||
if (conState === "connected") {
|
||||
return "green";
|
||||
}
|
||||
return 'grey';
|
||||
return "grey";
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cps-image{
|
||||
.cps-image {
|
||||
left: 8px;
|
||||
max-width: 48px;
|
||||
max-height: 48px;
|
||||
}
|
||||
.image-divider{
|
||||
.image-divider {
|
||||
position: absolute;
|
||||
left: 64px;
|
||||
}
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const useBWStore = defineStore('Base Website Store', {
|
||||
state: () => {
|
||||
return {
|
||||
play: false,
|
||||
rosBarOpened: true,
|
||||
rosConState: 'not connected',
|
||||
}
|
||||
export const useBWStore = defineStore("Base Website Store", {
|
||||
state: () => {
|
||||
return {
|
||||
play: false,
|
||||
rosBarOpened: true,
|
||||
rosConState: "not connected",
|
||||
};
|
||||
},
|
||||
getters: {
|
||||
getPlay: (state) => state.play,
|
||||
getRosBarOpened: (state) => state.rosBarOpened,
|
||||
getRosConState: (state) => state.rosConState,
|
||||
},
|
||||
actions: {
|
||||
setPlay() {
|
||||
this.play = !this.play;
|
||||
},
|
||||
getters: {
|
||||
getPlay: (state) => state.play,
|
||||
getRosBarOpened: (state) => state.rosBarOpened,
|
||||
getRosConState: (state) => state.rosConState,
|
||||
toggleRosBar() {
|
||||
this.rosBarOpened = !this.rosBarOpened;
|
||||
},
|
||||
actions: {
|
||||
setPlay() {
|
||||
this.play = !this.play;
|
||||
},
|
||||
toggleRosBar() {
|
||||
this.rosBarOpened = !this.rosBarOpened;
|
||||
},
|
||||
setRosConState(value) {
|
||||
this.rosConState = value;
|
||||
},
|
||||
}
|
||||
})
|
||||
setRosConState(value) {
|
||||
this.rosConState = value;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,43 +1,53 @@
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const useCStore = defineStore('Control Store', {
|
||||
state: () => {
|
||||
return {
|
||||
mode: 'manually',
|
||||
user_modes: ['manually', 'BO', 'active BO'],
|
||||
nr_episodes: 10,
|
||||
nr_runs: 1,
|
||||
greedy: 0,
|
||||
sendWeights: false,
|
||||
runner: false,
|
||||
}
|
||||
export const useCStore = defineStore("Control Store", {
|
||||
state: () => {
|
||||
return {
|
||||
mode: "manually",
|
||||
user_modes: ["manually", "BO", "active BO"],
|
||||
acq_fun: "Expected Improvement",
|
||||
acq_funs: [
|
||||
"Expected Improvement",
|
||||
"Probability of Improvement",
|
||||
"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: {
|
||||
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,
|
||||
setNrEpisodes(value) {
|
||||
this.nr_episodes = value;
|
||||
},
|
||||
actions: {
|
||||
setUserMode(value) {
|
||||
this.mode = value;
|
||||
},
|
||||
setNrEpisodes(value) {
|
||||
this.nr_episodes = value;
|
||||
},
|
||||
setNrRuns(value) {
|
||||
this.nr_runs = value;
|
||||
},
|
||||
setGreedy(value) {
|
||||
this.greedy = value;
|
||||
},
|
||||
setSendWeights() {
|
||||
this.sendWeights = !this.sendWeights;
|
||||
},
|
||||
setRunner() {
|
||||
this.runner = !this.runner;
|
||||
},
|
||||
}
|
||||
})
|
||||
setNrRuns(value) {
|
||||
this.nr_runs = value;
|
||||
},
|
||||
setGreedy(value) {
|
||||
this.greedy = value;
|
||||
},
|
||||
setSendWeights() {
|
||||
this.sendWeights = !this.sendWeights;
|
||||
},
|
||||
setRunner() {
|
||||
this.runner = !this.runner;
|
||||
},
|
||||
setAcq(value) {
|
||||
this.acq_fun = value;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,33 +1,33 @@
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const useMCStore = defineStore('Mountain Car Store', {
|
||||
state: () => {
|
||||
return {
|
||||
red: Array(153600).fill(120),
|
||||
green: Array(153600).fill(120),
|
||||
blue: Array(153600).fill(120),
|
||||
width: 480,
|
||||
height: 320,
|
||||
trigger: false,
|
||||
}
|
||||
export const useMCStore = defineStore("Mountain Car Store", {
|
||||
state: () => {
|
||||
return {
|
||||
red: Array(153600).fill(120),
|
||||
green: Array(153600).fill(120),
|
||||
blue: Array(153600).fill(120),
|
||||
width: 480,
|
||||
height: 320,
|
||||
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: {
|
||||
getRed: (state) => state.red,
|
||||
getGreen: (state) => state.green,
|
||||
getBlue: (state) => state.blue,
|
||||
getHeight: (state) => state.height,
|
||||
getWidth: (state) => state.width,
|
||||
setDim(height, width) {
|
||||
this.height = height;
|
||||
this.width = 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;
|
||||
},
|
||||
}
|
||||
})
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,34 +1,34 @@
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const usePStore = defineStore('Policy Store', {
|
||||
state: () => {
|
||||
return {
|
||||
policy: Array(10).fill(0),
|
||||
nr_weights: 5,
|
||||
weights: [-1, -1, 1, 0, 0],
|
||||
max_steps: 100,
|
||||
}
|
||||
export const usePStore = defineStore("Policy Store", {
|
||||
state: () => {
|
||||
return {
|
||||
policy: Array(10).fill(0),
|
||||
nr_weights: 5,
|
||||
weights: [-1, -1, 1, 0, 0],
|
||||
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: {
|
||||
getPolicy: (state) => state.policy,
|
||||
getNrWeights: (state) => state.nr_weights,
|
||||
getWeights: (state) => state.weights,
|
||||
getMaxSteps: (state) => state.max_steps,
|
||||
setNrWeights(value) {
|
||||
this.nr_weights = value;
|
||||
this.weights = Array(this.nr_weights).fill(0);
|
||||
},
|
||||
actions: {
|
||||
setPolicy(value) {
|
||||
this.policy = null;
|
||||
this.policy = 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;
|
||||
},
|
||||
}
|
||||
})
|
||||
setWeights(value) {
|
||||
this.weights = value;
|
||||
},
|
||||
setMaxSteps(value) {
|
||||
this.max_steps = value;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,29 +1,30 @@
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const useRStore = defineStore('Reward Store', {
|
||||
state: () => {
|
||||
return {
|
||||
reward_mean: [],
|
||||
reward_std: [],
|
||||
trigger: false,
|
||||
}
|
||||
export const useRStore = defineStore("Reward Store", {
|
||||
state: () => {
|
||||
return {
|
||||
reward_mean: [],
|
||||
reward_std: [],
|
||||
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: {
|
||||
getMean: (state) => state.reward_mean,
|
||||
getStd: (state) => state.reward_std,
|
||||
getTrigger: (state) => state.trigger,
|
||||
setStd(value) {
|
||||
this.reward_std = value;
|
||||
this.trigger = !this.trigger;
|
||||
},
|
||||
actions: {
|
||||
setMean(value) {
|
||||
this.reward_mean = value;
|
||||
},
|
||||
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;
|
||||
},
|
||||
}
|
||||
})
|
||||
addMeanManually(value) {
|
||||
this.reward_mean[this.reward_mean.length] = value;
|
||||
this.reward_std[this.reward_std.length] = 0;
|
||||
this.trigger = !this.trigger;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user