2 files changed, 120 insertions, 2 deletions

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 67690df2..4a757d5f 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -7,6 +7,10 @@ $.postJSON = function(url, data, success=null) {
                        });
 };
 
+var realistic_rendering = {};
+var realistic_cache = {};
+var normal_rendering = {};
+
 function ping() {
   $.get("/ping")
    .done(function() { setTimeout(ping, 1000) })
@@ -142,6 +146,11 @@ $(function() {
     setSVGTransform($(this), $(this).find('svg').css('transform'));
   });
 
+  // ignore mouse events on the buttons (Fill, 100%, Apply to All)
+  $('figure.inksimulation div').on('mousedown mouseup', function(e) {
+    e.stopPropagation();
+  });
+
   /* Apply transforms to All */
   $('button.svg-apply').click(function() {
     var transform = $(this).parent().siblings('svg').css('transform');
@@ -190,6 +199,23 @@ $(function() {
             }
         });
     });
+
+//    $.getJSON('/realistic', function(realistic_data) {
+      // realistic_rendering is global
+      /*
+      $.each(realistic_data, function(name, xml) {
+        var image = new Image();
+        console.log("doing " + name);
+        image.onload = function() {
+          console.log("setting " + name + " = " + image);
+          realistic_rendering[name] = image;
+        }
+        image.src = 'data:image/svg+xml,' + xml;
+      })
+      */
+//      realistic_rendering = realistic_data;
+//    });
+
     // wait until page size is set (if they've specified one) and then scale SVGs to fit
     setTimeout(function() { scaleAllSvg() }, 500);
   });
@@ -288,16 +314,86 @@ $(function() {
     $('.modal').hide();
   });
 
-  //Checkbox
-  $(':checkbox').on('change initialize', function() {
+  // View selection checkboxes
+  $(':checkbox.view').on('change initialize', function() {
     var field_name = $(this).attr('data-field-name');
 
     $('.' + field_name).toggle($(this).prop('checked'));
     setPageNumbers();
   }).on('change', function() {
+    var field_name = $(this).attr('data-field-name');
     $.postJSON('/settings/' + field_name, {value: $(this).prop('checked')});
   });
 
+  // Realistic rendering checkboxes
+  $(':checkbox.realistic').on('change', function(e) {
+    console.log("realistic rendering checkbox");
+
+    var item = $(this).data('field-name');
+    var figure = $(this).closest('figure');
+    var svg = figure.find('svg');
+    var transform = svg.css('transform');
+    var checked = $(this).prop('checked');
+
+    console.log("" + item + " " + transform);
+
+    function finalize(svg_content) {
+      svg[0].outerHTML = svg_content;
+      // can't use the svg variable here because setting outerHTML created a new tag
+      figure.find('svg').css({transform: transform});
+    }
+
+    // do this later to allow this event handler to return now,
+    // which will cause the checkbox to be checked or unchecked
+    // immediately even if SVG rendering takes awhile
+    setTimeout(function() {
+      if (checked) {
+        if (!(item in normal_rendering)) {
+          normal_rendering[item] = svg[0].outerHTML;
+        }
+
+        if (!(item in realistic_cache)) {
+          // pre-render the realistic SVG to a raster image to spare the poor browser
+          var image = document.createElement('img');
+          image.onload = function() {
+            console.log("rendering!");
+            var canvas = document.createElement('canvas');
+
+            // maybe make DPI configurable?  for now, use 600
+            canvas.width = image.width / 96 * 600;
+            canvas.height = image.height / 96 * 600;
+
+            var ctx = canvas.getContext('2d');
+
+            // rendering slows down the browser enough that we can miss sending
+            // pings, so tell the server side to wait for us
+            $.get("/printing/start")
+             .done(function() {
+               ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
+               realistic_cache[item] = '<svg width=' + image.width + ' height=' + image.height + ' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
+                               '<image x=0 y=0 width=' + image.width + ' height=' + image.height + ' xlink:href="' + canvas.toDataURL() + '" />' +
+                               '</svg>';
+               finalize(realistic_cache[item]);
+               $.get("/printing/end");
+             });
+          };
+          image.src = '/realistic/' + item;
+        } else {
+          finalize(realistic_cache[item]);
+        }
+      } else {
+        finalize(normal_rendering[item]);
+      }
+    }, 100);
+
+    e.stopPropagation();
+    return true;
+  });
+
+  $('button.svg-realistic').click(function(e){
+    $(this).find('input').click();
+  });
+
   // Logo
   $('#logo-picker').change(function(e) {
       var file = e.originalEvent.currentTarget.files[0];
diff --git a/print/resources/style.css b/print/resources/style.css
index 58ec8714..716934a8 100644
--- a/print/resources/style.css
+++ b/print/resources/style.css
@@ -473,6 +473,28 @@ body {
     border: none;
     background: grey;
     color: white;
+    display: inline-block;
+    font-size: 16px;
+    font-family: "Barlow", sans-serif;
+    padding-left: 3px;
+    padding-right: 3px;
+    margin: 0px 1px 0px 1px;
+  }
+
+  input.realistic {
+    position: absolute;
+    transform: scale(0.7);
+    margin-left: 2px;
+  }
+
+  label.realistic {
+    margin-left: 20px;
+  }
+
+  /* prevents Chrome from sending a double event for the checkbox
+     and the containing <button> */
+  .realistic {
+    pointer-events: none;
   }
 
 /* Color Swatches */