From 915c4ead8f947e5c914e25afd648ddec942f51bb Mon Sep 17 00:00:00 2001
From: Joseph Coffland <joseph@cauldrondevelopment.com>
Date: Tue, 5 Apr 2016 11:39:59 -0700
Subject: [PATCH] Lots of work on Web control interface

---
 src/jade/templates/axis-control.jade | 84 ++++++++++++++++------------
 src/jade/templates/control-view.jade | 36 +++++++++---
 src/js/app.js                        |  4 +-
 src/js/axis-control.js               |  2 +-
 src/js/control-view.js               |  8 +++
 src/stylus/style.styl                | 51 +++++++++++------
 6 files changed, 121 insertions(+), 64 deletions(-)

diff --git a/src/jade/templates/axis-control.jade b/src/jade/templates/axis-control.jade
index a81c10b..286e6e6 100644
--- a/src/jade/templates/axis-control.jade
+++ b/src/jade/templates/axis-control.jade
@@ -3,24 +3,32 @@ script#axis-control-template(type="text/x-template")
     width="200", height="200", transform="scale(0.8, 0.8)",
     xmlns:xlink="http://www.w3.org/1999/xlink")
     defs
-      lineargradient#gold
-        stop(offset="0", stop-color="#ded99d")
-        stop(offset="1", stop-color="#b7b287")
+      lineargradient#red
+        stop(offset="0", stop-color="#d26969")
+        stop(offset="1", stop-color="#ff7f7f")
+
+      lineargradient#green
+        stop(offset="0", stop-color="#69d269")
+        stop(offset="1", stop-color="#7fff7f")
 
       lineargradient#blue
-        stop(offset="0", stop-color="#b4b8e4")
-        stop(offset="1", stop-color="#868ab6")
+        stop(offset="0", stop-color="#6969d2")
+        stop(offset="1", stop-color="#7f7fff")
 
-      lineargradient#green
-        stop(offset="0", stop-color="#a1cca1")
-        stop(offset="1", stop-color="#6ba469")
+      lineargradient#orange
+        stop(offset="0", stop-color="#d29d69")
+        stop(offset="1", stop-color="#ffbf7f")
 
-      lineargradient#red
-        stop(offset="0", stop-color="#f88")
-        stop(offset="1", stop-color="#ea5858")
+      lineargradient#cyan
+        stop(offset="0", stop-color="#69d2d2")
+        stop(offset="1", stop-color="#7fffff")
+
+      lineargradient#purple
+        stop(offset="0", stop-color="#d269d2")
+        stop(offset="1", stop-color="#ff7fff")
 
 
-      each color in 'gold blue green red'.split(' ')
+      each color in 'red green blue orange cyan purple'.split(' ')
         lineargradient(xlink:href="##{color}", id="#{color}-1",
           gradientunits="userSpaceOnUse", gradienttransform="rotate(180 7 5)",
           x1="0", y1="0", x2="15", y2="10")
@@ -65,7 +73,7 @@ script#axis-control-template(type="text/x-template")
 
     // Home A
     g.button(@click="home(0)", title="Home {{axes[0]}} axis",
-      filter="url(#shadow)")
+      filter="url(#shadow)", v-if="enabled[0]")
       use(xlink:href="#corner-button", fill="url(#{{colors[0]}}-2)",
         transform="matrix(1 0 0 1 9 9)")
       text(font-size="14", x="34", y="25") {{axes[0]}}
@@ -74,7 +82,7 @@ script#axis-control-template(type="text/x-template")
 
     // Home B
     g.button(@click="home(1)", title="Home {{axes[1]}} axis",
-      filter="url(#shadow)")
+      filter="url(#shadow)", v-if="enabled[1]")
       use(xlink:href="#corner-button", fill="url(#{{colors[1]}}-2)",
         transform="matrix(-1 0 0 1 241 9)")
       text(font-size="14", x="205", y="25") {{axes[1]}}
@@ -83,7 +91,7 @@ script#axis-control-template(type="text/x-template")
 
     // Zero A
     g.button(@click="zero(0)", title="Zero {{axes[0]}} axes",
-      filter="url(#shadow)")
+      filter="url(#shadow)", v-if="enabled[0]")
       use(xlink:href="#corner-button", fill="url(#{{colors[0]}}-2)",
         transform="matrix(1 0 0 -1 9 231)")
       text(font-size="20", x="12", y="227") &empty;
@@ -92,7 +100,7 @@ script#axis-control-template(type="text/x-template")
 
     // Zero B
     g.button(@click="zero(1)", title="Zero {{axes[1]}} axis",
-      filter="url(#shadow)")
+      filter="url(#shadow)", v-if="enabled[1]")
       use(xlink:href="#corner-button", fill="url(#{{colors[1]}}-2)",
         transform="matrix(-1 0 0 -1 241 231)")
       text(font-size="14", x="208", y="227") {{axes[1]}}
@@ -101,15 +109,16 @@ script#axis-control-template(type="text/x-template")
 
     // 100 ring
     g.ring(fill="#9f9f9f", filter="url(#shadow-ring)")
-      use.button(xlink:href="#pie-1",
+      use.button(xlink:href="#pie-1", v-if="enabled[0]",
         transform="translate(134 121) rotate(-45)",
         @click="jog(0, 100)", title="Jog +100 {{axes[0]}}")
 
-      use.button(xlink:href="#pie-1",
+      use.button(xlink:href="#pie-1", v-if="enabled[0]",
         transform="translate(115 121) rotate(135)",
         @click="jog(0, -100)", title="Jog -100 {{axes[0]}}")
 
-      g.button(@click="jog(1, 100)", title="Jog +100 {{axes[1]}}")
+      g.button(@click="jog(1, 100)", title="Jog +100 {{axes[1]}}",
+        v-if="enabled[1]")
         use.button(xlink:href="#pie-1",
           transform="translate(124 111) rotate(-135)")
         text(x="125", y="24", transform="rotate(20 125 125)") 100
@@ -117,86 +126,89 @@ script#axis-control-template(type="text/x-template")
         use.button(xlink:href="#pie-1", fill="transparent",
           transform="translate(124 111) rotate(-135)")
 
-      use.button(xlink:href="#pie-1",
+      use.button(xlink:href="#pie-1", v-if="enabled[1]",
         transform="translate(124 130) rotate(45)",
         @click="jog(1, -100)", title="Jog -100 {{axes[1]}}")
 
     // 10 ring
     g.ring(fill="#c5c5c5", filter="url(#shadow-ring)")
-      use.button(xlink:href="#pie-2",
+      use.button(xlink:href="#pie-2", v-if="enabled[0]",
         transform="translate(134 121) rotate(-45)",
         @click="jog(0, 10)", title="Jog +10 {{axes[0]}}")
 
-      use.button(xlink:href="#pie-2",
+      use.button(xlink:href="#pie-2", v-if="enabled[0]",
         transform="translate(115 121) rotate(135)",
         @click="jog(0, -10)", title="Jog -10 {{axes[0]}}")
 
-      g.button(@click="jog(1, 10)", title="Jog +10 {{axes[1]}}")
+      g.button(@click="jog(1, 10)", title="Jog +10 {{axes[1]}}",
+        v-if="enabled[1]")
         use.button(xlink:href="#pie-2",
           transform="translate(124 111) rotate(-135)")
         text(x="125", y="50") 10
         use.button(xlink:href="#pie-2", fill="transparent",
           transform="translate(124 111) rotate(-135)")
 
-      use.button(xlink:href="#pie-2",
+      use.button(xlink:href="#pie-2", v-if="enabled[1]",
         transform="translate(124 130) rotate(45)",
         @click="jog(1, -10)", title="Jog -10 {{axes[1]}}")
 
 
     // 1 ring
     g.ring(fill="#e2e2e2", filter="url(#shadow-ring)")
-      use.button(xlink:href="#pie-3",
+      use.button(xlink:href="#pie-3", v-if="enabled[0]",
         transform="translate(134 121) rotate(-45)",
         @click="jog(0, 1)", title="Jog +1 {{axes[0]}}")
 
-      use.button(xlink:href="#pie-3",
+      use.button(xlink:href="#pie-3", v-if="enabled[0]",
         transform="translate(115 121) rotate(135)",
         @click="jog(0, -1)", title="Jog -1 {{axes[0]}}")
 
-      g.button(@click="jog(1, 1)", title="Jog +1 {{axes[1]}}")
+      g.button(@click="jog(1, 1)", title="Jog +1 {{axes[1]}}",
+        v-if="enabled[1]")
         use.button(xlink:href="#pie-3",
           transform="translate(124 111) rotate(-135)")
         text(x="125", y="75") 1
         use.button(xlink:href="#pie-3", fill="transparent",
           transform="translate(124 111) rotate(-135)")
 
-      use.button(xlink:href="#pie-3",
+      use.button(xlink:href="#pie-3", v-if="enabled[1]",
         transform="translate(124 130) rotate(45)",
         @click="jog(1, -1)", title="Jog -1 {{axes[1]}}")
 
 
     // 0.1 ring
     g.ring(fill="#f7f7f7", filter="url(#shadow-ring)")
-      use.button(xlink:href="#pie-4",
+      use.button(xlink:href="#pie-4", v-if="enabled[0]",
         transform="translate(134 121) rotate(-45)",
         @click="jog(0, 0.1)", title="Jog +0.1 {{axes[0]}}")
 
-      use.button(xlink:href="#pie-4",
+      use.button(xlink:href="#pie-4", v-if="enabled[0]",
         transform="translate(115 121) rotate(135)",
         @click="jog(0, -0.1)", title="Jog -0.1 {{axes[0]}}")
 
-      g.button(@click="jog(1, 0.1)", title="Jog +0.1 {{axes[1]}}")
+      g.button(@click="jog(1, 0.1)", title="Jog +0.1 {{axes[1]}}",
+        v-if="enabled[1]")
         use.button(xlink:href="#pie-4",
           transform="translate(124 111) rotate(-135)")
         text(x="125", y="95") 0.1
         use.button(xlink:href="#pie-4", fill="transparent",
           transform="translate(124 111) rotate(-135)")
 
-      use.button(xlink:href="#pie-4",
+      use.button(xlink:href="#pie-4", v-if="enabled[1]",
         transform="translate(124 130) rotate(45)",
         @click="jog(1, -0.1)", title="Jog -0.1 {{axes[1]}}")
 
 
     // +A
     g.button.arrow(@click="jog(0, 100)", title="Jog +100 {{axes[0]}}",
-      transform="translate(230 120)")
+      transform="translate(230 120)", v-if="enabled[0]")
       use(xlink:href="#arrow", fill="url(#{{colors[0]}}-1)")
       text(x="-12", y="5", font-size="14", textLength="21") +{{axes[0]}}
 
 
     // -A
     g.button.arrow(@click="jog(0, -100)", title="Jog -100 {{axes[0]}}",
-      transform="translate(20 120)")
+      transform="translate(20 120)", v-if="enabled[0]")
       use(xlink:href="#arrow", fill="url(#{{colors[0]}}-1)",
         transform="rotate(180)")
       text(x="-8", y="5", font-size="14", textLength="16") -{{axes[0]}}
@@ -204,7 +216,7 @@ script#axis-control-template(type="text/x-template")
 
     // +B
     g.button.arrow(@click="jog(1, 100)", title="Jog +100 {{axes[1]}}",
-      transform="translate(125, 18)")
+      transform="translate(125, 18)", v-if="enabled[1]")
       use(xlink:href="#arrow", fill="url(#{{colors[1]}}-1)",
         transform="rotate(-90)")
       text(x="-8", y="5", font-size="12", textLength="16") +{{axes[1]}}
@@ -212,7 +224,7 @@ script#axis-control-template(type="text/x-template")
 
     // -B
     g.button.arrow(@click="jog(1, -100)", title="Jog -100 {{axes[1]}}",
-      transform="translate(125, 225)")
+      transform="translate(125, 225)", v-if="enabled[1]")
       use(xlink:href="#arrow", fill="url(#{{colors[1]}}-1)",
         transform="rotate(90)")
       text(x="-7", y="5", font-size="12", textLength="14") -{{axes[1]}}
diff --git a/src/jade/templates/control-view.jade b/src/jade/templates/control-view.jade
index ea58588..c502df5 100644
--- a/src/jade/templates/control-view.jade
+++ b/src/jade/templates/control-view.jade
@@ -1,7 +1,14 @@
 script#control-view-template(type="text/x-template")
   .jog
-    axis-control(axes="XY", :colors="['gold', 'blue']")
-    axis-control(axes="AZ", :colors="['red', 'green']")
+    axis-control(axes="XY", :colors="['red', 'green']",
+      :enabled="[enabled('x'), enabled('y')]",
+      v-if="enabled('x') || enabled('y')")
+    axis-control(axes="AZ", :colors="['orange', 'blue']",
+      :enabled="[enabled('a'), enabled('z')]",
+      v-if="enabled('a') || enabled('z')")
+    axis-control(axes="BC", :colors="['cyan', 'purple']",
+      :enabled="[enabled('b'), enabled('c')]",
+      v-if="enabled('b') || enabled('c')")
 
 
   .estop(:class="{active: state.es}")
@@ -34,6 +41,7 @@ script#control-view-template(type="text/x-template")
 
   table.axes
     tr
+      th Actions
       th Axis
       th Position
       th Offset
@@ -41,7 +49,12 @@ script#control-view-template(type="text/x-template")
       th StallGuard
 
     each axis in 'xyzabc'
-      tr.axis(class="axis-#{axis}")
+      tr.axis(class="axis-#{axis}", v-if="enabled('#{axis}')")
+        th.actions
+          button.pure-button
+            .fa.fa-home
+          button.pure-button
+            .fa.fa-dot-circle-o
         th.name #{axis}
         td.position {{state.#{axis}p || 0 | fixed 4}}
         td.offset {{state.#{axis}o || 0 | fixed 4}}
@@ -72,29 +85,34 @@ script#control-view-template(type="text/x-template")
 
 
   .toolbar
+    button.pure-button(@click="home", :disabled="running")
+      .fa.fa-home
+
     button.pure-button(@click="play_pause()", :disabled="!file")
       .fa(:class="running ? 'fa-pause' : 'fa-play'")
 
     button.pure-button(@click="stop", :disabled="!running")
       .fa.fa-stop
 
+    button.pure-button(@click="optional_stop", :disabled="!file")
+      .fa.fa-stop-circle-o
+
     button.pure-button(@click="step", :disabled="running || !file")
       .fa.fa-step-forward
 
-    button.pure-button(@click="optional_stop", :disabled="!file")
-      .fa.fa-stop-circle-o
+    .spacer
 
-    button.pure-button(@click="open")
+    button.pure-button(@click="open", :disabled="running")
       .fa.fa-folder-open
 
     input.gcode-file-input(type="file", @change="upload", style="display:none",
       accept=".nc,.gcode,.gc,.ngc")
 
-    select(v-model="file", @change="load")
-      option(v-for="file in files", :value="file") {{file}}
-
     button.pure-button(@click="delete", :disabled="!file")
       .fa.fa-trash
 
+    select(v-model="file", @change="load", :disabled="running")
+      option(v-for="file in files", :value="file") {{file}}
+
 
   .gcode {{gcode || 'GCode displays here.'}}
diff --git a/src/js/app.js b/src/js/app.js
index 6becffc..e92a07c 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -12,8 +12,8 @@ module.exports = new Vue({
       currentView: 'loading',
       index: -1,
       modified: false,
-      template: {"motors": {}, "axes": {}},
-      config: {"motors": [{}]}
+      template: {motors: {}, axes: {}},
+      config: {motors: [{}]}
     }
   },
 
diff --git a/src/js/axis-control.js b/src/js/axis-control.js
index d43a8b8..78434fe 100644
--- a/src/js/axis-control.js
+++ b/src/js/axis-control.js
@@ -3,7 +3,7 @@
 
 module.exports = {
   template: '#axis-control-template',
-  props: ['axes', 'colors'],
+  props: ['axes', 'colors', 'enabled'],
 
 
   methods: {
diff --git a/src/js/control-view.js b/src/js/control-view.js
index 08329a4..2948193 100644
--- a/src/js/control-view.js
+++ b/src/js/control-view.js
@@ -10,6 +10,7 @@ function is_array(x) {
 
 module.exports = {
   template: '#control-view-template',
+  props: ['config'],
 
 
   data: function () {
@@ -75,6 +76,13 @@ module.exports = {
 
 
   methods: {
+    enabled: function (axis) {
+      var axis = axis.toLowerCase();
+      return axis in this.config.axes &&
+        this.config.axes[axis].mode != 'disabled';
+    },
+
+
     estop: function () {
       this.$set('state.es', !this.state.es);
     },
diff --git a/src/stylus/style.styl b/src/stylus/style.styl
index 1a96039..12a30aa 100644
--- a/src/stylus/style.styl
+++ b/src/stylus/style.styl
@@ -59,6 +59,7 @@ body
 
 .control-view
   table
+    margin 0.5em 0
     border-collapse collapse
 
     td, th
@@ -67,17 +68,26 @@ body
 
 .axes
   .axis-x .name
-    color red
+    color #f00
 
   .axis-y .name
-    color green
+    color #0f0
 
   .axis-z .name
-    color blue
+    color #00f
+
+  .axis-a .name
+    color #f80
+
+  .axis-b .name
+    color #0ff
+
+  .axis-c .name
+    color #f0f
 
   td, th
     text-align center
-    padding 8px
+    padding 2px
 
   .axis
     .name
@@ -85,15 +95,16 @@ body
 
     .name, .position
       font-size 36pt
+      line-height 36pt
 
 @keyframes blink
   50%
     fill #ff9d00
 
 .estop
-  width 130px
-  transition 250ms
   display inline-block
+  width 190px
+  transition 250ms
 
   &.active .ring
     animation blink 2s step-start 0s infinite
@@ -108,8 +119,6 @@ body
   float right
 
 .jog svg
-  margin-left 2em
-
   text
     font-family Sans
     font-weight bold
@@ -154,17 +163,20 @@ body
   th
     text-align right
 
-.overrides .override
-  margin 0.5em
-  display inline-block
+.overrides
+  clear both
 
-  .percent
+  .override
+    margin 0.5em
     display inline-block
-    width 3em
 
-  input
-    border-radius 0
-    margin -0.4em 0.5em
+    .percent
+      display inline-block
+      width 3em
+
+    input
+      border-radius 0
+      margin -0.4em 0.5em
 
 .mdi
   clear both
@@ -175,8 +187,15 @@ body
     width 90%
 
 .toolbar
+  clear both
   margin 0.5em 0
 
+  .spacer
+    display inline-block
+    width 1px
+    height 1px
+    margin 0 1em
+
 .gcode
   clear both
   border 2px inset #ccc
-- 
2.27.0