layout complete

ActiveBOWeb/src/components/ControlPanel.vue

@@ -1,49 +1,90 @@
 <template>
-  <v-container>
   <v-row>
-      <v-col cols="12" sm="6">
+    <v-col>
       <v-select
           :items="options"
-            label="Select an option"
-            v-model="selectedOption"
+          label="User Mode"
+          v-model="modeSelector"
       ></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">
+          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/>
+      <v-slider
+          class="control-slider"
+          label="nr episodes"
+          v-model="cstore.nr_episodes"
+          :step="1"
+          :min="10"
+          :max="200"
+          thumb-label/>
+      <v-slider
+          class="control-slider"
+          label="nr runs"
+          v-model="cstore.nr_runs"
+          :step="1"
+          :min="1"
+          :max="50"
+          thumb-label/>
+      <v-slider
+          class="control-slider"
+          label="greedy"
+          v-model="cstore.greedy"
+          :step="0.01"
+          :min="0"
+          :max="1"
+          thumb-label/>
+      <v-row class="d-flex justify-space-evenly mb-9">
         <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-row>
     </v-col>
   </v-row>
-  </v-container>
 </template>
 
 <script setup>
 import {usePStore} from "@/store/PolicyStore";
 import {useCStore} from "@/store/ControlStore";
+import {computed} from "vue";
 
 const pstore = usePStore();
 const cstore = useCStore();
 
-const options = ['manually', 'BO', 'active BO'];
-const selectedOption = cstore.user_mode;
-// TODO: Copy code from gpt
+const options = cstore.user_modes;
+const selectedOption = cstore.mode;
 
+const sliders = [
+  { min: 10, max: 200, value: pstore.max_steps, name: 'max steps', action: pstore.setMaxSteps},
+  { min: 5, max: 10, value: pstore.nr_weights, name: 'nr base funs', action: pstore.setNrWeights},
+  { min: 10, max: 200, value: cstore.nr_episodes, name: 'nr episodes', action: cstore.setNrEpisodes},
+  { min: 1, max: 100, value: cstore.nr_runs, name: 'nr runs', action: cstore.setNrRuns},
+  { min: 0, max: 1, value: cstore.greedy, name: 'greedy', action: cstore.setGreedy},
+];
+const baseFuncsComp = computed({
+  get: () => pstore.nr_weights,
+  set: (value) => pstore.setNrWeights(value),
+})
 
+const modeSelector = computed({
+  get: () => cstore.mode,
+  set: (value) => cstore.setUserMode(value)
+})
 </script>
 
 <style scoped>
+.control-slider{
+}
 
 </style>

ActiveBOWeb/src/components/PolicyPlot.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
   <canvas id="policy-chart"/>
-  </div>
 </template>
 
 <script setup>
@@ -20,7 +18,6 @@ function buildChart() {
     data: {
       datasets: [
         {
-          label: 'Reward',
           type: 'line',
           xAxisID: 'x',
           yAxisID: 'y',
@@ -37,6 +34,11 @@ function buildChart() {
       animation: {
         duration: 0,
       },
+      plugins:{
+        legend: {
+          display: false,
+        },
+      },
       lineTension: 0,
       tooltip: {
         mode: 'label',

ActiveBOWeb/src/components/RewardPlot.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
   <canvas id="reward-chart"/>
-  </div>
 </template>
 
 <script setup>
@@ -59,6 +57,11 @@ function buildChart() {
       ],
     },
     options: {
+      plugins:{
+        legend: {
+          display: false,
+        },
+      },
       maintainAspectRatio: false,
       responsive: true,
       animation: {

ActiveBOWeb/src/components/SubLayout.vue

@@ -1,15 +1,62 @@
 <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%' }">
+              <!-- component 4 here -->
+            </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";
 </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>

ActiveBOWeb/src/components/WeightTuner.vue

@@ -1,6 +1,5 @@
 <template>
- <v-card class="weight-tuner">
-   <v-row no-gutters justify="center">
+ <v-row no-gutters justify="center" class="weight-tuner">
    <v-col v-for="(_, idx) in weights">
      <div class="weight-container">
        <vue-slider v-model="weights[idx]"
@@ -13,7 +12,6 @@
      </div>
    </v-col>
  </v-row>
- </v-card>
 </template>
 
 <script setup>
@@ -21,10 +19,11 @@ import { usePStore } from "@/store/PolicyStore";
 
 import VueSlider from "vue-slider-component";
 import 'vue-slider-component/theme/default.css';
+import {computed} from "vue";
 
 const store = usePStore()
 
-const weights = store.weights;
+const weights = computed(() => store.weights);
 
 </script>
 

ActiveBOWeb/src/rosInterfaces/policy_srv.js

@@ -1,18 +0,0 @@
-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,
-    })
-
-}

ActiveBOWeb/src/store/ControlStore.js

@@ -3,7 +3,8 @@ import { defineStore } from "pinia";
 export const useCStore = defineStore('Control Store', {
     state: () => {
         return {
-            user_mode: 'manually',
+            mode: null,
+            user_modes: ['manually', 'BO', 'active BO'],
             nr_episodes: 10,
             nr_runs: 1,
             greedy: 0,
@@ -12,7 +13,7 @@ export const useCStore = defineStore('Control Store', {
         }
     },
     getters: {
-        getUserMode: (state) => state.user_mode,
+        getUserMode: (state) => state.mode,
         getNrEpisodes: (state) => state.nr_episodes,
         getNrRuns: (state) => state.nr_runs,
         getGreedy: (state) => state.greedy,
@@ -21,7 +22,7 @@ export const useCStore = defineStore('Control Store', {
     },
     actions: {
         setUserMode(value) {
-            this.user_mode = value;
+            this.mode = value;
         },
         setNrEpisodes(value) {
             this.nr_episodes = value;