├── .gitignore
├── README.md
├── app.py
├── bql-label-printer.service
├── requirements.txt
├── static
    ├── app.css
    ├── app.js
    ├── dom-to-image-more.min.js
    ├── labels
    │   ├── 23x23_date.html
    │   ├── 23x23_qronly.html
    │   ├── 23x23_simple.html
    │   ├── 62_folder.html
    │   ├── 62x29_2rows.html
    │   ├── 62x29_4rows.html
    │   ├── 62x29_address.html
    │   ├── 62x29_dual.html
    │   ├── 62x29_simple.html
    │   ├── d12_large.html
    │   ├── d12_medium.html
    │   └── d12_tiny.html
    ├── qrcode.min.js
    └── sakura.css
└── templates
    ├── expiry.html
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | env/
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Brother Label Printer UI
 2 | 
 3 | This is a very simple web interface to create text labels on a Brother QL series label printers supported by [pklaus/brother_ql](https://github.com/pklaus/brother_ql).
 4 | 
 5 | ## Installation
 6 | 
 7 | Create a virtual environment and install the requirements
 8 | 
 9 |     $> virtualenv3 env
10 |     $> . env/bin/activate
11 |     $env> pip install -r requirements.txt
12 | 
13 | ## Running
14 | 
15 | Start the server by providing the model and connection string
16 | 
17 |     $env> ./app.py --model QL-500 tcp://192.168.1.1:9100
18 | 
19 | Run `app.py -h` for more info.
20 | 
21 | ## Using
22 | 
23 | Open your browser on the shown URL (defaults to `http://127.0.0.1:8013/`). The application uses modern JavaScript (promises, blobs, etc) and requires a modern browser. It was tested with Chrome only, but probably works in Firefox, too.
24 | 
25 | ## Label Templates
26 | 
27 | Labels are based on HTML templates located in the `static/labels/` directory. Templates need to start with a supported label size followed by an underscore. See [pklaus/brother_ql](https://github.com/pklaus/brother_ql) for a list of supported sizes.
28 | 
29 | The templates need to contain exactly one root element, specifying the exact size of the label in pixels (again, check the above site for proper values).
30 | 
31 | Elements containing an `input` class can be edited through the form.
32 | 
33 | Divs with the `qrcode` class will be converted to a QR Code. They also need the `input` class and a `data-value` attribute instead of an inner text.
34 | 
35 | ## Feedback
36 | 
37 | Please feel free to submit feedback in the form of pull requests.
38 | 
39 | ## Credits
40 | 
41 | Many thanks to the following projects:
42 | 
43 | * [pklaus/brother_ql](https://github.com/pklaus/brother_ql)
44 | * [1904labs/dom-to-image-more](https://github.com/1904labs/dom-to-image-more)
45 | * [oxalorg/sakura](https://github.com/oxalorg/sakura)
46 | * [KeeeX/qrcodejs](https://github.com/KeeeX/qrcodejs)
47 | 


--------------------------------------------------------------------------------
/app.py:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env python
  2 | 
  3 | """
  4 | Simple Web Interface to create labels on a Brother Printer
  5 | """
  6 | 
  7 | import sys
  8 | from glob import glob
  9 | from os.path import basename
 10 | 
 11 | from PIL import Image
 12 | from brother_ql import BrotherQLRaster, create_label
 13 | from brother_ql.backends import backend_factory, guess_backend
 14 | from brother_ql.devicedependent import models, label_type_specs, label_sizes
 15 | from flask import Flask
 16 | from flask import render_template
 17 | from flask import request
 18 | 
 19 | app = Flask(__name__)
 20 | 
 21 | DEBUG = False
 22 | MODEL = None
 23 | BACKEND_CLASS = None
 24 | BACKEND_STRING_DESCR = None
 25 | LABEL_SIZES = [(name, label_type_specs[name]['name']) for name in label_sizes]
 26 | 
 27 | 
 28 | @app.route('/')
 29 | def do_editor():
 30 |     """
 31 |     The main editor view
 32 |     :return:
 33 |     """
 34 |     return render_template(
 35 |         'index.html',
 36 |         labels=get_labels()
 37 |     )
 38 | 
 39 | @app.route('/expiry')
 40 | def do_expiry():
 41 |     """
 42 |     The expiry label view
 43 |     :return:
 44 |     """
 45 |     return render_template(
 46 |         'expiry.html'
 47 |     )
 48 | 
 49 | 
 50 | @app.route('/print', methods=['POST'])
 51 | def do_print():
 52 |     """
 53 |     Receive the image from the frontend and print it
 54 |     :return: string a simple 'ok' when no exception was thrown
 55 |     """
 56 |     im = Image.open(request.files['data'])
 57 |     qlr = BrotherQLRaster(MODEL)
 58 |     create_label(qlr, im, request.form['size'], threshold=70, cut=False, rotate=0)
 59 | 
 60 |     # noinspection PyCallingNonCallable
 61 |     be = BACKEND_CLASS(BACKEND_STRING_DESCR)
 62 |     be.write(qlr.data)
 63 |     be.dispose()
 64 |     del be
 65 | 
 66 |     return 'ok'
 67 | 
 68 | 
 69 | def get_labels():
 70 |     """
 71 |     List the available label templates
 72 |     :return:
 73 |     """
 74 |     filenames = glob(sys.path[0] + '/static/labels/*.html')
 75 |     filenames.sort()
 76 |     return [basename(x[:-5]) for x in filenames]
 77 | 
 78 | 
 79 | def main():
 80 |     """
 81 |     Initializes the webserver
 82 |     :return:
 83 |     """
 84 |     global DEBUG, MODEL, BACKEND_CLASS, BACKEND_STRING_DESCR
 85 |     import argparse
 86 |     parser = argparse.ArgumentParser(description=__doc__)
 87 |     parser.add_argument('--host', default='127.0.0.1', help='The IP the webserver should bind to. Use 0.0.0.0 for all')
 88 |     parser.add_argument('--port', default=8013, help='The port the webserver should start on')
 89 |     parser.add_argument('--debug', action='store_true', default=False, help='Activate flask debugging support')
 90 |     parser.add_argument('--model', default='QL-500', choices=models, help='The model of your printer (default: QL-500)')
 91 |     parser.add_argument('printer',
 92 |                         help='String descriptor for the printer to use (like tcp://192.168.0.23:9100 or '
 93 |                              'file:///dev/usb/lp0)')
 94 |     args = parser.parse_args()
 95 | 
 96 |     DEBUG = args.debug
 97 |     MODEL = args.model
 98 | 
 99 |     try:
100 |         selected_backend = guess_backend(args.printer)
101 |         BACKEND_CLASS = backend_factory(selected_backend)['backend_class']
102 |         BACKEND_STRING_DESCR = args.printer
103 |     except:
104 |         parser.error("Couldn't guess the backend to use from the printer string descriptor")
105 | 
106 |     app.run(host=args.host, port=args.port, debug=DEBUG)
107 | 
108 | 
109 | if __name__ == "__main__":
110 |     main()
111 | 


--------------------------------------------------------------------------------
/bql-label-printer.service:
--------------------------------------------------------------------------------
 1 | [Unit]
 2 | Description=Brother Label Printer UI
 3 | After=syslog.target network.target
 4 | 
 5 | [Service]
 6 | Type=simple
 7 | User=pi
 8 | WorkingDirectory=/home/pi/bql-label-printer
 9 | ExecStart=/home/pi/bql-label-printer/env/bin/python app.py --host 0.0.0.0 --model QL-500 tcp://192.168.1.1:9100
10 | Restart=on-abort
11 | 
12 | [Install]
13 | WantedBy=multi-user.target
14 | 


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | brother-ql==0.9.3
2 | Flask==1.0.2
3 | 


--------------------------------------------------------------------------------
/static/app.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     width: 100%;
 5 |     max-width: none;
 6 | }
 7 | 
 8 | main {
 9 |     margin: 1em auto;
10 |     max-width: 38em;
11 | }
12 | 
13 | section {
14 |     margin: 1em;
15 |     max-width: 100%;
16 |     overflow: auto;
17 | }
18 | 
19 | #expiry {
20 |     display: grid;
21 |     grid-template-columns: repeat(6, auto);
22 |     column-gap: 0.5em;
23 |     row-gap: 0.5em;
24 | }
25 | 
26 | #wrapper {
27 |     background-color: #fff;
28 |     color: #000;
29 |     display: inline-block;
30 |     border: 1px solid #333;
31 |     font-family: Arial, sans-serif;
32 |     line-height: normal;
33 |     transform-origin: top left;
34 | }
35 | 
36 | #wrapper>* {
37 |     overflow: hidden;
38 | }
39 | 
40 | #wrapper * {
41 |     color: #000;
42 | }
43 | 
44 | #wrapper div.single {
45 |     display: flex;
46 |     flex-direction: column;
47 |     justify-content: center;
48 |     text-align: center;
49 |     overflow: hidden;
50 |     white-space: nowrap;
51 | }
52 | 
53 | #wrapper div.multi {
54 |     display: flex;
55 |     flex-direction: column;
56 |     justify-content: center;
57 |     text-align: center;
58 |     overflow: hidden;
59 | }
60 | 
61 | #wrapper div.top {
62 |     justify-content: flex-start;
63 | }
64 | 
65 | #wrapper div.left {
66 |     text-align: left;
67 |     padding-left: 10px;
68 |     padding-right: 10px;
69 | }
70 | 
71 | #wrapper div.right {
72 |     text-align: right;
73 |     padding-left: 10px;
74 |     padding-right: 10px;
75 | }
76 | 


--------------------------------------------------------------------------------
/static/app.js:
--------------------------------------------------------------------------------
  1 | const labelSelect = document.getElementById('sel-label');
  2 | const wrapper = document.getElementById('wrapper');
  3 | const form = document.getElementById('form');
  4 | const button = document.getElementById('btn');
  5 | 
  6 | /**
  7 |  * Load a template
  8 |  */
  9 | if (labelSelect) {
 10 |     labelSelect.onchange = function loadTemplate() {
 11 |         fetch('/static/labels/' + labelSelect.value + '.html')
 12 |             .then(function (response) {
 13 |                 if (response.ok) {
 14 |                     return response.text();
 15 |                 }
 16 |                 throw new Error('Network response was not ok.');
 17 |             })
 18 |             .then(function (text) {
 19 |                 wrapper.innerHTML = text;
 20 | 
 21 |                 if (wrapper.firstChild.hasAttribute('data-scale')) {
 22 |                     wrapper.style.transform = 'scale(' + wrapper.firstChild.getAttribute('data-scale') + ')';
 23 |                 } else {
 24 |                     wrapper.style.transform = '';
 25 |                 }
 26 | 
 27 |                 buildForm();
 28 |                 buildQR();
 29 |             })
 30 |             .catch(function (error) {
 31 |                 console.error('oops, something went wrong!', error);
 32 |                 alert(error)
 33 |             })
 34 |         ;
 35 |     };
 36 |     labelSelect.onchange(); // first load
 37 | }
 38 | 
 39 | /**
 40 |  * Create the input form for the loaded template
 41 |  */
 42 | function buildForm() {
 43 |     const inputs = wrapper.querySelectorAll('.input');
 44 |     form.innerHTML = '';
 45 | 
 46 |     for (let input of inputs) {
 47 | 
 48 |         let inp = document.createElement('textarea');
 49 | 
 50 |         if (input.dataset.value) {
 51 |             inp.placeholder = input.dataset.value;
 52 |             inp.oninput = function () {
 53 |                 input.dataset.value = inp.value;
 54 |                 if (input.qrcode) {
 55 |                     input.qrcode.makeCode(inp.value);
 56 |                 }
 57 |             };
 58 |         } else {
 59 |             inp.placeholder = input.innerText;
 60 |             inp.oninput = function () {
 61 |                 input.innerText = inp.value;
 62 |             };
 63 |         }
 64 |         form.appendChild(inp);
 65 |     }
 66 | }
 67 | 
 68 | /**
 69 |  * Attach QR code handling
 70 |  */
 71 | function buildQR() {
 72 |     const inputs = wrapper.querySelectorAll('.qrcode');
 73 | 
 74 |     for (let input of inputs) {
 75 |         input.qrcode = new QRCode(input, {width: input.offsetWidth, height: input.offsetWidth});
 76 |         input.qrcode.makeCode(input.dataset.value);
 77 |     }
 78 | }
 79 | 
 80 | /**
 81 |  * Return the currently used label size
 82 |  *
 83 |  * @return {string}
 84 |  */
 85 | function getSize() {
 86 |     if(labelSelect) {
 87 |         return labelSelect.value.split('_')[0];
 88 |     } else {
 89 |         return FIXEDSIZE; // custom interfaces can set a global fixed size
 90 |     }
 91 | }
 92 | 
 93 | /**
 94 |  * Print the label
 95 |  */
 96 | button.onclick = function () {
 97 |     //const node = document.getElementById('label');
 98 |     const node = wrapper.querySelector(':first-child');
 99 |     console.log(node);
100 |     domtoimage.toBlob(node)
101 |         .then(function (blob) {
102 |             const fd = new FormData();
103 |             fd.append('data', blob);
104 |             fd.append('size', getSize());
105 | 
106 |             return fetch('/print', {
107 |                 method: 'POST',
108 |                 body: fd
109 |             });
110 |         })
111 |         .then(function (response) {
112 |             if (!response.ok) {
113 |                 throw new Error('Printing failed');
114 |             }
115 |         })
116 |         .catch(function (error) {
117 |             console.error('oops, something went wrong!', error);
118 |             alert(error)
119 |         })
120 |     ;
121 | 
122 |     /* debugging:
123 |     domtoimage.toPng(node)
124 |         .then(function (dataUrl) {
125 |             var img = new Image();
126 |             img.src = dataUrl;
127 |             document.body.appendChild(img);
128 |         })
129 |         .catch(function (error) {
130 |             console.error('oops, something went wrong!', error);
131 |         });
132 |     */
133 | };
134 | 
135 | 


--------------------------------------------------------------------------------
/static/dom-to-image-more.min.js:
--------------------------------------------------------------------------------
1 | /*! dom-to-image-more 17-06-2019 */
2 | 
3 | !function(e){"use strict";var s=function(){return{escape:function(e){return e.replace(/([.*+?^${}()|\[\]\/\\])/g,"\\$1")},parseExtension:n,mimeType:function(e){var t=n(e).toLowerCase();return function(){var e="application/font-woff",t="image/jpeg";return{woff:e,woff2:e,ttf:"application/font-truetype",eot:"application/vnd.ms-fontobject",png:"image/png",jpg:t,jpeg:t,gif:"image/gif",tiff:"image/tiff",svg:"image/svg+xml"}}()[t]||""},dataAsUrl:function(e,t){return"data:"+t+";base64,"+e},isDataUrl:function(e){return-1!==e.search(/^(data:)/)},canvasToBlob:function(t){return t.toBlob?new Promise(function(e){t.toBlob(e)}):function(i){return new Promise(function(e){for(var t=window.atob(i.toDataURL().split(",")[1]),n=t.length,r=new Uint8Array(n),o=0;o<n;o++)r[o]=t.charCodeAt(o);e(new Blob([r],{type:"image/png"}))})}(t)},resolveUrl:function(e,t){var n=document.implementation.createHTMLDocument(),r=n.createElement("base");n.head.appendChild(r);var o=n.createElement("a");return n.body.appendChild(o),r.href=t,o.href=e,o.href},getAndEncode:function(i){u.impl.options.cacheBust&&(i+=(/\?/.test(i)?"&":"?")+(new Date).getTime());return new Promise(function(n){var e,r=new XMLHttpRequest;if(r.onreadystatechange=function(){if(4!==r.readyState)return;if(200!==r.status)return void(e?n(e):o("cannot fetch resource: "+i+", status: "+r.status));var t=new FileReader;t.onloadend=function(){var e=t.result.split(/,/)[1];n(e)},t.readAsDataURL(r.response)},r.ontimeout=function(){e?n(e):o("timeout of 30000ms occured while fetching resource: "+i)},r.responseType="blob",r.timeout=3e4,u.impl.options.useCredentials&&(r.withCredentials=!0),r.open("GET",i,!0),r.send(),u.impl.options.imagePlaceholder){var t=u.impl.options.imagePlaceholder.split(/,/);t&&t[1]&&(e=t[1])}function o(e){console.error(e),n("")}})},uid:function(){var e=0;return function(){return"u"+("0000"+(Math.random()*Math.pow(36,4)<<0).toString(36)).slice(-4)+e++}}(),delay:function(n){return function(t){return new Promise(function(e){setTimeout(function(){e(t)},n)})}},asArray:function(e){for(var t=[],n=e.length,r=0;r<n;r++)t.push(e[r]);return t},escapeXhtml:function(e){return e.replace(/#/g,"%23").replace(/\n/g,"%0A")},makeImage:function(r){return"data:,"===r?Promise.resolve():new Promise(function(e,t){var n=new Image;u.impl.options.useCredentials&&(n.crossOrigin="use-credentials"),n.onload=function(){e(n)},n.onerror=t,n.src=r})},width:function(e){var t=r(e,"border-left-width"),n=r(e,"border-right-width");return e.scrollWidth+t+n},height:function(e){var t=r(e,"border-top-width"),n=r(e,"border-bottom-width");return e.scrollHeight+t+n}};function n(e){var t=/\.([^\.\/]*?)(\?|$)/g.exec(e);return t?t[1]:""}function r(e,t){var n=window.getComputedStyle(e).getPropertyValue(t);return parseFloat(n.replace("px",""))}}(),o=function(){var r=/url\(['"]?([^'"]+?)['"]?\)/g;return{inlineAll:function(t,r,o){return e(t)?Promise.resolve(t).then(n).then(function(e){var n=Promise.resolve(t);return e.forEach(function(t){n=n.then(function(e){return i(e,t,r,o)})}),n}):Promise.resolve(t)},shouldProcess:e,impl:{readUrls:n,inline:i}};function e(e){return-1!==e.search(r)}function n(e){for(var t,n=[];null!==(t=r.exec(e));)n.push(t[1]);return n.filter(function(e){return!s.isDataUrl(e)})}function i(t,n,r,e){return Promise.resolve(n).then(function(e){return r?s.resolveUrl(e,r):e}).then(e||s.getAndEncode).then(function(e){return s.dataAsUrl(e,s.mimeType(n))}).then(function(e){return t.replace(function(e){return new RegExp("(url\\(['\"]?)("+s.escape(e)+")(['\"]?\\))","g")}(n),"$1"+e+"$3")})}}(),t=function(){return{resolveAll:function(){return e(document).then(function(e){return Promise.all(e.map(function(e){return e.resolve()}))}).then(function(e){return e.join("\n")})},impl:{readAll:e}};function e(){return Promise.resolve(s.asArray(document.styleSheets)).then(function(e){var n=[];return e.forEach(function(t){if(t.hasOwnProperty("cssRules"))try{s.asArray(t.cssRules||[]).forEach(n.push.bind(n))}catch(e){console.log("Error while reading CSS rules from "+t.href,e.toString())}}),n}).then(function(e){return e.filter(function(e){return e.type===CSSRule.FONT_FACE_RULE}).filter(function(e){return o.shouldProcess(e.style.getPropertyValue("src"))})}).then(function(e){return e.map(t)});function t(t){return{resolve:function(){var e=(t.parentStyleSheet||{}).href;return o.inlineAll(t.cssText,e)},src:function(){return t.style.getPropertyValue("src")}}}}}(),n=function(){return{inlineAll:function t(e){if(!(e instanceof Element))return Promise.resolve(e);return n(e).then(function(){return e instanceof HTMLImageElement?r(e).inline():Promise.all(s.asArray(e.childNodes).map(function(e){return t(e)}))});function n(t){var e=t.style.getPropertyValue("background");return e?o.inlineAll(e).then(function(e){t.style.setProperty("background",e,t.style.getPropertyPriority("background"))}).then(function(){return t}):Promise.resolve(t)}},impl:{newImage:r}};function r(n){return{inline:function(e){return s.isDataUrl(n.src)?Promise.resolve():Promise.resolve(n.src).then(e||s.getAndEncode).then(function(e){return s.dataAsUrl(e,s.mimeType(n.src))}).then(function(t){return new Promise(function(e){n.onload=e,n.onerror=e,n.src=t})})}}}}(),r={imagePlaceholder:void 0,cacheBust:!1,useCredentials:!1},u={toSvg:a,toPng:function(e,t){return i(e,t||{}).then(function(e){return e.toDataURL()})},toJpeg:function(e,t){return i(e,t=t||{}).then(function(e){return e.toDataURL("image/jpeg",t.quality||1)})},toBlob:function(e,t){return i(e,t||{}).then(s.canvasToBlob)},toPixelData:function(t,e){return i(t,e||{}).then(function(e){return e.getContext("2d").getImageData(0,0,s.width(t),s.height(t)).data})},toCanvas:function(e,t){return i(e,t||{})},impl:{fontFaces:t,images:n,util:s,inliner:o,options:{}}};function a(t,n){return function(e){void 0===e.imagePlaceholder?u.impl.options.imagePlaceholder=r.imagePlaceholder:u.impl.options.imagePlaceholder=e.imagePlaceholder;void 0===e.cacheBust?u.impl.options.cacheBust=r.cacheBust:u.impl.options.cacheBust=e.cacheBust;void 0===e.useCredentials?u.impl.options.useCredentials=r.useCredentials:u.impl.options.useCredentials=e.useCredentials}(n=n||{}),Promise.resolve(t).then(function(e){return function i(t,n,e){if(!e&&n&&!n(t))return Promise.resolve();return Promise.resolve(t).then(r).then(function(e){return o(t,e,n)}).then(function(e){return u(t,e)});function r(e){return e instanceof HTMLCanvasElement?s.makeImage(e.toDataURL()):e.cloneNode(!1)}function o(e,t,n){var r=e.childNodes;return 0===r.length?Promise.resolve(t):o(t,s.asArray(r),n).then(function(){return t});function o(t,e,n){var r=Promise.resolve();return e.forEach(function(e){r=r.then(function(){return i(e,n)}).then(function(e){e&&t.appendChild(e)})}),r}}function u(a,c){return c instanceof Element?Promise.resolve().then(e).then(t).then(n).then(r).then(function(){return c}):c;function e(){function e(e,t){var n,r;e.cssText?(t.cssText=e.cssText,t.font=e.font):(n=e,r=t,s.asArray(n).forEach(function(e){r.setProperty(e,n.getPropertyValue(e),n.getPropertyPriority(e))}))}e(window.getComputedStyle(a),c.style)}function t(){function t(e){var t=window.getComputedStyle(a,e),n=t.getPropertyValue("content");if(""!==n&&"none"!==n){var r=s.uid(),o=c.getAttribute("class");o&&c.setAttribute("class",o+" "+r);var i=document.createElement("style");i.appendChild(u(r,e,t)),c.appendChild(i)}function u(e,t,n){var r,o,i="."+e+":"+t,u=n.cssText?(o=(r=n).getPropertyValue("content"),r.cssText+" content: "+o+";"):a(n);return document.createTextNode(i+"{"+u+"}");function a(t){return s.asArray(t).map(e).join("; ")+";";function e(e){return e+": "+t.getPropertyValue(e)+(t.getPropertyPriority(e)?" !important":"")}}}}[":before",":after"].forEach(function(e){t(e)})}function n(){a instanceof HTMLTextAreaElement&&(c.innerHTML=a.value),a instanceof HTMLInputElement&&c.setAttribute("value",a.value)}function r(){c instanceof SVGElement&&(c.setAttribute("xmlns","http://www.w3.org/2000/svg"),c instanceof SVGRectElement&&["width","height"].forEach(function(e){var t=c.getAttribute(e);t&&c.style.setProperty(e,t)}))}}}(e,n.filter,!0)}).then(c).then(l).then(function(t){n.bgcolor&&(t.style.backgroundColor=n.bgcolor);n.width&&(t.style.width=n.width+"px");n.height&&(t.style.height=n.height+"px");n.style&&Object.keys(n.style).forEach(function(e){t.style[e]=n.style[e]});var e=null;"function"==typeof n.onclone&&(e=n.onclone(t));return Promise.resolve(e).then(function(){return t})}).then(function(e){return function(e,t,n){return Promise.resolve(e).then(function(e){return e.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),(new XMLSerializer).serializeToString(e)}).then(s.escapeXhtml).then(function(e){return'<foreignObject x="0" y="0" width="100%" height="100%">'+e+"</foreignObject>"}).then(function(e){return'<svg xmlns="http://www.w3.org/2000/svg" width="'+t+'" height="'+n+'">'+e+"</svg>"}).then(function(e){return"data:image/svg+xml;charset=utf-8,"+e})}(e,n.width||s.width(t),n.height||s.height(t))})}function i(o,i){return a(o,i).then(s.makeImage).then(s.delay(100)).then(function(e){var t="number"!=typeof i.scale?1:i.scale,n=function(e,t){var n=document.createElement("canvas");if(n.width=(i.width||s.width(e))*t,n.height=(i.height||s.height(e))*t,i.bgcolor){var r=n.getContext("2d");r.fillStyle=i.bgcolor,r.fillRect(0,0,n.width,n.height)}return n}(o,t),r=n.getContext("2d");return e&&(r.scale(t,t),r.drawImage(e,0,0)),n})}function c(n){return t.resolveAll().then(function(e){var t=document.createElement("style");return n.appendChild(t),t.appendChild(document.createTextNode(e)),n})}function l(e){return n.inlineAll(e).then(function(){return e})}"object"==typeof exports&&"object"==typeof module?module.exports=u:e.domtoimage=u}(this);


--------------------------------------------------------------------------------
/static/labels/23x23_date.html:
--------------------------------------------------------------------------------
1 | <div style="width: 202px; height:202px;">
2 |     <div class="single center" style="height:91px; font-size: 75px;">
3 |         <span class="input">Mnth</span>
4 |     </div>
5 |     <div class="single center" style="height:111px; font-size: 90px; font-weight: bold;">
6 |         <span class="input">Year</span>
7 |     </div>
8 | </div>
9 | 


--------------------------------------------------------------------------------
/static/labels/23x23_qronly.html:
--------------------------------------------------------------------------------
1 | <div style="width: 202px; height:202px;">
2 |     <div class="qrcode input" style="width: 202px;" data-value="QR Code"></div>
3 | </div>


--------------------------------------------------------------------------------
/static/labels/23x23_simple.html:
--------------------------------------------------------------------------------
1 | <div style="width: 202px; height:202px;">
2 |     <div class="multi center" style="height: 202px; font-size: 35px; font-weight: bold;">
3 |         <span class="input">Main Label</span>
4 |     </div>
5 | </div>


--------------------------------------------------------------------------------
/static/labels/62_folder.html:
--------------------------------------------------------------------------------
 1 | <div data-scale="0.3" style="width: 696px; height:2400px;">
 2 |     <div class="multi center top" style="height:780px; font-size: 120px; font-weight: bold;">
 3 |         <span class="input">Main Label</span>
 4 |     </div>
 5 |     <div class="multi left top" style="height:1370px; font-size: 80px;">
 6 |         <span class="input">Sub Labels</span>
 7 |     </div>
 8 |     <div class="single center" style="height:250px; font-size: 150px; font-weight: bold;">
 9 |         <span class="input">Count</span>
10 |     </div>
11 | </div>
12 | 


--------------------------------------------------------------------------------
/static/labels/62x29_2rows.html:
--------------------------------------------------------------------------------
 1 | <div data-scale="0.5" style="width: 696px; height:271px;">
 2 |     <div class="single left" style="height:90px; font-size: 75px; font-weight: bold;">
 3 |         <span class="input">Main Label</span>
 4 |     </div>
 5 |     <div class="multi left" style="height:181px; font-size: 55px;">
 6 |         <span class="input">Sub Label</span>
 7 |     </div>
 8 | 
 9 | </div>
10 | 


--------------------------------------------------------------------------------
/static/labels/62x29_4rows.html:
--------------------------------------------------------------------------------
 1 | <div data-scale="0.5" style="width: 696px; height:271px;">
 2 |     <div class="single" style="height:70px; font-size: 55px; font-weight: bold">
 3 |         <span class="input">Main Label</span>
 4 |     </div>
 5 |     <div class="single" style="height:60px; font-size: 50px; font-style: italic">
 6 |         <span class="input">Sub Label</span>
 7 |     </div>
 8 |     <div class="multi" style="height:60px; font-size: 30px">
 9 |         <span class="input">Info</span>
10 |     </div>
11 |     <div class="multi" style="height:81px; font-size: 20px">
12 |         <span class="input">Small Print</span>
13 |     </div>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/static/labels/62x29_address.html:
--------------------------------------------------------------------------------
1 | <div data-scale="0.5" style="width: 696px; height:271px;">
2 |     <div class="multi left" style="height:271px; font-size: 50px">
3 |         <span class="input">Address</span>
4 |     </div>
5 | </div>
6 | 


--------------------------------------------------------------------------------
/static/labels/62x29_dual.html:
--------------------------------------------------------------------------------
1 | <div  data-scale="0.5" style="width: 696px; height:271px;">
2 |     <div class="multi" style="height:271px; width: 45%; float: left; font-size: 50px">
3 |         <span class="input">Front</span>
4 |     </div>
5 |     <div class="multi" style="height:271px; width: 45%; float: right; font-size: 50px">
6 |         <span class="input">Back</span>
7 |     </div>
8 | </div>
9 | 


--------------------------------------------------------------------------------
/static/labels/62x29_simple.html:
--------------------------------------------------------------------------------
1 | <div data-scale="0.5" style="width: 696px; height:271px;">
2 |     <div class="multi center" style="height:271px; font-size: 75px; font-weight: bold;">
3 |         <span class="input">Main Label</span>
4 |     </div>
5 | </div>
6 | 


--------------------------------------------------------------------------------
/static/labels/d12_large.html:
--------------------------------------------------------------------------------
1 | <div style="width: 94px; height:94px;">
2 |     <div class="multi center" style="height: 94px; font-size: 42px; font-weight: bold;">
3 |         <span class="input">ML</span>
4 |     </div>
5 | </div>
6 | 


--------------------------------------------------------------------------------
/static/labels/d12_medium.html:
--------------------------------------------------------------------------------
1 | <div style="width: 94px; height:94px;">
2 |     <div class="multi center" style="height: 94px; font-size: 22px; font-weight: bold;">
3 |         <span class="input">Main Label</span>
4 |     </div>
5 | </div>
6 | 


--------------------------------------------------------------------------------
/static/labels/d12_tiny.html:
--------------------------------------------------------------------------------
1 | <div style="width: 94px; height:94px;">
2 |     <div class="multi center" style="height: 94px; font-size: 14px; font-weight: bold;">
3 |         <span class="input">Main Label</span>
4 |     </div>
5 | </div>
6 | 


--------------------------------------------------------------------------------
/static/qrcode.min.js:
--------------------------------------------------------------------------------
1 | var QRCode;!function(){function a(a){this.mode=c.MODE_8BIT_BYTE,this.data=a,this.parsedData=[];for(var b=[],d=0,e=this.data.length;e>d;d++){var f=this.data.charCodeAt(d);f>65536?(b[0]=240|(1835008&f)>>>18,b[1]=128|(258048&f)>>>12,b[2]=128|(4032&f)>>>6,b[3]=128|63&f):f>2048?(b[0]=224|(61440&f)>>>12,b[1]=128|(4032&f)>>>6,b[2]=128|63&f):f>128?(b[0]=192|(1984&f)>>>6,b[1]=128|63&f):b[0]=f,this.parsedData=this.parsedData.concat(b)}this.parsedData.length!=this.data.length&&(this.parsedData.unshift(191),this.parsedData.unshift(187),this.parsedData.unshift(239))}function b(a,b){this.typeNumber=a,this.errorCorrectLevel=b,this.modules=null,this.moduleCount=0,this.dataCache=null,this.dataList=[]}function i(a,b){if(void 0==a.length)throw new Error(a.length+"/"+b);for(var c=0;c<a.length&&0==a[c];)c++;this.num=new Array(a.length-c+b);for(var d=0;d<a.length-c;d++)this.num[d]=a[d+c]}function j(a,b){this.totalCount=a,this.dataCount=b}function k(){this.buffer=[],this.length=0}function m(){return"undefined"!=typeof CanvasRenderingContext2D}function n(){var a=!1,b=navigator.userAgent;return/android/i.test(b)&&(a=!0,aMat=b.toString().match(/android ([0-9]\.[0-9])/i),aMat&&aMat[1]&&(a=parseFloat(aMat[1]))),a}function r(a,b){for(var c=1,e=s(a),f=0,g=l.length;g>=f;f++){var h=0;switch(b){case d.L:h=l[f][0];break;case d.M:h=l[f][1];break;case d.Q:h=l[f][2];break;case d.H:h=l[f][3]}if(h>=e)break;c++}if(c>l.length)throw new Error("Too long data");return c}function s(a){var b=encodeURI(a).toString().replace(/\%[0-9a-fA-F]{2}/g,"a");return b.length+(b.length!=a?3:0)}a.prototype={getLength:function(){return this.parsedData.length},write:function(a){for(var b=0,c=this.parsedData.length;c>b;b++)a.put(this.parsedData[b],8)}},b.prototype={addData:function(b){var c=new a(b);this.dataList.push(c),this.dataCache=null},isDark:function(a,b){if(0>a||this.moduleCount<=a||0>b||this.moduleCount<=b)throw new Error(a+","+b);return this.modules[a][b]},getModuleCount:function(){return this.moduleCount},make:function(){this.makeImpl(!1,this.getBestMaskPattern())},makeImpl:function(a,c){this.moduleCount=4*this.typeNumber+17,this.modules=new Array(this.moduleCount);for(var d=0;d<this.moduleCount;d++){this.modules[d]=new Array(this.moduleCount);for(var e=0;e<this.moduleCount;e++)this.modules[d][e]=null}this.setupPositionProbePattern(0,0),this.setupPositionProbePattern(this.moduleCount-7,0),this.setupPositionProbePattern(0,this.moduleCount-7),this.setupPositionAdjustPattern(),this.setupTimingPattern(),this.setupTypeInfo(a,c),this.typeNumber>=7&&this.setupTypeNumber(a),null==this.dataCache&&(this.dataCache=b.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,c)},setupPositionProbePattern:function(a,b){for(var c=-1;7>=c;c++)if(!(-1>=a+c||this.moduleCount<=a+c))for(var d=-1;7>=d;d++)-1>=b+d||this.moduleCount<=b+d||(this.modules[a+c][b+d]=c>=0&&6>=c&&(0==d||6==d)||d>=0&&6>=d&&(0==c||6==c)||c>=2&&4>=c&&d>=2&&4>=d?!0:!1)},getBestMaskPattern:function(){for(var a=0,b=0,c=0;8>c;c++){this.makeImpl(!0,c);var d=f.getLostPoint(this);(0==c||a>d)&&(a=d,b=c)}return b},createMovieClip:function(a,b,c){var d=a.createEmptyMovieClip(b,c),e=1;this.make();for(var f=0;f<this.modules.length;f++)for(var g=f*e,h=0;h<this.modules[f].length;h++){var i=h*e,j=this.modules[f][h];j&&(d.beginFill(0,100),d.moveTo(i,g),d.lineTo(i+e,g),d.lineTo(i+e,g+e),d.lineTo(i,g+e),d.endFill())}return d},setupTimingPattern:function(){for(var a=8;a<this.moduleCount-8;a++)null==this.modules[a][6]&&(this.modules[a][6]=0==a%2);for(var b=8;b<this.moduleCount-8;b++)null==this.modules[6][b]&&(this.modules[6][b]=0==b%2)},setupPositionAdjustPattern:function(){for(var a=f.getPatternPosition(this.typeNumber),b=0;b<a.length;b++)for(var c=0;c<a.length;c++){var d=a[b],e=a[c];if(null==this.modules[d][e])for(var g=-2;2>=g;g++)for(var h=-2;2>=h;h++)this.modules[d+g][e+h]=-2==g||2==g||-2==h||2==h||0==g&&0==h?!0:!1}},setupTypeNumber:function(a){for(var b=f.getBCHTypeNumber(this.typeNumber),c=0;18>c;c++){var d=!a&&1==(1&b>>c);this.modules[Math.floor(c/3)][c%3+this.moduleCount-8-3]=d}for(var c=0;18>c;c++){var d=!a&&1==(1&b>>c);this.modules[c%3+this.moduleCount-8-3][Math.floor(c/3)]=d}},setupTypeInfo:function(a,b){for(var c=this.errorCorrectLevel<<3|b,d=f.getBCHTypeInfo(c),e=0;15>e;e++){var g=!a&&1==(1&d>>e);6>e?this.modules[e][8]=g:8>e?this.modules[e+1][8]=g:this.modules[this.moduleCount-15+e][8]=g}for(var e=0;15>e;e++){var g=!a&&1==(1&d>>e);8>e?this.modules[8][this.moduleCount-e-1]=g:9>e?this.modules[8][15-e-1+1]=g:this.modules[8][15-e-1]=g}this.modules[this.moduleCount-8][8]=!a},mapData:function(a,b){for(var c=-1,d=this.moduleCount-1,e=7,g=0,h=this.moduleCount-1;h>0;h-=2)for(6==h&&h--;;){for(var i=0;2>i;i++)if(null==this.modules[d][h-i]){var j=!1;g<a.length&&(j=1==(1&a[g]>>>e));var k=f.getMask(b,d,h-i);k&&(j=!j),this.modules[d][h-i]=j,e--,-1==e&&(g++,e=7)}if(d+=c,0>d||this.moduleCount<=d){d-=c,c=-c;break}}}},b.PAD0=236,b.PAD1=17,b.createData=function(a,c,d){for(var e=j.getRSBlocks(a,c),g=new k,h=0;h<d.length;h++){var i=d[h];g.put(i.mode,4),g.put(i.getLength(),f.getLengthInBits(i.mode,a)),i.write(g)}for(var l=0,h=0;h<e.length;h++)l+=e[h].dataCount;if(g.getLengthInBits()>8*l)throw new Error("code length overflow. ("+g.getLengthInBits()+">"+8*l+")");for(g.getLengthInBits()+4<=8*l&&g.put(0,4);0!=g.getLengthInBits()%8;)g.putBit(!1);for(;;){if(g.getLengthInBits()>=8*l)break;if(g.put(b.PAD0,8),g.getLengthInBits()>=8*l)break;g.put(b.PAD1,8)}return b.createBytes(g,e)},b.createBytes=function(a,b){for(var c=0,d=0,e=0,g=new Array(b.length),h=new Array(b.length),j=0;j<b.length;j++){var k=b[j].dataCount,l=b[j].totalCount-k;d=Math.max(d,k),e=Math.max(e,l),g[j]=new Array(k);for(var m=0;m<g[j].length;m++)g[j][m]=255&a.buffer[m+c];c+=k;var n=f.getErrorCorrectPolynomial(l),o=new i(g[j],n.getLength()-1),p=o.mod(n);h[j]=new Array(n.getLength()-1);for(var m=0;m<h[j].length;m++){var q=m+p.getLength()-h[j].length;h[j][m]=q>=0?p.get(q):0}}for(var r=0,m=0;m<b.length;m++)r+=b[m].totalCount;for(var s=new Array(r),t=0,m=0;d>m;m++)for(var j=0;j<b.length;j++)m<g[j].length&&(s[t++]=g[j][m]);for(var m=0;e>m;m++)for(var j=0;j<b.length;j++)m<h[j].length&&(s[t++]=h[j][m]);return s};for(var c={MODE_NUMBER:1,MODE_ALPHA_NUM:2,MODE_8BIT_BYTE:4,MODE_KANJI:8},d={L:1,M:0,Q:3,H:2},e={PATTERN000:0,PATTERN001:1,PATTERN010:2,PATTERN011:3,PATTERN100:4,PATTERN101:5,PATTERN110:6,PATTERN111:7},f={PATTERN_POSITION_TABLE:[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],G15:1335,G18:7973,G15_MASK:21522,getBCHTypeInfo:function(a){for(var b=a<<10;f.getBCHDigit(b)-f.getBCHDigit(f.G15)>=0;)b^=f.G15<<f.getBCHDigit(b)-f.getBCHDigit(f.G15);return(a<<10|b)^f.G15_MASK},getBCHTypeNumber:function(a){for(var b=a<<12;f.getBCHDigit(b)-f.getBCHDigit(f.G18)>=0;)b^=f.G18<<f.getBCHDigit(b)-f.getBCHDigit(f.G18);return a<<12|b},getBCHDigit:function(a){for(var b=0;0!=a;)b++,a>>>=1;return b},getPatternPosition:function(a){return f.PATTERN_POSITION_TABLE[a-1]},getMask:function(a,b,c){switch(a){case e.PATTERN000:return 0==(b+c)%2;case e.PATTERN001:return 0==b%2;case e.PATTERN010:return 0==c%3;case e.PATTERN011:return 0==(b+c)%3;case e.PATTERN100:return 0==(Math.floor(b/2)+Math.floor(c/3))%2;case e.PATTERN101:return 0==b*c%2+b*c%3;case e.PATTERN110:return 0==(b*c%2+b*c%3)%2;case e.PATTERN111:return 0==(b*c%3+(b+c)%2)%2;default:throw new Error("bad maskPattern:"+a)}},getErrorCorrectPolynomial:function(a){for(var b=new i([1],0),c=0;a>c;c++)b=b.multiply(new i([1,g.gexp(c)],0));return b},getLengthInBits:function(a,b){if(b>=1&&10>b)switch(a){case c.MODE_NUMBER:return 10;case c.MODE_ALPHA_NUM:return 9;case c.MODE_8BIT_BYTE:return 8;case c.MODE_KANJI:return 8;default:throw new Error("mode:"+a)}else if(27>b)switch(a){case c.MODE_NUMBER:return 12;case c.MODE_ALPHA_NUM:return 11;case c.MODE_8BIT_BYTE:return 16;case c.MODE_KANJI:return 10;default:throw new Error("mode:"+a)}else{if(!(41>b))throw new Error("type:"+b);switch(a){case c.MODE_NUMBER:return 14;case c.MODE_ALPHA_NUM:return 13;case c.MODE_8BIT_BYTE:return 16;case c.MODE_KANJI:return 12;default:throw new Error("mode:"+a)}}},getLostPoint:function(a){for(var b=a.getModuleCount(),c=0,d=0;b>d;d++)for(var e=0;b>e;e++){for(var f=0,g=a.isDark(d,e),h=-1;1>=h;h++)if(!(0>d+h||d+h>=b))for(var i=-1;1>=i;i++)0>e+i||e+i>=b||(0!=h||0!=i)&&g==a.isDark(d+h,e+i)&&f++;f>5&&(c+=3+f-5)}for(var d=0;b-1>d;d++)for(var e=0;b-1>e;e++){var j=0;a.isDark(d,e)&&j++,a.isDark(d+1,e)&&j++,a.isDark(d,e+1)&&j++,a.isDark(d+1,e+1)&&j++,(0==j||4==j)&&(c+=3)}for(var d=0;b>d;d++)for(var e=0;b-6>e;e++)a.isDark(d,e)&&!a.isDark(d,e+1)&&a.isDark(d,e+2)&&a.isDark(d,e+3)&&a.isDark(d,e+4)&&!a.isDark(d,e+5)&&a.isDark(d,e+6)&&(c+=40);for(var e=0;b>e;e++)for(var d=0;b-6>d;d++)a.isDark(d,e)&&!a.isDark(d+1,e)&&a.isDark(d+2,e)&&a.isDark(d+3,e)&&a.isDark(d+4,e)&&!a.isDark(d+5,e)&&a.isDark(d+6,e)&&(c+=40);for(var k=0,e=0;b>e;e++)for(var d=0;b>d;d++)a.isDark(d,e)&&k++;var l=Math.abs(100*k/b/b-50)/5;return c+=10*l}},g={glog:function(a){if(1>a)throw new Error("glog("+a+")");return g.LOG_TABLE[a]},gexp:function(a){for(;0>a;)a+=255;for(;a>=256;)a-=255;return g.EXP_TABLE[a]},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)},h=0;8>h;h++)g.EXP_TABLE[h]=1<<h;for(var h=8;256>h;h++)g.EXP_TABLE[h]=g.EXP_TABLE[h-4]^g.EXP_TABLE[h-5]^g.EXP_TABLE[h-6]^g.EXP_TABLE[h-8];for(var h=0;255>h;h++)g.LOG_TABLE[g.EXP_TABLE[h]]=h;i.prototype={get:function(a){return this.num[a]},getLength:function(){return this.num.length},multiply:function(a){for(var b=new Array(this.getLength()+a.getLength()-1),c=0;c<this.getLength();c++)for(var d=0;d<a.getLength();d++)b[c+d]^=g.gexp(g.glog(this.get(c))+g.glog(a.get(d)));return new i(b,0)},mod:function(a){if(this.getLength()-a.getLength()<0)return this;for(var b=g.glog(this.get(0))-g.glog(a.get(0)),c=new Array(this.getLength()),d=0;d<this.getLength();d++)c[d]=this.get(d);for(var d=0;d<a.getLength();d++)c[d]^=g.gexp(g.glog(a.get(d))+b);return new i(c,0).mod(a)}},j.RS_BLOCK_TABLE=[[1,26,19],[1,26,16],[1,26,13],[1,26,9],[1,44,34],[1,44,28],[1,44,22],[1,44,16],[1,70,55],[1,70,44],[2,35,17],[2,35,13],[1,100,80],[2,50,32],[2,50,24],[4,25,9],[1,134,108],[2,67,43],[2,33,15,2,34,16],[2,33,11,2,34,12],[2,86,68],[4,43,27],[4,43,19],[4,43,15],[2,98,78],[4,49,31],[2,32,14,4,33,15],[4,39,13,1,40,14],[2,121,97],[2,60,38,2,61,39],[4,40,18,2,41,19],[4,40,14,2,41,15],[2,146,116],[3,58,36,2,59,37],[4,36,16,4,37,17],[4,36,12,4,37,13],[2,86,68,2,87,69],[4,69,43,1,70,44],[6,43,19,2,44,20],[6,43,15,2,44,16],[4,101,81],[1,80,50,4,81,51],[4,50,22,4,51,23],[3,36,12,8,37,13],[2,116,92,2,117,93],[6,58,36,2,59,37],[4,46,20,6,47,21],[7,42,14,4,43,15],[4,133,107],[8,59,37,1,60,38],[8,44,20,4,45,21],[12,33,11,4,34,12],[3,145,115,1,146,116],[4,64,40,5,65,41],[11,36,16,5,37,17],[11,36,12,5,37,13],[5,109,87,1,110,88],[5,65,41,5,66,42],[5,54,24,7,55,25],[11,36,12,7,37,13],[5,122,98,1,123,99],[7,73,45,3,74,46],[15,43,19,2,44,20],[3,45,15,13,46,16],[1,135,107,5,136,108],[10,74,46,1,75,47],[1,50,22,15,51,23],[2,42,14,17,43,15],[5,150,120,1,151,121],[9,69,43,4,70,44],[17,50,22,1,51,23],[2,42,14,19,43,15],[3,141,113,4,142,114],[3,70,44,11,71,45],[17,47,21,4,48,22],[9,39,13,16,40,14],[3,135,107,5,136,108],[3,67,41,13,68,42],[15,54,24,5,55,25],[15,43,15,10,44,16],[4,144,116,4,145,117],[17,68,42],[17,50,22,6,51,23],[19,46,16,6,47,17],[2,139,111,7,140,112],[17,74,46],[7,54,24,16,55,25],[34,37,13],[4,151,121,5,152,122],[4,75,47,14,76,48],[11,54,24,14,55,25],[16,45,15,14,46,16],[6,147,117,4,148,118],[6,73,45,14,74,46],[11,54,24,16,55,25],[30,46,16,2,47,17],[8,132,106,4,133,107],[8,75,47,13,76,48],[7,54,24,22,55,25],[22,45,15,13,46,16],[10,142,114,2,143,115],[19,74,46,4,75,47],[28,50,22,6,51,23],[33,46,16,4,47,17],[8,152,122,4,153,123],[22,73,45,3,74,46],[8,53,23,26,54,24],[12,45,15,28,46,16],[3,147,117,10,148,118],[3,73,45,23,74,46],[4,54,24,31,55,25],[11,45,15,31,46,16],[7,146,116,7,147,117],[21,73,45,7,74,46],[1,53,23,37,54,24],[19,45,15,26,46,16],[5,145,115,10,146,116],[19,75,47,10,76,48],[15,54,24,25,55,25],[23,45,15,25,46,16],[13,145,115,3,146,116],[2,74,46,29,75,47],[42,54,24,1,55,25],[23,45,15,28,46,16],[17,145,115],[10,74,46,23,75,47],[10,54,24,35,55,25],[19,45,15,35,46,16],[17,145,115,1,146,116],[14,74,46,21,75,47],[29,54,24,19,55,25],[11,45,15,46,46,16],[13,145,115,6,146,116],[14,74,46,23,75,47],[44,54,24,7,55,25],[59,46,16,1,47,17],[12,151,121,7,152,122],[12,75,47,26,76,48],[39,54,24,14,55,25],[22,45,15,41,46,16],[6,151,121,14,152,122],[6,75,47,34,76,48],[46,54,24,10,55,25],[2,45,15,64,46,16],[17,152,122,4,153,123],[29,74,46,14,75,47],[49,54,24,10,55,25],[24,45,15,46,46,16],[4,152,122,18,153,123],[13,74,46,32,75,47],[48,54,24,14,55,25],[42,45,15,32,46,16],[20,147,117,4,148,118],[40,75,47,7,76,48],[43,54,24,22,55,25],[10,45,15,67,46,16],[19,148,118,6,149,119],[18,75,47,31,76,48],[34,54,24,34,55,25],[20,45,15,61,46,16]],j.getRSBlocks=function(a,b){var c=j.getRsBlockTable(a,b);if(void 0==c)throw new Error("bad rs block @ typeNumber:"+a+"/errorCorrectLevel:"+b);for(var d=c.length/3,e=[],f=0;d>f;f++)for(var g=c[3*f+0],h=c[3*f+1],i=c[3*f+2],k=0;g>k;k++)e.push(new j(h,i));return e},j.getRsBlockTable=function(a,b){switch(b){case d.L:return j.RS_BLOCK_TABLE[4*(a-1)+0];case d.M:return j.RS_BLOCK_TABLE[4*(a-1)+1];case d.Q:return j.RS_BLOCK_TABLE[4*(a-1)+2];case d.H:return j.RS_BLOCK_TABLE[4*(a-1)+3];default:return void 0}},k.prototype={get:function(a){var b=Math.floor(a/8);return 1==(1&this.buffer[b]>>>7-a%8)},put:function(a,b){for(var c=0;b>c;c++)this.putBit(1==(1&a>>>b-c-1))},getLengthInBits:function(){return this.length},putBit:function(a){var b=Math.floor(this.length/8);this.buffer.length<=b&&this.buffer.push(0),a&&(this.buffer[b]|=128>>>this.length%8),this.length++}};var l=[[17,14,11,7],[32,26,20,14],[53,42,32,24],[78,62,46,34],[106,84,60,44],[134,106,74,58],[154,122,86,64],[192,152,108,84],[230,180,130,98],[271,213,151,119],[321,251,177,137],[367,287,203,155],[425,331,241,177],[458,362,258,194],[520,412,292,220],[586,450,322,250],[644,504,364,280],[718,560,394,310],[792,624,442,338],[858,666,482,382],[929,711,509,403],[1003,779,565,439],[1091,857,611,461],[1171,911,661,511],[1273,997,715,535],[1367,1059,751,593],[1465,1125,805,625],[1528,1190,868,658],[1628,1264,908,698],[1732,1370,982,742],[1840,1452,1030,790],[1952,1538,1112,842],[2068,1628,1168,898],[2188,1722,1228,958],[2303,1809,1283,983],[2431,1911,1351,1051],[2563,1989,1423,1093],[2699,2099,1499,1139],[2809,2213,1579,1219],[2953,2331,1663,1273]],o=function(){var a=function(a,b){this._el=a,this._htOption=b};return a.prototype.draw=function(a){function g(a,b){var c=document.createElementNS("http://www.w3.org/2000/svg",a);for(var d in b)b.hasOwnProperty(d)&&c.setAttribute(d,b[d]);return c}var b=this._htOption,c=this._el,d=a.getModuleCount();Math.floor(b.width/d),Math.floor(b.height/d),this.clear();var h=g("svg",{viewBox:"0 0 "+String(d)+" "+String(d),width:"100%",height:"100%",fill:b.colorLight});h.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink","http://www.w3.org/1999/xlink"),c.appendChild(h),h.appendChild(g("rect",{fill:b.colorDark,width:"1",height:"1",id:"template"}));for(var i=0;d>i;i++)for(var j=0;d>j;j++)if(a.isDark(i,j)){var k=g("use",{x:String(i),y:String(j)});k.setAttributeNS("http://www.w3.org/1999/xlink","href","#template"),h.appendChild(k)}},a.prototype.clear=function(){for(;this._el.hasChildNodes();)this._el.removeChild(this._el.lastChild)},a}(),p="svg"===document.documentElement.tagName.toLowerCase(),q=p?o:m()?function(){function a(){this._elImage.src=this._elCanvas.toDataURL("image/png"),this._elImage.style.display="block",this._elCanvas.style.display="none"}function d(a,b){var c=this;if(c._fFail=b,c._fSuccess=a,null===c._bSupportDataURI){var d=document.createElement("img"),e=function(){c._bSupportDataURI=!1,c._fFail&&_fFail.call(c)},f=function(){c._bSupportDataURI=!0,c._fSuccess&&c._fSuccess.call(c)};return d.onabort=e,d.onerror=e,d.onload=f,d.src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",void 0}c._bSupportDataURI===!0&&c._fSuccess?c._fSuccess.call(c):c._bSupportDataURI===!1&&c._fFail&&c._fFail.call(c)}if(this._android&&this._android<=2.1){var b=1/window.devicePixelRatio,c=CanvasRenderingContext2D.prototype.drawImage;CanvasRenderingContext2D.prototype.drawImage=function(a,d,e,f,g,h,i,j){if("nodeName"in a&&/img/i.test(a.nodeName))for(var l=arguments.length-1;l>=1;l--)arguments[l]=arguments[l]*b;else"undefined"==typeof j&&(arguments[1]*=b,arguments[2]*=b,arguments[3]*=b,arguments[4]*=b);c.apply(this,arguments)}}var e=function(a,b){this._bIsPainted=!1,this._android=n(),this._htOption=b,this._elCanvas=document.createElement("canvas"),this._elCanvas.width=b.width,this._elCanvas.height=b.height,a.appendChild(this._elCanvas),this._el=a,this._oContext=this._elCanvas.getContext("2d"),this._bIsPainted=!1,this._elImage=document.createElement("img"),this._elImage.style.display="none",this._el.appendChild(this._elImage),this._bSupportDataURI=null};return e.prototype.draw=function(a){var b=this._elImage,c=this._oContext,d=this._htOption,e=a.getModuleCount(),f=d.width/e,g=d.height/e,h=Math.round(f),i=Math.round(g);b.style.display="none",this.clear();for(var j=0;e>j;j++)for(var k=0;e>k;k++){var l=a.isDark(j,k),m=k*f,n=j*g;c.strokeStyle=l?d.colorDark:d.colorLight,c.lineWidth=1,c.fillStyle=l?d.colorDark:d.colorLight,c.fillRect(m,n,f,g),c.strokeRect(Math.floor(m)+.5,Math.floor(n)+.5,h,i),c.strokeRect(Math.ceil(m)-.5,Math.ceil(n)-.5,h,i)}this._bIsPainted=!0},e.prototype.makeImage=function(){this._bIsPainted&&d.call(this,a)},e.prototype.isPainted=function(){return this._bIsPainted},e.prototype.clear=function(){this._oContext.clearRect(0,0,this._elCanvas.width,this._elCanvas.height),this._bIsPainted=!1},e.prototype.round=function(a){return a?Math.floor(1e3*a)/1e3:a},e}():function(){var a=function(a,b){this._el=a,this._htOption=b};return a.prototype.draw=function(a){for(var b=this._htOption,c=this._el,d=a.getModuleCount(),e=Math.floor(b.width/d),f=Math.floor(b.height/d),g=['<table style="border:0;border-collapse:collapse;">'],h=0;d>h;h++){g.push("<tr>");for(var i=0;d>i;i++)g.push('<td style="border:0;border-collapse:collapse;padding:0;margin:0;width:'+e+"px;height:"+f+"px;background-color:"+(a.isDark(h,i)?b.colorDark:b.colorLight)+';"></td>');g.push("</tr>")}g.push("</table>"),c.innerHTML=g.join("");var j=c.childNodes[0],k=(b.width-j.offsetWidth)/2,l=(b.height-j.offsetHeight)/2;k>0&&l>0&&(j.style.margin=l+"px "+k+"px")},a.prototype.clear=function(){this._el.innerHTML=""},a}();QRCode=function(a,b){if(this._htOption={width:256,height:256,typeNumber:4,colorDark:"#000000",colorLight:"#ffffff",correctLevel:d.H},"string"==typeof b&&(b={text:b}),b)for(var c in b)this._htOption[c]=b[c];"string"==typeof a&&(a=document.getElementById(a)),this._android=n(),this._el=a,this._oQRCode=null,this._oDrawing=new q(this._el,this._htOption),this._htOption.text&&this.makeCode(this._htOption.text)},QRCode.prototype.makeCode=function(a){this._oQRCode=new b(r(a,this._htOption.correctLevel),this._htOption.correctLevel),this._oQRCode.addData(a),this._oQRCode.make(),this._el.title=a,this._oDrawing.draw(this._oQRCode),this.makeImage()},QRCode.prototype.makeImage=function(){"function"==typeof this._oDrawing.makeImage&&(!this._android||this._android>=3)&&this._oDrawing.makeImage()},QRCode.prototype.clear=function(){this._oDrawing.clear()},QRCode.CorrectLevel=d}();


--------------------------------------------------------------------------------
/static/sakura.css:
--------------------------------------------------------------------------------
  1 | /* Sakura.css v1.0.0
  2 |  * ================
  3 |  * Minimal css theme.
  4 |  * Project: https://github.com/oxalorg/sakura
  5 |  */
  6 | /* Body */
  7 | html {
  8 |   font-size: 62.5%;
  9 |   font-family: serif; }
 10 | 
 11 | body {
 12 |   font-size: 1.8rem;
 13 |   line-height: 1.618;
 14 |   max-width: 38em;
 15 |   margin: auto;
 16 |   color: #4a4a4a;
 17 |   background-color: #f9f9f9;
 18 |   padding: 13px; }
 19 | 
 20 | @media (max-width: 684px) {
 21 |   body {
 22 |     font-size: 1.53rem; } }
 23 | 
 24 | @media (max-width: 382px) {
 25 |   body {
 26 |     font-size: 1.35rem; } }
 27 | 
 28 | h1, h2, h3, h4, h5, h6 {
 29 |   line-height: 1.1;
 30 |   font-family: Verdana, Geneva, sans-serif;
 31 |   font-weight: 700;
 32 |   overflow-wrap: break-word;
 33 |   word-wrap: break-word;
 34 |   -ms-word-break: break-all;
 35 |   word-break: break-word;
 36 |   -ms-hyphens: auto;
 37 |   -moz-hyphens: auto;
 38 |   -webkit-hyphens: auto;
 39 |   hyphens: auto; }
 40 | 
 41 | h1 {
 42 |   font-size: 2.35em; }
 43 | 
 44 | h2 {
 45 |   font-size: 2.00em; }
 46 | 
 47 | h3 {
 48 |   font-size: 1.75em; }
 49 | 
 50 | h4 {
 51 |   font-size: 1.5em; }
 52 | 
 53 | h5 {
 54 |   font-size: 1.25em; }
 55 | 
 56 | h6 {
 57 |   font-size: 1em; }
 58 | 
 59 | small, sub, sup {
 60 |   font-size: 75%; }
 61 | 
 62 | hr {
 63 |   border-color: #2c8898; }
 64 | 
 65 | a {
 66 |   text-decoration: none;
 67 |   color: #2c8898; }
 68 |   a:hover {
 69 |     color: #982c61;
 70 |     border-bottom: 2px solid #4a4a4a; }
 71 | 
 72 | ul {
 73 |   padding-left: 1.4em; }
 74 | 
 75 | li {
 76 |   margin-bottom: 0.4em; }
 77 | 
 78 | blockquote {
 79 |   font-style: italic;
 80 |   margin-left: 1.5em;
 81 |   padding-left: 1em;
 82 |   border-left: 3px solid #2c8898; }
 83 | 
 84 | img {
 85 |   max-width: 100%; }
 86 | 
 87 | /* Pre and Code */
 88 | pre {
 89 |   background-color: #f1f1f1;
 90 |   display: block;
 91 |   padding: 1em;
 92 |   overflow-x: auto; }
 93 | 
 94 | code {
 95 |   font-size: 0.9em;
 96 |   padding: 0 0.5em;
 97 |   background-color: #f1f1f1;
 98 |   white-space: pre-wrap; }
 99 | 
100 | pre > code {
101 |   padding: 0;
102 |   background-color: transparent;
103 |   white-space: pre; }
104 | 
105 | /* Tables */
106 | table {
107 |   text-align: justify;
108 |   width: 100%;
109 |   border-collapse: collapse; }
110 | 
111 | td, th {
112 |   padding: 0.5em;
113 |   border-bottom: 1px solid #f1f1f1; }
114 | 
115 | /* Buttons, forms and input */
116 | input, textarea {
117 |   border: 1px solid #4a4a4a; }
118 |   input:focus, textarea:focus {
119 |     border: 1px solid #2c8898; }
120 | 
121 | textarea {
122 |   width: 100%; }
123 | 
124 | .button, button, input[type="submit"], input[type="reset"], input[type="button"] {
125 |   display: inline-block;
126 |   padding: 5px 10px;
127 |   text-align: center;
128 |   text-decoration: none;
129 |   white-space: nowrap;
130 |   background-color: #2c8898;
131 |   color: #f9f9f9;
132 |   border-radius: 1px;
133 |   border: 1px solid #2c8898;
134 |   cursor: pointer;
135 |   box-sizing: border-box; }
136 |   .button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
137 |     cursor: default;
138 |     opacity: .5; }
139 |   .button:focus, .button:hover, button:focus, button:hover, input[type="submit"]:focus, input[type="submit"]:hover, input[type="reset"]:focus, input[type="reset"]:hover, input[type="button"]:focus, input[type="button"]:hover {
140 |     background-color: #982c61;
141 |     border-color: #982c61;
142 |     color: #f9f9f9;
143 |     outline: 0; }
144 | 
145 | textarea, select, input[type] {
146 |   color: #4a4a4a;
147 |   padding: 6px 10px;
148 |   /* The 6px vertically centers text on FF, ignored by Webkit */
149 |   margin-bottom: 10px;
150 |   background-color: #f1f1f1;
151 |   border: 1px solid #f1f1f1;
152 |   border-radius: 4px;
153 |   box-shadow: none;
154 |   box-sizing: border-box; }
155 |   textarea:focus, select:focus, input[type]:focus {
156 |     border: 1px solid #2c8898;
157 |     outline: 0; }
158 | 
159 | input[type="checkbox"]:focus {
160 |   outline: 1px dotted #2c8898; }
161 | 
162 | label, legend, fieldset {
163 |   display: block;
164 |   margin-bottom: .5rem;
165 |   font-weight: 600; }
166 | 


--------------------------------------------------------------------------------
/templates/expiry.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <title>Label Printer</title>
 4 |     <meta name="viewport" content="width=device-width,initial-scale=1">
 5 | </head>
 6 | <link rel="stylesheet" href="{{ url_for('static', filename='sakura.css') }}" type="text/css">
 7 | <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}" type="text/css"/>
 8 | <body>
 9 | 
10 | <main>
11 | 
12 |     <section class="form">
13 |         <form id="expiry">
14 |             <script>
15 |                 const FIXEDSIZE = '23x23';
16 |                 (function () {
17 |                     const form = document.getElementById('expiry');
18 |                     const months = [
19 |                         'Jan',
20 |                         'Feb',
21 |                         'Mrz',
22 |                         'Apr',
23 |                         'Mai',
24 |                         'Jun',
25 |                         'Jul',
26 |                         'Aug',
27 |                         'Sep',
28 |                         'Okt',
29 |                         'Nov',
30 |                         'Dez'
31 |                     ];
32 | 
33 |                     for (let i = 0; i < 12; i++) {
34 |                         const btn = document.createElement('button');
35 |                         btn.textContent = months[i];
36 |                         btn.onclick = function (e) {
37 |                             e.preventDefault();
38 |                             document.getElementById('month').textContent = btn.textContent;
39 |                         }
40 |                         form.append(btn);
41 |                     }
42 | 
43 |                     const now = (new Date()).getFullYear();
44 |                     for (let i = 0; i < 6; i++) {
45 |                         const btn = document.createElement('button');
46 |                         btn.textContent = now + i;
47 |                         btn.onclick = function (e) {
48 |                             e.preventDefault();
49 |                             document.getElementById('year').textContent = btn.textContent;
50 |                         }
51 |                         form.append(btn);
52 |                     }
53 |                 })();
54 |             </script>
55 |         </form>
56 |         <button id="btn">Print</button>
57 |     </section>
58 | 
59 |     <section class="preview">
60 |         <div id="scalefix">
61 |             <div id="wrapper">
62 |                 <div style="width: 202px; height:202px;">
63 |                     <div class="single center" style="height:91px; font-size: 75px;">
64 |                         <span class="input" id="month">Mnth</span>
65 |                     </div>
66 |                     <div class="single center" style="height:111px; font-size: 90px; font-weight: bold;">
67 |                         <span class="input" id="year">Year</span>
68 |                     </div>
69 |                 </div>
70 |             </div>
71 |         </div>
72 |     </section>
73 | 
74 | </main>
75 | 
76 | <script src="{{ url_for('static', filename='dom-to-image-more.min.js') }}"></script>
77 | <script src="{{ url_for('static', filename='qrcode.min.js') }}"></script>
78 | <script src="{{ url_for('static', filename='app.js') }}"></script>
79 | </body>
80 | </html>
81 | 


--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <title>Label Printer</title>
 4 |     <meta name="viewport" content="width=device-width,initial-scale=1">
 5 | </head>
 6 | <link rel="stylesheet" href="{{ url_for('static', filename='sakura.css') }}" type="text/css">
 7 | <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}" type="text/css"/>
 8 | <body>
 9 | 
10 | <main>
11 |     <section class="template">
12 |         <form>
13 |             <label for="sel-label">Label:
14 |                 <select id="sel-label" name="labels">
15 |                     {% for label in labels %}
16 |                         <option>{{ label }}</option>
17 |                     {% endfor %}
18 |                 </select>
19 |             </label>
20 |         </form>
21 |     </section>
22 | 
23 |     <section class="form">
24 |         <form id="form">
25 |         </form>
26 |         <button id="btn">Print</button>
27 |     </section>
28 | 
29 |     <section class="preview">
30 |         <div id="scalefix">
31 |             <div id="wrapper">
32 |                 Loading template...
33 |             </div>
34 |         </div>
35 |     </section>
36 | 
37 | </main>
38 | 
39 | <script src="{{ url_for('static', filename='dom-to-image-more.min.js') }}"></script>
40 | <script src="{{ url_for('static', filename='qrcode.min.js') }}"></script>
41 | <script src="{{ url_for('static', filename='app.js') }}"></script>
42 | </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------