From d4c95e080ffb80ceb6f10b663c7547b25689a840 Mon Sep 17 00:00:00 2001 From: Lex Neva Date: Sat, 21 Apr 2018 16:23:13 -0400 Subject: assign thread color names in printout --- print/resources/inkstitch.js | 29 ++++++++++++++--------------- print/templates/color_swatch.html | 18 +++++++++--------- print/templates/operator_detailedview.html | 13 ++++++------- 3 files changed, 29 insertions(+), 31 deletions(-) (limited to 'print') diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index 498b1211..4a4e4456 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -24,17 +24,17 @@ function setPageNumbers() { // Scale SVG (fit || full size) function scaleSVG(element, scale = 'fit') { - + // always center svg transform = "translate(-50%, -50%)"; - + if(scale == 'fit') { var scale = Math.min( - element.width() / element.find('svg').width(), + element.width() / element.find('svg').width(), element.height() / element.find('svg').height() ); } - + transform += " scale(" + scale + ")"; var label = parseInt(scale*100); @@ -71,17 +71,17 @@ function setSVGTransform(figure, transform) { $(function() { setTimeout(ping, 1000); setPageNumbers(); - + /* SCALING AND MOVING SVG */ - + /* Mousewheel scaling */ $('figure.inksimulation').on( 'DOMMouseScroll mousewheel', function (e) { if(e.ctrlKey == true) { - + var svg = $(this).find('svg'); var transform = svg.css('transform').match(/-?[\d\.]+/g); var scale = parseFloat(transform[0]); - + if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { // scroll down = zoom out scale *= 0.97; @@ -91,7 +91,7 @@ $(function() { //scroll up scale *= 1.03; } - + // set modified scale transform[0] = scale; transform[3] = scale; @@ -102,19 +102,19 @@ $(function() { return false; } }); - + /* Fit SVG */ $('button.svg-fit').click(function() { var svgfigure = $(this).closest('figure'); scaleSVG(svgfigure, 'fit'); }); - + /* Full Size SVG */ $('button.svg-full').click(function() { var svgfigure = $(this).closest('figure'); scaleSVG(svgfigure, '1'); }); - + /* Drag SVG */ $('figure.inksimulation').on('mousedown', function(e) { var p0 = { x: e.pageX, y: e.pageY }; @@ -141,7 +141,7 @@ $(function() { // set it using setSVGTransform() to ensure that it's saved to the server setSVGTransform($(this), $(this).find('svg').css('transform')); }); - + /* Apply transforms to All */ $('button.svg-apply').click(function() { var transform = $(this).parent().siblings('svg').css('transform'); @@ -154,7 +154,7 @@ $(function() { $('[contenteditable="true"]').on('focusout', function() { /* change svg scale */ - var content = $(this).html(); + var content = $.trim($(this).text()); var field_name = $(this).attr('data-field-name'); if(field_name == 'svg-scale') { var scale = parseInt(content); @@ -295,4 +295,3 @@ $(function() { $.postJSON('/defaults', {'value': settings}); }); }); - diff --git a/print/templates/color_swatch.html b/print/templates/color_swatch.html index 21cc0c21..6785b080 100644 --- a/print/templates/color_swatch.html +++ b/print/templates/color_swatch.html @@ -1,18 +1,18 @@ - + {% if printview != 'detailedview' %}
- {{ _('Color') }}: {{ color_block.color.thread_name }} + {{ _('Color') }}: {{ color_block.color.name }} {# We don't want to see rgb if we have more than 7 colorSwatches #} {% if color_blocks|length < 7 %} {{ _('rgb') }}: {{ color_block.color.rgb }} {% endif %} {# We don't want to see thread_used if we have more than 7 colorSwatches to show #} - {% if color_blocks|length < 7 %} - {{ _('thread used') }}: {{ color_block.color.thread_description }} + {% if color_blocks|length < 7 %} + {{ _('thread') }}: {{ color_block.color.manufacturer }} {{ "#" + color_block.color.number if color_block.color.number }} {% endif %} {# We don't want to see num_stitch if we have more than 49 colorSwatches to show #} {% if color_blocks|length < 49 %} @@ -27,9 +27,9 @@
- + {% else %} - +
@@ -37,9 +37,9 @@
-

{{ _('Color') }}:{{ color_block.color.thread_name }}

+

{{ _('Color') }}:{{ color_block.color.name }}

{{ _('rgb') }}:{{ color_block.color.rgb }}

-

{{ _('thread used') }}:{{ color_block.color.thread_description }}

+

{{ _('thread') }}:{{ color_block.color.manufacturer }} {{ "#" + color_block.color.number if color_block.color.number }}

{{ _('# stitches') }}:{{ color_block.num_stitches }}

{{ _('# stops') }}:{{ color_block.num_stops }}

{{ _('# trims') }}:{{ color_block.num_trims }}

@@ -47,5 +47,5 @@
- + {%endif %} diff --git a/print/templates/operator_detailedview.html b/print/templates/operator_detailedview.html index f78028d7..0b948cb0 100644 --- a/print/templates/operator_detailedview.html +++ b/print/templates/operator_detailedview.html @@ -1,7 +1,7 @@
{% include 'headline.html' %}
- +
@@ -39,7 +39,7 @@
{% endif %} {% for color_block in color_block_part %} - +

@@ -53,11 +53,12 @@ {{ color_block.svg_preview|safe }}

- {{ color_block.color.thread_name }} + {{ color_block.color.name }} {{ color_block.color.rgb }} + {{ color_block.color.manufacturer }} {{ "#" + color_block.color.number if color_block.color.number }}

- {{ _('thread used') }}: {{ color_block.color.thread_description }} + {{ _('thread used') }}: {{ _('# stitches') }}: {{ color_block.num_stitches }}

@@ -71,7 +72,5 @@ {% endfor %}

- + {% include 'footer.html' %} - - -- cgit v1.2.3 From c234d6ed2c7d8cd7b7991643dbec4383bed9e2dc Mon Sep 17 00:00:00 2001 From: Lex Neva Date: Mon, 23 Apr 2018 23:12:48 -0400 Subject: UI to select different thread paette --- print/resources/inkstitch.js | 22 +++++++++++++++- print/resources/style.css | 30 +++++++++++++++++++--- print/templates/ui.html | 61 ++++++++++++++++++++++++++++++++------------ 3 files changed, 92 insertions(+), 21 deletions(-) (limited to 'print') diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index 4a4e4456..60d17f61 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -154,7 +154,7 @@ $(function() { $('[contenteditable="true"]').on('focusout', function() { /* change svg scale */ - var content = $.trim($(this).text()); + var content = $(this).html(); var field_name = $(this).attr('data-field-name'); if(field_name == 'svg-scale') { var scale = parseInt(content); @@ -255,6 +255,26 @@ $(function() { $.postJSON('/settings/paper-size', {value: size}); }); + // Thread Palette + $('select#thread-palette').change(function(){ + $('.modal').show(); + }).on('update', function() { + $(this).data('current-value', $(this).find(':selected').val()); + console.log("selected: " + $(this).data('current-value')); + }).trigger('update'); + + $('#modal-yes').on('click', function(){ + // do shit with the newly-selected palette... + $("select#thread-palette").trigger("update"); + $('.modal').hide(); + }); + + $('#modal-no').on('click', function(){ + var select = $("select#thread-palette"); + select.find('[value="' + select.data('current-value') + '"]').prop('selected', true); + $('.modal').hide(); + }); + //Checkbox $(':checkbox').change(function() { var checked = $(this).prop('checked'); diff --git a/print/resources/style.css b/print/resources/style.css index 97dee6a8..58ec8714 100644 --- a/print/resources/style.css +++ b/print/resources/style.css @@ -214,9 +214,6 @@ body { border-bottom: 1px solid rgb(188, 188, 188); border-bottom: 1px solid rgba(129, 129, 129, 0.5); box-shadow: 0 1px 1px 1px rgba(194, 191, 191, 0.5); - } - - #settings-ui div { text-align: left; font-size: 12pt; } @@ -238,6 +235,33 @@ body { margin-bottom: 1em; } + #modal-background { + display: none; + z-index: 3; + position: fixed; + background: black; + opacity: 0.5; + width: 100%; + height: 100%; + top: 0; + left: 0; + } + + #modal-content { + display: none; + z-index: 4; + position: fixed; + width: 50%; + height: 25%%; + top: 200px; + left: 25%; + background: rgb(255, 255, 255); + border-bottom: 1px solid rgb(188, 188, 188); + box-shadow: 0 1px 1px 1px rgb(194, 191, 191); + text-align: center; + font-size: 16pt; + } + /* Header */ diff --git a/print/templates/ui.html b/print/templates/ui.html index f7246962..112a342e 100644 --- a/print/templates/ui.html +++ b/print/templates/ui.html @@ -9,26 +9,53 @@ {{ _('⚠ lost connection to Ink/Stitch') }}
- +

X

{{ _('Settings') }}

-
-

{{ _('Printing Size') }}: - + + + +

+
+
+
+ {{ _('Print Layouts') }} +

+

+

+

+
+ +
+ +
+ {{ _('Design') }} +

{{ _('Thread Palette') }}: +

-
-
-
- {{ _('Print Layouts') }}: -

-

-

-

-
- -
+ + + + +
+

+ {{ _("Changing the thread palette will cause thread names and catalog numbers to be recalculated based on the new palette. Any changes you have made to color or thread names will be lost. Are you sure?") }} +

+

+ + +

-- cgit v1.2.3 From 8608508e0237b06bea5aac7558c695fd7bc8492b Mon Sep 17 00:00:00 2001 From: Lex Neva Date: Tue, 24 Apr 2018 00:22:45 -0400 Subject: allow selection of a different thread palette --- print/resources/inkstitch.js | 38 +++++++++++++++++++++++++------------- 1 file changed, 25 insertions(+), 13 deletions(-) (limited to 'print') diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index 60d17f61..daa2cf4b 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -178,11 +178,11 @@ $(function() { $('[data-field-name="' + field_name + '"]').each(function(i, item) { var item = $(item); if (item.is(':checkbox')) { - item.prop('checked', value).trigger('change'); + item.prop('checked', value).trigger('initialize'); } else if (item.is('img')) { item.attr('src', value); } else if (item.is('select')) { - item.val(value).trigger('change'); + item.val(value).trigger('initialize'); } else if (item.is('figure.inksimulation')) { setSVGTransform(item, value); } else { @@ -249,10 +249,10 @@ $(function() { /* Settings */ // Paper Size - $('select#printing-size').change(function(){ - var size = $(this).find(':selected').val(); - $('.page').toggleClass('a4', size == 'a4'); - $.postJSON('/settings/paper-size', {value: 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()}); }); // Thread Palette @@ -260,13 +260,26 @@ $(function() { $('.modal').show(); }).on('update', function() { $(this).data('current-value', $(this).find(':selected').val()); - console.log("selected: " + $(this).data('current-value')); }).trigger('update'); $('#modal-yes').on('click', function(){ - // do shit with the newly-selected palette... $("select#thread-palette").trigger("update"); $('.modal').hide(); + var body = {'name': $('select#thread-palette').find(':selected').val()}; + $.postJSON('/palette', body, function() { + $.getJSON('/threads', function(threads) { + console.log("threads: " + JSON.stringify(threads)); + $.each(threads, function(i, thread) { + console.log("doing: " + JSON.stringify(thread)); + $('[data-field-name="color-' + thread.hex + '"]').text(thread.name); + var thread_description = thread.manufacturer; + if (thread.number) { + thread_description += " #" + thread.number; + } + $('[data-field-name="thread-' + thread.hex + '"]').text(thread_description); + }); + }); + }); }); $('#modal-no').on('click', function(){ @@ -276,14 +289,13 @@ $(function() { }); //Checkbox - $(':checkbox').change(function() { - var checked = $(this).prop('checked'); + $(':checkbox').on('change initialize', function() { var field_name = $(this).attr('data-field-name'); - $('.' + field_name).toggle(checked); + $('.' + field_name).toggle($(this).prop('checked')); setPageNumbers(); - - $.postJSON('/settings/' + field_name, {value: checked}); + }).on('change', function() { + $.postJSON('/settings/' + field_name, {value: $(this).prop('checked')}); }); // Logo -- cgit v1.2.3