COBISOFT Documentation

User Tools

Site Tools

You are here: start » COBI.wms » Label Templates
cobi.wms:label_templates

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
cobi.wms:label_templates [2022/11/16 11:08] – [File 2] tkammercobi.wms:label_templates [2023/06/19 13:59] (current) – tkammer
Line 90: Line 90:
 | ''serialLotNumber''             | Lot-number of serial number | | ''serialLotNumber''             | Lot-number of serial number |
 | ''serialDetails''               | Serial details/notes | | ''serialDetails''               | Serial details/notes |
 +^ Warehouse-level ^^
 +| ''warehouseCode''               | Warehouse code |
 +| ''warehouseName''               | Warehouse name |
 ^ Bin location-level ^^ ^ Bin location-level ^^
 | ''locationCode''                | Bin location code | | ''locationCode''                | Bin location code |
Line 174: Line 177:
 </code> </code>
  
-In this example, the first GS1 barcode field is ''01'' which symbolizes that a GTIN-14 follows.  By using the placeholder ''itemBarcodeGTIN14'' we ensure that exactly 14 digits are inserted here.  This field does not need to be terminated with a pipe symbol, since it has a fixed length of 14 digits.+In this example, the first GS1 barcode field is ''01'' which symbolizes that a GTIN-14 follows.  By using the placeholder ''itemBarcodeGTIN14'' we ensure that exactly 14 digits are inserted here.  This field does not need to be terminated with a vertical bar symbol, since it has a fixed length of 14 digits.
  
-The next field is ''10'' i.e. the batch number.  This field is allowed to contain 1 to 20 digits or arbitrary characters.  If we use batch numbers of 10 characters, this means we must end this GS1 field explicitly with a pipe symbol.+The next field is ''10'' i.e. the batch number.  This field is allowed to contain 1 to 20 digits or arbitrary characters.  If we use batch numbers of 10 characters, this means we must end this GS1 field explicitly with a vertical bar symbol.
  
 Here's a list of commonly used GS1 field identifiers: Here's a list of commonly used GS1 field identifiers:
Line 188: Line 191:
 === Better control of generated HTML === === Better control of generated HTML ===
  
-The ''barcode()'' placeholder generates a whole ''<img ... />'' tag in the generated HTML.  If you want closer control over the HTML, like adding additional attributes to the ''img'' tag, you can use the ''barcodeB64()'' placeholder instead, which produces a PNG in Base64.  Example:+The ''barcode()'' placeholder generates a whole ''<img ... />'' tag in the generated HTML.  If you want closer control over the HTML, like adding additional attributes to the ''img'' tag, you can use the ''barcodeSrc()'' or ''barcodeBase64()'' placeholders instead. 
 + 
 +The ''barcodeSrc'' placeholder generates only the contents of the ''src'' attribute.  Example: 
 + 
 +<code> 
 +<img id='...' class='...' src='@barcodeSrc(...)@' /> 
 +</code> 
 + 
 +The ''barcodeBase64'' placeholder generates only the Base64 string.  Example:
  
 <code> <code>
-<img id='...' class='...' src='data:image/png;base64,@barcodeB64(...)@' />+<img id='...' class='...' src='data:image/png;base64,@barcodeBase64(...)@' />
 </code> </code>
  
-The parameters of the ''barcodeB64()'' placeholder are exactly the same as that of the regular ''barcode()'' placeholder.  That means you must still provide the ''WIDTH'' and ''HEIGHT'' parameters; these will be passed to the barcode generation system that produces the Base64 PNG.+The parameters of the ''barcodeSrc()'' and ''barcodeBase64()'' placeholders are exactly the same as that of the regular ''barcode()'' placeholder.  That means you must still provide the ''WIDTH'' and ''HEIGHT'' parameters; these will be passed to the barcode generation system that produces the Base64 PNG.  (This has no effect on the width and height of the ''img'' element in HTML/CSS.)
  
 ==== User-input values ==== ==== User-input values ====
Line 275: Line 286:
 </code> </code>
  
-**NOTE:** Don't put any spaces before or after the parentheses or the separating pipe symbols.  (The spaces would be considered part of the corresponding parameter.)+**NOTE:** Don't put any spaces before or after the parentheses or the separating vertical bar symbols.  (The spaces would be considered part of the corresponding parameter.)
  
-This placeholder uses the pipe symbol instead of commas to separate its parameters, because the parameters themselves may contain commas.+This placeholder uses the vertical bar symbol instead of commas to separate its parameters, because the parameters themselves may contain commas.
  
 The mechanism is as follows: the text found within the ''DATE'' parameter is interpreted in accordance to the format specification ''FROM_FORMAT'' so the software knows what date/time it represents, and it's then turned into ''TO_FORMAT''. The mechanism is as follows: the text found within the ''DATE'' parameter is interpreted in accordance to the format specification ''FROM_FORMAT'' so the software knows what date/time it represents, and it's then turned into ''TO_FORMAT''.
Line 325: Line 336:
 </code> </code>
  
-====== Example template files ======+===== Example template files =====
  
 The following example files serve to demonstrate the syntax and some of the features. The following example files serve to demonstrate the syntax and some of the features.
  
-===== File 1 =====+==== File 1 ====
  
 This is a very simple template demonstrating the use of placeholders to print the item code and name, price, and a timestamp. This is a very simple template demonstrating the use of placeholders to print the item code and name, price, and a timestamp.
Line 351: Line 362:
         }         }
  
-        /* Don't change, use the container below. */ +        body { 
-        html, body { +          /* We could use 100vw/100vh to cover the whole size declared with @page, but this doesn't 
-          width: 100vw; +             work with ZPL printing, so repeat the page dimensions explicitly.  Note that we can't 
-          height: 100vh;+             use standardized sizes like A6 here.  The height should be minimally reduced to make 
 +             sure the HTML renderer doesn't start a second page. */ 
 +          width: 148mm; 
 +          height: 104mm; 
 + 
 +          /* Don't change, use the container below. */
           margin: 0;           margin: 0;
           padding: 0;           padding: 0;
 +
 +          /* Useful to diagnose dimension issues. */
 +          outline: 0.5mm solid black;
 +          outline-offset: -0.5mm;
         }         }
  
         .container {         .container {
 +          /* Don't change. */
           box-sizing: border-box;           box-sizing: border-box;
 +          position: relative;
           width: 100%;           width: 100%;
           height: 100%;           height: 100%;
  
           font-family: sans-serif;           font-family: sans-serif;
-          font-size: 1.5em;+          font-size: 18pt;
  
           /* Global padding from the edges. */           /* Global padding from the edges. */
Line 375: Line 397:
 <div class="container"> <div class="container">
  
-<div style="float: left;"> +    <div style="float: left;"> 
-    <b>Code:</b> @itemCode@ +        <b>Code:</b> @itemCode@ 
-</div>+    </div>
  
-<div style="float: right;"> +    <div style="float: right;"> 
-    <b>Price:</b> @itemPriceCurrencySymbol(1)@ @itemPriceFormattedValue(1)@ +        <b>Price:</b> @itemPriceCurrencySymbol(1)@ @itemPriceFormattedValue(1)@ 
-</div>+    </div>
  
-<div style="text-align: center; margin-top: 24mm;"> +    <div style="text-align: center; margin-top: 24mm;"> 
-    @itemName@ +        @itemName@ 
-</div> +    </div> 
-<div style="text-align: center; margin-top: 2mm;"> +    <div style="text-align: center; margin-top: 2mm;"> 
-    @barcode(CODE_128,150,75,|90@itemCode@|10@batchNumber@)@ +        @barcode(CODE_128,150,75,|90@itemCode@|10@batchNumber@)@ 
-</div> +    </div> 
-<div style="text-align: center; margin-top: 1mm; font-size: 0.8em;"> +    <div style="text-align: center; margin-top: 1mm; font-size: 0.8em;"> 
-    (90)@itemCode@(10)@batchNumber@ +        (90)@itemCode@(10)@batchNumber@ 
-</div>+    </div>
  
-<div style="position: absolute; left: 0; bottom: 0; padding: inherit;"> +    <div style="position: absolute; left: 0; bottom: 0; padding: inherit;"> 
-    <b>@date(yyyy-MM-dd HH:mm)@</b> +        <b>@date(yyyy-MM-dd HH:mm)@</b> 
-</div>+    </div>
  
-<div style="position: absolute; right: 0; bottom: 0; padding: inherit;"> +    <div style="position: absolute; right: 0; bottom: 0; padding: inherit;"> 
-    <b>COBI.wms Sample Label</b> +        <b>COBI.wms Sample Label</b> 
-</div>+    </div>
  
 </div> </div>
Line 406: Line 428:
 </code> </code>
  
-===== File 2 =====+==== File 2 ====
  
 This file demonstrates the use of user-input values and JavaScript integration. This file demonstrates the use of user-input values and JavaScript integration.
Line 428: Line 450:
         }         }
  
-        /* Don't change, use the container below. */ +        body { 
-        html, body { +          /* We could use 100vw/100vh to cover the whole size declared with @page, but this doesn't 
-          width: 100vw; +             work with ZPL printing, so repeat the page dimensions explicitly.  Note that we can't 
-          height: 100vh;+             use standardized sizes like A6 here.  The height should be minimally reduced to make 
 +             sure the HTML renderer doesn't start a second page. */ 
 +          width: 148mm; 
 +          height: 104mm; 
 + 
 +          /* Don't change, use the container below. */
           margin: 0;           margin: 0;
           padding: 0;           padding: 0;
 +
 +          /* Useful to diagnose dimension issues. */
 +          outline: 0.5mm solid black;
 +          outline-offset: -0.5mm;
         }         }
  
         .container {         .container {
 +          /* Don't change. */
           box-sizing: border-box;           box-sizing: border-box;
 +          position: relative;
           width: 100%;           width: 100%;
           height: 100%;           height: 100%;
  
           font-family: sans-serif;           font-family: sans-serif;
-          font-size: 1.5em;+          font-size: 18pt;
  
           /* Global padding from the edges. */           /* Global padding from the edges. */
Line 448: Line 481:
         }         }
     </style>     </style>
-    <!-- Input definitions: 
  
 +    <!-- Input definitions:
     @input(text[Insert value])@     @input(text[Insert value])@
     @input(selection[Select value];Value 1,Value 2,Value 3)@     @input(selection[Select value];Value 1,Value 2,Value 3)@
     @input(codeFormat[Barcode type];CODE_128,DATA_MATRIX,QR_CODE)@     @input(codeFormat[Barcode type];CODE_128,DATA_MATRIX,QR_CODE)@
- 
     -->     -->
  
-    <!-- @useJavaScript@ --> 
     <script>     <script>
 +        // @useJavaScript@
         window.onload = function() {         window.onload = function() {
             var insert = document.getElementById('js-insert')             var insert = document.getElementById('js-insert')
             insert.textContent = "Hello World!"             insert.textContent = "Hello World!"
-            window.cobiwms.print()+            cobiwms.print()
         }         }
     </script>     </script>
Line 468: Line 500:
 <div class="container"> <div class="container">
  
-<div style="float: left;"> +    <div style="float: left;"> 
-    <b>JS-Insert:</b> <span id="js-insert"></span> +        <b>JS-Insert:</b> <span id="js-insert"></span> 
-</div>+    </div>
  
-<div style="float: right;"> +    <div style="float: right;"> 
-    <b>Selection:</b> @input(selection)@ +        <b>Selection:</b> @input(selection)@ 
-</div>+    </div>
  
-<div style="text-align: center; margin-top: 24mm;"> +    <div style="text-align: center; margin-top: 24mm;"> 
-    @itemName@ +        @itemName@ 
-</div> +    </div> 
-<div style="text-align: center; margin-top: 2mm;"> +    <div style="text-align: center; margin-top: 2mm;"> 
-    @barcode(@input(codeFormat)@,150,75,|90@itemCode@|10@batchNumber@)@ +        @barcode(@input(codeFormat)@,150,75,|90@itemCode@|10@batchNumber@)@ 
-</div> +    </div> 
-<div style="text-align: center; margin-top: 1mm; font-size: 0.8em;"> +    <div style="text-align: center; margin-top: 1mm; font-size: 0.8em;"> 
-    (90)@itemCode@(10)@batchNumber@ +        (90)@itemCode@(10)@batchNumber@ 
-</div>+    </div>
  
-<div style="position: absolute; left: 0; bottom: 0; padding: inherit;"> +    <div style="position: absolute; left: 0; bottom: 0; padding: inherit;"> 
-    <b>Input:</b> @input(text)@ +        <b>Input:</b> @input(text)@ 
-</div>+    </div>
  
-<div style="position: absolute; right: 0; bottom: 0; padding: inherit;"> +    <div style="position: absolute; right: 0; bottom: 0; padding: inherit;"> 
-    <b>COBI.wms Sample Label</b> +        <b>COBI.wms Sample Label</b> 
-</div>+    </div>
  
 </div> </div>
cobi.wms/label_templates.1668593331.txt.gz · Last modified: 2022/11/16 11:08 by tkammer
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki