Label size controls, per-label preview with its mm size
This commit is contained in:
jessikitty committed
1 parent
b5a639c737
commit
b4bc31556b
1 file changed
+77
-13
@@ -15,13 +15,40 @@
|
||||
<form method="POST" action="{{ url_for('tape.index') }}" id="tapeForm">
|
||||
<input type="hidden" name="ids" value="{{ ids }}">
|
||||
{# Always submitted, so an unticked checkbox can be told apart from a page
|
||||
opened with no options at all. Without it, "Rotate for tape feed" could
|
||||
opened with no options at all. Without it, a default-on checkbox could
|
||||
never be turned off. #}
|
||||
<input type="hidden" name="_opts" value="1">
|
||||
|
||||
<div class="row g-2 mt-0">
|
||||
<!-- Options -->
|
||||
<div class="col-lg-4">
|
||||
<div class="bl-panel">
|
||||
<div class="bl-panel-head"><span>Label size</span></div>
|
||||
<div class="bl-panel-body">
|
||||
<label class="fld">Size</label>
|
||||
<select name="size_mode" class="w-100 mb-2" id="sizeSelect">
|
||||
{% for key, text in size_modes %}
|
||||
<option value="{{ key }}" {% if key == options.size_mode %}selected{% endif %}>{{ text }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% if options.is_fixed %}
|
||||
<div class="k mb-2" style="text-transform:none;">
|
||||
Labels are {{ label_width_mm|int }}mm wide and lie across the tape, so each one
|
||||
only uses its height in tape length.
|
||||
</div>
|
||||
<label class="d-flex align-items-center gap-2 mb-1" style="font-size:12px;">
|
||||
<input type="checkbox" name="group_drawers" value="1"
|
||||
{% if options.group_drawers %}checked{% endif %}>
|
||||
Combine parts that share a drawer
|
||||
</label>
|
||||
<div class="k mb-2" style="text-transform:none;">
|
||||
Two part types in one drawer become a single 40 × 20mm label.
|
||||
Matched on the drawer / location field.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bl-panel">
|
||||
<div class="bl-panel-head"><span>Tape & layout</span></div>
|
||||
<div class="bl-panel-body">
|
||||
@@ -54,12 +81,14 @@
|
||||
<input type="number" name="padding_mm" step="0.1" min="0" max="10"
|
||||
class="w-100" value="{{ options.padding_mm }}">
|
||||
</div>
|
||||
{% if not options.is_fixed %}
|
||||
<div class="col-6">
|
||||
<label class="fld">Fixed length (mm)</label>
|
||||
<input type="number" name="fixed_length_mm" step="1" min="12" max="430"
|
||||
class="w-100" value="{{ options.fixed_length_mm or '' }}"
|
||||
placeholder="auto">
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="col-6">
|
||||
<label class="fld">Align</label>
|
||||
<select name="align" class="w-100">
|
||||
@@ -70,6 +99,7 @@
|
||||
</div>
|
||||
|
||||
<hr class="my-2">
|
||||
{% if not options.is_fixed %}
|
||||
<label class="d-flex align-items-center gap-2 mb-1" style="font-size:12px;">
|
||||
<input type="checkbox" name="rotate" value="1" {% if options.rotate %}checked{% endif %}>
|
||||
Rotate for tape feed
|
||||
@@ -78,6 +108,11 @@
|
||||
If your print comes out sideways, untick this. To make the change
|
||||
permanent, set it in <a href="{{ url_for('labels.settings') }}">Settings</a>.
|
||||
</div>
|
||||
{% else %}
|
||||
{# Fixed sizes always lie across the tape, so there is nothing to
|
||||
choose - carry the value through so the form round-trips. #}
|
||||
<input type="hidden" name="rotate" value="{{ '1' if options.rotate else '' }}">
|
||||
{% endif %}
|
||||
<label class="d-flex align-items-center gap-2" style="font-size:12px;">
|
||||
<input type="checkbox" name="outline" value="1" {% if options.outline %}checked{% endif %}>
|
||||
Outline each label
|
||||
@@ -119,7 +154,7 @@
|
||||
</button>
|
||||
<button type="submit" formaction="{{ url_for('tape.print_tape') }}"
|
||||
class="bl-btn bl-btn-go">
|
||||
<i class="bi bi-printer"></i> Print {{ labels|length }} label{{ '' if labels|length == 1 else 's' }} to tape
|
||||
<i class="bi bi-printer"></i> Print {{ plan|length }} label{{ '' if plan|length == 1 else 's' }} to tape
|
||||
</button>
|
||||
<button type="submit" formaction="{{ url_for('tape.download_pdf') }}"
|
||||
class="bl-btn">
|
||||
@@ -142,7 +177,8 @@
|
||||
|
||||
<div class="bl-panel">
|
||||
<div class="bl-panel-head">
|
||||
<span>Preview — {{ labels|length }} label{{ '' if labels|length == 1 else 's' }} at actual proportions</span>
|
||||
<span>Preview — {{ plan|length }} label{{ '' if plan|length == 1 else 's' }}
|
||||
from {{ labels|length }} part{{ '' if labels|length == 1 else 's' }}</span>
|
||||
<button type="submit" class="bl-btn bl-btn-sm">Refresh preview</button>
|
||||
</div>
|
||||
<div class="bl-panel-body">
|
||||
@@ -151,10 +187,23 @@
|
||||
Every field is unticked, so the labels will print blank.
|
||||
Tick something under <em>Show on label</em>.</div>
|
||||
{% endif %}
|
||||
|
||||
{% if options.is_fixed and not tape_fits %}
|
||||
<div class="mb-2"><span class="bl-tag err">Tape too narrow</span>
|
||||
A {{ label_width_mm|int }}mm label needs 50mm tape.
|
||||
{{ tape.name }} is {{ tape.printable_mm }}mm printable, so labels
|
||||
will be scaled down. Load 50mm tape, or pick a different size.</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="bl-tape-preview">
|
||||
{% for label in labels[:12] %}
|
||||
<img class="mb-2" alt="{{ label.display_title }}"
|
||||
src="{{ url_for('tape.preview', id=label.id, tape=options.tape, _opts='1',
|
||||
{% for item in plan[:12] %}
|
||||
<div class="mb-2">
|
||||
<img alt="{{ item.labels | map(attribute='display_title') | join(' + ') }}"
|
||||
src="{{ url_for('tape.preview',
|
||||
ids=item.labels | map(attribute='id') | join(','),
|
||||
tape=options.tape, _opts='1',
|
||||
size_mode=options.size_mode,
|
||||
group_drawers='1' if options.group_drawers else '',
|
||||
font_scale=options.font_scale,
|
||||
image_percent=options.image_percent,
|
||||
padding_mm=options.padding_mm,
|
||||
@@ -162,17 +211,32 @@
|
||||
outline='1' if options.outline else '',
|
||||
fixed_length_mm=options.fixed_length_mm or '',
|
||||
fields=options.fields) }}">
|
||||
{% if item.width_mm %}
|
||||
<div class="k" style="text-transform:none;margin-top:2px;">
|
||||
{{ item.width_mm|int }} × {{ item.height_mm|int }}mm
|
||||
{%- if item.labels|length > 1 %} ·
|
||||
{{ item.labels|length }} parts in {{ item.drawer or 'one drawer' }}
|
||||
{%- elif item.drawer %} · {{ item.drawer }}{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if labels|length > 12 %}
|
||||
|
||||
{% if plan|length > 12 %}
|
||||
<div class="k mt-2" style="text-transform:none;">
|
||||
Showing the first 12 of {{ labels|length }}. All of them print.
|
||||
Showing the first 12 of {{ plan|length }}. All of them print.
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="k mt-2" style="text-transform:none;">
|
||||
Rendered at 313 dpi on {{ tape.tape_mm }}mm tape
|
||||
({{ tape.printable_mm }}mm printable). Preview is shown flat;
|
||||
the job is rotated if "Rotate for tape feed" is ticked.
|
||||
313 dpi on {{ tape.tape_mm }}mm tape ({{ tape.printable_mm }}mm printable).
|
||||
{% if options.is_fixed %}
|
||||
Labels lie across the tape, so this run uses about
|
||||
<strong>{{ (tape_used_mm / 10)|round(1) }}cm</strong> of tape
|
||||
({{ options.copies }} cop{{ 'y' if options.copies == 1 else 'ies' }} each).
|
||||
{% else %}
|
||||
Preview shown flat; the job is rotated if "Rotate for tape feed" is ticked.
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -214,8 +278,8 @@ document.getElementById('testBtn')?.addEventListener('click', function () {
|
||||
.catch(e => { out.innerHTML = '<span class="bl-tag err">Failed</span> ' + e; });
|
||||
});
|
||||
|
||||
// Changing the tape re-renders the preview.
|
||||
['tapeSelect'].forEach(id => {
|
||||
// Changing the tape or the label size re-renders the preview.
|
||||
['tapeSelect', 'sizeSelect'].forEach(id => {
|
||||
document.getElementById(id)?.addEventListener('change',
|
||||
() => document.getElementById('tapeForm').submit());
|
||||
});
|
||||
|
||||
Reference in new issue
Block a user