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

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

@ -39,11 +39,17 @@
label="nr runs"
v-model="cstore.nr_runs"
:step="1"
:min="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"
@ -55,7 +61,9 @@
: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)
})
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;
if (usrMode === 'manually') {
if (usrMode === "manually") {
episodeRef.value = true;
runRef.value = true;
acqRef.value = true;
greedyRef.value = true;
}
if (usrMode === 'BO') {
if (usrMode === "BO") {
episodeRef.value = false;
runRef.value = false;
acqRef.value = false;
greedyRef.value = true;
}
if (usrMode === 'active BO') {
if (usrMode === "active BO") {
episodeRef.value = false;
runRef.value = false;
acqRef.value = false;
greedyRef.value = false;
}
});
}
);
</script>
<style scoped>
.control-slider{
.control-slider {
}
</style>

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

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

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

@ -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',
y: {
type: "linear",
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
chartHandle = new Chart(ctx, RewardPlot);
}
@ -100,24 +104,28 @@ onMounted(() => {
buildChart();
});
watch(() => store.getTrigger, () => {
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 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.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>

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

@ -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"
<v-text-field
v-model="formState.ipaddress"
label="IP Address"
:disabled="connectionState"/>
<v-text-field v-model="formState.port"
:disabled="connectionState"
/>
<v-text-field
v-model="formState.port"
label="Port"
:disabled="connectionState"/>
<v-switch @change="updateConnectionState"
:disabled="connectionState"
/>
<v-switch
@change="updateConnectionState"
true-value="connected"
false-value="not connected"
:label="`${formState.connect}`"/>
:label="`${formState.connect}`"
/>
</v-col>
</v-row>
</v-container>
@ -23,20 +26,16 @@
</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 pstore = usePStore();
@ -45,9 +44,9 @@ 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,
})
});
policy_service.callService(policy_request, function (result) {
pstore.setPolicy(result.policy)
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 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_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>
<style scoped>
</style>
<style scoped></style>

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

@ -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;

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

@ -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;
}

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

@ -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;
}

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

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

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

@ -1,16 +1,22 @@
import { defineStore } from "pinia";
export const useCStore = defineStore('Control Store', {
export const useCStore = defineStore("Control Store", {
state: () => {
return {
mode: 'manually',
user_modes: ['manually', 'BO', 'active BO'],
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: 1,
nr_runs: 2,
greedy: 0,
sendWeights: false,
runner: false,
}
};
},
getters: {
getUserMode: (state) => state.mode,
@ -19,6 +25,7 @@ export const useCStore = defineStore('Control Store', {
getGreedy: (state) => state.greedy,
getSendWeights: (state) => state.sendWeights,
getRunner: (state) => state.runner,
getAcq: (state) => state.acq_fun,
},
actions: {
setUserMode(value) {
@ -39,5 +46,8 @@ export const useCStore = defineStore('Control Store', {
setRunner() {
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";
export const useMCStore = defineStore('Mountain Car Store', {
export const useMCStore = defineStore("Mountain Car Store", {
state: () => {
return {
red: Array(153600).fill(120),
@ -9,7 +9,7 @@ export const useMCStore = defineStore('Mountain Car Store', {
width: 480,
height: 320,
trigger: false,
}
};
},
getters: {
getRed: (state) => state.red,
@ -29,5 +29,5 @@ export const useMCStore = defineStore('Mountain Car Store', {
this.height = height;
this.width = width;
},
}
})
},
});

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

@ -1,13 +1,13 @@
import { defineStore } from "pinia";
export const usePStore = defineStore('Policy Store', {
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,
@ -30,5 +30,5 @@ export const usePStore = defineStore('Policy Store', {
setMaxSteps(value) {
this.max_steps = value;
},
}
})
},
});

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

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