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 From bb6b05bc002767630f08372a70a400a2ad099b85 Mon Sep 17 00:00:00 2001 From: Lex Neva Date: Tue, 19 Jun 2018 20:39:52 -0400 Subject: fix close button when connection to ink/stitch is lost --- print/resources/inkstitch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'print/resources/inkstitch.js') diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index 4a757d5f..e9ee3e0f 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -237,7 +237,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 -- cgit v1.2.3 From e1f6ecce63617b0f8931e8a5728bc0ff6bc5e93c Mon Sep 17 00:00:00 2001 From: Lex Neva Date: Tue, 19 Jun 2018 20:40:09 -0400 Subject: remove commented-out code --- print/resources/inkstitch.js | 16 ---------------- 1 file changed, 16 deletions(-) (limited to 'print/resources/inkstitch.js') diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index e9ee3e0f..6bcb183d 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -200,22 +200,6 @@ $(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); }); -- cgit v1.2.3 From d4c4f2c7cc947eea71d99ef6030ecb4401508835 Mon Sep 17 00:00:00 2001 From: Kaalleen <36401965+kaalleen@users.noreply.github.com> Date: Thu, 12 Jul 2018 21:16:22 +0200 Subject: operator detailedview dynamic thumbnail size (#221) --- print/resources/inkstitch.js | 126 ++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 119 insertions(+), 7 deletions(-) (limited to 'print/resources/inkstitch.js') diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index 6bcb183d..9f67bc90 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -17,6 +17,85 @@ function ping() { .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.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; @@ -46,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'); + } } }); } @@ -74,8 +155,6 @@ function setSVGTransform(figure, transform) { $(function() { setTimeout(ping, 1000); - setPageNumbers(); - /* SCALING AND MOVING SVG */ /* Mousewheel scaling */ @@ -192,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 { @@ -200,8 +282,11 @@ $(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) { @@ -258,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(){ @@ -303,6 +413,7 @@ $(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'); @@ -397,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'); -- cgit v1.2.3