From 4c986117bfe1f2caa8280d4b0ddbeec69f41b18d Mon Sep 17 00:00:00 2001 From: Lex Neva Date: Sat, 26 May 2018 21:26:40 -0400 Subject: first attempt at realistic rendering --- lib/extensions/print_pdf.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib/extensions') diff --git a/lib/extensions/print_pdf.py b/lib/extensions/print_pdf.py index baeb7eba..43e53318 100644 --- a/lib/extensions/print_pdf.py +++ b/lib/extensions/print_pdf.py @@ -119,7 +119,7 @@ class PrintPreviewServer(Thread): def start_watcher(): self.watcher_thread = Thread(target=self.watch) self.watcher_thread.daemon = True - self.watcher_thread.start() + #self.watcher_thread.start() @self.app.route('/') def index(): -- cgit v1.3.1 From ae286b17ad450c530d1822208cce75db3bd3faf2 Mon Sep 17 00:00:00 2001 From: Lex Neva Date: Wed, 30 May 2018 22:25:43 -0400 Subject: refactor print_pdf and generate realistic previews --- lib/extensions/print_pdf.py | 86 ++++++++++++++++++++++++++++----------------- 1 file changed, 54 insertions(+), 32 deletions(-) (limited to 'lib/extensions') diff --git a/lib/extensions/print_pdf.py b/lib/extensions/print_pdf.py index 43e53318..91562c09 100644 --- a/lib/extensions/print_pdf.py +++ b/lib/extensions/print_pdf.py @@ -21,7 +21,7 @@ import requests from .base import InkstitchExtension from ..i18n import _, translation as inkstitch_translation from ..svg import PIXELS_PER_MM, render_stitch_plan -from ..svg.tags import SVG_GROUP_TAG +from ..svg.tags import SVG_GROUP_TAG, INKSCAPE_GROUPMODE from ..stitch_plan import patches_to_stitch_plan from ..threads import ThreadCatalog @@ -94,6 +94,8 @@ class PrintPreviewServer(Thread): self.html = kwargs.pop('html') self.metadata = kwargs.pop('metadata') self.stitch_plan = kwargs.pop('stitch_plan') + self.realistic_overview_svg = kwargs.pop('realistic_overview_svg') + self.realistic_color_block_svgs = kwargs.pop('realistic_color_block_svgs') Thread.__init__(self, *args, **kwargs) self.daemon = True self.last_request_time = None @@ -119,7 +121,7 @@ class PrintPreviewServer(Thread): def start_watcher(): self.watcher_thread = Thread(target=self.watch) self.watcher_thread.daemon = True - #self.watcher_thread.start() + self.watcher_thread.start() @self.app.route('/') def index(): @@ -202,6 +204,13 @@ class PrintPreviewServer(Thread): return jsonify(threads) + @self.app.route('/realistic', methods=['GET']) + def get_realistic(): + return jsonify({ + 'overview': self.realistic_overview_svg, + 'color_blocks': self.realistic_color_block_svgs + }) + def stop(self): # for whatever reason, shutting down only seems possible in # the context of a flask request, so we'll just make one @@ -295,38 +304,24 @@ class Print(InkstitchExtension): return env - def strip_namespaces(self): + def strip_namespaces(self, svg): # namespace prefixes seem to trip up HTML, so get rid of them - for element in self.document.iter(): + for element in svg.iter(): if element.tag[0]=='{': element.tag = element.tag[element.tag.index('}',1) + 1:] - def effect(self): - # It doesn't really make sense to print just a couple of selected - # objects. It's almost certain they meant to print the whole design. - # If they really wanted to print just a few objects, they could set - # the rest invisible temporarily. - self.selected = {} + def render_svgs(self, stitch_plan, realistic=False): + svg = deepcopy(self.document).getroot() + render_stitch_plan(svg, stitch_plan, realistic) - if not self.get_elements(): - return - - self.hide_all_layers() - - patches = self.elements_to_patches(self.elements) - stitch_plan = patches_to_stitch_plan(patches) - palette = ThreadCatalog().match_and_apply_palette(stitch_plan, self.get_inkstitch_metadata()['thread-palette']) - render_stitch_plan(self.document.getroot(), stitch_plan) - - self.strip_namespaces() + self.strip_namespaces(svg) # Now the stitch plan layer will contain a set of groups, each # corresponding to a color block. We'll create a set of SVG files # corresponding to each individual color block and a final one # for all color blocks together. - svg = self.document.getroot() - layers = svg.findall("./g[@{http://www.inkscape.org/namespaces/inkscape}groupmode='layer']") + layers = svg.findall("./g[@%s='layer']" % INKSCAPE_GROUPMODE) stitch_plan_layer = svg.find(".//*[@id='__inkstitch_stitch_plan__']") # First, delete all of the other layers. We don't need them and they'll @@ -335,9 +330,9 @@ class Print(InkstitchExtension): if layer is not stitch_plan_layer: svg.remove(layer) - overview_svg = inkex.etree.tostring(self.document) - + overview_svg = inkex.etree.tostring(svg) color_block_groups = stitch_plan_layer.getchildren() + color_block_svgs = [] for i, group in enumerate(color_block_groups): # clear the stitch plan layer @@ -347,12 +342,15 @@ class Print(InkstitchExtension): stitch_plan_layer.append(group) # save an SVG preview - stitch_plan.color_blocks[i].svg_preview = inkex.etree.tostring(self.document) + color_block_svgs.append(inkex.etree.tostring(svg)) + + return overview_svg, color_block_svgs + def render_html(self, stitch_plan, overview_svg, selected_palette): env = self.build_environment() template = env.get_template('index.html') - html = template.render( + return template.render( view = {'client_overview': False, 'client_detailedview': False, 'operator_overview': True, 'operator_detailedview': True}, logo = {'src' : '', 'title' : 'LOGO'}, date = date.today(), @@ -371,14 +369,38 @@ class Print(InkstitchExtension): svg_overview = overview_svg, color_blocks = stitch_plan.color_blocks, palettes = ThreadCatalog().palette_names(), - selected_palette = palette, + selected_palette = selected_palette, ) - # We've totally mucked with the SVG. Restore it so that we can save - # metadata into it. - self.document = deepcopy(self.original_document) + def effect(self): + # It doesn't really make sense to print just a couple of selected + # objects. It's almost certain they meant to print the whole design. + # If they really wanted to print just a few objects, they could set + # the rest invisible temporarily. + self.selected = {} + + if not self.get_elements(): + return + + patches = self.elements_to_patches(self.elements) + stitch_plan = patches_to_stitch_plan(patches) + palette = ThreadCatalog().match_and_apply_palette(stitch_plan, self.get_inkstitch_metadata()['thread-palette']) + + overview_svg, color_block_svgs = self.render_svgs(stitch_plan, realistic=False) + realistic_overview_svg, realistic_color_block_svgs = self.render_svgs(stitch_plan, realistic=True) + + for i, svg in enumerate(color_block_svgs): + stitch_plan.color_blocks[i].svg_preview = svg + + html = self.render_html(stitch_plan, overview_svg, palette) - print_server = PrintPreviewServer(html=html, metadata=self.get_inkstitch_metadata(), stitch_plan=stitch_plan) + print_server = PrintPreviewServer( + html=html, + metadata=self.get_inkstitch_metadata(), + stitch_plan=stitch_plan, + realistic_overview_svg=realistic_overview_svg, + realistic_color_block_svgs=realistic_color_block_svgs + ) print_server.start() time.sleep(1) -- cgit v1.3.1 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 --- lib/extensions/print_pdf.py | 8 ++--- print/resources/inkstitch.js | 54 ++++++++++++++++++++++++++++++++-- print/resources/style.css | 22 ++++++++++++++ print/templates/operator_overview.html | 4 +++ print/templates/print_detail.html | 7 +++-- print/templates/print_overview.html | 12 +++++--- print/templates/ui.html | 8 ++--- 7 files changed, 99 insertions(+), 16 deletions(-) (limited to 'lib/extensions') diff --git a/lib/extensions/print_pdf.py b/lib/extensions/print_pdf.py index 91562c09..3dcb2743 100644 --- a/lib/extensions/print_pdf.py +++ b/lib/extensions/print_pdf.py @@ -206,10 +206,10 @@ class PrintPreviewServer(Thread): @self.app.route('/realistic', methods=['GET']) def get_realistic(): - return jsonify({ - 'overview': self.realistic_overview_svg, - 'color_blocks': self.realistic_color_block_svgs - }) + realistic = { 'overview': self.realistic_overview_svg } + for i, svg in enumerate(self.realistic_color_block_svgs): + realistic["block%d" % i] = svg + return jsonify(realistic) def stop(self): # for whatever reason, shutting down only seems possible in 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]; 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 + diff --git a/print/templates/print_detail.html b/print/templates/print_detail.html index 714d33a2..e73fe918 100644 --- a/print/templates/print_detail.html +++ b/print/templates/print_detail.html @@ -22,9 +22,12 @@ + - - +
{% include 'color_swatch.html' %}
diff --git a/print/templates/print_overview.html b/print/templates/print_overview.html index efcf5b2e..b42ab7a9 100644 --- a/print/templates/print_overview.html +++ b/print/templates/print_overview.html @@ -32,14 +32,18 @@ + - - + +
{% for color_block in color_blocks %} {% include 'color_swatch.html' %} - {% endfor %} - + {% endfor %} +
{{ _('Client Signature') }}
diff --git a/print/templates/ui.html b/print/templates/ui.html index b09dc941..3b11f345 100644 --- a/print/templates/ui.html +++ b/print/templates/ui.html @@ -26,10 +26,10 @@
{{ _('Print Layouts') }} -

-

-

-

+

+

+

+

-- cgit v1.3.1 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 --- lib/extensions/print_pdf.py | 13 +++++----- print/resources/inkstitch.js | 59 ++++++++++++++++++++++++++++++++++++++------ 2 files changed, 59 insertions(+), 13 deletions(-) (limited to 'lib/extensions') diff --git a/lib/extensions/print_pdf.py b/lib/extensions/print_pdf.py index 3dcb2743..6e2eff58 100644 --- a/lib/extensions/print_pdf.py +++ b/lib/extensions/print_pdf.py @@ -204,12 +204,13 @@ class PrintPreviewServer(Thread): return jsonify(threads) - @self.app.route('/realistic', methods=['GET']) - def get_realistic(): - realistic = { 'overview': self.realistic_overview_svg } - for i, svg in enumerate(self.realistic_color_block_svgs): - realistic["block%d" % i] = svg - return jsonify(realistic) + @self.app.route('/realistic/block', methods=['GET']) + def get_realistic_block(index): + return Response(self.realistic_color_block_svgs[index], mimetype='image/svg+xml') + + @self.app.route('/realistic/overview', methods=['GET']) + def get_realistic_overview(): + return Response(self.realistic_overview_svg, mimetype='image/svg+xml') def stop(self): # for whatever reason, shutting down only seems possible in 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.3.1 From ba9b50ab861087d094ee3f85324c65092c1b9f78 Mon Sep 17 00:00:00 2001 From: Lex Neva Date: Sat, 9 Jun 2018 21:23:21 -0400 Subject: fix latent bug in base.py --- lib/extensions/base.py | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'lib/extensions') diff --git a/lib/extensions/base.py b/lib/extensions/base.py index ff587ca5..52321cfc 100644 --- a/lib/extensions/base.py +++ b/lib/extensions/base.py @@ -63,10 +63,10 @@ class InkStitchMetadata(MutableMapping): else: item.getparent().remove(item) - def _find_item(self, name): + def _find_item(self, name, create=True): tag = inkex.addNS(name, "inkstitch") item = self.metadata.find(tag) - if item is None: + if item is None and create: item = inkex.etree.SubElement(self.metadata, tag) return item @@ -80,9 +80,9 @@ class InkStitchMetadata(MutableMapping): return None def __delitem__(self, name): - item = self._find_item(name) + item = self._find_item(name, create=False) - if item: + if item is not None: self.metadata.remove(item) def __iter__(self): -- cgit v1.3.1