Skins frontend

5 files changed, 90 insertions, 30 deletions

diff --git a/hsm-web/Client/src/App.vue b/hsm-web/Client/src/App.vue
index 122ce41..a4c8338 100644
--- a/hsm-web/Client/src/App.vue
+++ b/hsm-web/Client/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <h1>HsMouse</h1>
+  <h1>HsMouse <span id='logo'>ᘛ⁐̤ᕐᐷ</span></h1>
   <INA226 />
   <CamStream />
   <MotorCtl />
@@ -20,6 +20,19 @@ export default {
 </script>
 
 <style>
+html {
+  background-color: #002b36;
+  color:            #586e75;
+  font-family:      sans-serif;
+}
+h1 {
+  font-size:   24px;
+  font-weight: 600;
+}
+h2 {
+  font-size:   22px;
+  font-weight: 500;
+}
 table {
   border-collapse: collapse;
   border-spacing:  0;
@@ -27,16 +40,35 @@ table {
   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;
+  background-color: #073642;
+  border:           1.5px solid #2aa198;
+  color:            #2aa198;
+  display:          block;
+  min-height:       30px;
+  height:           100%;
+  width:            100%;
+  padding:          0;
+}
+button:active {
+  background-color: #0a414b;
+}
+input {
+  background-color: transparent;
+  color:            #002b36;
+  font-family:      monospace;
+  font-size:        16px;
+  font-weight:      bold;
+  border:           none;
+  margin:           0 4px;
+  padding:          4px;
+  resize:           none;
+  width:            calc(100% - 16px);
+}
+#logo {
+  font-family: monospace;
 }
 </style>
diff --git a/hsm-web/Client/src/CamStream.vue b/hsm-web/Client/src/CamStream.vue
index 9c6e202..60cd44d 100644
--- a/hsm-web/Client/src/CamStream.vue
+++ b/hsm-web/Client/src/CamStream.vue
@@ -3,7 +3,9 @@
   <div id='playerCont'>
     <video id='player' muted></video>
   </div>
-  <button @click='toggleStream()' :disabled='disabled'>{{ command }}</button>
+  <button @click='toggleStream()' :disabled='disabled'>
+    {{ command }}
+  </button>
 </template>
 
 <script>
@@ -33,7 +35,7 @@ export default {
     // 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'
@@ -45,7 +47,7 @@ export default {
         this.disabled  = true
         this.streaming = false
       }
-  
+
       setTimeout(this.monitor, 1000)
     },
 
@@ -69,7 +71,7 @@ export default {
       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) {
@@ -77,19 +79,19 @@ export default {
               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)
     }
   }
@@ -98,7 +100,7 @@ export default {
 
 <style>
 #playerCont {
-  border: 1px solid black;
+  background-color: #073642;
 }
 #player {
   aspect-ratio: 32 / 27;
diff --git a/hsm-web/Client/src/INA226.vue b/hsm-web/Client/src/INA226.vue
index 1487fa3..dec961b 100644
--- a/hsm-web/Client/src/INA226.vue
+++ b/hsm-web/Client/src/INA226.vue
@@ -1,6 +1,6 @@
 <template>
   <h2>Battery Status</h2>
-  <table>
+  <table id='tina226'>
     <tbody>
       <tr>
         <td>{{ fmt(reading.voltage, 'V') }}</td>
@@ -41,3 +41,13 @@ export default {
   }
 }
 </script>
+
+<style>
+#tina226 td {
+  border:      1.5px solid #2aa198;
+  color:       #2aa198;
+  font-family: monospace;
+  font-size:   14px;
+  padding:     5px;
+}
+</style>
diff --git a/hsm-web/Client/src/MotorCtl.vue b/hsm-web/Client/src/MotorCtl.vue
index c66d9b9..b1c53b2 100644
--- a/hsm-web/Client/src/MotorCtl.vue
+++ b/hsm-web/Client/src/MotorCtl.vue
@@ -3,19 +3,23 @@
   <table id='tmain'>
     <tbody>
       <tr>
-        <td><button id='bccw'>CCW</button></td>
+        <td>
+          <button :id='ccw' class='bmot'>{{ dirIcons.ccw }}</button>
+        </td>
         <td>
           <table id='tmot'>
             <tbody>
-              <tr v-for='ds in [["NW", "N", "NE"], ["W", "", "E"], ["SW", "S", "SE"]]' :key='ds.id'>
+              <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>
+                  <button v-if='d' :id='d' class='bmot'>{{ dirIcons[d] }}</button>
                 </td>
               </tr>
             </tbody>
           </table>
         </td>
-        <td><button id='bcw'>CW</button></td>
+        <td>
+          <button :id='cw' class='bmot'>{{ dirIcons.cw }}</button>
+        </td>
         <td>
           <table id='tspeed'>
             <tbody>
@@ -40,7 +44,7 @@
   <table id='thist'>
     <tbody>
       <tr>
-        <td><input id='ihist' disabled /></td>
+        <td><input id='ihist' placeholder='command' disabled /></td>
         <td v-for='h in ["hup", "hdown"]' :key='h.id'>
           <button id='{{ h }}'>{{ h }}</button>
         </td>
@@ -62,6 +66,18 @@
 export default {
   data() {
     return {
+      dirIcons: {
+        n:   '↑',
+        ne:  '↗',
+        e:   '→',
+        se:  '↘',
+        s:   '↓',
+        sw:  '↙',
+        w:   '←',
+        nw:  '↖',
+        ccw: '↺',
+        cw:  '↻'
+      }
     }
   },
   mounted() {
@@ -76,11 +92,11 @@ export default {
   height: 33%;
   width:  33%;
 }
-#ihist {
-  border:  none;
-  margin:  0;
-  padding: 0;
-  resize:  none;
-  width:   100%;
+#tmain td, #thist td {
+  background-color: #2aa198;
+}
+.bmot {
+  font-size:   16px;
+  font-weight: bold;
 }
 </style>
diff --git a/hsm-web/Client/src/main.js b/hsm-web/Client/src/main.js
index 01433bc..004c252 100644
--- a/hsm-web/Client/src/main.js
+++ b/hsm-web/Client/src/main.js
@@ -1,4 +1,4 @@
+import App           from './App.vue'
 import { createApp } from 'vue'
-import App from './App.vue'
 
 createApp(App).mount('#app')