From 084c5555f21a6e927e4de98fdb66c4c408626f58 Mon Sep 17 00:00:00 2001
From: Lex Neva <lexelby@users.noreply.github.com>
Date: Fri, 30 Mar 2018 20:37:11 -0400
Subject: print through web browser (#127)

* spawn a web server and open a printable view of the design in the user's web browser
  * configurable inclusion of client and operator views
  * editable fields for color names, client, title, and purchase order number
  * groundwork laid to save these parameters back into the SVG
* major refactor of codebase to support printing
  * code is organized logically into modules
* added inkstitch logo and branding guidelines
* l10n text extraction now handled by babel
* removed legacy embroider_update extension
* partial fix for #125
---
 print/templates/color_swatch.html          | 51 ++++++++++++++++++++
 print/templates/footer.html                |  7 +++
 print/templates/headline.html              | 12 +++++
 print/templates/index.html                 | 32 +++++++++++++
 print/templates/operator_detailedview.html | 77 ++++++++++++++++++++++++++++++
 print/templates/operator_overview.html     | 33 +++++++++++++
 print/templates/print_detail.html          | 28 +++++++++++
 print/templates/print_overview.html        | 42 ++++++++++++++++
 print/templates/ui.html                    | 33 +++++++++++++
 9 files changed, 315 insertions(+)
 create mode 100644 print/templates/color_swatch.html
 create mode 100644 print/templates/footer.html
 create mode 100644 print/templates/headline.html
 create mode 100644 print/templates/index.html
 create mode 100644 print/templates/operator_detailedview.html
 create mode 100644 print/templates/operator_overview.html
 create mode 100644 print/templates/print_detail.html
 create mode 100644 print/templates/print_overview.html
 create mode 100644 print/templates/ui.html

(limited to 'print/templates')

diff --git a/print/templates/color_swatch.html b/print/templates/color_swatch.html
new file mode 100644
index 00000000..21cc0c21
--- /dev/null
+++ b/print/templates/color_swatch.html
@@ -0,0 +1,51 @@
+  
+  {% if printview != 'detailedview' %}
+  <div class="color-swatch">
+    <div class="swatch-info">
+       <svg width="100%" height="100%" class="color-swatch-svg" xmlns="http://www.w3.org/2000/svg">
+        <rect fill="rgb{{ color_block.color.rgb }}" stroke="rgb(192, 192, 192)" stroke-width="1px" width="100%" height="100%" />
+        <text fill="rgb{{ color_block.color.font_color }}">
+            <tspan dy="1.2em" x="2mm" y="2mm" class="color-name">{{ _('Color') }}: </tspan><tspan data-field-name="color-{{ color_block.color.hex_digits }}">{{ color_block.color.thread_name }}</tspan>
+            {# We don't want to see rgb if we have more than 7 colorSwatches #}
+            {% if color_blocks|length < 7 %}
+            <tspan dy="1.2em" x="2mm" class="color-rgb">{{ _('rgb') }}: {{ color_block.color.rgb }}</tspan>
+            {% endif %}
+            {# We don't want to see thread_used if we have more than 7 colorSwatches to show #}
+            {% if color_blocks|length < 7 %}       
+            <tspan dy="1.2em" x="2mm" class="swatch-thread">{{ _('thread used') }}: {{ color_block.color.thread_description }}</tspan>
+            {% endif %}
+            {# We don't want to see num_stitch if we have more than 49 colorSwatches to show #}
+            {% if color_blocks|length < 49 %}
+            <tspan dy="1.2em" x="2mm" class="swatch-stitches">{{ _('# stitches') }}: {{ color_block.num_stitches }}</tspan>
+            {% endif %}
+            {# We don't want to see stops and trims if we have more than 13 colorSwatches to show #}
+            {% if color_blocks|length < 13 %}
+            <tspan dy="1.2em" x="2mm" class="swatch-stops">{{ _('# stops') }}: {{ color_block.num_stops }}</tspan>
+            <tspan dy="1.2em" x="2mm" class="swatch-trims">{{ _('# trims') }}: {{ color_block.num_trims }}</tspan>
+            {% endif %}
+          </text>
+      </svg>
+    </div>
+  </div>
+  
+  {% else %}
+  
+  <div class="color-swatch">
+    <div class="swatch-info">
+       <svg width="100%" height="100%" class="colorSwatchSVG" xmlns="http://www.w3.org/2000/svg">
+        <rect fill="rgb{{ color_block.color.rgb }}" stroke="rgb(192, 192, 192)" width="40mm" height="100%" />
+       </svg>
+       <div class="color-info">
+        <div>
+          <p><span class="color-name">{{ _('Color') }}:</span><span data-field-name="color-{{ color_block.color.hex_digits }}" contenteditable="true" data-placeholder="Enter thread name...">{{ color_block.color.thread_name }}</span></p>
+          <p><span class="color-rgb">{{ _('rgb') }}:</span><span>{{ color_block.color.rgb }}</span></p>
+          <p><span class="swatch-thread">{{ _('thread used') }}:</span><span>{{ color_block.color.thread_description }}</span></p>
+          <p><span class="swatch-stitches">{{ _('# stitches') }}:</span><span>{{ color_block.num_stitches }}</span></p>
+          <p><span class="swatch-stops">{{ _('# stops') }}:</span><span>{{ color_block.num_stops }}</span></p>
+          <p><span class="swatch-trims">{{ _('# trims') }}:</span><span>{{ color_block.num_trims }}</span></p>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  {%endif %}
diff --git a/print/templates/footer.html b/print/templates/footer.html
new file mode 100644
index 00000000..0c043e2f
--- /dev/null
+++ b/print/templates/footer.html
@@ -0,0 +1,7 @@
+<footer>
+    <p class="num_pages">{{ _('Page') }} <span class="page-num"></span>/<span class="total-page-num"></span></p>
+    <p>Proudly generated with <a href="http://inkstitch.org/" target="_blank">Ink/Stitch</a></p>
+</footer>
+
+
+
diff --git a/print/templates/headline.html b/print/templates/headline.html
new file mode 100644
index 00000000..649c02ea
--- /dev/null
+++ b/print/templates/headline.html
@@ -0,0 +1,12 @@
+<figure class="brandlogo">
+      <img src="{{ logo.src or "resources/inkstitch-logo.svg" }}" alt="{{ logo.title }}" title="{{ logo.title }}">
+</figure>
+<div class="headline">
+  <div class="pageTitle">
+      <h1><span class="jobtitle" contenteditable="true" data-placeholder="{{ _('Enter job title...') }}" data-field-name="job-title">{{ job.title }}</span></h1>
+      <p class="header-field" data-label="{{ _('CLIENT') }}:" contenteditable="true" data-placeholder="{{ _('Enter client name...') }}" data-field-name="client-name">{{ client }}</p>
+      <p class="header-field" data-label="{{ _('PURCHASE ORDER #:') }}" contenteditable="true" data-placeholder="{{ _('Enter purchase order number...') }}" data-field-name="purchase-order">{{ purchase_order }}</p>
+  </div>
+  
+  <div class="currentDate">{{ date|datetimeformat(_('%Y.%m.%d')) }}</div>
+</div>
diff --git a/print/templates/index.html b/print/templates/index.html
new file mode 100644
index 00000000..21ca74ab
--- /dev/null
+++ b/print/templates/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Ink/Stitch Print Preview</title>
+    <script src="resources/jquery-3.3.1.min.js"></script>
+    <script src="resources/inkstitch.js"></script>
+    <link rel="stylesheet" href="resources/style.css" />
+</head>
+<body>
+    {% include 'ui.html' %}
+    
+{# client overview #}    
+        <div class="page client-overview" style="display: {{ 'block' if view.client_overview else 'none' }}">{% include 'print_overview.html' %}</div>
+        
+{# client detailedview #}    
+        {% set printview = 'detailedview' %}
+        {% for color_block in color_blocks %}
+            {% set outer_loop = loop %}
+            <div class="page client-detailedview" style="display: {{ 'block' if view.client_detailedview else 'none' }}">{% include 'print_detail.html' %}</div>
+        {% endfor %}
+
+{# operator overview #}    
+        <div class="page operator-overview" style="display: {{ 'block' if view.operator_overview else 'none' }}">{% include 'operator_overview.html' %}</div>
+    
+{# operator detailed view #}
+    {% for color_block_part in color_blocks | batch(13) %}
+        {% set outer_loop = loop %}
+        <div class="page operator-detailedview" style="display: {{ 'block' if view.operator_detailedview else 'none' }}">{% include 'operator_detailedview.html' %}</div>
+    {% endfor %}
+
+</body>
+</html>
diff --git a/print/templates/operator_detailedview.html b/print/templates/operator_detailedview.html
new file mode 100644
index 00000000..633b9286
--- /dev/null
+++ b/print/templates/operator_detailedview.html
@@ -0,0 +1,77 @@
+        <header>
+          {% include 'headline.html' %}
+        </header>
+        
+        <main>
+          <div class="operator-job-info">
+            <div class="job-headline">
+              <p class="operator-svg operator-colorswatch">{# svg color #}</p>
+              <p>{# svg preview #}</p>
+              <p>{{ _('Color') }}</p>
+              <p>{{ _('Thread Consumption') }}</p>
+              <p>{{ _('Stops and Trims') }}</p>
+              <p>{{ _('Estimated Time') }}</p>
+            </div>
+            {% if outer_loop.index == 1 %}
+            <div>
+              <p>
+                <span>##</span>
+              </p>
+              <p class="operator-svg operator-preview">
+                {{ svg_overview|safe }}
+              </p>
+              <p>
+                <span>{{ _('Unique Colors') }}: {{ job.num_colors }}</span>
+                <span>{{ _('Color Blocks') }}: {{ job.num_color_blocks }}</span>
+              </p>
+              <p>
+                <span>{{ _('Design box size') }}: {{ job.dimensions }}</span>
+                <span>{{ _('Total thread used') }}: {{job.estimated_thread }}</span>
+                <span>{{ _('Total stitch count') }}: {{job.num_stitches }}</span>
+              </p>
+              <p>
+                <span>{{ _('Total nr stops') }}: {{ job.num_stops }}</span>
+                <span>{{ _('Total nr trims') }}: {{ job.num_trims }}</span>
+              </p>
+              <p>
+                <span>{{ job.estimated_time }}</span>
+              </p>
+            </div>
+            {% endif %}
+            {% for color_block in color_block_part %}
+            
+            <div style="display: table-row;">
+              <p class="operator-svg operator-colorswatch">
+                <svg xmlns="http://www.w3.org/2000/svg">
+                  <rect fill="rgb{{ color_block.color.rgb }}" width="15mm" height="100%" />
+                  <text fill="rgb{{ color_block.color.font_color }}">
+                    <tspan x="4mm" y="7.5mm" class="color-index">#{{ loop.index + outer_loop.index0 * 13 }}</tspan>
+                  </text>
+                </svg>
+              </p>
+              <p class="operator-svg operator-preview">
+                  {{ color_block.svg_preview|safe }}
+              </p>
+              <p>
+                <span data-field-name="color-{{ color_block.color.hex_digits }}" contenteditable="true" data-placeholder="Enter thread name...">{{ color_block.color.thread_name }}</span>
+                <span>{{ color_block.color.rgb }}</span>
+              </p>
+              <p>
+                <span>{{ _('thread used') }}: {{ color_block.color.thread_description }}</span>
+                <span>{{ _('# stitches') }}: {{ color_block.num_stitches }}</span>
+              </p>
+              <p>
+                <span>{{ _('# stops') }}: {{ color_block.num_stops }}</span>
+                <span>{{ _('# trims') }}: {{ color_block.num_trims }}</span>
+              </p>
+              <p>
+                <span>{{ color_block.estimatedtime }}</span>
+              </p>
+            </div>
+          {% endfor %}
+          </div>
+        </main>
+        
+        {% include 'footer.html' %}
+        
+           
diff --git a/print/templates/operator_overview.html b/print/templates/operator_overview.html
new file mode 100644
index 00000000..25048ab7
--- /dev/null
+++ b/print/templates/operator_overview.html
@@ -0,0 +1,33 @@
+        <header>
+          {% include 'headline.html' %}
+          <div class="job-details">
+                <div>
+                    <div class="table">
+                        <p><span>{{ _('Unique Colors') }}:</span><span>{{ job.num_colors }}</span></p>
+                        <p><span>{{ _('Color Blocks') }}:</span><span>{{ job.num_color_blocks }}</span></p>
+                        <p><span>{{ _('Total nr stops') }}:</span><span>{{ job.num_stops }}</span></p>
+                        <p><span>{{ _('Total nr trims') }}:</span><span>{{ job.num_trims }}</span></p>
+                    </div>
+                </div>
+                <div>
+                    <div class="table">
+                      <p><span>{{ _('Design box size') }}:</span><span>{{ job.dimensions }}</span></p>
+                      <p><span>{{ _('Total stitch count') }}:</span><span>{{job.num_stitches }}</span></p>
+                      <p><span>{{ _('Total thread used') }}:</span><span>{{job.estimated_thread }}</span></p>
+                    </div>
+                </div>
+                <div>
+                    <div class="table">
+                      <p><span>{{ _('Job estimated time') }}:</span></p>
+                      <p><span>{{ job.estimated_time }}</span></p>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <main>
+          <figure class="inksimulation operator" style="height: 210mm;">
+                {{ svg_overview|safe }}
+                <figcaption>{{ _('Scale') }} <span>{{ svg_scale }}</span></figcaption>
+            </figure>
+        </main>
+        {% include 'footer.html' %}
diff --git a/print/templates/print_detail.html b/print/templates/print_detail.html
new file mode 100644
index 00000000..18a70bba
--- /dev/null
+++ b/print/templates/print_detail.html
@@ -0,0 +1,28 @@
+        <header>
+            {% include 'headline.html' %}
+            <div class="job-details">
+                <div>
+                    <div class="table">
+                      <p><span>{{ _('COLOR') }}:</span><span data-field-name="color-{{ color_block.color.hex_digits }}" contenteditable="true" data-placeholder="Enter thread name...">{{ color_block.color.thread_name }}</span></p>
+                    </div>
+                </div>
+                <div>
+                    <div class="table">
+                      <p><span>{{ _('Estimated time') }}:</span></p>
+                      <p><span>{{ color_block.estimatedtime }}</span></p>
+                  </div>
+                </div>
+            </div>
+        </header>
+        <main>
+            <figure class="inksimulation">
+                {{color_block.svg_preview|safe}}
+                <figcaption>{{ _('Scale') }} <span>{{ svg_scale }}</span></figcaption>
+            </figure> 
+            
+            <div class="color-palette detailed">
+                {% include 'color_swatch.html' %}
+            </div>
+        </main>
+
+      {% include 'footer.html' %}
diff --git a/print/templates/print_overview.html b/print/templates/print_overview.html
new file mode 100644
index 00000000..f5632ceb
--- /dev/null
+++ b/print/templates/print_overview.html
@@ -0,0 +1,42 @@
+        <header>
+            {% include 'headline.html' %}
+            <div class="job-details">
+                <div>
+                    <div class="table">
+                        <p><span>{{ _('Unique Colors') }}:</span><span>{{ job.num_colors }}</span></p>
+                        <p><span>{{ _('Color Blocks') }}:</span><span>{{ job.num_color_blocks }}</span></p>
+                        <p><span>{{ _('Total nr stops') }}:</span><span>{{ job.num_stops }}</span></p>
+                        <p><span>{{ _('Total nr trims') }}:</span><span>{{ job.num_trims }}</span></p>
+                    </div>
+                </div>
+                <div>
+                    <div class="table">
+                      <p><span>{{ _('Design box size') }}:</span><span>{{ job.dimensions }}</span></p>
+                      <p><span>{{ _('Total stitch count') }}:</span><span>{{job.num_stitches }}</span></p>
+                      <p><span>{{ _('Total thread used') }}:</span><span>{{job.estimated_thread }}</span></p>
+                    </div>
+                </div>
+                <div>
+                    <div class="table">
+                      <p><span>{{ _('Job estimated time') }}:</span></p>
+                      <p><span>{{ job.estimated_time }}</span></p>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <main class="client-overview-main">
+            <figure class="inksimulation">
+                {{ svg_overview|safe }}
+                <figcaption>{{ _('Scale') }} <span>{{ svg_scale }}</span></figcaption>
+            </figure> 
+            
+            <div class="color-palette">
+                {% for color_block in color_blocks %}
+                    {% include 'color_swatch.html' %}
+                {% endfor %}    
+            
+            </div>
+            <div class="signature">{{ _('Client Signature') }}</div>
+        </main>
+
+        {% include 'footer.html' %}
diff --git a/print/templates/ui.html b/print/templates/ui.html
new file mode 100644
index 00000000..078f1a4c
--- /dev/null
+++ b/print/templates/ui.html
@@ -0,0 +1,33 @@
+    <div class="ui">
+        <p class="header">{{ _('Ink/Stitch Print Preview') }}</p>
+        <div class="buttons">
+          <button class="print">{{ _('Print') }}</button>
+          <button class="settings">{{ _('Settings') }}</button>
+          <button class="close">{{ _('Close') }}</button>
+        </div>
+        <div id="errors">
+          {{ _('⚠ lost connection to Ink/Stitch') }}
+        </div>
+    </div>
+    
+    <div id="settings-ui">
+      <p id="close-settings">X</p>
+      <h1>{{ _('Settings') }}</h1>
+      <div>
+        <p>{{ _('Printing Size') }}: 
+          <select id="printing-size">
+            <option value="letter" selected="selected">Letter</option>
+            <option value="a4">A4</option>
+          </select>
+        </p>
+      </div>
+      <div>
+       <fieldset>
+          <legend>{{ ('Print Layouts') }}:</legend>
+          <p><input type="checkbox" id="client-overview" {{ 'checked' if view.client_overview else '' }}><label for="client-overview">Client Overview</label></p>
+          <p><input type="checkbox" id="client-detailedview" {{ 'checked' if view.client_detailedview else '' }}><label for="client-detailedview">Client Detailed View</label></p>
+          <p><input type="checkbox" id="operator-overview" {{ 'checked' if view.operator_overview else '' }}><label for="operator-overview">Operator Overview</label></p>
+          <p><input type="checkbox" id="operator-detailedview" {{ 'checked' if view.operator_detailedview else '' }}><label for="operator-overview">Operator Detailed View</label></p>
+        </fieldset>
+      </div>
+    </div>
-- 
cgit v1.2.3