Add experiment panel

Author: yuxiang-gao

.vscode/settings.json

@@ -2,6 +2,7 @@
   "vetur.validation.template": false,
   "vetur.format.enable": false,
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
-  
-  "vetur.experimental.templateInterpolationService": true
+
+  "vetur.experimental.templateInterpolationService": true,
+  "vue3snippets.enable-compile-vue-file-on-did-save-code": true
 }

src/layouts/MainLayout.vue

@@ -68,5 +68,11 @@ const menuContent = [
     pathName: 'home.controller',
     separator: false
   },
+  {
+    icon: 'science',
+    label: 'Experiment',
+    pathName: 'home.experiment',
+    separator: false
+  },
 ]
 </script>

src/pages/ExperimentPanel.vue

@@ -0,0 +1,70 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+    <div class="q-pa-md">
+      <div class="q-gutter-sm">
+        <div>Task: <strong>current</strong></div>
+        <q-btn-group rounded>
+          <q-btn rounded color="primary" label="Start Task" />
+          <q-btn rounded color="red" label="Stop Task" />
+        </q-btn-group>
+        <div>
+          Facial expression: <strong>{{ lastExpression }}</strong>
+        </div>
+        <q-btn-group outline rounded>
+          <template v-for="(expressionName, index) in expressionList" :key="index">
+            <q-btn
+              outline
+              color="primary"
+              @click="
+                () => {
+                  express(expressionName);
+                }
+              "
+              :label="expressionName"
+            />
+          </template>
+        </q-btn-group>
+
+        <div>Voice Command</div>
+        <q-list bordered separator style="max-width: 350px">
+          <q-item clickable v-ripple>
+            <q-item-section>
+              <q-item-label overline>Voice</q-item-label>
+              <q-item-label>Hello</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+
+        <div>
+          <iframe
+            width="400"
+            height="250"
+            src="https://vclock.com/embed/timer/#countdown=00:00:10&enabled=0&seconds=10&onzero=1&theme=1&ampm=1&sound=xylophone"
+            frameborder="0"
+            allowfullscreen
+          ></iframe>
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+import { toRefs, ref, reactive, watch, watchEffect, computed, onMounted } from "vue";
+import { rosConnection } from "src/utils/RosUtils";
+
+const expressionList = ["happy", "sad", "mad", "focused", "confused"];
+const lastExpression = ref("None");
+var expressionTopic = new ROSLIB.Topic({
+  ros: rosConnection.ros,
+  name: "/face",
+  messageType: "std_msgs/String",
+});
+
+function express(expressionType) {
+  var expressionMsg = new ROSLIB.Message({ data: expressionType });
+  expressionTopic.publish(expressionMsg);
+  lastExpression.value = expressionType;
+}
+</script>

src/pages/Index.vue

@@ -26,7 +26,7 @@
 <script setup>
 
 import { ref, toRefs, reactive, onMounted, watch } from "vue"
-import { rosInterface } from "src/utils/RosUtils"
+import { rosInterface,triggerServiceByName } from "src/utils/RosUtils"
 import NumericInput from "src/components/NumericInput.vue"
 import { useQuasar } from 'quasar'
 const $q = useQuasar()
@@ -89,6 +89,7 @@ function checkoutOrders () {
     })
     // console.log('Orders submitted.')
     //TODO publish order
+    triggerServiceByName("/sp_sm/start")
     notif({
       type: 'positive',
       message: 'Orders submitted.'

src/router/routes.js

@@ -19,6 +19,11 @@ const routes = [
         name: "home.controller",
         component: () => import("pages/Controller.vue"),
       },
+      {
+        path: "experiment",
+        name: "home.experiment",
+        component: () => import("pages/ExperimentPanel.vue"),
+      },
     ],
   },
   // Always leave this as last one,

src/utils/RosUtils.js

@@ -24,15 +24,23 @@ export const rosDisconnect = () => {
   rosConnection.connected = false;
 };
 
+export function makeTopic(topicName, topicType) {
+  return new ROSLIB.Topic({
+    ros: rosConnection.ros,
+    name: topicName,
+    messageType: topicType,
+  });
+}
+
 export const rosInterface = reactive({
   // JointState
   jointState: null,
   // Subscriber
-  orderTopic: new ROSLIB.Topic({
-    ros: rosConnection.ros,
-    name: "/sp_sm/current_orders",
-    messageType: "std_msgs/Int16MultiArray",
-  }),
+  // orderTopic: new ROSLIB.Topic({
+  //   ros: rosConnection.ros,
+  //   name: "/sp_sm/current_orders",
+  //   messageType: "std_msgs/Int16MultiArray",
+  // }),
   stateTopic: new ROSLIB.Topic({
     ros: rosConnection.ros,
     name: "/state_machine/smach/container_status",