From b1c8feb31970f5abce616d3201d4d9a8d1efc4fb Mon Sep 17 00:00:00 2001
From: Stewart Allen <stewart.allen@gmail.com>
Date: Sun, 29 Nov 2020 10:04:13 -0500
Subject: [PATCH] show animation speed

---
 notes.md                |  3 ++-
 src/kiri/init.js        |  2 +-
 src/mode/cam/animate.js | 28 ++++++++++++++++++++--------
 web/kiri/index.css      | 11 +++++++++++
 4 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/notes.md b/notes.md
index b801319b..817de5de 100644
--- a/notes.md
+++ b/notes.md
@@ -4,7 +4,6 @@
 * `cnc`
 * - tracing (chamfer, engrave)
 * - auto feature detection (slicing)
-* - show 1x, 2x, 4x speed in animation
 * `laser`
 * - drag knife support
 * `all`
@@ -20,6 +19,8 @@
 # - redo automatic supports using faces instead of deltas
 # - bind process to z ranges or boxed regions
 # - non-planar actual
+# `all`
+# - improve device list, selection, management, customization
 
 ## `C` cosmetic, `F` functional, `P` performance, `B` bug fix
 
diff --git a/src/kiri/init.js b/src/kiri/init.js
index bbe45598..f3cde2d9 100644
--- a/src/kiri/init.js
+++ b/src/kiri/init.js
@@ -1278,7 +1278,7 @@
             tracker = $('tracker'),
             controller = settings().controller;
 
-        // UC.setHoverPop(controller.hoverPop);
+        UC.setHoverPop(false);
 
         WIN.addEventListener("resize", () => {
             API.event.emit('resize');
diff --git a/src/mode/cam/animate.js b/src/mode/cam/animate.js
index f74bb57f..4f6a68c4 100644
--- a/src/mode/cam/animate.js
+++ b/src/mode/cam/animate.js
@@ -8,7 +8,10 @@ self.kiri.loader.push(function() {
         CAM = KIRI.driver.CAM,
         API, WORLD, SPACE,
         meshes = {},
-        speedDef = 20,
+        speedValues = [ 25, 12, 6, 3 ],
+        speedNames = [ "1x", "2x", "4x", "8x" ],
+        speedIndex = 0,
+        speedLabel,
         speed;
 
     // ---( CLIENT FUNCTIONS )---
@@ -36,19 +39,28 @@ self.kiri.loader.push(function() {
             layer.innerHTML = '';
             UC.setGroup(layer);
             UC.newRow([
-                UC.newButton(null,replay,{icon:'<i class="fas fa-step-backward"></i>'}),
+                UC.newButton(null,replay,{icon:'<i class="fas fa-fast-backward"></i>'}),
                 UC.newButton(null,play,{icon:'<i class="fas fa-play"></i>'}),
                 UC.newButton(null,step,{icon:'<i class="fas fa-step-forward"></i>'}),
-                UC.newButton(null,fast,{icon:'<i class="fas fa-forward"></i>'}),
-                UC.newButton(null,pause,{icon:'<i class="fas fa-pause"></i>'})
+                UC.newButton(null,fast,{icon:'<i class="fas fa-fast-forward"></i>'}),
+                UC.newButton(null,pause,{icon:'<i class="fas fa-pause"></i>'}),
+                speedLabel = UC.newLabel("speed")
             ]);
-            speed = speedDef;
+            updateSpeed();
             setTimeout(() => {
                 play({steps: 1});
             }, delay || 0);
         });
     };
 
+    function updateSpeed(inc = 0) {
+        if (inc > 0) {
+            speedIndex = (speedIndex + inc) % speedValues.length;
+        }
+        speed = speedValues[speedIndex];
+        speedLabel.innerText = speedNames[speedIndex];
+    }
+
     function replay() {
         CAM.animate_clear(API);
         setTimeout(() => {
@@ -118,19 +130,19 @@ self.kiri.loader.push(function() {
 
     function step(opts) {
         const { steps } = opts;
+        updateSpeed();
         KIRI.client.animate({speed, steps: 1}, handleGridUpdate);
     }
 
     function play(opts) {
         const { steps } = opts;
-        speed = speedDef;
+        updateSpeed();
         KIRI.client.animate({speed, steps: steps || Infinity}, handleGridUpdate);
     }
 
     function fast(opts) {
         const { steps } = opts;
-        speed = speed / 2;
-        if (speed < 5) speed = speedDef;
+        updateSpeed(1);
         KIRI.client.animate({speed, steps: steps || Infinity}, handleGridUpdate);
     }
 
diff --git a/web/kiri/index.css b/web/kiri/index.css
index ebc22790..beebb510 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -888,6 +888,17 @@ th, tr, td, label {
     color: #333;
     font-size: 30px;
 }
+#layer-animate label {
+    display: inline-flex;
+    width: 30px;
+    border-radius: 3px;
+    border: 1px solid #aaa;
+    margin: 1px 2px 2px 4px;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    background-color: #ddd;
+}
 
 #slider {
     display: none;