Adds scaffold for motor control to frontend

4 files changed, 131 insertions, 19 deletions

diff --git a/hsm-web/Client/src/App.vue b/hsm-web/Client/src/App.vue
index af4ca3e..122ce41 100644
--- a/hsm-web/Client/src/App.vue
+++ b/hsm-web/Client/src/App.vue
@@ -1,17 +1,42 @@
 <template>
   <h1>HsMouse</h1>
   <INA226 />
-  <CameraStream />
+  <CamStream />
+  <MotorCtl />
 </template>
 
 <script>
-import INA226 from './INA226.vue'
-import CameraStream from './CameraStream.vue'
+import INA226    from './INA226.vue'
+import CamStream from './CamStream.vue'
+import MotorCtl  from './MotorCtl.vue'
 
 export default {
   components: {
     INA226,
-    CameraStream
+    CamStream,
+    MotorCtl
   }
 }
 </script>
+
+<style>
+table {
+  border-collapse: collapse;
+  border-spacing:  0;
+  height:          100%;
+  width:           100%;
+}
+td {
+  border:  1px solid black;
+  margin:  0;
+  padding: 0;
+}
+button {
+  border:     none;
+  display:    block;
+  min-height: 20px;
+  height:     100%;
+  width:      100%;
+  padding:    0;
+}
+</style>
diff --git a/hsm-web/Client/src/CameraStream.vue b/hsm-web/Client/src/CamStream.vue
index 1defed2..9c6e202 100644
--- a/hsm-web/Client/src/CameraStream.vue
+++ b/hsm-web/Client/src/CamStream.vue
@@ -1,14 +1,15 @@
 <template>
   <h2>Camera Stream</h2>
+  <div id='playerCont'>
+    <video id='player' muted></video>
+  </div>
   <button @click='toggleStream()' :disabled='disabled'>{{ command }}</button>
-  <video ref='player' muted></video>
 </template>
 
 <script>
-import axios              from 'axios'
-import config             from './config'
-import GstWebRTCAPI       from '@tomoxv/gstwebrtc-api/src/gstwebrtc-api.js'
-import { useTemplateRef } from 'vue'
+import axios        from 'axios'
+import config       from './config'
+import GstWebRTCAPI from '@tomoxv/gstwebrtc-api/src/gstwebrtc-api.js'
 
 export default {
   data() {
@@ -24,7 +25,7 @@ export default {
     }
   },
   mounted() {
-    this.player = useTemplateRef('player')
+    this.player = document.getElementById('player')
     this.monitor()
     this.bindStream()
   },
@@ -96,8 +97,14 @@ export default {
 </script>
 
 <style>
-video {
-  height: 360px;
-  width:  480px;
+#playerCont {
+  border: 1px solid black;
+}
+#player {
+  aspect-ratio: 32 / 27;
+  display:      block;
+  margin:       auto;
+  width:        480px;
+  max-width:    100%;
 }
 </style>
diff --git a/hsm-web/Client/src/INA226.vue b/hsm-web/Client/src/INA226.vue
index a827b0b..1487fa3 100644
--- a/hsm-web/Client/src/INA226.vue
+++ b/hsm-web/Client/src/INA226.vue
@@ -41,9 +41,3 @@ export default {
   }
 }
 </script>
-
-<style>
-table {
-  width: 100%;
-}
-</style>
diff --git a/hsm-web/Client/src/MotorCtl.vue b/hsm-web/Client/src/MotorCtl.vue
new file mode 100644
index 0000000..c66d9b9
--- /dev/null
+++ b/hsm-web/Client/src/MotorCtl.vue
@@ -0,0 +1,86 @@
+<template>
+  <h2>Motor Control</h2>
+  <table id='tmain'>
+    <tbody>
+      <tr>
+        <td><button id='bccw'>CCW</button></td>
+        <td>
+          <table id='tmot'>
+            <tbody>
+              <tr v-for='ds in [["NW", "N", "NE"], ["W", "", "E"], ["SW", "S", "SE"]]' :key='ds.id'>
+                <td v-for='d in ds' :key='d.id'>
+                  <button v-if='d' id='b{{ d.toLowerCase() }}'>{{ d }}</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+        <td><button id='bcw'>CW</button></td>
+        <td>
+          <table id='tspeed'>
+            <tbody>
+              <tr v-for='s in ["Top", "Fast", "Slow", "Slow2", "Slow4"]' :key='s.id'>
+                <td><button id='s{{ s.toLowerCase() }}'>{{ s }}</button></td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+        <td>
+          <table id='ttime'>
+            <tbody>
+              <tr v-for='t in ["4s", "2s", "1s", "hs", "qs"]' :key='t.id'>
+                <td><button id='t{{ t }}'>{{ t }}</button></td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <table id='thist'>
+    <tbody>
+      <tr>
+        <td><input id='ihist' disabled /></td>
+        <td v-for='h in ["hup", "hdown"]' :key='h.id'>
+          <button id='{{ h }}'>{{ h }}</button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <table id='tarm'>
+    <tbody>
+      <tr>
+        <td v-for='a in ["arm", "dispatch"]' :key='a.id'>
+          <button id='{{ a }}'>{{ a }}</button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style>
+#tmot td {
+  height: 33%;
+  width:  33%;
+}
+#ihist {
+  border:  none;
+  margin:  0;
+  padding: 0;
+  resize:  none;
+  width:   100%;
+}
+</style>