manual use without image transfer

ActiveBOWeb/src/components/RewardPlot.vue

@@ -100,15 +100,18 @@ onMounted(() => {
   buildChart();
 });
 
-watch(() => store.getMean, () => {
+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.data.dataset[0].data = reward_mean;
-  chartHandle.data.dataset[1].data = upper_bound;
-  chartHandle.data.dataset[2].data = lower_bound;
+  const reward_labels = Array(reward_mean.length).fill(0).map((_, i) => i);
+
+  chartHandle.options.scales.x.labels = reward_labels;
+  chartHandle.data.datasets[0].data = reward_mean;
+  chartHandle.data.datasets[1].data = upper_bound;
+  chartHandle.data.datasets[2].data = lower_bound;
 
   chartHandle.update();
 });

ActiveBOWeb/src/components/RosBar.vue

@@ -35,10 +35,14 @@ import {
 } 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 formState = reactive({
   ipaddress: 'localhost',
@@ -95,7 +99,7 @@ watch(stateCounter.value, (newValue) => {
   }
 });
 
-// Services
+// Policy Service
 const policy_service = new ROSLIB.Service({
   ros: ros,
   name: '/policy_srv',
@@ -114,6 +118,35 @@ watch(() => cstore.getSendWeights, () =>{
   });
 });
 
+// RL Service + Feedback Suscriber
+const rl_feedback_subscriber = new ROSLIB.Topic({
+  ros: ros,
+  name: '/rl_feedback',
+  message: 'active_bo_msgs/msg/ImageFeedback',
+});
+
+rl_feedback_subscriber.subscribe( (msg) => {
+  mcstore.setDim(msg.height, msg.width);
+});
+
+const rl_service = new ROSLIB.Service({
+  ros: ros,
+  name: '/rl_srv',
+  serviceType: 'active_bo_msgs/srv/RLRollOut',
+});
+
+watch(() => cstore.getRunner, () =>{
+
+  const rl_request = new ROSLIB.ServiceRequest({
+    policy: pstore.policy,
+  })
+
+  rl_service.callService(rl_request, function (rl_result) {
+    rstore.addMeanManually(rl_result.reward)
+  });
+});
+
+
 </script>
 
 <style scoped>

ActiveBOWeb/src/store/MountainCarStore.js

@@ -5,11 +5,14 @@ export const useMCStore = defineStore('Mountain Car Store', {
         return {
             play: false,
             rgbArray: Array,
+            width: 0,
+            height: 0,
         }
     },
     getters: {
         getPlay: (state) => state.play,
         getRgbArray: (state) => state.rgbarray,
+        getDim: (state) => [state.height, state.width],
     },
     actions: {
         setPlay() {
@@ -18,5 +21,9 @@ export const useMCStore = defineStore('Mountain Car Store', {
         setRgbArray(value) {
             this.rgbArray = value;
         },
+        setDim(height, width) {
+            this.height = height;
+            this.width = width;
+        },
     }
 })

ActiveBOWeb/src/store/RewardStore.js

@@ -3,13 +3,15 @@ import { defineStore } from "pinia";
 export const useRStore = defineStore('Reward Store', {
     state: () => {
         return {
-            reward_mean: [0,],
-            reward_std: [0,],
+            reward_mean: [],
+            reward_std: [],
+            trigger: false,
         }
     },
     getters: {
         getMean: (state) => state.reward_mean,
         getStd: (state) => state.reward_std,
+        getTrigger: (state) => state.trigger,
     },
     actions: {
         setMean(value) {
@@ -18,5 +20,10 @@ export const useRStore = defineStore('Reward Store', {
         setStd(value) {
             this.reward_std = value;
         },
+        addMeanManually(value) {
+            this.reward_mean[this.reward_mean.length] = value;
+            this.reward_std[this.reward_std.length] = 0;
+            this.trigger = !this.trigger;
+        },
     }
 })