From 6d095351139ab4ba316a20500bbcd412a22843f4 Mon Sep 17 00:00:00 2001
From: Niko <nikolaus.feith@unileoben.ac.at>
Date: Wed, 24 May 2023 17:46:18 +0200
Subject: [PATCH] integration of all but acrobot envs and msg + srvs adaption

---
 ActiveBOWeb/src/components/ControlPanel.vue   | 39 ++++++++-----
 .../{MountainCarCanvas.vue => RLCanvas.vue}   | 20 +++----
 ActiveBOWeb/src/components/RosBar.vue         | 58 ++++++++++---------
 ActiveBOWeb/src/components/SubLayout.vue      |  2 +-
 ActiveBOWeb/src/store/ControlStore.js         | 24 +++++---
 .../store/{MountainCarStore.js => RLStore.js} |  2 +-
 6 files changed, 83 insertions(+), 62 deletions(-)
 rename ActiveBOWeb/src/components/{MountainCarCanvas.vue => RLCanvas.vue} (73%)
 rename ActiveBOWeb/src/store/{MountainCarStore.js => RLStore.js} (92%)

diff --git a/ActiveBOWeb/src/components/ControlPanel.vue b/ActiveBOWeb/src/components/ControlPanel.vue
index 3428acc..9f4475a 100644
--- a/ActiveBOWeb/src/components/ControlPanel.vue
+++ b/ActiveBOWeb/src/components/ControlPanel.vue
@@ -1,11 +1,18 @@
 <template>
   <v-row>
     <v-col>
-      <v-select
-        :items="options"
-        label="User Mode"
-        v-model="modeSelector"
-      ></v-select>
+      <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"
@@ -52,8 +59,8 @@
       ></v-select>
       <v-slider
         class="control-slider"
-        label="greedy"
-        v-model="cstore.epsilon"
+        label="Metric Parameter"
+        v-model="cstore.metric_parameter"
         :step="0.01"
         :min="0"
         :max="1"
@@ -78,7 +85,8 @@ import { computed, watch, ref } from "vue";
 const pstore = usePStore();
 const cstore = useCStore();
 
-const options = cstore.user_modes;
+const envs = cstore.envs;
+const metrics = cstore.metircs;
 const acq_funs = cstore.acq_funs;
 
 const episodeRef = ref(true);
@@ -96,9 +104,14 @@ const baseFuncsComp = computed({
   set: (value) => pstore.setNrWeights(value),
 });
 
-const modeSelector = computed({
-  get: () => cstore.mode,
-  set: (value) => cstore.setUserMode(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({
@@ -107,9 +120,9 @@ const acqSelector = computed({
 });
 
 watch(
-  () => cstore.getUserMode,
+  () => cstore.getMetric,
   () => {
-    const usrMode = cstore.getUserMode;
+    const usrMode = cstore.getMetric;
 
     if (usrMode === "manually") {
       episodeRef.value = true;
diff --git a/ActiveBOWeb/src/components/MountainCarCanvas.vue b/ActiveBOWeb/src/components/RLCanvas.vue
similarity index 73%
rename from ActiveBOWeb/src/components/MountainCarCanvas.vue
rename to ActiveBOWeb/src/components/RLCanvas.vue
index 8131e18..f5bd0b1 100644
--- a/ActiveBOWeb/src/components/MountainCarCanvas.vue
+++ b/ActiveBOWeb/src/components/RLCanvas.vue
@@ -4,16 +4,16 @@
 
 <script setup>
 import { onMounted, ref, watch } from "vue";
-import { useMCStore } from "@/store/MountainCarStore";
+import { useRLStore } from "@/store/RLStore";
 
-const mcstore = useMCStore();
+const rlstore = useRLStore();
 
 const imageData = ref(null);
 
 const renderImage = (width, height) => {
-  const red = mcstore.getRed;
-  const green = mcstore.getGreen;
-  const blue = mcstore.getBlue;
+  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++) {
@@ -38,17 +38,17 @@ const drawImage = (width, height) => {
 };
 
 onMounted(() => {
-  const height = mcstore.getHeight;
-  const width = mcstore.getWidth;
+  const height = rlstore.getHeight;
+  const width = rlstore.getWidth;
   renderImage(width, height);
   drawImage(width, height);
 });
 
 watch(
-  () => mcstore.trigger,
+  () => rlstore.trigger,
   () => {
-    const height = mcstore.getHeight;
-    const width = mcstore.getWidth;
+    const height = rlstore.getHeight;
+    const width = rlstore.getWidth;
     renderImage(width, height);
     drawImage(width, height);
   }
diff --git a/ActiveBOWeb/src/components/RosBar.vue b/ActiveBOWeb/src/components/RosBar.vue
index fc41603..1fcb687 100644
--- a/ActiveBOWeb/src/components/RosBar.vue
+++ b/ActiveBOWeb/src/components/RosBar.vue
@@ -30,18 +30,16 @@ 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";
 
-import * as ROSLIB from "roslib";
-import { useRStore } from "@/store/RewardStore";
-import { useMCStore } from "@/store/MountainCarStore";
-
 const store = useBWStore();
 const pstore = usePStore();
 const cstore = useCStore();
 const rstore = useRStore();
-const mcstore = useMCStore();
+const rlstore = useRLStore();
 
 const formState = reactive({
   ipaddress: "localhost",
@@ -108,25 +106,25 @@ watch(stateCounter.value, (newValue) => {
 });
 
 // Policy Service
-const policy_service = new ROSLIB.Service({
+const policy_service = new ROS.Service({
   ros: ros,
   name: "/policy_srv",
   serviceType: "active_bo_msgs/srv/WeightToPolicy",
 });
 
-// RL Service + Feedback Suscriber
-const rl_feedback_subscriber = new ROSLIB.Topic({
+// 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) => {
-  mcstore.setDim(msg.height, msg.width);
-  mcstore.setRgbArrays(msg.red, msg.green, msg.blue);
+  rlstore.setDim(msg.height, msg.width);
+  rlstore.setRgbArrays(msg.red, msg.green, msg.blue);
 });
 
-const active_rl_eval_sub = new ROSLIB.Topic({
+const active_rl_eval_sub = new ROS.Topic({
   ros: ros_eval,
   name: "/active_rl_eval_request",
   messageType: "active_bo_msgs/msg/ActiveRL",
@@ -139,7 +137,7 @@ active_rl_eval_sub.subscribe((msg) => {
   pendingRequest.value = true;
 });
 
-const active_rl_eval_pub = new ROSLIB.Topic({
+const active_rl_eval_pub = new ROS.Topic({
   ros: ros_eval,
   name: "/active_rl_eval_response",
   messageType: "active_bo_msgs/msg/ActiveRL",
@@ -159,10 +157,10 @@ const active_rl_eval_pub = new ROSLIB.Topic({
 watch(
   () => cstore.getSendWeights,
   () => {
-    const usr_mode = cstore.getUserMode;
+    const metric = cstore.getMetric;
 
-    if (usr_mode === "manually") {
-      const policy_request = new ROSLIB.ServiceRequest({
+    if (metric === "manually") {
+      const policy_request = new ROS.ServiceRequest({
         weights: pstore.policy,
         nr_steps: pstore.weights,
       });
@@ -170,12 +168,12 @@ watch(
       policy_service.callService(policy_request, function (result) {
         pstore.setPolicy(result.policy);
       });
-    } else if (usr_mode === "active BO") {
+    } else if (metric === "active BO") {
       if (!pendingRequest.value) {
         return;
       }
       console.log("Button pressed!");
-      const active_eval_response = new ROSLIB.Message({
+      const active_eval_response = new ROS.Message({
         policy: pstore.policy,
         weights: pstore.weights,
       });
@@ -190,13 +188,13 @@ watch(
   }
 );
 
-const rl_service = new ROSLIB.Service({
+const rl_service = new ROS.Service({
   ros: ros,
   name: "/rl_srv",
   serviceType: "active_bo_msgs/srv/RLRollOut",
 });
 
-const bo_service = new ROSLIB.Service({
+const bo_service = new ROS.Service({
   ros: ros,
   name: "/bo_srv",
   serviceType: "active_bo_msgs/srv/BO",
@@ -209,13 +207,13 @@ const bo_service = new ROSLIB.Service({
 // });
 const active_bo_pending = ref(false);
 
-const active_bo_request = new ROSLIB.Topic({
+const active_bo_request = new ROS.Topic({
   ros: ros,
   name: "/active_bo_request",
   messageType: "active_bo_msgs/msg/ActiveBORequest",
 });
 
-const active_bo_response = new ROSLIB.Topic({
+const active_bo_response = new ROS.Topic({
   ros: ros,
   name: "/active_bo_response",
   messageType: "active_bo_msgs/msg/ActiveBOResponse",
@@ -232,10 +230,11 @@ active_bo_response.subscribe((msg) => {
 watch(
   () => cstore.getRunner,
   () => {
-    const usr_mode = cstore.getUserMode;
+    const usr_mode = cstore.getMetric;
 
     if (usr_mode === "manually") {
-      const rl_request = new ROSLIB.ServiceRequest({
+      const rl_request = new ROS.ServiceRequest({
+        env: cstore.env,
         policy: pstore.policy,
       });
 
@@ -243,7 +242,7 @@ watch(
         rstore.addMeanManually(rl_response.reward);
       });
     } else if (usr_mode === "BO") {
-      const bo_request = new ROSLIB.ServiceRequest({
+      const bo_request = new ROS.ServiceRequest({
         nr_weights: pstore.nr_weights,
         max_steps: pstore.max_steps,
         nr_episodes: cstore.nr_episodes,
@@ -257,23 +256,26 @@ watch(
         rstore.setMean(bo_response.reward_mean);
         rstore.setStd(bo_response.reward_std);
       });
-      const rl_request = new ROSLIB.ServiceRequest({
+      const rl_request = new ROS.ServiceRequest({
+        env: cstore.env,
         policy: pstore.policy,
       });
 
       rl_service.callService(rl_request, () => {});
     } else if (usr_mode === "active BO" && !active_bo_pending.value) {
-      const request_msg = new ROSLIB.Message({
+      const request_msg = new ROS.Message({
+        env: cstore.env,
         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,
-        epsilon: cstore.epsilon,
+        metric_parameter: cstore.metric_parameter,
       });
 
       active_bo_request.publish(request_msg);
-      const rl_request = new ROSLIB.ServiceRequest({
+      const rl_request = new ROS.ServiceRequest({
+        env: cstore.env,
         policy: pstore.policy,
       });
 
diff --git a/ActiveBOWeb/src/components/SubLayout.vue b/ActiveBOWeb/src/components/SubLayout.vue
index a6001aa..ba9b764 100644
--- a/ActiveBOWeb/src/components/SubLayout.vue
+++ b/ActiveBOWeb/src/components/SubLayout.vue
@@ -58,7 +58,7 @@ 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 MountainCarCanvas from "@/components/MountainCarCanvas.vue";
+import MountainCarCanvas from "@/components/RLCanvas.vue";
 </script>
 
 <style scoped>
diff --git a/ActiveBOWeb/src/store/ControlStore.js b/ActiveBOWeb/src/store/ControlStore.js
index f94cbc1..b9a5d48 100644
--- a/ActiveBOWeb/src/store/ControlStore.js
+++ b/ActiveBOWeb/src/store/ControlStore.js
@@ -3,8 +3,10 @@ import { defineStore } from "pinia";
 export const useCStore = defineStore("Control Store", {
   state: () => {
     return {
-      mode: "manually",
-      user_modes: ["manually", "BO", "active BO"],
+      env: "Mountain Car",
+      envs: ["Mountain Car", "Cartpole", "Acrobot", "Pendulum"],
+      metric: "manually",
+      metircs: ["manually", "BO", "active BO"],
       acq_fun: "Expected Improvement",
       acq_funs: [
         "Expected Improvement",
@@ -13,23 +15,27 @@ export const useCStore = defineStore("Control Store", {
       ],
       nr_episodes: 50,
       nr_runs: 10,
-      epsilon: 0,
+      metric_parameter: 0,
       sendWeights: false,
       runner: false,
     };
   },
   getters: {
-    getUserMode: (state) => state.mode,
+    getEnv: (state) => state.env,
+    getMetric: (state) => state.metric,
     getNrEpisodes: (state) => state.nr_episodes,
     getNrRuns: (state) => state.nr_runs,
-    getEpsilon: (state) => state.epsilon,
+    getMetricParameter: (state) => state.metric_parameter,
     getSendWeights: (state) => state.sendWeights,
     getRunner: (state) => state.runner,
     getAcq: (state) => state.acq_fun,
   },
   actions: {
-    setUserMode(value) {
-      this.mode = value;
+    setEnv(value) {
+      this.env = value;
+    },
+    setMetric(value) {
+      this.metric = value;
     },
     setNrEpisodes(value) {
       this.nr_episodes = value;
@@ -37,8 +43,8 @@ export const useCStore = defineStore("Control Store", {
     setNrRuns(value) {
       this.nr_runs = value;
     },
-    setEpsilon(value) {
-      this.epsilon = value;
+    setMetricParameter(value) {
+      this.metric_parameter = value;
     },
     setSendWeights() {
       this.sendWeights = !this.sendWeights;
diff --git a/ActiveBOWeb/src/store/MountainCarStore.js b/ActiveBOWeb/src/store/RLStore.js
similarity index 92%
rename from ActiveBOWeb/src/store/MountainCarStore.js
rename to ActiveBOWeb/src/store/RLStore.js
index af082d8..11e5ff6 100644
--- a/ActiveBOWeb/src/store/MountainCarStore.js
+++ b/ActiveBOWeb/src/store/RLStore.js
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 
-export const useMCStore = defineStore("Mountain Car Store", {
+export const useRLStore = defineStore("RL Store", {
   state: () => {
     return {
       red: Array(153600).fill(120),