From 98612eeae37ac5dee611f4607244da7c613c08e9 Mon Sep 17 00:00:00 2001 From: Kaalleen <36401965+kaalleen@users.noreply.github.com> Date: Wed, 31 Oct 2018 01:06:31 +0100 Subject: [PATCH] Print Estimated Time (#341) --- print/resources/inkstitch.js | 231 ++++++++++++++------- print/resources/style.css | 16 +- print/templates/color_swatch.html | 6 +- print/templates/headline.html | 2 +- print/templates/operator_detailedview.html | 23 +- print/templates/operator_overview.html | 6 +- print/templates/print_detail.html | 6 +- print/templates/print_overview.html | 4 +- print/templates/ui.html | 38 +++- 9 files changed, 227 insertions(+), 105 deletions(-) diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index fcc3cb130..a0d61f3c2 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -100,11 +100,56 @@ function buildOpd(thumbnail_size = $('#operator-detailedview-thumbnail-size').va function setPageNumbers() { var totalPageNum = $('body').find('.page:visible').length; $('span.total-page-num').text(totalPageNum); - $( '.page:visible span.page-num' ).each(function( index ) { + $('.page:visible span.page-num').each(function( index ) { $(this).text(index + 1); }); } +// Calculate estimated time +function setEstimatedTime() { + var speed = Math.floor($('#machine-speed').val() / 60); // convert to seconds + speed = (speed <= 0) ? 1 : speed; + var timeTrim = ($('#time-trims').val() == '') ? 0 : parseInt($('#time-trims').val()); + var addToTotal = ($('#time-additional').val() == '') ? 0 : parseInt($('#time-additional').val()); + var timeColorChange = ($('#time-color-change').val() == '') ? 0 : parseInt($('#time-color-change').val()); + + // operator detailed view + $('.estimated-time').each(function(index, item) { + var selector = $(this); + var stitchCount = parseInt($(selector).closest('p').find('.num-stitches').text().match(/\d+/)); + var numTrims = parseInt($( selector ).closest('div').find('p span.num-trims').text().match(/\d+/)); + var estimatedTime = stitchCount/speed + (timeTrim * numTrims); + writeEstimatedTime( selector, estimatedTime ); + }); + + // client detailed view + $('.cld-estimated-time').each(function(index, item) { + var selector = $(this); + var stitchCount = parseInt($(selector).closest('div.page').find('main .detailed .color-info span.num-stitches').text().match(/\d+/)); + var numTrims = parseInt($( selector ).closest('div.page').find('main .detailed .color-info span.num-trims').text().match(/\d+/)); + var estimatedTime = stitchCount/speed + (timeTrim * numTrims); + writeEstimatedTime( selector, estimatedTime ); + }); + + var stitchCount = parseInt($('.total-num-stitches').first().text().match(/\d+/)); + var numTrims = parseInt($('.total-trims').first().text().match(/\d+/)); + var numColorBlocks = parseInt($('.num-color-blocks').first().text().match(/\d+/))-1; // the last color-block is not a color change + var selector = '.total-estimated-time'; + var estimatedTime = stitchCount/speed + (timeTrim * numTrims) + (timeColorChange * numColorBlocks) + addToTotal; + writeEstimatedTime( selector, estimatedTime ); +} + +function attachLeadingZero(n) { + return (n < 10) ? ("0" + n) : n; +} + +function writeEstimatedTime( selector, estimatedTime ) { + var hours = attachLeadingZero(Math.floor(estimatedTime / 3600)); + var minutes = attachLeadingZero(Math.floor((estimatedTime - (hours*3600)) / 60)); + var seconds = attachLeadingZero(Math.floor(estimatedTime % 60)); + $(selector).text( hours + ':' + minutes + ':' + seconds ); +} + // Scale SVG (fit || full size) function scaleSVG(element, scale = 'fit') { @@ -127,30 +172,30 @@ function scaleSVG(element, scale = 'fit') { // set preview svg scale to fit into its box if display block and transform is not set function scaleAllSvg() { - $('.page').each(function() { - if( $(this).css('display') == 'block' ) { - if( $(this).find('.inksimulation svg').css('transform') == 'none') { - scaleSVG($(this).find('.inksimulation'), 'fit'); - } + $('.page').each(function() { + if( $(this).css('display') == 'block' ) { + if( $(this).find('.inksimulation svg').css('transform') == 'none') { + scaleSVG($(this).find('.inksimulation'), 'fit'); } - }); + } + }); } var saveTimerHandles = {}; function setSVGTransform(figure, transform) { - var field_name = $(figure).data('field-name'); - var scale = transform.match(/-?[\d\.]+/g)[0]; - figure.find('svg').css({ transform: transform }); - figure.find(".scale").text(parseInt(scale*100)); + var field_name = $(figure).data('field-name'); + var scale = transform.match(/-?[\d\.]+/g)[0]; + figure.find('svg').css({ transform: transform }); + figure.find(".scale").text(parseInt(scale*100)); - // avoid spamming updates - if (saveTimerHandles[field_name] != null) - clearTimeout(saveTimerHandles[field_name]); + // avoid spamming updates + if (saveTimerHandles[field_name] != null) + clearTimeout(saveTimerHandles[field_name]); - saveTimerHandles[field_name] = setTimeout(function() { - $.postJSON('/settings/' + field_name, {value: transform}); - }, 250); + saveTimerHandles[field_name] = setTimeout(function() { + $.postJSON('/settings/' + field_name, {value: transform}); + }, 250); } $(function() { @@ -206,16 +251,16 @@ $(function() { $(this).css({cursor: 'move'}); $(this).on('mousemove', function(e) { - var p1 = { x: e.pageX, y: e.pageY }; - // set modified translate - var transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g); - transform[4] = start_offset.x + (p1.x - p0.x); - transform[5] = start_offset.y + (p1.y - p0.y); + var p1 = { x: e.pageX, y: e.pageY }; + // set modified translate + var transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g); + transform[4] = start_offset.x + (p1.x - p0.x); + transform[5] = start_offset.y + (p1.y - p0.y); - // I'd ike to use setSVGTransform() here but this code runs many - // times per second and it's just too CPU-intensive. - $(this).find('svg').css({transform: 'matrix(' + transform + ')'}); - }); + // I'd ike to use setSVGTransform() here but this code runs many + // times per second and it's just too CPU-intensive. + $(this).find('svg').css({transform: 'matrix(' + transform + ')'}); + }); }).on('mouseup', function(e) { $(this).css({cursor: 'auto'}); $(this).data('p0', null); @@ -263,23 +308,25 @@ $(function() { // load up initial metadata values $.getJSON('/settings', function(settings) { $.each(settings, function(field_name, value) { - $('[data-field-name="' + field_name + '"]').each(function(i, item) { - var item = $(item); - if (item.is(':checkbox')) { - item.prop('checked', value).trigger('initialize'); - } else if (item.is('img')) { - 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 { - item.text(value); - } - }); + $('[data-field-name="' + field_name + '"]').each(function(i, item) { + var item = $(item); + if (item.is(':checkbox')) { + item.prop('checked', value).trigger('initialize'); + } else if (item.is('img')) { + 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').text(value + 'mm'); + } else if (item.is('input[type=number]')) { + item.val(value).trigger('initialize'); + } else if (item.is('figure.inksimulation')) { + setSVGTransform(item, value); + } else { + item.text(value); + } + }); }); // wait until page size is set (if they've specified one) and then scale SVGs to fit and build operator detailed view @@ -290,17 +337,15 @@ $(function() { }); $('[contenteditable="true"]').keypress(function(e) { - if (e.which == 13) { - // pressing enter defocuses the element - this.blur(); - - // also suppress the enter keystroke to avoid adding a new line - return false; - } else { - return true; - } - }); - + if (e.which == 13) { + // pressing enter defocuses the element + this.blur(); + // also suppress the enter keystroke to avoid adding a new line + return false; + } else { + return true; + } + }); /* Settings Bar */ @@ -362,9 +407,9 @@ $(function() { // 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 ); + $('#display-thumbnail-size').text( thumbnail_size_mm ); }); - + // Operator detailed view: thumbnail size setting action $('#operator-detailedview-thumbnail-size').change(function() { // set thumbnail size @@ -411,7 +456,6 @@ $(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(); @@ -420,6 +464,23 @@ $(function() { $.postJSON('/settings/' + field_name, {value: $(this).prop('checked')}); }); + // Estimated Time + $('#machine-speed, #time-additional, #time-color-change, #time-trims').on('input initialize', function() { + setEstimatedTime(); + }).on('change', function() { + var field_name = $(this).attr('data-field-name'); + $.postJSON('/settings/' + field_name, {value: $(this).val()}); + }); + + // Display Estimated Time checkboxes + $(':checkbox.time-display').on('input initialize', function() { + var field_name = $(this).attr('data-field-name'); + $('.' + field_name).toggle($(this).prop('checked')); + }).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"); @@ -485,37 +546,51 @@ $(function() { return true; }); + setTimeout(function() { + setEstimatedTime(); + }, 100); + $('button.svg-realistic').click(function(e){ $(this).find('input').click(); }); // Logo $('#logo-picker').change(function(e) { - var file = e.originalEvent.currentTarget.files[0]; - var reader = new FileReader(); - reader.onloadend = function() { - var data = reader.result; - $('figure.brandlogo img').attr('src', data); - $.postJSON('/settings/logo', {value: data}); - }; - reader.readAsDataURL(file); + var file = e.originalEvent.currentTarget.files[0]; + var reader = new FileReader(); + reader.onloadend = function() { + var data = reader.result; + $('figure.brandlogo img').attr('src', data); + $.postJSON('/settings/logo', {value: data}); + }; + reader.readAsDataURL(file); }); // "save as defaults" button - $('#save-settings').click(function(e) { - var settings = {}; - settings["client-overview"] = $("[data-field-name='client-overview']").is(':checked'); - 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(); + $('button.save-settings').click(function(e) { + var settings = {}; + settings["client-overview"] = $("[data-field-name='client-overview']").is(':checked'); + 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'); - if (logo.startsWith("data:")) { - settings["logo"] = logo; - } + var logo = $("figure.brandlogo img").attr('src'); + if (logo.startsWith("data:")) { + settings["logo"] = logo; + } - $.postJSON('/defaults', {'value': settings}); + settings["machine-speed"] = $("[data-field-name='machine-speed']").val(); + settings["time-additional"] = $("[data-field-name='time-additional']").val(); + settings["time-color-change"] = $("[data-field-name='time-color-change']").val(); + settings["time-trims"] = $("[data-field-name='time-trims']").val(); + + settings["time-clo"] = $("[data-field-name='time-clo']").val(); + settings["time-cld"] = $("[data-field-name='time-cld']").val(); + settings["time-opo"] = $("[data-field-name='time-opo']").val(); + settings["time-opd"] = $("[data-field-name='time-opd']").val(); + + $.postJSON('/defaults', {'value': settings}); }); }); diff --git a/print/resources/style.css b/print/resources/style.css index 174b21dd4..5a1ccb44d 100644 --- a/print/resources/style.css +++ b/print/resources/style.css @@ -198,13 +198,14 @@ body { background: transparent; border: 1px solid #413232; padding: 5px; + cursor: pointer; } #settings-ui button.active { border-bottom: 1px solid white; } - #settings-ui #ui-design { + #settings-ui .ui-tab { display: none; } @@ -357,10 +358,11 @@ body { display: -ms-flexbox; /* IE 10 */ width: calc(100% - 50mm); height: 50%; + flex-grow: 1; } div.headline h1 { - font-size: 18pt; + font-size: 16pt; } div.headline p { @@ -377,6 +379,14 @@ body { font-size: 10pt; } + .client-detailedview div.job-details { + padding-top: 6mm; + } + + .operator-overview div.job-details, .client-overview div.job-details { + padding-top: 2mm; + } + div.job-details > div { flex-grow: 1; } @@ -735,7 +745,7 @@ body { display: none; } - .opd-color-block.medium span::before { + .opd-color-block.medium p > span::before { content: ' \00B7 '; line-height: 0; display: inline-block; diff --git a/print/templates/color_swatch.html b/print/templates/color_swatch.html index 71022f6fe..fe64c8558 100644 --- a/print/templates/color_swatch.html +++ b/print/templates/color_swatch.html @@ -37,11 +37,11 @@
-

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

+

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

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

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

-

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

-

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

+

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

+

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

{{ _('stop after?') }}:{{ _("yes") if color_block.stop_after else _("no") }}

diff --git a/print/templates/headline.html b/print/templates/headline.html index 369c370ef..bf112deaf 100644 --- a/print/templates/headline.html +++ b/print/templates/headline.html @@ -12,5 +12,5 @@

-
{{ date|datetimeformat(_('%Y.%m.%d')) }}
+
{{ date|datetimeformat(_('%m/%d/%Y')) }}
diff --git a/print/templates/operator_detailedview.html b/print/templates/operator_detailedview.html index ae578d9d1..608b36619 100644 --- a/print/templates/operator_detailedview.html +++ b/print/templates/operator_detailedview.html @@ -22,16 +22,17 @@

{{ _('Unique Colors') }}: {{ job.num_colors }} - {{ _('Color Blocks') }}: {{ job.num_color_blocks }} + {{ _('Color Blocks') }}: {{ job.num_color_blocks }}

{{ _('Design box size') }}: {{ "%0.1fmm X %0.1fmm" | format(*job.dimensions) }} - {{ _('Total thread used') }}: {{job.estimated_thread }} - {{ _('Total stitch count') }}: {{job.num_stitches }} + + {{ _('Total stitch count') }}: {{job.num_stitches }} + {{ ('Estimated time') }}:

- {{ _('Total stops') }}: {{ job.num_stops }} - {{ _('Total trims') }}: {{ job.num_trims }} + {{ _('Total stops') }}: {{ job.num_stops }} + {{ _('Total trims') }}: {{ job.num_trims }}

@@ -53,20 +54,22 @@ {{ color_block.svg_preview|safe }}

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

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

- {{ _('trims') }}: {{ color_block.num_trims }} + {{ _('trims') }}: {{ color_block.num_trims }} {{ _('stop after?') }}: {{ _("yes") if color_block.stop_after else _("no") }} +

- +

{% endfor %} diff --git a/print/templates/operator_overview.html b/print/templates/operator_overview.html index 048fd58ef..359d4f501 100644 --- a/print/templates/operator_overview.html +++ b/print/templates/operator_overview.html @@ -13,13 +13,13 @@

{{ _('Design box size') }}:{{ "%0.1fmm X %0.1fmm" | format(*job.dimensions) }}

{{ _('Total stitch count') }}:{{job.num_stitches }}

-

{{ _('Total thread used') }}:{{job.estimated_thread }}

+

{{ _('Total thread used') }}:{{job.total_thread_used }}

-
+

{{ _('Job estimated time') }}:

-

{{ job.estimated_time }}

+

diff --git a/print/templates/print_detail.html b/print/templates/print_detail.html index 241ac88b8..0c6bbefeb 100644 --- a/print/templates/print_detail.html +++ b/print/templates/print_detail.html @@ -3,13 +3,13 @@
-

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

+

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

-
+

{{ _('Estimated time') }}:

-

{{ color_block.estimatedtime }}

+

diff --git a/print/templates/print_overview.html b/print/templates/print_overview.html index cfbb81d18..a2548070d 100644 --- a/print/templates/print_overview.html +++ b/print/templates/print_overview.html @@ -17,9 +17,9 @@
-
+

{{ _('Job estimated time') }}:

-

{{ job.estimated_time }}

+

diff --git a/print/templates/ui.html b/print/templates/ui.html index bc6c57b9a..5d565abaf 100644 --- a/print/templates/ui.html +++ b/print/templates/ui.html @@ -16,6 +16,7 @@
+
@@ -40,10 +41,43 @@

{{ _('Thumbnail size') }}: 15mm

- +
-
+
+ {{ _('Estimated Time') }} +
+ {{ _('Machine Settings') }} +

+ + +

+
+
+ {{ _('Time Factors') }} +

+ + +

+

+ +

+

+ +

+
+
+ {{ _('Display Time On') }} +

+

+

+

+

+

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