move layer slider to bottom and gently restyle

src/kiri/init.js

@@ -1534,11 +1534,11 @@
         }
 
         function sliderUpdate() {
-            let start = drag.top / drag.maxval;
-            let end = (drag.top + drag.mid - slbar) / drag.maxval;
+            let start = drag.low / drag.maxval;
+            let end = (drag.low + drag.mid - slbar) / drag.maxval;
             API.event.emit('slider.pos', { start, end });
-            API.var.layer_hi = Math.round((1 - start) * API.var.layer_max);
-            API.var.layer_lo = Math.round((1 - end) * API.var.layer_max);
+            API.var.layer_lo = Math.round(start * API.var.layer_max);
+            API.var.layer_hi = Math.round(end * API.var.layer_max);
             API.show.layer();
             SPACE.scene.active();
         }
@@ -1547,13 +1547,14 @@
             el.onmousedown = (ev) => {
                 tracker.style.display = 'block';
                 ev.stopPropagation();
-                drag.height = slider.clientHeight;
-                drag.maxval = drag.height - slbar2;
-                drag.start = ev.screenY;
-                drag.hiat = drag.top = pxToInt(UI.sliderHold.style.marginTop);
-                drag.mdat = drag.mid = UI.sliderMid.clientHeight;
-                drag.mdmax = drag.height - slbar - drag.hiat;
-                drag.himax = drag.height - slbar - drag.mdat;
+                drag.width = slider.clientWidth;
+                drag.maxval = drag.width - slbar2;
+                drag.start = ev.screenX;
+                drag.loat = drag.low = pxToInt(UI.sliderHold.style.marginLeft);
+                drag.mdat = drag.mid = UI.sliderMid.clientWidth;
+                drag.hiat = pxToInt(UI.sliderHold.style.marginRight);
+                drag.mdmax = drag.width - slbar - drag.loat;
+                drag.himax = drag.width - slbar - drag.mdat;
                 let cancel_drag = tracker.onmouseup = (ev) => {
                     if (ev) {
                         ev.stopPropagation();
@@ -1568,33 +1569,39 @@
                     if (ev.buttons === 0) {
                         return cancel_drag();
                     }
-                    if (delta) delta(ev.screenY - drag.start);
+                    if (delta) delta(ev.screenX - drag.start);
                 };
             };
         }
 
-        dragit(UI.sliderHi, (delta) => {
+        dragit(UI.sliderLo, (delta) => {
             let midval = drag.mdat - delta;
-            let topval = drag.hiat + delta;
-            if (midval < slbar || topval < 0) {
+            let lowval = drag.loat + delta;
+            if (midval < slbar || lowval < 0) {
                 return;
             }
-            UI.sliderHold.style.marginTop = `${topval}px`;
-            UI.sliderMid.style.height = `${midval}px`;
-            drag.top = topval;
+            UI.sliderHold.style.marginLeft = `${lowval}px`;
+            UI.sliderMid.style.width = `${midval}px`;
+            drag.low = lowval;
             drag.mid = midval;
             sliderUpdate();
         });
         dragit(UI.sliderMid, (delta) => {
-            let topoff = Math.max(0, Math.min(drag.himax, drag.hiat + delta));
-            UI.sliderHold.style.marginTop = `${topoff}px`;
-            drag.top = topoff;
+            let loval = drag.loat + delta;
+            let hival = drag.hiat - delta;
+            if (loval < 0 || hival < 0) return;
+            UI.sliderHold.style.marginLeft = `${loval}px`;
+            UI.sliderHold.style.marginRight = `${hival}px`;
+            drag.low = loval;
             sliderUpdate();
         });
-        dragit(UI.sliderLo, (delta) => {
-            let midlen = Math.max(slbar, Math.min(drag.mdmax, drag.mdat + delta));
-            UI.sliderMid.style.height = `${midlen}px`;
-            drag.mid = midlen;
+        dragit(UI.sliderHi, (delta) => {
+            let midval = drag.mdat + delta;
+            let hival = drag.hiat - delta;
+            if (midval < slbar || midval > drag.mdmax || hival < 0) return;
+            UI.sliderMid.style.width = `${midval}px`;
+            UI.sliderHold.style.marginRight = `${hival}px`;
+            drag.mid = midval;
             sliderUpdate();
         });
 
@@ -1615,26 +1622,27 @@
         };
 
         API.event.on('slider.unlabel', (values) => {
-            $('slider-hi-val').style.display = 'none';
-            $('slider-lo-val').style.display = 'none';
         });
 
         API.event.on('slider.label', (values) => {
-            $('slider-hi-val').style.display = 'flex';
-            $('slider-lo-val').style.display = 'flex';
-            $('slider-hi-val').innerText = API.var.layer_hi;
-            $('slider-lo-val').innerText = API.var.layer_lo;
+            let digits = API.var.layer_max.toString().length;
+            $('slider-zero').style.width = `${digits}em`;
+            $('slider-max').style.width = `${digits}em`;
+            $('slider-zero').innerText = API.var.layer_lo;
+            $('slider-max').innerText = API.var.layer_hi;
         });
 
         API.event.on('slider.set', (values) => {
-            let height = slider.clientHeight;
-            let maxval = height - slbar2;
+            let width = slider.clientWidth;
+            let maxval = width - slbar2;
             let start = Math.max(0, Math.min(1, values.start));
             let end = Math.max(start, Math.min(1, values.end));
-            let topval = start * maxval;
+            let lowval = start * maxval;
             let midval = ((end - start) * maxval) + slbar;
-            UI.sliderHold.style.marginTop = `${topval}px`;
-            UI.sliderMid.style.height = `${midval}px`;
+            let hival = maxval - end * maxval;
+            UI.sliderHold.style.marginLeft = `${lowval}px`;
+            UI.sliderMid.style.width = `${midval}px`;
+            UI.sliderHold.style.marginRight = `${hival}px`;
         });
 
         // bind language choices

src/kiri/main.js

@@ -473,8 +473,8 @@
 
     function updateSlider() {
         API.event.emit("slider.set", {
-            start: 1 - (API.var.layer_hi / API.var.layer_max),
-            end: 1 - (API.var.layer_lo / API.var.layer_max)
+            start: (API.var.layer_lo / API.var.layer_max),
+            end: (API.var.layer_hi / API.var.layer_max)
         });
     }
 
@@ -752,13 +752,13 @@
     function showSlider() {
         UI.layers.style.display = 'flex';
         UI.slider.style.display = 'flex';
-        UI.setMenu.style.display = 'none';
+        // UI.setMenu.style.display = 'none';
     }
 
     function hideSlider(andmenu) {
         UI.layers.style.display = 'none';
         UI.slider.style.display = 'none';
-        UI.setMenu.style.display = andmenu ? 'none' : 'flex';
+        // UI.setMenu.style.display = andmenu ? 'none' : 'flex';
     }
 
     /**

web/kiri/index.css

@@ -2,7 +2,8 @@
     --fg-gray: #495057;
     --bg-gray: rgba(0,0,0,0.25);
     --gradbar: linear-gradient(to right, #ddd, #666, #ddd);
-    --holdbar: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0));
+    --holdbar: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,1), rgba(100,100,100,0.1));
+    --holdbar-sf: linear-gradient(to top, rgba(200,200,200,0.1), rgba(255,255,255,1), rgba(200,200,200,0.1)) !important;
 }
 a, a:hover, a:visited {
     border: none;
@@ -783,14 +784,19 @@ and (orientation : landscape) {
     color: #335;
 }
 
-#slider {
-    display: none;
+#layer-slider {
     position: absolute;
     font-size: smaller;
-    top: 15px;
-    right: 3px;
-    bottom: 15px;
-    width: 50px;
+    left: 15px;
+    right: 15px;
+    bottom: 3px;
+    pointer-events: all;
+}
+
+#slider {
+    display: none;
+    height: 30px;
+    z-index: 100;
 }
 #slider-hi-val, #slider-lo-val {
     display: none;
@@ -800,44 +806,45 @@ and (orientation : landscape) {
     background-color: rgba(255,255,255,0.5);
     border: 1px solid #ddd;
     border-radius: 3px;
-    right: 110%;
-    top: 50%;
+    bottom: 110%;
+    left: 50%;
 }
 #slider > div {
-    flex-direction: column;
+    justify-content: center;
+    flex-direction: row;
     align-items: center;
 }
 #slider-max {
     background-color: #ccc;
-    border-top-left-radius: 10px;
     border-top-right-radius: 10px;
-    margin-bottom: 3px;
+    border-bottom-right-radius: 10px;
+    margin-left: 3px;
 }
 #slider-center {
     background-image: var(--holdbar);
 }
 #slider-zero {
     z-index: 10;
-    margin-top: 3px;
+    margin-right: 3px;
     background-color: #ccc;
+    border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
-    border-bottom-right-radius: 10px;
 }
 #slider-hold {
     background-color: rgba(0,0,0,0.15);
     position: absolute;
+    bottom: 0;
     right: 0;
-    left: 0;
     top: 0;
 }
 #slider-hold .handle {
-    width: 100%;
-    height: 15px;
+    width: 15px;
+    height: 100%;
     border-radius: 3px;
     background-color: var(--bg-gray);
 }
 #slider-mid {
-    height: 20px;
+    width: 20px;
 }
 
 #alert-area {
@@ -972,7 +979,7 @@ and (orientation : landscape) {
     border-radius: 10px;
     background-color: #ddd;
     padding: 2px 5px 2px 5px;
-    margin: 0 2px 0 2px;
+    margin: 0 2px 3px 2px;
 }
 .var-row {
     white-space: nowrap;

web/kiri/index.html

@@ -308,6 +308,20 @@
                 <input id="load-file" type="file" name="loadme" style="display:none" accept=".stl,.gcode,.nc"/>
                 <div class="mod-end"></div></div>
             </div>
+            <div id="layer-slider" class="col a-stretch">
+                <div id="layers" class="row j-center"></div>
+                <div id="slider" class="row russo">
+                    <div id="slider-zero">0</div>
+                    <div id="slider-center" class="grow">
+                        <div id="slider-hold" class="row">
+                            <div id="slider-lo" class="handle"><div id="slider-lo-val"></div></div>
+                            <div id="slider-mid">&nbsp;</div>
+                            <div id="slider-hi" class="handle"><div id="slider-hi-val"></div></div>
+                        </div>
+                    </div>
+                    <div id="slider-max">&infin;</div>
+                </div>
+            </div>
         </div>
         <div id="mid-rcol" class="col j-center noshow">
             <div id="set-menu" class="col">
@@ -315,23 +329,10 @@
                 <div id="settings" class="col"></div>
                 <div id="set-end" class="set-group"></div>
             </div>
-            <div id="slider" class="col russo">
-                <div id="slider-max">&infin;</div>
-                <div id="slider-center" class="grow">
-                    <div id="slider-hold" class="col xa-center">
-                        <div id="slider-hi" class="handle"><div id="slider-hi-val"></div></div>
-                        <div id="slider-mid">&nbsp;</div>
-                        <div id="slider-lo" class="handle"><div id="slider-lo-val"></div></div>
-                    </div>
-                </div>
-                <div id="slider-zero">0</div>
-            </div>
         </div>
     </div>
     <div id="end" class="col a-center">
-        <div id="bottom">
-            <div id="layers"></div>
-        </div>
+        <div id="bottom"></div>
         <div id="alert-area">
             <div id="alert-border">
                 <div id="alert-text">alerts<br>alerts<br>alerts</div>