initial commit

.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/InteractiveBODm.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/InteractiveBODm.iml" filepath="$PROJECT_DIR$/.idea/InteractiveBODm.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

InteractiveBO/.eslintrc.cjs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript",
+    "@vue/eslint-config-prettier",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+};

InteractiveBO/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

InteractiveBO/.prettierrc.json

@@ -0,0 +1 @@
+{}

InteractiveBO/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

InteractiveBO/README.md

@@ -0,0 +1,46 @@
+# ActiveBOWeb
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

InteractiveBO/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

InteractiveBO/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/CPS_White.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Active BO</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="src/main.ts"></script>
+  </body>
+</html>

InteractiveBO/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "activeboweb",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check build-only",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "chart.js": "^4.2.1",
+    "pinia": "^2.0.30",
+    "roslib": "^1.3.0",
+    "vue": "^3.2.45",
+    "vue-resource": "^1.5.3",
+    "vue-slider-component": "^4.1.0-beta.7",
+    "vue3-slider": "^1.8.0",
+    "vuetify": "^3.1.4"
+  },
+  "devDependencies": {
+    "@mdi/font": "^7.1.96",
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@types/node": "^18.11.12",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/tsconfig": "^0.1.3",
+    "eslint": "^8.22.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.7.1",
+    "typescript": "~4.7.4",
+    "vite": "^4.0.0",
+    "vue-tsc": "^1.0.12"
+  }
+}

InteractiveBO/src/App.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-app class="app-class">
+    <v-main>
+      <BaseLayout />
+    </v-main>
+  </v-app>
+</template>
+
+<script setup>
+import BaseLayout from "@/components/BaseLayout.vue";
+</script>
+
+<style scoped>
+.app-class {
+  background: rgb(64, 73, 76);
+}
+</style>

InteractiveBO/src/components/BaseLayout.vue

@@ -0,0 +1,15 @@
+<template>
+  <TopBar />
+  <SideBar />
+  <SubLayout />
+  <RosBar />
+</template>
+
+<script setup>
+import TopBar from "@/components/TopBar.vue";
+import RosBar from "@/components/RosBar.vue";
+import SideBar from "@/components/SideBar.vue";
+import SubLayout from "@/components/SubLayout.vue";
+</script>
+
+<style scoped></style>

InteractiveBO/src/components/ControlPanel.vue

@@ -0,0 +1,151 @@
+<template>
+  <v-row class="flex-row">
+    <v-col class="flex-col px-4">
+      <v-row class="d-flex justify-space-evenly">
+        <v-select
+          :items="envs"
+          label="Environments"
+          v-model="envSelector"
+        ></v-select>
+        <v-select
+          :items="metrics"
+          label="Metric"
+          v-model="metricSelector"
+        ></v-select>
+      </v-row>
+      <v-slider
+        class="control-slider"
+        label="maximum steps"
+        v-model="maxStepComp"
+        :step="1"
+        :min="10"
+        :max="500"
+        thumb-label
+      />
+      <v-slider
+        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="1"
+        :max="500"
+        thumb-label
+      />
+      <v-slider
+        class="control-slider"
+        label="nr runs"
+        v-model="cstore.nr_runs"
+        :step="1"
+        :min="1"
+        :max="100"
+        thumb-label
+      />
+      <v-select
+        class="justify-space-evenly"
+        :items="acq_funs"
+        label="Acquisition Function"
+        v-model="acqSelector"
+      ></v-select>
+      <v-row class="flex-row px-4 py-0" style="max-height: 80px">
+        <v-slider
+          class="control-slider"
+          :label="cstore.metrics_label[cstore.metric]"
+          v-model="cstore.metric_parameter"
+          :step="cstore.metric_limits[cstore.metric][2]"
+          :min="cstore.metric_limits[cstore.metric][0]"
+          :max="cstore.metric_limits[cstore.metric][1]"
+          thumb-label
+        />
+        <v-col class="pa-0 ba-0" cols="2">
+          <v-select
+            v-if="cstore.metric === 'improvement'"
+            label="nr episodes"
+            v-model="cstore.improvement_2"
+            :items="[5, 10, 15, 20, 25, 30, 35, 40, 45, 50]"
+            variant="outlined"
+          />
+        </v-col>
+      </v-row>
+      <v-row class="justify-space-evenly px-1 py-0 ma-0 ba-0">
+        <v-checkbox
+          class="py-0 my-0"
+          v-model="cstore.fixed_seed"
+          label="fixed seed"
+        />
+        <v-checkbox
+          class="py-0 my-0"
+          v-model="cstore.overwrite"
+          label="overwrite"
+        />
+        <v-checkbox
+          class="py-0 my-0"
+          v-model="cstore.save_result"
+          label="save_result"
+        />
+      </v-row>
+      <v-row class="d-flex justify-space-evenly py-0 ma-0">
+        <v-btn
+          class="py-0 my-0"
+          color="primary"
+          @click="cstore.setSendWeights()"
+          >Send Weights</v-btn
+        >
+        <v-btn class="py-0 my-0" color="secondary" @click="cstore.setRunner()"
+          >Run</v-btn
+        >
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+import { usePStore } from "@/store/PolicyStore";
+import { useCStore } from "@/store/ControlStore";
+import { computed } from "vue";
+
+const pstore = usePStore();
+const cstore = useCStore();
+
+const envs = cstore.envs;
+const metrics = cstore.metrics;
+const acq_funs = cstore.acq_funs;
+
+const maxStepComp = computed({
+  get: () => pstore.max_steps,
+  set: (value) => pstore.setMaxSteps(value),
+});
+
+const baseFuncsComp = computed({
+  get: () => pstore.nr_weights,
+  set: (value) => pstore.setNrWeights(value),
+});
+
+const envSelector = computed({
+  get: () => cstore.env,
+  set: (value) => cstore.setEnv(value),
+});
+
+const metricSelector = computed({
+  get: () => cstore.metric,
+  set: (value) => cstore.setMetric(value),
+});
+
+const acqSelector = computed({
+  get: () => cstore.acq_fun,
+  set: (value) => cstore.setAcq(value),
+});
+</script>
+
+<style scoped>
+.control-slider {
+}
+</style>

InteractiveBO/src/components/PolicyPlot.vue

@@ -0,0 +1,138 @@
+<template>
+  <canvas id="policy-chart" />
+</template>
+
+<script setup>
+import { onMounted, watch } from "vue";
+import { usePStore } from "@/store/PolicyStore";
+import { Chart } from "chart.js/auto";
+import { computeRbfCurve } from "@/js_funs/online_rbf_policy";
+import { useRLStore } from "@/store/RLStore";
+
+const store = usePStore();
+const rlstore = useRLStore();
+
+let chartHandle;
+
+let verticalLinePlugin = {
+  id: "verticalLinePlugin",
+  afterDraw: function (chart, args, options) {
+    let y_Scale = chart.scales["y"];
+    let x_Scale = chart.scales["x"];
+
+    let ctx = chart.ctx;
+    let xValue = options.xValue;
+    let x = x_Scale.getPixelForValue(xValue);
+    let top = y_Scale.top;
+    let bottom = y_Scale.bottom;
+
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(x, top);
+    ctx.lineTo(x, bottom);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = "#00ff00";
+    ctx.stroke();
+    ctx.restore();
+  },
+};
+Chart.register(verticalLinePlugin);
+
+function buildChart() {
+  const policy = store.getPolicy;
+  const policy_labels = Array(policy.length)
+    .fill(0)
+    .map((_, i) => i);
+  const RewardPlot = {
+    data: {
+      datasets: [
+        {
+          type: "line",
+          xAxisID: "x",
+          yAxisID: "y",
+          data: policy,
+          borderColor: "#3DC47A",
+          borderWidth: 2,
+          pointRadius: 0,
+        },
+      ],
+    },
+    options: {
+      maintainAspectRatio: false,
+      responsive: true,
+      animation: {
+        duration: 0,
+      },
+      plugins: {
+        legend: {
+          display: false,
+        },
+        verticalLinePlugin: {
+          xValue: rlstore.getCurrentTime,
+        },
+      },
+      lineTension: 0,
+      tooltip: {
+        mode: "label",
+      },
+      scales: {
+        x: {
+          grid: {
+            display: false,
+          },
+          labels: policy_labels,
+          ticks: {
+            autoSkip: true,
+          },
+        },
+        y: {
+          type: "linear",
+          ticks: {
+            beginAtZero: true,
+          },
+        },
+      },
+    },
+  };
+  const ctx = document.getElementById("policy-chart");
+  // eslint-disable-next-line no-new
+  chartHandle = new Chart(ctx, RewardPlot);
+}
+
+onMounted(() => {
+  buildChart();
+});
+
+watch(
+  () => rlstore.current_time,
+  () => {
+    const policy = store.getPolicy;
+    chartHandle.options.scales.x.labels = Array(policy.length)
+      .fill(0)
+      .map((_, i) => i);
+    chartHandle.data.datasets[0].data = policy;
+    chartHandle.options.plugins.verticalLinePlugin.xValue =
+      rlstore.current_time;
+
+    chartHandle.update();
+  }
+);
+watch(
+  () => store.getTrigger,
+  () => {
+    const policy = computeRbfCurve(store.getMaxSteps, store.getWeights);
+    store.setPolicy(policy);
+
+    chartHandle.options.scales.x.labels = Array(policy.length)
+      .fill(0)
+      .map((_, i) => i);
+    chartHandle.data.datasets[0].data = policy;
+    chartHandle.options.plugins.verticalLinePlugin.xValue =
+      rlstore.current_time;
+
+    chartHandle.update();
+  }
+);
+</script>
+
+<style scoped></style>

InteractiveBO/src/components/RLCanvas.vue

@@ -0,0 +1,58 @@
+<template>
+  <canvas id="MCcanvas" width="480" height="320" />
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from "vue";
+import { useRLStore } from "@/store/RLStore";
+
+const rlstore = useRLStore();
+
+const imageData = ref(null);
+
+const renderImage = (width, height) => {
+  const red = rlstore.getRed;
+  const green = rlstore.getGreen;
+  const blue = rlstore.getBlue;
+
+  const rgbData = new Uint8ClampedArray(height * width * 4);
+  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;
+  }
+
+  imageData.value = rgbData;
+};
+
+const drawImage = (width, height) => {
+  if (imageData.value) {
+    const canvas = document.getElementById("MCcanvas");
+    const context = canvas.getContext("2d");
+
+    const image = new ImageData(imageData.value, width, height);
+    context.putImageData(image, 0, 0);
+  }
+};
+
+onMounted(() => {
+  const height = rlstore.getHeight;
+  const width = rlstore.getWidth;
+  renderImage(width, height);
+  drawImage(width, height);
+});
+
+watch(
+  () => rlstore.trigger,
+  () => {
+    const height = rlstore.getHeight;
+    const width = rlstore.getWidth;
+    renderImage(width, height);
+    drawImage(width, height);
+  }
+);
+</script>
+
+<style scoped></style>

InteractiveBO/src/components/RewardPlot.vue

@@ -0,0 +1,131 @@
+<template>
+  <canvas id="reward-chart" />
+</template>
+
+<script setup>
+import { onMounted, watch } from "vue";
+import { Chart } from "chart.js/auto";
+import { useRStore } from "@/store/RewardStore";
+
+const store = useRStore();
+
+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 RewardPlot = {
+    data: {
+      datasets: [
+        {
+          label: "Reward",
+          type: "line",
+          xAxisID: "x",
+          yAxisID: "y",
+          fill: false,
+          data: reward_mean,
+          borderColor: "#3DC47A",
+          borderWidth: 2,
+          pointRadius: 0,
+        },
+        {
+          type: "line",
+          xAxisID: "x",
+          yAxisID: "y",
+          fill: 0,
+          data: upper_bound,
+          pointRadius: 0,
+          borderColor: "transparent",
+          backgroundColor: "rgba(61,196,122,0.5)",
+        },
+        {
+          type: "line",
+          xAxisID: "x",
+          yAxisID: "y",
+          fill: 0,
+          data: lower_bound,
+          pointRadius: 0,
+          borderColor: "transparent",
+          backgroundColor: "rgba(61,196,122,0.5)",
+        },
+      ],
+    },
+    options: {
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      maintainAspectRatio: false,
+      responsive: true,
+      animation: {
+        duration: 0,
+      },
+      lineTension: 0,
+      tooltip: {
+        mode: "label",
+      },
+      scales: {
+        x: {
+          grid: {
+            display: false,
+          },
+          labels: reward_labels,
+          ticks: {
+            autoSkip: true,
+          },
+        },
+        y: {
+          type: "linear",
+          ticks: {
+            beginAtZero: false,
+            min: -110,
+            max: 0,
+          },
+        },
+      },
+    },
+  };
+  const ctx = document.getElementById("reward-chart");
+  // eslint-disable-next-line no-new
+  chartHandle = new Chart(ctx, RewardPlot);
+}
+
+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]);
+
+    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>

InteractiveBO/src/components/RosBar.vue

@@ -0,0 +1,224 @@
+<template>
+  <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-col>
+      </v-row>
+    </v-container>
+  </v-navigation-drawer>
+</template>
+
+<script setup>
+import * as ROS from "roslib";
+import { useBWStore } from "@/store/BaseWebsiteStore";
+import { usePStore } from "@/store/PolicyStore";
+import { useCStore } from "@/store/ControlStore";
+import { useRStore } from "@/store/RewardStore";
+import { useRLStore } from "@/store/RLStore";
+
+import { reactive, ref, watch } from "vue";
+
+const store = useBWStore();
+const pstore = usePStore();
+const cstore = useCStore();
+const rstore = useRStore();
+const rlstore = useRLStore();
+
+const formState = reactive({
+  ipaddress: "localhost",
+  port: "9090",
+  connect: "not connected",
+  // connectionState: computed(() => formState.connect !== 'not connected'),
+});
+
+const connectionState = ref(false);
+const stateCounter = ref([0, 0, 0]);
+
+// Open Connection to ROSBridge and subscribe the topics.
+const ros = new ROS.Ros();
+const ros_eval = new ROS.Ros();
+
+ros.on("connection", () => {
+  stateCounter.value[0] += 1;
+});
+ros_eval.on("connection", () => {});
+
+ros.on("error", (error) => {
+  stateCounter.value[1] += 1;
+  console.log(error);
+});
+ros_eval.on("error", () => {});
+
+ros.on("close", () => {
+  stateCounter.value[2] += 1;
+});
+ros_eval.on("close", () => {});
+
+function updateConnectionState() {
+  connectionState.value = !connectionState.value;
+  if (formState.connect === "not connected") {
+    formState.connect = "connected";
+    const rosUrl = `ws://${formState.ipaddress}:${formState.port}`;
+    ros.connect(rosUrl);
+    ros_eval.connect(rosUrl);
+  } else {
+    formState.connect = "not connected";
+    ros.close();
+    ros_eval.close();
+  }
+}
+
+const lastStateCounter = [0, 0, 0];
+
+// ROS2 State Observer
+watch(stateCounter.value, (newValue) => {
+  let currentState = 0;
+  for (let i = 0; i < lastStateCounter.length; i += 1) {
+    if (newValue[i] - lastStateCounter[i] === 1) {
+      currentState = i;
+    }
+    lastStateCounter[i] = newValue[i];
+  }
+  if (currentState === 0) {
+    store.setRosConState("connected");
+  } else if (currentState === 1) {
+    store.setRosConState("error");
+  } else if (currentState === 2) {
+    store.setRosConState("not connected");
+  }
+});
+
+// State Subscriber
+const state_subscriber = new ROS.Topic({
+  ros: ros,
+  name: "/active_bo_state",
+  messageType: "active_bo_msgs/msg/ActiveBOState",
+});
+
+state_subscriber.subscribe((msg) => {
+  rlstore.setCurrentRun(msg.current_run);
+  rlstore.setCurrentEpisode(msg.current_episode);
+  rlstore.setBestReward(msg.best_reward);
+  rlstore.setLastUserReward(msg.last_user_reward);
+
+  if (msg.current_episode === 1) {
+    pstore.resetWeights_Fixed();
+  }
+});
+
+// RL Service + Feedback Subscriber
+const rl_feedback_subscriber = new ROS.Topic({
+  ros: ros,
+  name: "/rl_feedback",
+  messageType: "active_bo_msgs/msg/ImageFeedback",
+});
+
+rl_feedback_subscriber.subscribe((msg) => {
+  rlstore.setDim(msg.height, msg.width);
+  rlstore.setRgbArrays(msg.red, msg.green, msg.blue);
+  rlstore.setCurrentTime(msg.current_time);
+});
+
+const active_rl_eval_sub = new ROS.Topic({
+  ros: ros_eval,
+  name: "/active_rl_eval_request",
+  messageType: "active_bo_msgs/msg/ActiveRLEvalRequest",
+});
+
+const pendingRequest = ref(false);
+active_rl_eval_sub.subscribe((msg) => {
+  pstore.setPolicy(msg.policy);
+  pstore.setWeights(msg.weights);
+  pendingRequest.value = true;
+});
+
+const active_rl_eval_pub = new ROS.Topic({
+  ros: ros_eval,
+  name: "/active_rl_eval_response",
+  messageType: "active_bo_msgs/msg/ActiveRLEvalResponse",
+});
+
+watch(
+  () => cstore.getSendWeights,
+  () => {
+    if (!pendingRequest.value) {
+      return;
+    }
+    console.log("Button pressed!");
+    const active_eval_response = new ROS.Message({
+      policy: pstore.policy,
+      weights: pstore.weights,
+      overwrite_weight: pstore.weights_fixed,
+    });
+
+    console.log(active_eval_response);
+
+    active_rl_eval_pub.publish(active_eval_response);
+    console.log("New Policy/ Weights published");
+    pendingRequest.value = false;
+  }
+);
+
+const active_bo_pending = ref(false);
+
+const active_bo_request = new ROS.Topic({
+  ros: ros,
+  name: "/active_bo_request",
+  messageType: "active_bo_msgs/msg/ActiveBORequest",
+});
+
+const active_bo_response = new ROS.Topic({
+  ros: ros,
+  name: "/active_bo_response",
+  messageType: "active_bo_msgs/msg/ActiveBOResponse",
+});
+
+active_bo_response.subscribe((msg) => {
+  pstore.setPolicy(msg.best_policy);
+  pstore.setWeights(msg.best_weights);
+  rstore.setMean(msg.reward_mean);
+  rstore.setStd(msg.reward_std);
+  active_bo_pending.value = false;
+});
+
+watch(
+  () => cstore.getRunner,
+  () => {
+    const request_msg = new ROS.Message({
+      env: cstore.env,
+      metric: cstore.metric,
+      fixed_seed: cstore.fixed_seed,
+      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,
+      metric_parameter: cstore.metric_parameter,
+      metric_parameter_2: cstore.improvement_2,
+      save_result: cstore.save_result,
+      overwrite: cstore.overwrite,
+    });
+    active_bo_pending.value = true;
+    active_bo_request.publish(request_msg);
+  }
+);
+</script>
+
+<style scoped></style>

InteractiveBO/src/components/SideBar.vue

@@ -0,0 +1,84 @@
+<template>
+  <v-navigation-drawer class="nav-drawer" permanent width="64">
+    <v-list class="py-3">
+      <v-list-item style="padding: 0" class="py-2">
+        <div class="tile">
+          <span
+            style="
+              font-size: 14px;
+              text-align: center;
+              word-wrap: break-word;
+              padding: 0;
+            "
+            >Current <br />
+            Run <br />
+            {{ rlstore.current_run }}</span
+          >
+        </div>
+      </v-list-item>
+      <v-list-item style="padding: 0" class="py-2">
+        <div class="tile">
+          <span
+            style="
+              font-size: 14px;
+              text-align: center;
+              word-wrap: break-word;
+              padding: 0;
+            "
+            >Current <br />
+            Episode <br />
+            {{ rlstore.current_episode }}</span
+          >
+        </div>
+      </v-list-item>
+      <v-list-item style="padding: 0" class="py-2">
+        <div class="tile">
+          <span
+            style="
+              font-size: 14px;
+              text-align: center;
+              word-wrap: break-word;
+              padding: 0;
+            "
+            >Best <br />
+            Reward <br />
+            {{ rlstore.best_reward.toFixed(1) }}</span
+          >
+        </div>
+      </v-list-item>
+      <v-list-item style="padding: 0" class="py-2">
+        <div class="tile">
+          <span
+            style="
+              font-size: 14px;
+              text-align: center;
+              word-wrap: break-word;
+              padding: 0;
+            "
+            >User <br />
+            Reward <br />
+            {{ rlstore.last_user_reward.toFixed(1) }}</span
+          >
+        </div>
+      </v-list-item>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script setup>
+import { useRLStore } from "@/store/RLStore";
+const rlstore = useRLStore();
+</script>
+
+<style scoped>
+.tile {
+  width: 63px;
+  height: 64px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+</style>

InteractiveBO/src/components/SubLayout.vue

@@ -0,0 +1,78 @@
+<template>
+  <v-container fluid class="sub-layout">
+    <v-row no-gutters>
+      <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>
+          </v-col>
+          <v-col cols="12">
+            <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>
+          </v-col>
+        </v-row>
+      </v-col>
+      <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%' }"
+            >
+              <RLCanvas />
+            </v-card>
+          </v-col>
+          <v-col cols="12">
+            <v-card
+              class="tile"
+              :style="{ height: 'calc(60vh - 48px)', width: '100%' }"
+            >
+              <control-panel />
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+import WeightTuner from "@/components/WeightTuner.vue";
+import RewardPlot from "@/components/RewardPlot.vue";
+import PolicyPlot from "@/components/PolicyPlot.vue";
+import ControlPanel from "@/components/ControlPanel.vue";
+import RLCanvas from "@/components/RLCanvas.vue";
+</script>
+
+<style scoped>
+.sub-layout {
+  padding: 0;
+  margin: 1px 0 0 0;
+}
+.tile {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border: 1px solid #333;
+}
+</style>

InteractiveBO/src/components/TopBar.vue

@@ -0,0 +1,43 @@
+<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-icon :color="changeRosColor()" large>
+        mdi-checkbox-blank-circle
+      </v-icon>
+      \ ROS2
+    </v-btn>
+  </v-app-bar>
+</template>
+
+<script setup>
+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 === "connected") {
+    return "green";
+  }
+  return "grey";
+};
+</script>
+
+<style scoped>
+.cps-image {
+  left: 8px;
+  max-width: 48px;
+  max-height: 48px;
+}
+.image-divider {
+  position: absolute;
+  left: 64px;
+}
+</style>

InteractiveBO/src/components/WeightTuner.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-row no-gutters justify="center" class="weight-tuner">
+    <!-- eslint-disable-next-line -->
+    <v-col v-for="(_ , idx) in weights" :key="idx">
+      <div class="weight-container">
+        <vue-slider
+          class="slider-margin-bottom"
+          v-model="weights[idx]"
+          @change="updateWeight(idx, $event)"
+          direction="btt"
+          :height="100"
+          :min="-1"
+          :max="1"
+          :interval="0.01"
+        />
+        <v-checkbox
+          class="ma-0 checkbox-bottom"
+          v-model="store.weights_fixed[idx]"
+        />
+      </div>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+import { usePStore } from "@/store/PolicyStore";
+
+import VueSlider from "vue-slider-component";
+import "vue-slider-component/theme/default.css";
+import { computed } from "vue";
+import { useCStore } from "@/store/ControlStore";
+
+const store = usePStore();
+const cstore = useCStore();
+
+const weights = computed({
+  get: () => store.weights,
+  set: (value) => store.setWeights(value),
+});
+
+const updateWeight = (index, newValue) => {
+  const newWeights = weights.value.slice();
+  newWeights[index] = newValue;
+  store.setWeights(newWeights);
+  store.setTrigger();
+};
+</script>
+
+<style scoped>
+.weight-tuner {
+  height: 140px;
+}
+.weight-container {
+  height: 180px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+.slider-margin-bottom {
+  margin-bottom: 0; /* adjust this value as necessary */
+}
+.checkbox-bottom {
+  //position: absolute;
+  //bottom: 0;
+  padding: 5px 0 0 0;
+}
+</style>

InteractiveBO/src/js_funs/online_rbf_policy.js

@@ -0,0 +1,19 @@
+function rbf(x, centre, sigma) {
+  return Math.exp(-Math.pow(x - centre, 2) / (2 * Math.pow(sigma, 2)));
+}
+
+export function computeRbfCurve(nrPoints, weights) {
+  const centers = Array.from(
+    { length: weights.length },
+    (_, i) => (i * nrPoints) / (weights.length - 1)
+  );
+  const sigma = centers[1] / (2 * Math.sqrt(2 * Math.log(2)));
+
+  let policy = Array(nrPoints).fill(0);
+  for (let x = 0; x < nrPoints; x++) {
+    for (let i = 0; i < centers.length; i++) {
+      policy[x] += weights[i] * rbf(x, centers[i], sigma);
+    }
+  }
+  return policy;
+}

InteractiveBO/src/main.ts

@@ -0,0 +1,28 @@
+import { createApp } from "vue";
+
+// Pinia Store
+import { createPinia } from "pinia";
+
+// Vuetify
+import "vuetify/styles";
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+import "@mdi/font/css/materialdesignicons.css";
+
+import App from "./App.vue";
+
+const pinia = createPinia();
+const vuetify = createVuetify({
+  theme: {
+    defaultTheme: "dark",
+  },
+  components,
+  directives,
+});
+
+const app = createApp(App);
+
+app.use(pinia);
+app.use(vuetify);
+app.mount("#app");

InteractiveBO/src/store/BaseWebsiteStore.js

@@ -0,0 +1,27 @@
+import { defineStore } from "pinia";
+
+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;
+    },
+    toggleRosBar() {
+      this.rosBarOpened = !this.rosBarOpened;
+    },
+    setRosConState(value) {
+      this.rosConState = value;
+    },
+  },
+});

InteractiveBO/src/store/ControlStore.js

@@ -0,0 +1,76 @@
+import { defineStore } from "pinia";
+
+export const useCStore = defineStore("Control Store", {
+  state: () => {
+    return {
+      env: "Mountain Car",
+      envs: ["Mountain Car", "Cartpole", "Acrobot", "Pendulum"],
+      metric: "random",
+      metrics: ["random", "regular", "improvement", "max_acquisition"],
+      metrics_label: {
+        random: "Probability",
+        regular: "Repetition",
+        improvement: "Improvement Threshold",
+        max_acquisition: "Threshold",
+      },
+      metric_limits: {
+        random: [0.0, 1.0, 0.01],
+        regular: [1, 100, 1],
+        improvement: [0.0, 1.0, 0.01],
+        max_acquisition: [1, 200, 1],
+      },
+      acq_fun: "Expected Improvement",
+      acq_funs: [
+        "Expected Improvement",
+        "Probability of Improvement",
+        "Upper Confidence Bound",
+        "Preference Expected Improvement",
+      ],
+      nr_episodes: 50,
+      nr_runs: 10,
+      metric_parameter: 0.5,
+      improvement_2: 5,
+      sendWeights: false,
+      runner: false,
+      fixed_seed: false,
+      save_result: false,
+      overwrite: false,
+    };
+  },
+  getters: {
+    getEnv: (state) => state.env,
+    getMetric: (state) => state.metric,
+    getNrEpisodes: (state) => state.nr_episodes,
+    getNrRuns: (state) => state.nr_runs,
+    getMetricParameter: (state) => state.metric_parameter,
+    getSendWeights: (state) => state.sendWeights,
+    getRunner: (state) => state.runner,
+    getAcq: (state) => state.acq_fun,
+  },
+  actions: {
+    setEnv(value) {
+      this.env = value;
+    },
+    setMetric(value) {
+      this.metric = value;
+    },
+    setNrEpisodes(value) {
+      this.nr_episodes = value;
+    },
+    setNrRuns(value) {
+      this.nr_runs = value;
+    },
+    setMetricParameter(value) {
+      this.metric_parameter = value;
+    },
+    setSendWeights() {
+      this.sendWeights = !this.sendWeights;
+    },
+    setRunner() {
+      this.runner = !this.runner;
+    },
+    setAcq(value) {
+      this.acq_fun = value;
+    },
+  },
+});

InteractiveBO/src/store/PolicyStore.js

@@ -0,0 +1,47 @@
+import { defineStore } from "pinia";
+
+export const usePStore = defineStore("Policy Store", {
+  state: () => {
+    return {
+      policy: Array(10).fill(0),
+      nr_weights: 5,
+      weights: [0, 0, 0, 0, 0],
+      weights_fixed: [false, false, false, false, false],
+      max_steps: 100,
+      trigger: false,
+    };
+  },
+  getters: {
+    getPolicy: (state) => state.policy,
+    getNrWeights: (state) => state.nr_weights,
+    getWeights_Fixed: (state) => state.weights_fixed,
+    getWeights: (state) => state.weights,
+    getMaxSteps: (state) => state.max_steps,
+    getTrigger: (state) => state.trigger,
+  },
+  actions: {
+    setPolicy(value) {
+      this.policy = null;
+      this.policy = value;
+    },
+    setNrWeights(value) {
+      this.nr_weights = value;
+      this.weights = Array(this.nr_weights).fill(0);
+      this.weights_fixed = Array(this.nr_weights).fill(false);
+      this.trigger = !this.trigger;
+    },
+    setWeights(value) {
+      this.weights = value;
+    },
+    setMaxSteps(value) {
+      this.max_steps = value;
+      this.trigger = !this.trigger;
+    },
+    setTrigger() {
+      this.trigger = !this.trigger;
+    },
+    resetWeights_Fixed() {
+      this.weights_fixed = Array(this.nr_weights).fill(false);
+    },
+  },
+});

InteractiveBO/src/store/RLStore.js

@@ -0,0 +1,58 @@
+import { defineStore } from "pinia";
+
+export const useRLStore = defineStore("RL Store", {
+  state: () => {
+    return {
+      red: Array(153600).fill(120),
+      green: Array(153600).fill(120),
+      blue: Array(153600).fill(120),
+      width: 480,
+      height: 320,
+      current_time: 0,
+      current_run: 0,
+      current_episode: 0,
+      best_reward: 0.0,
+      last_user_reward: 0.0,
+      trigger: false,
+    };
+  },
+  getters: {
+    getRed: (state) => state.red,
+    getGreen: (state) => state.green,
+    getBlue: (state) => state.blue,
+    getHeight: (state) => state.height,
+    getWidth: (state) => state.width,
+    getCurrentTime: (state) => state.current_time,
+    getCurrentRun: (state) => state.current_run,
+    getCurrentEpisode: (state) => state.current_episode,
+    getBestReward: (state) => state.best_reward,
+    getLastUserReward: (state) => state.last_user_reward,
+  },
+  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;
+    },
+    setCurrentTime(value) {
+      this.current_time = value;
+    },
+    setCurrentRun(value) {
+      this.current_run = value;
+    },
+    setCurrentEpisode(value) {
+      this.current_episode = value;
+    },
+    setBestReward(value) {
+      this.best_reward = value;
+    },
+    setLastUserReward(value) {
+      this.last_user_reward = value;
+    },
+  },
+});

InteractiveBO/src/store/RewardStore.js

@@ -0,0 +1,30 @@
+import { defineStore } from "pinia";
+
+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;
+    },
+    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;
+    },
+  },
+});

InteractiveBO/tsconfig.config.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}

InteractiveBO/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+
+  "references": [
+    {
+      "path": "./tsconfig.config.json"
+    }
+  ]
+}

InteractiveBO/vite.config.ts

@@ -0,0 +1,15 @@
+import { fileURLToPath, URL } from "node:url";
+
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});