From de01f5b7308b83647d823cfb4b2826af849423b7 Mon Sep 17 00:00:00 2001
From: Paul Oliver <contact@pauloliver.dev>
Date: Sat, 3 Jan 2026 09:20:23 +0000
Subject: Adds scaffold for motor control to frontend

---
 hsm-web/Client/src/App.vue          |  33 +++++++++--
 hsm-web/Client/src/CamStream.vue    | 110 ++++++++++++++++++++++++++++++++++++
 hsm-web/Client/src/CameraStream.vue | 103 ---------------------------------
 hsm-web/Client/src/INA226.vue       |   6 --
 hsm-web/Client/src/MotorCtl.vue     |  86 ++++++++++++++++++++++++++++
 5 files changed, 225 insertions(+), 113 deletions(-)
 create mode 100644 hsm-web/Client/src/CamStream.vue
 delete mode 100644 hsm-web/Client/src/CameraStream.vue
 create mode 100644 hsm-web/Client/src/MotorCtl.vue

(limited to 'hsm-web/Client')

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/CamStream.vue b/hsm-web/Client/src/CamStream.vue
new file mode 100644
index 0000000..9c6e202
--- /dev/null
+++ b/hsm-web/Client/src/CamStream.vue
@@ -0,0 +1,110 @@
+<template>
+  <h2>Camera Stream</h2>
+  <div id='playerCont'>
+    <video id='player' muted></video>
+  </div>
+  <button @click='toggleStream()' :disabled='disabled'>{{ command }}</button>
+</template>
+
+<script>
+import axios        from 'axios'
+import config       from './config'
+import GstWebRTCAPI from '@tomoxv/gstwebrtc-api/src/gstwebrtc-api.js'
+
+export default {
+  data() {
+    return {
+      api:       null,
+      listener:  null,
+      player:    null,
+      session:   null,
+
+      command:   'Loading',
+      disabled:  true,
+      streaming: false
+    }
+  },
+  mounted() {
+    this.player = document.getElementById('player')
+    this.monitor()
+    this.bindStream()
+  },
+  methods: {
+    // Continuously checks if WebRTC stream is running on server
+    async monitor() {
+      const res = await axios.get(config.api + '/isStreaming')
+  
+      switch (res.status) {
+      case 200:
+        this.command   = res.data ? 'Stop' : 'Play'
+        this.disabled  = false
+        this.streaming = res.data
+        break
+      default:
+        this.command   = 'Error'
+        this.disabled  = true
+        this.streaming = false
+      }
+  
+      setTimeout(this.monitor, 1000)
+    },
+
+    // Toggles WebRTC stream
+    async toggleStream() {
+      const ep  = this.streaming ? '/stopStream' : '/startStream'
+      const res = await axios.get(config.api + ep)
+
+      if (res.status != 200) {
+        console.error(res)
+      }
+    },
+
+    // Binds WebRTC stream to video element
+    bindStream() {
+      this.api = new GstWebRTCAPI({
+        meta:               { name: 'WebClient-' + Date.now() },
+        signalingServerUrl: 'ws://' + window.location.hostname + ':8443'
+      })
+
+      this.listener = {
+        producerAdded: (producer) => {
+          console.log("Producer added", producer)
+  
+          this.session = this.api.createConsumerSession(producer.id)
+          this.session.addEventListener('streamsChanged', () => {
+            if (this.session.streams.length > 0) {
+              this.player.srcObject = this.session.streams[0]
+              this.player.play()
+            }
+          })
+  
+          this.session.connect()
+        },
+  
+        producerRemoved: (producer) => {
+          console.log("Producer removed", producer)
+  
+          this.player.pause()
+          this.player.srcObject = null
+          this.session          = null
+        }
+      }
+  
+      this.api.registerProducersListener(this.listener)
+    }
+  }
+}
+</script>
+
+<style>
+#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/CameraStream.vue b/hsm-web/Client/src/CameraStream.vue
deleted file mode 100644
index 1defed2..0000000
--- a/hsm-web/Client/src/CameraStream.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <h2>Camera Stream</h2>
-  <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'
-
-export default {
-  data() {
-    return {
-      api:       null,
-      listener:  null,
-      player:    null,
-      session:   null,
-
-      command:   'Loading',
-      disabled:  true,
-      streaming: false
-    }
-  },
-  mounted() {
-    this.player = useTemplateRef('player')
-    this.monitor()
-    this.bindStream()
-  },
-  methods: {
-    // Continuously checks if WebRTC stream is running on server
-    async monitor() {
-      const res = await axios.get(config.api + '/isStreaming')
-  
-      switch (res.status) {
-      case 200:
-        this.command   = res.data ? 'Stop' : 'Play'
-        this.disabled  = false
-        this.streaming = res.data
-        break
-      default:
-        this.command   = 'Error'
-        this.disabled  = true
-        this.streaming = false
-      }
-  
-      setTimeout(this.monitor, 1000)
-    },
-
-    // Toggles WebRTC stream
-    async toggleStream() {
-      const ep  = this.streaming ? '/stopStream' : '/startStream'
-      const res = await axios.get(config.api + ep)
-
-      if (res.status != 200) {
-        console.error(res)
-      }
-    },
-
-    // Binds WebRTC stream to video element
-    bindStream() {
-      this.api = new GstWebRTCAPI({
-        meta:               { name: 'WebClient-' + Date.now() },
-        signalingServerUrl: 'ws://' + window.location.hostname + ':8443'
-      })
-
-      this.listener = {
-        producerAdded: (producer) => {
-          console.log("Producer added", producer)
-  
-          this.session = this.api.createConsumerSession(producer.id)
-          this.session.addEventListener('streamsChanged', () => {
-            if (this.session.streams.length > 0) {
-              this.player.srcObject = this.session.streams[0]
-              this.player.play()
-            }
-          })
-  
-          this.session.connect()
-        },
-  
-        producerRemoved: (producer) => {
-          console.log("Producer removed", producer)
-  
-          this.player.pause()
-          this.player.srcObject = null
-          this.session          = null
-        }
-      }
-  
-      this.api.registerProducersListener(this.listener)
-    }
-  }
-}
-</script>
-
-<style>
-video {
-  height: 360px;
-  width:  480px;
-}
-</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>
-- 
cgit v1.2.1