Flyouts and Screens

Barcode & Label is designed to be elegantly simple through the extensive use of flyouts. A flyout is a lightweight UI that requires user interaction and can be dismissed by clicking or tapping it off. Most of the flyouts from Barcode & Label appear on the right hand side of the display. This is shown in the diagram below. This section provides you with a description on all the functionalities of each flyout. You may use this as a reference to look up a feature or functionality that you do not understand.




Dimensions

Most flyouts related to objects come with Dimensions properties. All the fields of the Dimensions properties are described below:

  • X - The X position of the selected object in Pixels. 0 is the left most position of the label. If multiple objects are selected, the X position will be shown as "--".
  • Y - The Y position of the selected object in Pixels. 0 is the top most position of the label. If multiple objects are selected, the Y position will be shown as "--".
  • Width - The width of the selected object in Pixels. If multiple objects are selected, the Width will be shown as "--". It is possible to change the width of object (or objects) by changing this value.
  • Height - The height of the selected object in Pixels. If multiple objects are selected, the Height will be shown as "--".It is possible to change the height of object (or objects) by changing this value.

Shape Properties

If the Properties button is tapped or clicked when a Rectangle, Ellipse or Line (or multiple objects) is selected, the Shape Properties flyout will be displayed. If only one object is selected, the flyout will display the properties of this selected object. If more than one objects are selected, this flyout will be launched with default dummy values that allow you to modify the properties of the multiple objects simultaneously.




  • Stroke Thickness - The thickness of the border, from 0 to 20 in Pixels.
  • Stroke Color - The color of the border of the object.
  • Fill Color - The color of the object.

Text Properties flyout

If the Properties button is tapped or clicked when a Text object is selected, the Text Properties flyout will be launched. This flyout will display the properties of the selected Text object. If more than one Text objects are selected, this flyout will be launched with default dummy values that allow you to change the properties of the multiple Text objects simultaneously.




  • Text - This field allows you to enter the text of the object. It is only enabled if the Type is set to "Enter from Keyboard", implying you want to manually enter the text instead of pulling data from variable fields.
  • Type - This option specifies whether the input data is entered from the keyboard or from a variable field that has been setup in the Fields Properties flyout. For example, if you select the Field "Contacts: Name", the app will populate this field with the name of the contacts you import from the People's app.

    The following is a list of supported fields:

    • Enter from Keyboard
    • Contact : Name
    • Contact : Personal Email
    • Contact : Work Email
    • Contact : Mobile Phone
    • Contact : Home Phone
    • Contact : Work Phone
    • Contact : Home Address Street
    • Contact : Home Address City
    • Contact : Home Address State/Province
    • Contact : Home Address ZIP/Postal Code
    • Contact : Home Address Country/Region
    • Contact : Work Address Street
    • Contact : Work Address City
    • Contact : Work Address State/Province
    • Contact : Work Address ZIP/Postal Code
    • Contact : Work Address Country/Region
  • b - Apply bold style to the selected text objects.
  • i - Apply italic style to the selected text objects.
  • wrap - Apply wrapping to the selected text objects. The text will wrap according to the bounding box of the object.
  • Left Align - Align the text to the left of the bounding box.
  • Center Align - Align the text to the center of the bounding box. This is the default.
  • Right Align - Align the text to the right of the bounding box.
  • Font - The font used for rendering the text characters of the selected objects. Currently only the fonts of WinRT are supported.
  • Font Size - The font size that is used to render the text characters of the selected objects. Font sizes from 6 to 128 points are supported.
  • Font Color - The color used for the text characters.
  • Stroke Thickness - The thickness of the border, from 0 to 20 in Pixels.
  • Stroke Color - The color of the border of the selected objects.
  • Fill Color - The background color of the selected objects.

Barcode Properties flyout

If the Properties button is tapped or clicked when a Barcode object is selected, the Barcode Properties flyout will be launched. This flyout will display the properties of the selected Barcode object. If more than one Barcode objects are selected, this flyout will be launched with default dummy values that allow you to change the properties of the multiple Barcode objects simultaneously.




  • Barcode Symbology - Specifies whether to generate the Code 39, Industrial 2 of 5 or POSTNET barcode. Upon selection of the barcode symbology, various options such as Check Digit, Barcode Font and Font Size will be setup automatically. These are the values that we recommend for generating high quality barcodes. However the values can be overwritten.
  • Check Digit - Specifies whether to generate a barcode with a check digit or check character. For the Code 39 and Industrial 2 of 5 barcode, this option is optional. For the POSTNET barcode, it is mandatory.
  • Input - The input data used for generating (or encoding) the barcode. Some barcode symbology may support only numbers or up to a maximum number of characters. In this case the app will automatically trim away unsupported characters before proceeding with barcode generation to ensure industry requirements are met.
  • Type - Specifies whether the input data used for generating the barcode is entered from the keyboard or from a variable field that has been setup in the Fields Properties flyout. For example, it is possible to use the Field "Contacts: Work Address Zip/Postal Code" to generate the POSTNET barcode.

    The following is a list of supported fields:

    • Enter from Keyboard
    • Contact : Name
    • Contact : Personal Email
    • Contact : Work Email
    • Contact : Mobile Phone
    • Contact : Home Phone
    • Contact : Work Phone
    • Contact : Home Address Street
    • Contact : Home Address City
    • Contact : Home Address State/Province
    • Contact : Home Address ZIP/Postal Code
    • Contact : Home Address Country/Region
    • Contact : Work Address Street
    • Contact : Work Address City
    • Contact : Work Address State/Province
    • Contact : Work Address ZIP/Postal Code
    • Contact : Work Address Country/Region
  • Human Readable Text - This is the text that appears below the barcode and is commonly referred to as Human Readable Text. Note that this text is not necessary the same as the input data. For example, it is possible to generate a barcode with a check digit and the check digit will appear as an extra character in the Human Readable Text.
  • Font - The font used for the Human Readable Text.
  • Font Size - The font size of the Human Readable Text. Font sizes from 6 to 128 points are supported.
  • Text Color - The color of the Human Readable Text.

Image Properties flyout

When an image is being created, you have the option to specify whether it is derived from file or from the ClipArt library. If you select an image from file, clicking or tapping the image subsequently brings up the following flyout. For the Image Properties flyout, only the Width and Height can be changed.

To change the image itself, simply remove or delete the object and add a new one. The Filename field indicates the full path of the original image file used to create the object.

Barcode & Label stores a copy of the image within the label itself when the object is first created. Thus, the image object will not be affected even if the original image file has moved to a new location.




Clip Art Properties flyout

When an image is being created, you have the option to specify whether it is an image from file or from the ClipArt library. If you select a ClipArt, clicking or tapping the image subsequently brings up the following flyout. The clipart can be changed by selecting a new one among the different categories shown below and then clicking or tapping the Replace button.




Common Properties flyout

If the Property button is tapped or clicked when multiple objects of different types are selected, the Common Properties flyout will be displayed. This flyout contains properties common to the different objects. The most common use of this flyout to change the Width and Height of all the selected objects at one go.




Select Label Template flyout

The Select Label Template flyout is displayed when the "New" button is tapped or clicked on. This flyout allows you to select a label template from the database.




For example, if you have purchased an Avery 5262 Laser Address Label, you can follow the steps below to pick the appropriate template from the database.

  • Select "Labels" as the Category.
  • Select "Avery" as the Vendor.
  • Enter "5262" in the Search box. Barcode & Label will retrieve the chosen template.
  • Tap or click on a label template in the Templates section.
  • Tap or click on the Create button to create the label.
If you do not know the source of your label stock, you can still easily customize from an existing template. Select "Standard" as the vendors and find a template that is similar to what you have. Tap or click on the Customize button. This will bring up the Customize Template flyout described in the next section.

Customize Template flyout

This flyout allows you to make modifications to an existing Template before creating the label. You can make changes to the template values such as Rows, Columns and Page Width and tap or click on the Preview button to see how the values affect the label template. After Preview, you can tap or click on the Create button to generate the label. The values modified will be used for creating the new label and will not affect the template values in the database.




  • Page Width - Width of the Paper.
  • Page Height - Height of the Paper.
  • Left Margin - Distance from the left edge of the Page to the first label.
  • Top Margin - Distance from the top edge of the Page to the first Label.
  • Label Width - Width of the Label.
  • Label Height - Height of the Label.
  • Horizontal Space - Horizontal Spacing between labels from one column to the next column.
  • Vertical Space - Vertical Spacing between labels from one row to the next.

Page Properties (Customize Template) flyout

This flyout is similar to the Customize Template flyout. It is displayed when the Properties button is tapped or clicked when no objects are selected. This flyout allows you to make modifications to the template after a label has been created.

One important thing to take note during printing, is that you may notice that the margins of the labels may not come out to be what you have expected. The page may be shifted a little downwards or towards the right side of the paper. This is not a bug but a common printing problem due to minimum margins requirements in some printers. The issue can be resolved by adjusting the Left Margin or Top Margin values in this flyout.

The Preview button updates the Preview box to show how the updated values affect the label layout. After Preview, you can tap or click on the Modify button to update the current label. The modification only affects the current label and not the template values in the database.

The "Label Filename" is also displayed in this flyout to indicate the label file affected by the template changes.




Application Settings flyout

The settings in this flyout are application wide and stored automatically across the creation of new labels. For example, Barcode & Label supports Inches or Centimeters as the unit of measurement. If you set the "Units" to Centimeters, the app will default to Centimeters for all new labels created from now onwards. The "Snap to Grid" option allows you to specify whether objects automatically snap their top-left corner to the intersections of grid squares. The intersections are specified using the "Divisions per Inch/Centimeter" option.

The Fit Label option fills the screen automatically by zooming in or out on the current label.

The Help button invokes a browser to view the help file on the web.




Please note that when multiple objects are selected or an object is rotated, the snap option does not apply.

Import Contacts flyout

This flyout works hand in hand with the variable fields in the Text and Barcode objects.




By tapping or clicking on the Select button, you will be able to import contacts from the People's app. These imported contacts will provide the data for the following variable fields that you can use in the Text or Barcode object. Refer to the Labels with Variable data section for a more detailed explanation.

  • Contact : Name
  • Contact : Personal Email
  • Contact : Work Email
  • Contact : Mobile Phone
  • Contact : Home Phone
  • Contact : Work Phone
  • Contact : Home Address Street
  • Contact : Home Address City
  • Contact : Home Address State/Province
  • Contact : Home Address ZIP/Postal Code
  • Contact : Home Address Country/Region
  • Contact : Work Address Street
  • Contact : Work Address City
  • Contact : Work Address State/Province
  • Contact : Work Address ZIP/Postal Code
  • Contact : Work Address Country/Region

Align and Order Menu

This menu from the bottom Ellipsis enables multiple objects to be aligned to each other or to the different edges of the label. On top of that, when objects are created in Barcode & Label, each of them is drawn on its own layer. The Order option enables the object to be moved in front or behind of other objects.




Preview and Print Page

When the Preview button is tapped or clicked, objects in the label canvas will be used to populate the template. The following screenshot shows how the labels will look like when printed.




The "Start Label Position" and "No. of Labels" options are only available when printing labels with variable data.

  • Start Label Position - This option is used to specify the start position for filling the template with label objects. Barcode & Label adopts a left to right and then top to bottom sequence. So a number "4" for this field will correspond to the first label in the second row as shown in the screenshot above.
  • No. of Labels - This option is used to specify the number of labels to print. For example, if you have a 6x3 template that supports a total of 18 labels and have chosen 3 contacts from the People's app, by default, only 3 labels will print. You can, however, manually set the "No. of Labels" to be 18 and Barcode & Label will print all 18 labels by repeating the contacts data.
The following option is available when printing labels with fixed data.

  • No. of Pages - Specifies the number of pages to print.