From e0f3f7acc764fc84b458069223294a61722b9c54 Mon Sep 17 00:00:00 2001
From: Stewart Allen <stewart.allen@gmail.com>
Date: Tue, 14 Apr 2020 09:49:41 -0400
Subject: [PATCH] scale layer output, faster data copy with slider

---
 js/kiri-driver-sla.js    | 20 ++++++++++++++------
 web/kiri/output-sla.html |  2 +-
 web/kiri/style.css       |  3 +++
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/js/kiri-driver-sla.js b/js/kiri-driver-sla.js
index 09ec857c..8c81e33b 100644
--- a/js/kiri-driver-sla.js
+++ b/js/kiri-driver-sla.js
@@ -97,7 +97,9 @@ let gs_kiri_sla = exports;
             width = 2560,
             height = 1440,
             width2 = width/2,
-            height2 = height/2;
+            height2 = height/2,
+            scaleX = width / device.bedWidth,
+            scaleY = height / device.bedDepth;
 
         widgets.forEach(widget => {
             layermax = Math.max(widget.slices.length);
@@ -115,9 +117,9 @@ let gs_kiri_sla = exports;
                         ctx.beginPath();
                         poly.forEachPoint((p,i) => {
                             if (i === 0) {
-                                ctx.moveTo(p.x + width2, p.y + height2);
+                                ctx.moveTo(p.x * scaleX + width2, p.y * scaleY + height2);
                             } else {
-                                ctx.lineTo(p.x + width2, p.y + height2);
+                                ctx.lineTo(p.x * scaleX + width2, p.y * scaleY + height2);
                             }
                         }, true);
                         ctx.fill();
@@ -206,14 +208,20 @@ let gs_kiri_sla = exports;
             let canvas = $('print-canvas');
             let ctx = canvas.getContext('2d');
             let img = ctx.createImageData(done.width, done.height);
+            let imgDV = new DataView(img.data.buffer);
+
+            // canvas.setAttribute('width', done.width/2);
+            // canvas.setAttribute('height', done.height/2);
 
             let range = $('print-range');
             range.value = 0;
             range.min = 0;
-            range.max = lines.length;
+            range.max = lines.length - 1;
             range.oninput = function() {
-                console.log(range.value);
-                lines[range.value].forEach((v,i) => img.data[i] = v);
+                let lineDV = new DataView(lines[range.value].buffer);
+                for (let i=0; i<lineDV.byteLength; i+=4) {
+                    imgDV.setUint32(i, lineDV.getUint32(i));
+                }
                 ctx.putImageData(img,0,0);
             };
 
diff --git a/web/kiri/output-sla.html b/web/kiri/output-sla.html
index 63a986c1..a124e75d 100644
--- a/web/kiri/output-sla.html
+++ b/web/kiri/output-sla.html
@@ -19,5 +19,5 @@
 
 <div class="print-sel">
     <canvas id="print-canvas" width="2560" height="1440"></canvas>
-    <input id="print-range" type="range" width="100%">
+    <input id="print-range" type="range">
 </div>
diff --git a/web/kiri/style.css b/web/kiri/style.css
index e22de641..6c2f0e86 100644
--- a/web/kiri/style.css
+++ b/web/kiri/style.css
@@ -270,6 +270,9 @@ input[type=range]::-moz-focus-outer {
 .print-sel th {
     text-align: right !important;
 }
+#print-range {
+    width: 90%;
+}
 #print .print-sel:hover {
     border: 1px solid #555;
 }