Added basic support for label barcodes (C39 and QR).

This commit is contained in:
Jan Böhmer 2020-04-24 22:10:49 +02:00
parent a7cfe7b42f
commit 6bd3ad6138
12 changed files with 620 additions and 46 deletions

View file

@ -1,21 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{{ meta_title }}</title>
<meta name="author" content="{{ partdb_title }}">
<meta name="description" content="Label for {{ meta_title }}">
<meta name="keywords" content="Part-DB, Label, Barcode">
<style>
{% include("LabelSystem/labels/label_style.css.twig") %}
</style>
</head>
<body>
{% for element in elements %}
{% include "LabelSystem/labels/label_page.html.twig" %}
{% if not loop.last %}
<div style="page-break-after: always;"></div>
{% endif %}
{% endfor %}
</body>
<head>
<meta charset="UTF-8">
<title>{{ meta_title }}</title>
<meta name="author" content="{{ partdb_title }}">
<meta name="description" content="Label for {{ meta_title }}">
<meta name="keywords" content="Part-DB, Label, Barcode">
<style>
{% include("LabelSystem/labels/label_style.css.twig") %}
</style>
</head>
<body>
{% for element in elements %}
<div style="page-break-inside: avoid; page-break-before: avoid; {% if not loop.last %}page-break-after: always;{% endif %}">
{% if options.barcodeType == 'none' %}
{% include "LabelSystem/labels/label_page_none.html.twig" %}
{% elseif options.barcodeType == 'qr' %}
{% include "LabelSystem/labels/label_page_qr.html.twig" %}
{% elseif options.barcodeType == 'code39' %}
{% include "LabelSystem/labels/label_page_1d.html.twig" %}
{% endif %}
</div>
{% endfor %}
</body>
</html>

View file

@ -0,0 +1,27 @@
<div>
<div class="lines-container">
{{ element.lines | raw }}
</div>
<div class="C39-container" style="">
<img class="C39" src="{{ inlineData(element.barcode, 'image/svg+xml') }}" height="30px">
<span class="C39-text">{{ element.barcode_content }}</span>
</div>
</div>
{#
<div>
<div class="row">
<div class="col-5">
<div class="C39-container">
<img class="C39" src="{{ inlineData(element.barcode, 'image/svg+xml') }}" width="100%" height="50px" style="">
</div>
</div>
<div class="col-7">
<div class="lines-container">
{{ element.lines | raw }}
</div>
</div>
</div>
</div>
#}

View file

@ -0,0 +1,17 @@
<div>
<div class="row">
<div class="col-5">
<div class="qr-container">
<a href="{{ element.barcode_content }}">
<img class="qr" src="{{ inlineData(element.barcode, 'image/svg+xml') }}" width="100%" style="">
</a>
</div>
{#{{ element.barcode | raw }} #}
</div>
<div class="col-7">
<div class="lines-container">
{{ element.lines | raw }}
</div>
</div>
</div>
</div>

View file

@ -1,5 +1,5 @@
@page {
margin: 5px 5px;
margin: 12px 6px;
}
body {
@ -14,4 +14,144 @@ p {
hr {
margin: 2px;
}
}
.qr {
max-width: 80%;
}
.qr-container a {
display: block;
}
.C39 {
max-width: 150px;
}
.C39-container {
display: inline-block;
align-content: center;
text-align: left;
position: fixed;
bottom: 32px;
}
.C39-text {
display: block;
margin-top: -6px;
font-size: 6pt;
}
/**************************************
Grid system token from simplegrid.io
SIMPLE GRID
(C) ZACH COLE 2016
************************************/
.font-light {
font-weight: 300;
}
.font-regular {
font-weight: 400;
}
.font-heavy {
font-weight: 700;
}
/* POSITIONING */
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.justify {
text-align: justify;
}
/* ==== GRID SYSTEM ==== */
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.row {
position: relative;
width: 100%;
page-break-after: avoid;
page-break-before: avoid;
page-break-inside: avoid;
}
.row [class^="col"] {
float: left;
margin: 0 1%;
min-height: 0.125rem ;
}
.row::after {
content: "";
display: table;
clear: both;
}
.col-1 {
width: 4.33%;
}
.col-2 {
width: 12.66%;
}
.col-3 {
width: 21%;
}
.col-4 {
width: 29.33%;
}
.col-5 {
width: 37.66%;
}
.col-6 {
width: 46%;
}
.col-7 {
width: 54.33%;
}
.col-8 {
width: 62.66%;
}
.col-9 {
width: 71%;
}
.col-10 {
width: 79.33%;
}
.col-11 {
width: 87.66%;
}
.col-12 {
width: 96%;
}