From 3e00ba26da77add9bdb1315b6a1993c0b53135f2 Mon Sep 17 00:00:00 2001
From: Kaalleen <36401965+kaalleen@users.noreply.github.com>
Date: Sun, 8 Apr 2018 17:35:54 +0200
Subject: [PATCH 4/6] Update print_overview.html
---
print/templates/print_overview.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/print/templates/print_overview.html b/print/templates/print_overview.html
index f5632cebc..dd2a13587 100644
--- a/print/templates/print_overview.html
+++ b/print/templates/print_overview.html
@@ -27,7 +27,7 @@
{{ svg_overview|safe }}
- {{ _('Scale') }} {{ svg_scale }}
+ {{ _('Scale') }} {{ svg_scale }}%
From 15222ed4c39bab5e19b622e9179f7abc88c5b1da Mon Sep 17 00:00:00 2001
From: kalleen
Date: Mon, 9 Apr 2018 19:20:02 +0200
Subject: [PATCH 5/6] add buttons to quickly adjust svg size
---
print/resources/inkstitch.js | 90 ++++++++++++++++++--------
print/resources/style.css | 11 ++++
print/templates/operator_overview.html | 8 ++-
print/templates/print_detail.html | 4 ++
print/templates/print_overview.html | 4 ++
5 files changed, 89 insertions(+), 28 deletions(-)
diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index e804e3255..26e88f38a 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -13,49 +13,64 @@ function setPageNumbers() {
});
}
-// set preview svg scale to fit into its box
-function scaleInksimulation() {
- $('.inksimulation').each(function() {
+// Scale SVG (fit || full size)
+function scaleSVG(element, scale = 'fit') {
+
+ // always center svg
+ transform = "translate(-50%, -50%)";
+
+ if(scale == 'fit') {
var scale = Math.min(
- $(this).width() / $(this).find('svg').width(),
- $(this).height() / $(this).find('svg').height()
+ element.width() / element.find('svg').width(),
+ element.height() / element.find('svg').height()
);
+ // Do not scale to more than 100%
+ scale = (scale <= 1) ? scale : 1;
+ }
+
+ transform += " scale(" + scale + ")";
+ var label = parseInt(scale*100);
- // center the SVG
- transform = "translate(-50%, -50%)";
+ element.find('svg').css({ transform: transform });
+ element.find('figcaption span').text(label);
+}
- if(scale <= 1) {
- transform += " scale(" + scale + ")";
- label = parseInt(scale*100);
- } else {
- label = "100";
- }
+// set preview svg scale to fit into its box
+function scaleAllSvg(element = "") {
- $(this).find('svg').css({ transform: transform });
- $(this).find('figcaption span').text(label);
- });
+ if(element == "") {
+ $('.inksimulation').each(function() {
+ scaleSVG($(this));
+ });
+ }
}
$(function() {
setTimeout(ping, 1000);
setPageNumbers();
- scaleInksimulation();
+ scaleAllSvg();
- /* Mousewheel scaling */
- $('figure.inksimulation').on( 'DOMMouseScroll mousewheel', function ( event ) {
- var transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g);
- var scale = parseFloat(transform[0]);
- if( scale > 0.01 && (event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0)) {
+ /* SCALING AND MOVING SVG */
+
+ /* Mousewheel scaling */
+ $('figure.inksimulation').on( 'DOMMouseScroll mousewheel', function (e) {
+
+ var svg = $(this).find('svg');
+ var transform = svg.css('transform').match(/-?[\d\.]+/g);
+ var scale = parseFloat(transform[0]);
+
+ if( scale > 0.01 && (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0)) {
// scroll down
scale -= 0.01;
} else {
//scroll up
scale += 0.01;
}
+
// set modified scale
transform[0] = scale;
transform[3] = scale;
- $(this).find('svg').css({ transform: 'matrix(' + transform + ')' });
+ svg.css({ transform: 'matrix(' + transform + ')' });
// set scale caption text
$(this).find("span").text(parseInt(scale*100));
@@ -64,6 +79,18 @@ $(function() {
return false;
});
+ /* Fit SVG */
+ $('button.svg-fit').click(function() {
+ var svgfigure = $(this).closest('figure');
+ scaleSVG(svgfigure, 'fit');
+ });
+
+ /* Fit SVG */
+ $('button.svg-full').click(function() {
+ var svgfigure = $(this).closest('figure');
+ scaleSVG(svgfigure, '1');
+ });
+
/* Drag SVG */
$('figure.inksimulation').on('mousedown', function(e) {
$(this).data('p0', { x: e.pageX, y: e.pageY });
@@ -88,9 +115,21 @@ $(function() {
// set the same content to all fields with the same classname
document.querySelectorAll('[contenteditable="true"]').forEach(function(elem) {
elem.addEventListener('focusout', function() {
- var content = $(this).html();
+ var content = $(this).html();
var field_name = $(this).attr('data-field-name');
$('[data-field-name="' + field_name + '"]').html(content);
+
+ /* change svg scale */
+ if(field_name == 'svg-scale') {
+ var scale = parseInt(content);
+ var svg = $(this).parent().siblings('svg');
+ var transform = svg.css('transform').match(/-?[\d\.]+/g);
+
+ transform[0] = scale / 100;
+ transform[3] = scale / 100;
+ svg.css({ transform: 'matrix(' + transform + ')' });
+ }
+
});
});
@@ -98,7 +137,6 @@ $(function() {
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 {
@@ -145,7 +183,7 @@ $(function() {
$(':checkbox').change(function() {
$('.' + this.id).toggle();
setPageNumbers();
- scaleInksimulation();
+ scaleAllSvg();
});
});
diff --git a/print/resources/style.css b/print/resources/style.css
index 824f8dcef..146cfacc5 100644
--- a/print/resources/style.css
+++ b/print/resources/style.css
@@ -69,6 +69,10 @@
page-break-after: always;
margin: 0 !important;
}
+
+ figure.inksimulation div {
+ display: none;
+ }
.ui {
display: none;
@@ -390,6 +394,13 @@ body {
line-height: 12pt;
margin: 2.5mm;
}
+
+ figure.inksimulation div {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
/* Color Swatches */
diff --git a/print/templates/operator_overview.html b/print/templates/operator_overview.html
index c9706dbe8..ce28ae8e5 100644
--- a/print/templates/operator_overview.html
+++ b/print/templates/operator_overview.html
@@ -25,9 +25,13 @@
-
+
{{ svg_overview|safe }}
- {{ _('Scale') }} {{ svg_scale }}%
+ {{ _('Scale') }} {{ svg_scale }}%
+
+
+
+
{% include 'footer.html' %}
diff --git a/print/templates/print_detail.html b/print/templates/print_detail.html
index 2453faa4e..b8b748b36 100644
--- a/print/templates/print_detail.html
+++ b/print/templates/print_detail.html
@@ -18,6 +18,10 @@
{{color_block.svg_preview|safe}}
{{ _('Scale') }} {{ svg_scale }}%
+
+
+
+
diff --git a/print/templates/print_overview.html b/print/templates/print_overview.html
index dd2a13587..d32cf1e99 100644
--- a/print/templates/print_overview.html
+++ b/print/templates/print_overview.html
@@ -28,6 +28,10 @@
{{ svg_overview|safe }}
{{ _('Scale') }} {{ svg_scale }}%
+
+
+
+
From 75aa656c2cfb7ee4189c31a6c7a0d23d83b4d03a Mon Sep 17 00:00:00 2001
From: kalleen
Date: Wed, 11 Apr 2018 18:57:55 +0200
Subject: [PATCH 6/6] add apply to all button for svg transforms
---
embroider_print.py | 2 +-
print/resources/inkstitch.js | 96 ++++++++++++++++----------
print/resources/style.css | 11 +++
print/templates/operator_overview.html | 7 +-
print/templates/print_detail.html | 5 +-
print/templates/print_overview.html | 5 +-
6 files changed, 81 insertions(+), 45 deletions(-)
diff --git a/embroider_print.py b/embroider_print.py
index 96c3255d2..c0b49bf2c 100644
--- a/embroider_print.py
+++ b/embroider_print.py
@@ -295,7 +295,7 @@ class Print(InkstitchExtension):
'estimated_thread': '', # TODO
},
svg_overview = overview_svg,
- svg_scale = '100%',
+ svg_transform = '', # Format: matrix(0.2, 0, 0, 0.2, 0, 0)
color_blocks = stitch_plan.color_blocks,
)
diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 26e88f38a..c6e88e522 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -35,14 +35,23 @@ function scaleSVG(element, scale = 'fit') {
element.find('figcaption span').text(label);
}
-// set preview svg scale to fit into its box
-function scaleAllSvg(element = "") {
-
- if(element == "") {
- $('.inksimulation').each(function() {
- scaleSVG($(this));
+// set preview svg scale to fit into its box if transform is not set
+function scaleAllSvg() {
+ $('.page').each(function() {
+ if( $(this).css('display') != 'none' ) {
+ if( $(this).find('.inksimulation svg').css('transform') == 'none') {
+ if( $(this).find('.inksimulation span').text() == '') {
+ scaleSVG($(this).find('.inksimulation'));
+ }
+ else {
+ var transform = $(this).find('.inksimulation span').text();
+ var scale = transform.match(/-?[\d\.]+/g)[0];
+ $(this).find('.inksimulation svg').css({ transform: transform });
+ $(this).find('.inksimulation span').text(parseInt(scale*100));
+ }
+ }
+ }
});
- }
}
$(function() {
@@ -54,29 +63,31 @@ $(function() {
/* Mousewheel scaling */
$('figure.inksimulation').on( 'DOMMouseScroll mousewheel', function (e) {
+ if(event.ctrlKey == true) {
- var svg = $(this).find('svg');
- var transform = svg.css('transform').match(/-?[\d\.]+/g);
- var scale = parseFloat(transform[0]);
-
- if( scale > 0.01 && (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0)) {
- // scroll down
- scale -= 0.01;
- } else {
- //scroll up
- scale += 0.01;
- }
-
- // set modified scale
- transform[0] = scale;
- transform[3] = scale;
- svg.css({ transform: 'matrix(' + transform + ')' });
-
- // set scale caption text
- $(this).find("span").text(parseInt(scale*100));
+ var svg = $(this).find('svg');
+ var transform = svg.css('transform').match(/-?[\d\.]+/g);
+ var scale = parseFloat(transform[0]);
+
+ if( scale > 0.01 && (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0)) {
+ // scroll down
+ scale -= 0.01;
+ } else {
+ //scroll up
+ scale += 0.01;
+ }
+
+ // set modified scale
+ transform[0] = scale;
+ transform[3] = scale;
+ svg.css({ transform: 'matrix(' + transform + ')' });
+
+ // set scale caption text
+ $(this).find("span").text(parseInt(scale*100));
- //prevent page fom scrolling
- return false;
+ //prevent page fom scrolling
+ return false;
+ }
});
/* Fit SVG */
@@ -85,7 +96,7 @@ $(function() {
scaleSVG(svgfigure, 'fit');
});
- /* Fit SVG */
+ /* Full Size SVG */
$('button.svg-full').click(function() {
var svgfigure = $(this).closest('figure');
scaleSVG(svgfigure, '1');
@@ -96,6 +107,7 @@ $(function() {
$(this).data('p0', { x: e.pageX, y: e.pageY });
$(this).css({cursor: 'move'});
}).on('mouseup', function(e) {
+ $(this).css({cursor: 'auto'});
var p0 = $(this).data('p0'),
p1 = { x: e.pageX, y: e.pageY },
d = Math.sqrt(Math.pow(p1.x - p0.x, 2) + Math.pow(p1.y - p0.y, 2));
@@ -105,21 +117,27 @@ $(function() {
transform[5] = parseFloat(transform[5]) + parseFloat(p1.y-p0.y);
// set modified translate
$(this).find('svg').css({ transform: 'matrix(' + transform + ')' });
- $(this).css({cursor: 'auto'});
}
- })
+ })
+
+ /* Apply transforms to All */
+ $('button.svg-apply').click(function() {
+ var transform = $(this).parent().siblings('svg').css('transform');
+ var scale = transform.match(/-?[\d\.]+/g)[0];
+ $('.inksimulation').each(function() {
+ $(this).find('svg').css({ transform: transform });
+ $(this).find("span").text(parseInt(scale*100));
+
+ })
+ });
/* Contendeditable Fields */
- // When we focus out from a contenteditable field, we want to
- // set the same content to all fields with the same classname
document.querySelectorAll('[contenteditable="true"]').forEach(function(elem) {
elem.addEventListener('focusout', function() {
+ /* change svg scale */
var content = $(this).html();
var field_name = $(this).attr('data-field-name');
- $('[data-field-name="' + field_name + '"]').html(content);
-
- /* change svg scale */
if(field_name == 'svg-scale') {
var scale = parseInt(content);
var svg = $(this).parent().siblings('svg');
@@ -129,7 +147,11 @@ $(function() {
transform[3] = scale / 100;
svg.css({ transform: 'matrix(' + transform + ')' });
}
-
+ /* When we focus out from a contenteditable field, we want to
+ set the same content to all fields with the same classname */
+ else {
+ $('[data-field-name="' + field_name + '"]').html(content);
+ }
});
});
diff --git a/print/resources/style.css b/print/resources/style.css
index 146cfacc5..333af7aa8 100644
--- a/print/resources/style.css
+++ b/print/resources/style.css
@@ -393,6 +393,8 @@ body {
font-weight: bold;
line-height: 12pt;
margin: 2.5mm;
+ background: rgba(255, 255, 255, 0.73);
+ padding: 5px;
}
figure.inksimulation div {
@@ -400,6 +402,15 @@ body {
bottom: 0;
left: 0;
right: 0;
+ margin-left: auto;
+ margin-right: auto;
+ width: fit-content;
+ }
+
+ figure.inksimulation button {
+ border: none;
+ background: grey;
+ color: white;
}
/* Color Swatches */
diff --git a/print/templates/operator_overview.html b/print/templates/operator_overview.html
index ce28ae8e5..38da77466 100644
--- a/print/templates/operator_overview.html
+++ b/print/templates/operator_overview.html
@@ -25,12 +25,13 @@
-
+
{{ svg_overview|safe }}
- {{ _('Scale') }} {{ svg_scale }}%
+ {{ _('Scale') }} {{ svg_transform }}%
-
+
+
diff --git a/print/templates/print_detail.html b/print/templates/print_detail.html
index b8b748b36..eddcf36fa 100644
--- a/print/templates/print_detail.html
+++ b/print/templates/print_detail.html
@@ -15,12 +15,13 @@
+
diff --git a/print/templates/print_overview.html b/print/templates/print_overview.html
index d32cf1e99..7a396b4a4 100644
--- a/print/templates/print_overview.html
+++ b/print/templates/print_overview.html
@@ -25,12 +25,13 @@