1 files changed, 202 insertions, 10 deletions

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 67690df2..9f67bc90 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -7,12 +7,95 @@ $.postJSON = function(url, data, success=null) {
                        });
 };
 
+var realistic_rendering = {};
+var realistic_cache = {};
+var normal_rendering = {};
+
 function ping() {
   $.get("/ping")
    .done(function() { setTimeout(ping, 1000) })
    .fail(function() { $('#errors').attr('class', 'show') });
 }
 
+//function to chunk opd view into pieces 
+  // source: https://stackoverflow.com/questions/3366529/wrap-every-3-divs-in-a-div
+$.fn.chunk = function(size) {
+  var arr = [];
+  for (var i = 0; i < this.length; i += size) {
+    arr.push(this.slice(i, i + size));
+  }
+  return this.pushStack(arr, "chunk", size);
+}
+
+// build operator detailed view (opd)
+function buildOpd(thumbnail_size = $('#operator-detailedview-thumbnail-size').val() ) {
+
+  var thumbnail_size    = parseInt(thumbnail_size);
+  var thumbnail_size_mm = thumbnail_size  + 'mm';
+  
+  var thumbnail_layout  = (thumbnail_size >= 60) ? 'medium' : 'small';
+  
+  // remove old settings
+  $( "div.page.operator-detailedview header" ).remove();
+  $( "div.page.operator-detailedview footer" ).remove();
+  $( "div.page.operator-detailedview .job-headline" ).remove();
+  $('div.page.operator-detailedview .opd-color-block').parentsUntil('div.page.operator-detailedview').addBack().unwrap();
+  $('.opd-color-block').removeClass('medium large');
+  $('.opd-color-block').removeAttr('style');
+  
+  // set thumbnail size
+  $('.operator-svg.operator-preview').css({
+      'width': thumbnail_size_mm, 
+      'height': thumbnail_size_mm,
+      'max-width': thumbnail_size_mm
+  });
+  
+  // calculate number of blocks per page
+  var num_blocks_per_page = 1;
+  if(thumbnail_layout == 'medium') {
+    $('.opd-color-block').addClass('medium');
+    // set width to be able to calculate the height
+    $('.opd-color-block').css({ 'width': thumbnail_size_mm });
+    // calculate max height -> source: https://stackoverflow.com/questions/6060992/element-with-the-max-height-from-a-set-of-elements
+    var color_box_height = Math.max.apply(null, $('.opd-color-block').map(function () { return $(this).height(); }).get());
+    var container_height = $('#opd-info').height();
+    var num_rows = Math.floor(container_height / color_box_height);
+    var num_columns = Math.floor(175 / thumbnail_size);
+    // if only two blocks fit into one row, use 50% of the space for each of them
+    if(num_columns == 2) { $('.opd-color-block').css({ 'width': 'calc(50% - 2mm)' }); }
+    // set equal height for all color blocks
+    $('.opd-color-block').css({ 'height': color_box_height });
+    // set number of color blocks per page for medium thumbnails
+    num_blocks_per_page = num_columns * num_rows;
+    // use layout for large thumbnails if only 2 or less color blocks fit on one page
+    if(num_blocks_per_page <= 2) { 
+      $('.opd-color-block').removeClass('medium').removeAttr('style').addClass('large');
+      thumbnail_layout = 'large';
+      // set number of color blocks per page for large thumbnails
+      num_blocks_per_page = 2;
+    }
+  } else {
+    // set number of color blocks per page for small thumbnails
+    num_blocks_per_page = Math.floor(220 / thumbnail_size);
+  }
+  // set number of color blocks per page to 1 if it defaults to zero
+    // this should never happen, but we want to avoid the browser to crash 
+  num_blocks_per_page = (num_blocks_per_page <= 0) ? '1' : num_blocks_per_page;
+  
+  // adjust to new settings
+  var header = $('#opd-info header').prop('outerHTML');
+  var footer = $('#opd-info footer').prop('outerHTML');
+  var job_headline = $('#opd-info .job-headline').prop('outerHTML');
+  var opd_visibility = ($('#operator-detailedview').is(':checked')) ? 'block' :'none';
+  var paper_size = $('#printing-size').val();
+  $('.opd-color-block').chunk(num_blocks_per_page).wrap('<div class="page operator-detailedview ' + paper_size + ' ' + thumbnail_layout +'" style="display:'+ opd_visibility +'"><main class="operator-detailedview"><div class="operator-job-info"></div></main></div>');
+  $('div.operator-detailedview').prepend(header);
+  $('.operator-job-info').prepend(job_headline);
+  $('div.operator-detailedview').append(footer);
+  // update page numbers
+  setPageNumbers();
+}
+
 // set pagenumbers
 function setPageNumbers() {
   var totalPageNum = $('body').find('.page:visible').length;
@@ -42,11 +125,13 @@ function scaleSVG(element, scale = 'fit') {
   element.find('.scale').text(label);
 }
 
-// set preview svg scale to fit into its box if transform is not set
+// set preview svg scale to fit into its box if display block and transform is not set
 function scaleAllSvg() {
     $('.page').each(function() {
-      if( $(this).find('.inksimulation svg').css('transform') == 'none') {
-        scaleSVG($(this).find('.inksimulation'), 'fit');
+      if( $(this).css('display') == 'block' ) {
+        if( $(this).find('.inksimulation svg').css('transform') == 'none') {
+          scaleSVG($(this).find('.inksimulation'), 'fit');
+        }
       }
     });
 }
@@ -70,8 +155,6 @@ function setSVGTransform(figure, transform) {
 
 $(function() {
   setTimeout(ping, 1000);
-  setPageNumbers();
-
   /* SCALING AND MOVING SVG  */
 
   /* Mousewheel scaling */
@@ -142,6 +225,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');
@@ -183,6 +271,9 @@ $(function() {
                 item.attr('src', value);
             } else if (item.is('select')) {
                 item.val(value).trigger('initialize');
+            } else if (item.is('input[type=range]')) {
+                item.val(value).trigger('initialize');
+                $('#display-thumbnail-size').html(value + 'mm');
             } else if (item.is('figure.inksimulation')) {
                 setSVGTransform(item, value);
             } else {
@@ -190,8 +281,12 @@ $(function() {
             }
         });
     });
-    // wait until page size is set (if they've specified one) and then scale SVGs to fit
-    setTimeout(function() { scaleAllSvg() }, 500);
+
+    // wait until page size is set (if they've specified one) and then scale SVGs to fit and build operator detailed view
+    setTimeout(function() { 
+      scaleAllSvg();
+      buildOpd();
+    }, 500);
   });
 
   $('[contenteditable="true"]').keypress(function(e) {
@@ -211,7 +306,7 @@ $(function() {
 
   $('button.close').click(function() {
     $.post('/shutdown', {})
-     .done(function(data) {
+     .always(function(data) {
        window.close();
 
        /* Chrome and Firefox both have a rule: scripts can only close windows
@@ -248,12 +343,37 @@ $(function() {
 
   /* Settings */
 
+  // Settings Tabs
+  $('#tabs button').click(function() {
+    var active_fieldset_position = $(this).index() +1;
+    $('#settings-ui #fieldsets-ui > fieldset').css({'display': 'none'});
+    $('#settings-ui #fieldsets-ui > fieldset:nth-child('+active_fieldset_position+')').css({'display': 'block'});
+    $('#tabs .tab.active').removeClass("active");
+    $(this).addClass("active");
+  });
+
   // Paper Size
   $('select#printing-size').on('change initialize', function(){
     $('.page').toggleClass('a4', $(this).find(':selected').val() == 'a4');
   }).on('change', function() {
     $.postJSON('/settings/paper-size', {value: $(this).find(':selected').val()});
   });
+  
+  // Operator detailed view: thumbnail size setting
+  $(document).on('input', '#operator-detailedview-thumbnail-size', function() {
+    var thumbnail_size_mm = $(this).val()  + 'mm';
+    $('#display-thumbnail-size').html( thumbnail_size_mm );
+  });
+   
+  // Operator detailed view: thumbnail size setting action
+  $('#operator-detailedview-thumbnail-size').change(function() {
+    // set thumbnail size
+    var thumbnail_size = $(this).val();
+    // set page break positions
+    buildOpd(thumbnail_size);
+    
+    $.postJSON('/settings/operator-detailedview-thumbnail-size', {value: thumbnail_size});
+  });
 
   // Thread Palette
   $('select#thread-palette').change(function(){
@@ -288,16 +408,87 @@ $(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'));
+    scaleAllSvg();
     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];
@@ -317,6 +508,7 @@ $(function() {
       settings["client-detailedview"] = $("[data-field-name='client-detailedview']").is(':checked');
       settings["operator-overview"] = $("[data-field-name='operator-overview']").is(':checked');
       settings["operator-detailedview"] = $("[data-field-name='operator-detailedview']").is(':checked');
+      settings["operator-detailedview-thumbnail-size"] = $("[data-field-name='operator-detailedview-thumbnail-size']").val();
       settings["paper-size"] = $('select#printing-size').find(':selected').val();
 
       var logo = $("figure.brandlogo img").attr('src');