Introduction

The concept behind Labelling Online is to provide a platform for designing Label Templates, using a set of basic elements which can be positioned and configured within a coordinates-based system.

Once a template design is finalised, the resulting label is able to be generated across a range of formats natively, while maintaining a consistent appearance and quality.

Each template is exposed via a web API, allowing for data driven production of the desired label design, in the output format required.

The information provided here is designed to deliver an in depth understanding of the Labelling Online user interface and underlying functionality.

Design Concept

This section provides a detailed description of the concept behind the Labelling Online solution and an explanation of how each component fits together.

Behind the scenes each created label design is represented as a Label Template parent object with three child collection objects.

  • Template

    • Elements

    • Graphics

    • Example Data

Template

Each Label Template begins with some basic properties that define the overall dimensions of the label, a unique name to distinguish it in the API and an optional description to provide additional context for the design.

The dimensions of each label and position of the elements contained therein are all defined in points, with each representing 172 of an inch (0.35mm).

The template is then populated with different elements, which together, make up the design of the label.

Elements

Elements are added to a Label Template and placed on the Design Pane, where they can be configured to adjust position, appearance or behaviour.

There are eight basic elements that are available to use in a Label Template:

  • Text
  • Barcode
  • Graphic
  • Line
  • Rectangle
  • Filled Rectangle
  • Ellipse
  • Filled Ellipse

Text

Barcode x-dimension

A text element is used to display either a fixed text value or can be data-fed via the API. If a Text Element’s Value property is populated, then it will become a fixed value on any labels produced.

Text Elements that have no Value property set, will be exposed as addressable elements in the label API calls, where the unique Name property will be used as the 'key' Name field value in a ‘key-value’ pair ElementData record, which will be added to the LabelData collection.

A Text Element can support two distinct display methods: straight or text box. There is no defined property for declaring either of these text methods, rather it is defined by the Length and Width properties of the Text Element, or absence thereof.

Text Box

If a Text Element has the Width and Height properties defined with positive values, then the provided text value will only appear within the bounds of the defined dimensions (Text Box). Text will automatically wrap to the next line (height permitting) and text that exceeds the dimensions of the defined Text Box (overflow) will not be displayed.

Straight Text

If no Width or Height property value is declared for the Text element, then the text will be displayed as Straight Text. The supplied text value will appear on a single line and will not be width constrained.

Alignment

Horizontal and vertical alignment can only be applied to a Text Box, with the defined area acting as the boundary for any alignment.

Text alignment

The horizontal and vertical alignment properties will have no effect on Straight Text elements.

Orientation

Text Elements can be rotated to one of four directions, applied at 90° increments, through setting the Orientation property.

Font Family

Although the Element Properties Panel lists a wide range of fonts available to the Text Element, there are only a limited number of fonts listed in the Font Family property that are supported across all output formats. The image output formats (PNG, JPG & TIF) have the widest support of the listed fonts, with only a small number of ZPL and PDF specific fonts that are not usable.

Across the PDF, ZPL & SVG output formats, the supported fonts are much more limited. All three formats support a serif, sans-serif and monospaced font such as Arial, Times New Roman and Courier respectively, with some additional output specific fonts available for both ZPL & PDF.

Each output format will attempt to auto-substitute an appropriate font, where the selected font is not natively supported and will resort to a default sans-serif font if no suitable substitute is available.

See font substitution table for a complete list of font substitution by output format.

Font Styles

There are six distinct font styles supported by the Text Element which are:

  • Regular
  • Bold
  • Underlined
  • Bold Underlined
  • Italic
  • Strikethrough

These styles are supported by all output formats, with the exception of ZPL, which only supports the Regular and Bold styles.

Font Size

Font sizes are declared in points which are 172 of an inch (0.35mm).

Barcode

Barcode x-dimension

Labelling Online uses the Barcoded engine to produce and/or predict the generated barcode dimensions. This ensures consistency in positioning, alignment and quality across the supported output formats.

Symbologies

Labelling Online currently supports the following barcode symbologies:

  • Code 128
  • GS1-128
  • Code 39
  • Full ASCII Code 39
  • Interleaved 2 of 5
  • EAN-8
  • EAN-13
  • UPC-A

Some symbologies have additional features that can be activated by selecting the symbology version specific to that feature (e.g., check digits). Full details can be found in the Barcode Symbology property section

A Barcode Element’s defined location and dimensions will be displayed on the Design Pane as a rectangle with a diagonal lined pattern.

Dependent on the alignment properties set and the output format selected, the resultant barcode will rarely appear at exactly the dimensions shown on the Design Pane.

Labelling Online has a number of inbuilt measures which attempt to ensure that barcodes are produced at the optimum quality for the selected output format and resolution. The barcode’s Width property is therefore treated as a targeted maximum allowable width for the Barcode Element to occupy.

Each output format will adjust the fidelity properties of the barcode to achieve the maximum width, without exceeding the dimensions defined in the element’s properties.

The two barcodes below are both defined with the same Width and Height properties in their respective elements. Due to the smaller value to encode in the second example, the x-dimension (narrowest bar width) is increased dynamically, resulting in a higher quality barcode produced.

Barcode x-dimension

The exceptions to this rule occur when the minimum requirements of the barcode symbology chosen are encountered. This may be as a result of the value provided for encoding being too large or the dimensions provided in the Barcode Element properties too small.

In this scenario, Labelling Online will output the barcode at the minimum dimensions allowable, according to the relevant specification for the symbology. This may result in the barcode exceeding the dimensions defined in the element’s properties.

Alignment

Barcode alignment is handled slightly differently from the typical implementation.

Setting the Horizontal Alignment to LEFT or RIGHT will have no effect and by default the barcode will be horizontally centered within the dimension defined if either of these two options is selected.

If Horizontal Alignment is set to CENTER, the barcode will be aligned to the center of the label.

Barcodes will always be generated at the height specified by the dimension properties, so vertical alignment would not be applicable. However, similar to horizontal alignment, setting the Vertical Alignment to MIDDLE will align the barcode vertically to the middle of the label.

Human Readable Position

It is possible to alter the location of the human readable element of the barcode on some symbologies. Where supported, this can be set to ABOVE, BELOW, EMBEDED or HIDDEN

Barcode human readable position
Human Readable Source

It is sometimes necessary to provide an alternative format of the human readable value on a barcode, which can be accomplished with the Human Readable Source property.

By default, the human readable value for a barcode is taken from the value provided for encoding the barcode. It is possible to set an alternative data field for populating this value by providing a unique name in the Human Readable Source property. This value will then be used as the 'key' Name field value in a ‘key-value’ pair ElementData record, which will be added to the LabelData collection and addressable via the label API calls. The human readable value can then be populated separately from the barcode value.

Font Settings

Adjustments to the Font Family, Size and Style properties will be applied to the human readable value of the barcode. Human readable values will always be displayed centered across the barcode’s width. The font size will be auto adjusted to ensure human readable values do not exceed the width of the barcode.

Graphic

Barcode x-dimension

PNG Images can be added to the label design as a Graphic Element and can then be positioned or scaled, as necessary. Before an image can be used, it must first be imported into the Template’s ‘Graphics’ collection.

There are some limitations and considerations that need to be observed when importing images as Graphic Elements. The only supported image format is PNG and the file size is limited to 200kb.

The ZPL output is in black and white, so extra consideration needs to be taken when deciding on which images to use in your design. If the label is expected to be printed on Zebra printers (using ZPL), then images with lots of adjacent darker colours will not typically result in a good output, once converted.

Original logo
Original Logo
ZPL logo
ZPL Logo

Multiple versions of the same image can be used as Graphic Elements throughout your design and can be individually adjusted. If the image is removed from the Graphics collection, all associated Graphics Elements will also be removed from the Template.

Although there is no limit placed on how many images can be added to the collection or to how many Graphics Elements can be applied to the design, the output formats do have a size cap of 500kb. Using multiple images can have a significant impact on the output size and so care should be taken to manage this carefully.

Line

Barcode x-dimension

A simple element for displaying straight lines on you label design. The line position and angle are defined through the start and end coordinate properties.

The line stroke width can also be adjusted and will be distributed equally either side of the center line.

Rectangle

Barcode x-dimension

Basic rectangle outline that can be positioned, sized and rotated. The configurable stroke width is divided equally inside and outside of the defined dimensions of the rectangle.

Filled Rectangle

Barcode x-dimension

Filled rectangle that can be positioned, sized and rotated.

Ellipse

Barcode x-dimension

Basic ellipse outline that can be positioned, sized and rotated. The configurable stroke width is divided equally inside and outside of the ellipse circumference as defined by its dimensions.

Filled Ellipse

Barcode x-dimension

Filled ellipse that can be positioned, sized and rotated.

Templates Dashboard

The Templates Dashboard is where you will first land after signing in. It provides a tiled view of all available label templates in your collection.

Template dashboard

Control Bar

The control bar at the top of the dashboard allows the user to search for specific templates, include templates that are shared by others or to create a new template.

Template dashboard controls

Search results are ordered alphabetically and will return any templates that contain the search criteria text. Clicking the ‘Include shared’ checkbox will add templates shared by others to the search results.

New Template

The New Template button will open a dialog to be completed for creating new template designs.

New template dialog
New Template Fields
  • Name – Template name that will be used to individually identify the design via the API (mandatory)
    • Max length, 40 characters
    • Must be unique
    • No space or special characters
  • Description – Provide additional info about the template. (optional)
  • Units – Specifies which unit of measurement to be used in Label Width & Height fields.
  • Label Width – Width in units specified, converted to points in second box. (mandatory)
    • Min value, 50
    • Max value, 2000
  • Label Height – Height in units specified, converted to points in second box. (mandatory)
    • Min value, 50
    • Max value, 2000

Changing the Units field will automatically adjust the current values in the Label Width & Height fields to match the equivalent value for the selected unit.

Template Tile

Each tile lists the template name, description and dimensions, as well as providing a thumbnail image of the label for easy identification.

Clicking on the tile will take you to the Template Editor for the selected label design.

Template tile

Tile Controls

Along the bottom of the tile are controls to copy or delete the template as well as indicators to show if the template is currently shared or protected.

  • Copy – Makes a duplicate of the selected template.
  • Delete – Will delete the selected template (disabled if protected or shared by others).
  • Shared – Denotes that the template is shared by you or others.
  • Protected – Identifies that the template is currently protected from edits or deletion.

Templates that have been shared by others will be displayed with an orange background to make them easily distinguishable from templates in your own collection.

It is not possible to open the Template Editor for labels that are shared by others. Shared templates can be copied to your own collection, which can then be edited from their own tile.

Template Editor

Once you select a Template to edit or create a new Template, you will be taken to the main Template Editor screen. The Editor aims to provide a familiar design interface with intuitive controls and an interactive Design Pane which provides an easy an understandable presentation of your label design.

Template editor

The editor is broken down into the following five panelled areas:

  • Template – Controls the main label template properties.
  • Design Pane – The principle design pane for working on your design and providing visual feedback of the design.
  • Element – Allows for fine control and adjustment of the currently selected element’s properties.
  • Graphics – For managing the collection of imported images available for use as elements in the design pane.
  • Controls – For adding new elements to the design pane.

Template Panel

Adjustments to the main label template properties can be made here. In addition to the fields that were initially populated at the template creation stage, there are two additional controls to allow protecting and sharing of the current template.

Template form

All properties share the same validation rules as the fields in the New Template dialog and any changes made to these values can only be saved if all validation rules are satisfied.

Adjusting Dimensions

Adjustments to the dimensions of the label will result in a check to determine if any elements fall outside of, or over the new dimensions. If any elements are found to meet these criteria, the user will be alerted and asked to confirm out of bounds elements to be deleted.

Out of bounds alert

Any elements that are over bounds, will be automatically resized to fit within the new dimensions.

Protect Template

To prevent any unintended modifications or deletions to finalised label designs, the template can be protected against these actions.

Activating protection will disable the design pane and template property fields, though you will still be able to open the Label Preview Window and adjust example data.

Activating and deactivating protection will require the account password to be entered each time for the action to be completed.

Protect template

Share Template

Activating the shared function will allow the template to be viewed by all other users on the Labelling Online platform. Other users cannot open the editor for the shared template or make any changes to it. They can, however, make a copy to their own collection.

Similar to the protect function, activating and deactivating sharing will require the account password to be entered each time.

Design Pane

The Design Pane is the primary workspace for creating and updating your templates. It provides an interactive canvas for positioning, scaling and managing the various Label Elements within the design. It also delivers distinct visual feedback for each element to understand the behaviour and any layout considerations.

Design pane

Design Controls

The group of buttons on the right-hand side of the Design Pane’s header provide controls for the following basic template actions:

  • New
  • Open
  • Export
  • Import
  • Save
  • Save As
New Template

Opens the New Template dialog box, which shares exactly the same layout and validation as the same form on the Templates Dashboard.

Open Template

Will bring up a small dialog, listing all available templates in the current collection and associated dimensions.

Open template

Mouse-over a template name or navigate with the up and down arrow keys, to bring up a tooltip which provides the description and a small thumbnail image of the label design. Double click on the template you wish to open or hit enter while selected and the template will be loaded into the editor.

Export Template & Import Template

The import and export functions are a future feature, which will provide a file based version of the label template that can be shared with other users or applications. Stay Tuned!

Save Template

Will save the template in its current state and update the associated thumbnail.

Save As Template

Will save a copy of the template to a new name.

Preview Output

The Preview button on the right-hand side of the Design Pane header will open the Label Preview Window, which is where you can view examples of the label in each of the supported output formats.

Visualisation

The Design pane provides different visualisation cues to help identify the behaviour and expected layout of each element, while maintaining a clear representation of how the final label will output in each of the supported formats.

Shapes & Images

The Rectangle, Filled Rectangle, Ellipse, Filled Ellipse, Line and Graphic elements should all display on the Design Pane exactly as they would be expected to appear on the output label.

There may be some minor discrepancies between output formats in position and stroke width that are inherent to each format, but this should only be the equivalent of a pixel or two either way.

The variation in how basic colours are implemented across each format is less consistent and there can be a noticeable variation in the output hue.

Text

All Text Elements on the design pane will have a dashed grey outline and pale-yellow background to denote the potential area that may contain text in the output label.

Since Text Element’s that are defined as straight text have no width boundary, you will notice the shaded background extends to the edge of the label.

Where two or more Text Elements intersect, the overlapping area will take-on a darker shade of yellow, to help identify possible areas of conflict.

Design pane barcode

Text Elements that contain fixed values will display on the Design Pane as they would appear on the output label, using the provided value and selected Colour property.

Data-fed Text Elements will be displayed red on the Design Pane and will use the Name property value encapsulated by curly braces ({}).

Fixed text
Fixed Text
Data-fed
Data-fed
Barcode

Barcodes are visualised on the Design Pane as rectangles with a diagonal lined pattern. If the Human Readable Position property is not set to HIDDEN, the human readable text location will also be displayed in the selected position.

The human readable value is displayed in the same way as data-fed Text Elements, where it will be displayed red, encapsulated by curly braces ({}) and contain the 'key' Name field value that will be exposed in the ElementData record of the label API calls.

If the Human Readable Source property is set, then the human readable key will contain that value, otherwise it will be the Barcode Element Name value.

Design pane barcode

Manipulating Elements

Elements on the design pane can be manipulated in a number of ways. General positioning and scaling can be performed with the mouse, while fine tuning can be accomplished via keyboard controls or by editing the individual properties in the Element Properties Panel.

Selecting

Select an element to modify by clicking on it in the Design Pane. An element can only be selected when the mouse is over a section of it that is visible. This will be indicated by a light blue glow around the element and the mouse pointer changing to the grab cursor.

Design pane select

Once selected, an element will become outlined by an animated yellow dashed line and the element’s properties will be populated in the Element Properties Panel.

It may sometimes be difficult to select an element with the mouse, if it is particularly small on the Design Pane or is sitting behind another element. It is therefore also possible to select an element by name, via the Element Select dropdown list at the top of the Element Properties Panel.

Positioning and Scaling

The Element can be dragged and dropped into the desired position with the mouse and re-scaled by clicking and adjusting the resize handle at the bottom right of the selection.

The Design Pane will not allow you to position or size elements outside of the label template’s dimensions.

Finer positioning can be achieved using the arrow keys, which will move the element in any direction, one point at a time.

Similarly, the width, height and scale can be fine controlled via the keyboard. To adjust the width, hold shift +, left or right to make the element narrower or wider, respectively. Holding shift +, up or down will have a similar effect on the height of the element.

If you want to increase or decrease an element’s size, while maintaining its aspect ratio, hold ctrl+shift and press + or -.

The currently selected element can also be deleted, by pressing the delete key, but be warned; there’s currently no ‘undo’ feature in Labelling Online, so deletions will be permanent.

Zooming

To assist with finer adjustments of the template layout, the Design Pane can be zoomed in to provide a clearer view.

If the Design Pane currently has focus, the mouse scroll wheel will zoom in and out on the current mouse pointer. Alternatively, the zoom slider control at the bottom of the Design Pane can be used to zoom the center of the design.

Once zoomed in, the label can be panned by clicking and dragging anywhere on the background.

Elements Control Panel

Element controls are the method that new instances of each of the element types are created and added to the Label Template.

Each one of the seven button in the control panel will add the corresponding element:

  • Rectangle
  • Filled Rectangle
  • Ellipse
  • Filled Ellipse
  • Text
  • Line
  • Barcode

The newly created element will be added to the Label Template and be displayed at the center of the Design Pane. The initial dimensions are defined as a proportion of the Label Template size and will therefore be different, dependent on your design dimensions.

The selected element can be removed from the Label Template by pressing the delete key while the Design Pane is focused or by click the Delete Element button in the Element Properties Panel.

Graphics Panel

Before an image can be used in the label template, it must first be imported into the Graphics collection. Once imported, a graphic element control is created, which can be used like the other controls to place the Graphic Element on the Design Pane.

Importing Images

To import a new image, click on the Add Graphic button in the Graphic Panel. The Add Graphic dialog will open to allow you to select a local file to upload.

Add graphic

There are limitations on images that can be imported as a Graphic Element. The only image format supported is PNG and the maximum file size is 200kb.

Once the file is selected, click on the Upload button to add the image to the Graphics collection. The newly created Graphic Element control will appear in the Graphics Panel as a thumbnail.

Add graphic

Insert Graphic Element

Clicking on the control thumbnail will add the Graphic Element to the Label Template and a copy of the image will appear on the Design Pane. The Graphic Element for an image can be added to the Label Template multiple times and each modified individually.

To remove an image from the Graphics collection, click on the Delete button at the bottom of the Graphic Element control. If there are currently any Graphic Element’s for the image on the Label Template, the user will be asked to confirm they can be deleted.

Individual Graphic elements can be deleted by selecting and pressing the delete key or the Delete Element button in the Element Properties Panel.

Element Properties Panel

The currently selected element’s properties will automatically be populated in the Element Properties Panel, where fine adjustments can then be made to further customise the appearance and behaviour of the element.

Properties will be enabled and disabled dependent on whether the currently selected element type utilises the property or not. The below table outlines which proprties are enabled for each element type.

Type Text Barcfalsede Graphic Line Rectangle Filled Rectangle Ellipse Filled Ellipse
Name
Order
Colour
Value
Font Family
Font Size
Font Style
X Position
X End Position
Y Position
Y End Position
Width
Height
Stroke
Orientation
Horizontal Alignment
Vertical Alignment
Barcode Symbology
Human Readable Position
Human Readable Source

Name

A unique name that is used to identify a specific element. This value will be automatically assigned as each new element is created, based on the Element’s Type and an incremental number.

For the Text and Barcode Elements that are data-fed, the Name property value will become the 'key' Name value in the key-value pair ElementData record. This will then be the name that must be referenced when supplying a value to populate the element through the label API calls.

It is recommended that Name property is given a value that is relevant to the associated element. This is particularly important for data-fed elements, since it will make API calls much more intuitive if referencing AddressLine1, AddressLine2, Town, etc.., rather than TEXT_3, TEXT_4, TEXT_5.

Order

This determines the order that elements are placed upon the Design Pane and therefore how they will appear, with higher values appearing in front of lower values.

The value cannot be modified directly but is adjusted via the Bring Forward and Send Backward buttons. As an element is moved in either direction, the element directly adjacent and which it replaces in the order will also have its Order value changed to reflect its new position.

An element can be “brought to the front” or “sent to the back” by clicking and holding the Bring Forward or Send Backward buttons, respectively.

Colour

An elements colour can be set to one of 13 basic colour values:

Black Grey Dark Grey Light Grey White Pink Red
Orange Yellow Green Cyan Blue Magenta

Value

For Text and Barcode Elements, if set, the Value property will be used as a fixed value for the element. Graphic Elements use the property to identify the image to use from the Graphics collection. If the value does not match any existing image, the appearance on the Design Pane will resemble an empty rectangle.

Font Family

A dropdown box provides a list of available fonts to select from, which will be used for displaying Text Elements and the human readable value of a Barcode Elements.

Dependent on font family selected, the requested font may be substituted if not available for the desired output label format. Below is a table of the font substitutions that will take place across each output format.

Selected Image PDF ZPL SVG
All Caps Arial Helvetica B Arial, Helvetica, sans-serif
Arial Arial Helvetica 0 Arial, Helvetica, sans-serif
Arial Black Arial Black Helvetica 0 Arial Black, Gadget, sans-serif
C Arial Helvetica C Arial, Helvetica, sans-serif
Comic Sans Ms Comic Sans Ms Helvetica 0 Comic Sans MS, cursive, sans-serif
Courier New Courier New Courier A Courier New, Courier, monospace
D Arial Helvetica D Arial, Helvetica, sans-serif
Dingbats Arial Zapf Dingbats 0 Arial, Helvetica, sans-serif
F Arial Helvetica F Arial, Helvetica, sans-serif
G Arial Helvetica G Arial, Helvetica, sans-serif
Georgia Georgia Times Roman 0 Georgia, serif
Impact Impact Helvetica 0 Impact, Charcoal, sans-serif
Lucida Console Lucida Console Courier A Lucida Console, Monaco, monospace
Lucida Sans Unicode Lucida Sans Unicode Helvetica 0 Lucida Sans Unicode, Lucida Grande, sans-serif
OCR A Extended Arial Helvetica H Arial, Helvetica, sans-serif
OCR-B Arial Helvetica E Arial, Helvetica, sans-serif
Palatino Linotype Palatino Linotype Times Roman 0 Palatino Linotype, Palatino, Book Antiqua, serif
Symbol Symbol Symbol 0 Arial, Helvetica, sans-serif
Tahoma Tahoma Helvetica 0 Tahoma, Geneva, Verdana, sans-serif
Times New Roman Times New Roman Times Roman 0 Times New Roman, Times, serif
Trebuchet MS Trebuchet MS Helvetica 0 Trebuchet MS, Helvetica, sans-serif
Verdana Verdana Helvetica 0 Verdana, Geneva, Tahoma, sans-serif
Zapf Dingbats Arial Zapf Dingbats 0 Arial, Helvetica, sans-serif
All Other.. All Supported Helvetica 0 Arial, Helvetica, sans-serif

Font Size

The required point size for the selected font.

Font Style

A dropdown box provides a list of available style to select for the chosen font.

X Position

The X (horizontal) position of the top left-hand point of the selected Element.

X End Position

The end position in the X (horizontal) axis of the Line Element.

Y Position

The Y (vertical) position of the top left-hand point of the selected Element.

Y End Position

The end position in the X (vertical) axis of the Line Element.

Width

The selected element’s width in points.

Height

The selected element’s height in points.

Stroke

The point width to use for Line, Rectangle & Ellipse Elements.

Orientation

Elements can be set to an orientation of , 90°, 180° or 270°, by clicking the Rotate Left or Rotate Right buttons.

Horizontal Alignment

Text Elements that are configured with Width and Height properties (text box) can be set to one of the three horizontal alignment states: LEFT, CENTER and RIGHT by clicking the corresponding Align Left, Align Center and Align Right button.

The Barcode Element can be aligned to the center of the label by selecting the CENTER option. By default, barcodes are aligned to the center of their defined dimensions.

Vertical Alignment

Text Elements that are configured with Width and Height properties (text box) can be set to one of the three vertical alignment states: TOP, MIDDLE and BOTTOM by clicking the corresponding Align Top, Align Middle and Align Bottom button.

The Barcode Element can be aligned to the middle of the label by selecting the MIDDLE option.

Barcode Symbology

A separate option is provided for every barcode symbology and feature combination, which can be selected from the drop-down menu.

  • Code128BAC – Code 128, subset ‘B’ prioritised.
  • Code128ABC – Code 128, subset ‘A’ prioritised.
  • Code128AB – Code 128, subset ‘A’ prioritised and subset ‘C’ supressed.
  • Code128BA – Code 128, subset ‘B’ prioritised and subset ‘C’ supressed.
  • GS1128 – GS1-128.
  • Code39 – Code 39.
  • Code39Full – Code 39 Full ASCII.
  • Code39C – Code 39 with check digit.
  • Code39FullC – Code 39 Full ASCII with check digit.
  • I2of5 – Interleaved 2 of 5.
  • I2of5C – Interleaved 2 of 5 with check digit.
  • Ean13 – EAN-13 (European Article Number).
  • UpcA – UPC-A (Universal Product Code).
  • Ean8 – EAN-8 (European Article Number).

Human Readable Position

The position of the barcode's human readable value can be selected by clicking the corresponding button for the property.

  • Below
  • Above
  • Embedded
  • Hidden

Some barcode symbologies have a mandatory display format for the human readable value, which cannot be overridden.

Human Readable Source

The Human Readable Source property should be set if you wish to provide an alternate value to (or version of) the barcode value. The value provided in this property will be addressable through the label API calls.

Label Preview Window

The Label Preview Pane provides a facility to generate, view, download or print labels in any of the output formats.

Label preview

Once a new Label Template is completed or modified, it is advisable to check that the desired output has been achieved for all output formats intended to be used.

The Preview Window is split into two main panels, the Example Data collection and the Output Preview

Each time the preview pane is opened, the current template will be automatically saved in its current state. The data-fed fields are identified from the defined elements in the template and added to the Example Data collection.

Example Data Panel

The Example Data collection reflects the field names that will be exposed as the Name value in the ElementData record of the label API calls.

The initial value of each data-fed Text Element will be set to the element name, encapsulated in brackets. This value can then be adjusted to see how the output formats are affected. This is an important part of the design process, especially if multiple output formats are intended to be used

Checks can be made to ensure variations in the data provided are accommodated correctly across each format. Due to the lack of a common font set shared by all output formats, you will find that text values may output differing string lengths between formats. Where differences do occur, these will likely be exaggerated, the longer the text value is.

PDF
PDF
ZPL
ZPL
Image
Image
SVG
SVG

Barcode Elements will have an empty value when first setup and will appear as a crossed rectangle on example outputs until a suitable value is provided.

To see the effects of changes to any of the test values, click on the Refresh button and the currently displayed Output Example will update to reflect the new value(s).

Selecting the Additional Labels option will produce the selected number of additional labels, automatically altering the data values for each subsequent label to provide differentiation.

Preview Example Panel

Each of the supported output formats can be viewed via one of the four tabs along the top of the Output Example Panel

  • Adobe PDF (Portable Document Format)
  • ZPL II (Zebra Programming Language)
  • Image (PNG, JPG & TIF)
  • SVG (Scalable Vector Graphics)

PDF Preview

The PDF output will require that an appropriate PDF viewer plugin is installed on your web browser. Dependent on the plugin used, appearance and functionality may differ. For illustration purposes, the example screenshots in these instructions show the Chrome default PDF viewer.

Label preview

To ensure key functionality is present across different browsers and PDF plugins, the Download and Print options are provided independently of the plugin used (although these functions will likely also be available inside most plugins).

ZPL Preview

The ZPL Output provides two ways to view the generated label. Using the tabs inside the output window, the label can be viewed as Code, which provides the underlying ZPL II code or through the Online Viewer, which displays a predicted image of the label.

ZPL Controls

There are some additional options that can be set for the ZPL output that will control certain aspects of the generated code to match specific printer, driver or aesthetic requirements.

Print Resolution

To ensure the ZPL code produced will be at the required scale for the selected printer, the printer’s DPMM (Dots Per Millimeter) output should be selected from the dropdown selector at the top of the Output tab.

The four available setting translate to the following DPI (Dots Per Inch) values:

  • 6dpmm = 150dpi
  • 8dpmm = 203dpi
  • 12dpmm = 300dpi
  • 24dpmm = 600dpi
Line Endings

Selecting the Line Endings checkbox will insert a new line after each ZPL instruction, making the code a little more human readable.

Printer Passthrough

Some ZPL printer drivers allow ZPL code to be passed directly to the printer as code by encapsulating it in a defined start and end sequence. The Passthrough Start and End properties can be set to meet this requirement if it is needed. Typically, the values ${ and }$ are used respectively.

ZPL Code Output

ZPL II code is presented in plain text form in the main output window, with additional controls at the bottom of the window.

Label preview
  • Download button will download the code as a plain text file to the browser’s default location.
  • Copy Code will copy the code to the clipboard.
  • Print will open the browser’s print dialog.
  • NOTE: The Chrome browser and derivatives (Edge) convert all print output to an image. Because of this, there is no way to get ZPL code directly to the selected printer using the Passthrough method. In this scenario, it is advised to download and open the code in your text editor of choice and then print the label from there.

ZPL Online Viewer

This will present an image of the label as it would appear printed, courtesy of the Labelary web service. If the request is for a single label the image will be provided as a PNG, but for multi-label requests, a PDF will be generated instead.

Raster Image Preview

When the Image Output tab is selected, the example label will be displayed in the main output window. Dependent on the format and number of example labels requested, the output may also contain a link to download the label(s), if the viewer cannot display the output format.

Raster Image Controls

There are two options that can be selected to alter the image output. Format will determine the image encoding codec and DPI the resolution.

Image controls
Format

There are three image formats that Labelling Online supports:

  • PNG – (Portable Network Graphics)
  • JPG / JPEG
  • TIF / TIFF

PNG and JPG can be displayed in browser, but TIF is not currently supported by most modern browsers and will therefore be provided as downloadable link instead.

For multi-label requests, the returned format (mirroring the API) will be a ZIP file, when output format is PNG or JPG. The TIF file format supports multi-frame images natively and so will continue to export as normal for multi-labels.

Print Resolution

The destination printer’s output resolution can be matched by setting the DPI option. This will ensure the best possible result in terms of print accuracy for the printed label.

To mitigate any potential degradation in print quality, it is recommended to print the label image at “actual size”, using the printer’s native resolution. Features such as “fit page” and “stretch” can introduce scaling artifacts that effect print quality and in particular, can reduce barcode scan tolerance.

SVG Preview

SVG (Scalable Vector Graphics) is an XML-based, Extensible Markup Language vector image format. This format is significant for having the ability to be infinitely scalable without any loss of quality (with exception of imported raster elements).

For that reason, it is becoming increasingly popular for use on websites, which have to cater for a number of device sizes. This feature is what also makes it effective as a label format when required to accommodate a number of different printer and stationary sizes.

As the outputted SVG image is provided as XML, it also makes this format particularly amenable to being manipulated or incorporated into other design elements.

The Output window has two available views, accessible via the tabs inside the Output window.

SVG Code Output

SVG code is presented as XML text in the main output window, with additional controls at the bottom of the window.

Image controls
  • Download button will download the code as an XML text file to the browser’s default location.
  • Copy Code will copy the code to the clipboard.

SVG Viewer

The viewer displays a copy of the SVG image inside the main output window. When switching to the Viewer tab, the Copy Code control is replaced by a Print button, which will open the browser's default print dialog.

API

The API structure and functionality is provided via the built in Swagger page, which provides interactive API documentation.

Authentication

The Labelling Online API uses basic authentication, that requires a 'Bearer' token to be submitted in the authentication header of each API call.

To obtain an authentication token, a call will need to be made to the https://labelling.online/Token API

The hedaer Content-Type should be set to "application/x-www-form-urlencoded" and the body should contain the three keys grant_type, username and password.

The grant_type should be set to "password", while username and password should be set to reflect your Labelling Online login credentials.


        POST /Token HTTP/1.1
        Host: labelling.online
        Content-Type: application/x-www-form-urlencoded

        grant_type=password&username=YourUsername&password=YourPassword

A new Bearer token will be returned and will have a lifespan of two weeks, after which time, a new token will need to be obtained.


        {
        "access_token": "QaglHh7EwzcGFsgQNDnqpM5vZig...
        "token_type": "bearer",
        "expires_in": 1209599,
        "userName": "demo@labelling.online",
        ".issued": "Fri, 21 Aug 2020 11:49:30 GMT",
        ".expires": "Fri, 04 Sep 2020 11:49:30 GMT"
        }