From 0cc4dc6a83decd1d35a8b0bbc91e99abeca8b423 Mon Sep 17 00:00:00 2001
From: "nikolaus.feith" <nikolaus.feith@unileoben.ac.at>
Date: Mon, 27 Feb 2023 16:49:09 +0100
Subject: [PATCH] start working on ControlPanel.vue

---
 ActiveBOWeb/src/components/ControlPanel.vue | 49 +++++++++++++++++++++
 ActiveBOWeb/src/components/RewardPlot.vue   | 10 ++---
 ActiveBOWeb/src/components/RosBar.vue       | 16 ++++++-
 ActiveBOWeb/src/components/SubLayout.vue    |  4 +-
 ActiveBOWeb/src/rosInterfaces/policy_srv.js | 18 ++++++++
 ActiveBOWeb/src/store/ControlStore.js       | 42 ++++++++++++++++++
 ActiveBOWeb/src/store/PolicyStore.js        | 16 ++++---
 ActiveBOWeb/src/store/RewardStore.js        |  9 +---
 8 files changed, 144 insertions(+), 20 deletions(-)
 create mode 100644 ActiveBOWeb/src/components/ControlPanel.vue
 create mode 100644 ActiveBOWeb/src/rosInterfaces/policy_srv.js
 create mode 100644 ActiveBOWeb/src/store/ControlStore.js

diff --git a/ActiveBOWeb/src/components/ControlPanel.vue b/ActiveBOWeb/src/components/ControlPanel.vue
new file mode 100644
index 0000000..cd9aef3
--- /dev/null
+++ b/ActiveBOWeb/src/components/ControlPanel.vue
@@ -0,0 +1,49 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12" sm="6">
+        <v-select
+            :items="options"
+            label="Select an option"
+            v-model="selectedOption"
+        ></v-select>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" v-for="(slider, index) in sliders" :key="index">
+        <v-slider
+            :max="slider.max"
+            :min="slider.min"
+            v-model="slider.value"
+            label="Slider {{index+1}}"
+        ></v-slider>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6">
+        <v-btn color="primary" @click="cstore.setSendWeights()">Send Weights</v-btn>
+      </v-col>
+      <v-col cols="12" sm="6">
+        <v-btn color="secondary" @click="cstore.setRunner()">Run</v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+import {usePStore} from "@/store/PolicyStore";
+import {useCStore} from "@/store/ControlStore";
+
+const pstore = usePStore();
+const cstore = useCStore();
+
+const options = ['manually', 'BO', 'active BO'];
+const selectedOption = cstore.user_mode;
+// TODO: Copy code from gpt
+
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/ActiveBOWeb/src/components/RewardPlot.vue b/ActiveBOWeb/src/components/RewardPlot.vue
index bc1fe2b..2782851 100644
--- a/ActiveBOWeb/src/components/RewardPlot.vue
+++ b/ActiveBOWeb/src/components/RewardPlot.vue
@@ -17,8 +17,8 @@ const store = useRStore();
 let chartHandle;
 
 function buildChart() {
-  const reward_mean = store.getMean();
-  const reward_std = store.getStd();
+  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);
@@ -97,9 +97,9 @@ onMounted(() => {
   buildChart();
 });
 
-watch(() => store.getMean(), () => {
-  const reward_mean = store.getMean();
-  const reward_std = store.getStd();
+watch(() => store.getMean, () => {
+  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]);
 
diff --git a/ActiveBOWeb/src/components/RosBar.vue b/ActiveBOWeb/src/components/RosBar.vue
index c571cc5..57f958e 100644
--- a/ActiveBOWeb/src/components/RosBar.vue
+++ b/ActiveBOWeb/src/components/RosBar.vue
@@ -25,13 +25,16 @@
 <script setup>
 import * as ROS from 'roslib';
 import { useBWStore } from '@/store/BaseWebsiteStore';
+import { usePStore } from "@/store/PolicyStore";
 import {
   reactive,
   ref,
   watch,
 } from 'vue';
+import * as ROSLIB from "roslib";
 
 const store =  useBWStore();
+const pstore = usePStore();
 
 const formState = reactive({
   ipaddress: 'localhost',
@@ -88,9 +91,18 @@ watch(stateCounter.value, (newValue) => {
   }
 });
 
-// Subscribers
+// Services
+const policy_service = new ROSLIB.Service({
+  ros: ros,
+  name: '/policy_srv',
+  serviceType: 'active_bo_msgs/srv/WeightToPolicy',
+});
+
+const policy_request = new ROSLIB.ServiceRequest({
+  weights: pstore.weights,
+  nr_steps: pstore.nr_steps,
+})
 
-// Publisher
 
 
 </script>
diff --git a/ActiveBOWeb/src/components/SubLayout.vue b/ActiveBOWeb/src/components/SubLayout.vue
index 73b833a..2ccde33 100644
--- a/ActiveBOWeb/src/components/SubLayout.vue
+++ b/ActiveBOWeb/src/components/SubLayout.vue
@@ -1,11 +1,13 @@
 <template>
-<weight-tuner/>
+  <policy-plot/>
+  <weight-tuner/>
   <reward-plot/>
 </template>
 
 <script setup>
 import WeightTuner from "@/components/WeightTuner.vue";
 import RewardPlot from "@/components/RewardPlot.vue";
+import PolicyPlot from "@/components/PolicyPlot.vue";
 </script>
 
 <style scoped>
diff --git a/ActiveBOWeb/src/rosInterfaces/policy_srv.js b/ActiveBOWeb/src/rosInterfaces/policy_srv.js
new file mode 100644
index 0000000..e5f3dcb
--- /dev/null
+++ b/ActiveBOWeb/src/rosInterfaces/policy_srv.js
@@ -0,0 +1,18 @@
+import * as ROSLIB from 'roslib';
+import { usePStore } from "../store/PolicyStore";
+
+const store = usePStore();
+
+export function PolicyService(ros) {
+    const service = new ROSLIB.Service({
+        ros: ros,
+        name: '/policy_srv',
+        serviceType: 'active_bo_msgs/srv/WeightToPolicy',
+    });
+
+    const request = new ROSLIB.ServiceRequest({
+        weights: store.weights,
+        nr_steps: store.nr_steps,
+    })
+
+}
diff --git a/ActiveBOWeb/src/store/ControlStore.js b/ActiveBOWeb/src/store/ControlStore.js
new file mode 100644
index 0000000..4e93162
--- /dev/null
+++ b/ActiveBOWeb/src/store/ControlStore.js
@@ -0,0 +1,42 @@
+import { defineStore } from "pinia";
+
+export const useCStore = defineStore('Control Store', {
+    state: () => {
+        return {
+            user_mode: 'manually',
+            nr_episodes: 10,
+            nr_runs: 1,
+            greedy: 0,
+            sendWeights: false,
+            runner: false,
+        }
+    },
+    getters: {
+        getUserMode: (state) => state.user_mode,
+        getNrEpisodes: (state) => state.nr_episodes,
+        getNrRuns: (state) => state.nr_runs,
+        getGreedy: (state) => state.greedy,
+        getSendWeights: (state) => state.sendWeights,
+        getRunner: (state) => state.runner,
+    },
+    actions: {
+        setUserMode(value) {
+            this.user_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;
+        },
+    }
+})
diff --git a/ActiveBOWeb/src/store/PolicyStore.js b/ActiveBOWeb/src/store/PolicyStore.js
index 1fe78bf..a0c3479 100644
--- a/ActiveBOWeb/src/store/PolicyStore.js
+++ b/ActiveBOWeb/src/store/PolicyStore.js
@@ -4,24 +4,30 @@ export const usePStore = defineStore('Policy Store', {
     state: () => {
         return {
             policy: Array,
-            weights: [-1, 1, 1],
-            nr_steps: 0,
+            nr_weights: 5,
+            weights: [0, 0, 0, 0, 0],
+            max_steps: 0,
         }
     },
     getters: {
         getPolicy: (state) => state.policy,
+        getNrWeights: (state) => state.nr_weights,
         getWeights: (state) => state.weights,
-        getNrSteps: (state) => state.nr_steps,
+        getMaxSteps: (state) => state.max_steps,
     },
     actions: {
         setPolicy(value) {
             this.policy = value;
         },
+        setNrWeights(value) {
+            this.nr_weights = value;
+            this.weights = Array(this.nr_weights).fill(0);
+        },
         setWeights(value) {
             this.weights = value;
         },
-        setNrSteps(value) {
-            this.nr_steps = value;
+        setMaxSteps(value) {
+            this.max_steps = value;
         },
     }
 })
diff --git a/ActiveBOWeb/src/store/RewardStore.js b/ActiveBOWeb/src/store/RewardStore.js
index 3e9b3f9..de61d0f 100644
--- a/ActiveBOWeb/src/store/RewardStore.js
+++ b/ActiveBOWeb/src/store/RewardStore.js
@@ -3,15 +3,13 @@ import { defineStore } from "pinia";
 export const useRStore = defineStore('Reward Store', {
     state: () => {
         return {
-            reward_mean: Array,
-            reward_std: Array,
-            nr_episodes: 0,
+            reward_mean: [0,],
+            reward_std: [0,],
         }
     },
     getters: {
         getMean: (state) => state.reward_mean,
         getStd: (state) => state.reward_std,
-        getNrEpisodes: (state) => state.nr_episodes,
     },
     actions: {
         setMean(value) {
@@ -20,8 +18,5 @@ export const useRStore = defineStore('Reward Store', {
         setStd(value) {
             this.reward_std = value;
         },
-        setNrEpisodes(value) {
-            this.nr_episodes = value;
-        },
     }
 })