Skins frontend

1 files changed, 27 insertions, 11 deletions

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>