From ea6b89581ea35acbcf3afa9e424210212be5f1a6 Mon Sep 17 00:00:00 2001 From: Lex Neva Date: Sun, 3 Jun 2018 15:57:25 -0400 Subject: fix latent bug preventing saving checkbox values --- print/resources/inkstitch.js | 1 + 1 file changed, 1 insertion(+) (limited to 'print/resources/inkstitch.js') diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index 67690df2..e5065fe6 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -295,6 +295,7 @@ $(function() { $('.' + 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')}); }); -- cgit v1.2.3 From f10393989bdd2e7dd1056930ba060aab3870a592 Mon Sep 17 00:00:00 2001 From: Lex Neva Date: Sun, 3 Jun 2018 23:24:26 -0400 Subject: realistic rendering checkboxes --- print/resources/inkstitch.js | 54 ++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 52 insertions(+), 2 deletions(-) (limited to 'print/resources/inkstitch.js') diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index e5065fe6..bb140705 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -7,6 +7,9 @@ $.postJSON = function(url, data, success=null) { }); }; +var realistic_rendering = {}; +var normal_rendering = {}; + function ping() { $.get("/ping") .done(function() { setTimeout(ping, 1000) }) @@ -142,6 +145,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 +198,12 @@ $(function() { } }); }); + + $.getJSON('/realistic', function(realistic_data) { + // realistic_rendering is global + 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,8 +302,8 @@ $(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')); @@ -299,6 +313,42 @@ $(function() { $.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); + + // 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; + } + svg[0].outerHTML = realistic_rendering[item]; + } else { + svg[0].outerHTML = normal_rendering[item]; + } + // can't use the svg variable here because setting outerHTML created a new tag + figure.find('svg').css({transform: transform}); + }, 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]; -- cgit v1.2.3 From fb273a6daa0654a48ca609eef470343733878146 Mon Sep 17 00:00:00 2001 From: Lex Neva Date: Fri, 8 Jun 2018 23:16:08 -0400 Subject: rasterize realistic SVGs at 600dpi --- print/resources/inkstitch.js | 59 ++++++++++++++++++++++++++++++++++++++------ 1 file changed, 52 insertions(+), 7 deletions(-) (limited to 'print/resources/inkstitch.js') diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index bb140705..4a757d5f 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -8,6 +8,7 @@ $.postJSON = function(url, data, success=null) { }; var realistic_rendering = {}; +var realistic_cache = {}; var normal_rendering = {}; function ping() { @@ -199,10 +200,21 @@ $(function() { }); }); - $.getJSON('/realistic', function(realistic_data) { +// $.getJSON('/realistic', function(realistic_data) { // realistic_rendering is global - realistic_rendering = realistic_data; - }); + /* + $.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); @@ -325,6 +337,12 @@ $(function() { 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 @@ -333,12 +351,39 @@ $(function() { if (!(item in normal_rendering)) { normal_rendering[item] = svg[0].outerHTML; } - svg[0].outerHTML = realistic_rendering[item]; + + 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] = '' + + '' + + ''; + finalize(realistic_cache[item]); + $.get("/printing/end"); + }); + }; + image.src = '/realistic/' + item; + } else { + finalize(realistic_cache[item]); + } } else { - svg[0].outerHTML = normal_rendering[item]; + finalize(normal_rendering[item]); } - // can't use the svg variable here because setting outerHTML created a new tag - figure.find('svg').css({transform: transform}); }, 100); e.stopPropagation(); -- cgit v1.2.3