LabeLase® Designer

Tutorial - Creating a Tag Layout

Introduction

 The purpose of this tutorial is to present a step-by-step example of creating a tag layout using LabeLase® Producer tag production software for the LabeLase® 1000 metal tag printer.

We will begin by showing an image of the final tag and then lead you through the steps required to create the layout. In the process, you will create fields that can be entered by an operator or downloaded by another computer (the host) during production. You will add text, barcode and graphic fields to the layout. You will also add an auto sequencing (serial) number that the software will update for you on each printed tag.

This tutorial assumes that you have already installed the software and connected the tag printer to your PC.

Objective

 Before we begin creating the layout for your tag, it helps to have an idea of what the tag will look like as well as what data is needed and where that data is to come from. Below is a figure showing the final tag we are going to create. You may already be using a paper label that you are printing in a thermal or dot-matrix printer, and you want to replace it with a more durable metal tag. In this case, your existing paper label is the perfect model for the new layout.

As you can see, this label has several text fields including fields that contain data that changes on each tag, as well as label fields that are fixed (do not change) and serve to describe the associated data fields. There are two barcodes on this label, one that is a 1D code that contains a small amount of data, and one that is a 2D code that contains more information than can fit in a standard 1D code. Finally, a company logo appears to identify your organization.

Creating a New Layout

 The first step in creating a new layout is to tell Producer that you want to create a new layout. From the main window of Producer, select the File menu and then New.

Producer will ask you for the Supervisor Password if you are not already in the supervisor mode. Once you supply the correct password, Producer will launch the Layout Designer, a separate program. As soon as the Designer starts, it will show you a list of common tag sizes, materials and colors. Simply select the image that matches your tag configuration. If your tag does not appear in the list, select the first "blank" layout and customize it manually.

The Designer will create a new layout that has no fields. The size of the layout will be determined by the tag you selected, and may have to be manually set to the size of your tag material. We will assume you selected the "blank" layout and manually configure the tag in the next step.

Specifying the Size of the Tag

The size of the layout must be the same as the size of the tag material on which it will be printed. Before adding any fields to the layout, we must tell the Designer what size tag material we will be using.

Click any blank area of the layout and the Layout will be selected in the field list. With the layout selected, the property editor shows the various properties associated with the layout and allows you to change them.

The first two fields in the Layout property editor are Width and Length. The length dimension is in the direction that the tag material feeds out of the printer as shown by the gray arrow next to the tag image.

For our example, enter a width of 3 inches and length of 3 inches. Note that we are using English units for this tutorial.

 After entering each value, be sure to press the Enter key, or tab to the next field, to accept your changes. The layout image will update immediately.

Adding a Hole

 Since our tag stock has a hole in it, we don't want to place any of our text, barcode or graphic fields over the top of the hole. To help us avoid the hole, the Designer allows us to add an image of the hole to the layout.

Unlike versions of Producer prior to 2.x which required you to enter up to two holes using the Geometry dialog, the newest version of Producer treats holes (and slots) as ordinary tools, allowing you to enter as many as you need.

To add a hole, select the Hole Tool. Once selected, you place your hole by clicking the tag image in the location where the hole will be located.

Once you have placed your hole, use the property edit to enter the hole Diameter and X,Y coordinates of the hole's center location, relative to the lower left corner of the tag.

Producer allows you to have as many holes as you need, but be aware that not all hole positions/combinations will be available from InfoSight, nor will it always be possible to manufacture a tag with the hole pattern you desire.

Once you have placed and configured your hole, your layout should look something like the image shown below:

Notice the arrow that indicates the direction of feed. This shows that the side of the tag with the hole will feed out of the printer first. We can consider this the top of the tag because we want the text to flow under the hole since the tag will be hanging from a wire that passes through the hole. Because of this, we will have to orient our fields at 90 degrees rotation as we will discuss later.

Creating Operator Entry / Host Download Fields

 The text fields on a layout consist of fixed fields that never change (labels) and data fields that may be changed either by an operator, by downloading from another (host) computer, or that are auto created and/or sequenced by the Producer software. The next step in creating our layout is to define those fields that will either be entered by the operator or downloaded from another computer. We call these Operator Data Entry fields, but it is important to note that these fields can also be populated by another computer at the time the tags are printed.

If you want to have another computer download data to be printed on your tag, you must first create an Operator Data Entry field for that data, even if you do not intend to have an operator manually key in the data.

Let's add the Operator Data Entry fields for our tag. Click the Operator Data Entry button. This will open the Operator Data Entry Setup window.

At the top of this window is a grid that allows you to add as many fields as you need. There is no limit placed on the number of fields you can add. Buttons next to the grid allow you to Add, Delete and Insert fields and also to Clear the entire list.

Each entry in the list has three properties: Prompt, Verify and Sample Data

Prompt - This is usually the name of the field, and is presented to the operator to help her enter the right data into each field. Pick a short, descriptive label or phrase that will be obvious to the operator.

Verify - The Verify property is optional, and allows us to control the type of data that the operator can enter. It is used during tag printing to check that the data entered by the operator has a valid format. If we leave this property blank, then there are no restrictions placed on what the operator can enter. See the manual for details of how to set the Verify property.

Choices - As an alternative to free-format data entry, there is the ability to restrict the user to selecting from a limited list of choices. Enter the list of choices in the Choices column, each choice separated by a semicolon character.

Sample Data - This property allows us to enter a sample of the data that will typically be entered by your operator (or downloaded) and will make it easier for us to create our text fields on the layout.

In our layout, we have seven fields that will either be entered by the operator or downloaded from another computer. Lets add the first field.

You can begin entering a new field in the empty row at the end of the list. If the list doesn't have an empty row, click the Add button and one will be added. For the first field, we enter "SIZE:" for the Prompt, leave the verify empty, and "#43 METRIC (#14 BAR)" for the Sample Data. Note that the quotation marks are shown here for clarity and are not actually entered.

We continue entering fields until we have entered all seven Operator Data Entry fields.

Below the grid of data entry fields are additional fields that allow us to customize the operator interface. Each field has a checkbox that will enable the display of the field on the main Producer window. Along with the enable checkbox is a field that allows you to customize the prompt that the operator will see. For our application, we are only going to enable the Serial Number and Quantity Required fields. The default prompts are ok, so we will keep them.

Our final settings for the Operator Data Entry configuration are shown below. Click OK to save these settings.

Adding Text to the Layout

 Now it's time to start adding text fields to the layout. We begin with the name of the company, XYZ Steel Co. We want this text to appear at the top of the layout, straddling the hole.

First, we select the Text tool from the toolbar on the left side of the Designer. Once the tool is selected, we click on the layout in the location that will be the lower left corner of the text. While continuing to hold down the mouse button, drag the mouse pointer up and to the "right" (remember our tag image is rotated 90 degrees) to size the text.

When we release the mouse button, the properties editor will show the configuration of the Text field. This editor allows us to specify the text to print along with other properties that affect its appearance. Enter "XYZ STEEL CO." into the Text field and click the Enter key. We will keep the default font of "Arial" and size of 24 (which was determined automatically for us based on the size of the stretch box we drew.) The Rotation of 90 degrees was determined for us also, based on the direction that we drew the stretch box (from lower right of the screen to upper left of the screen.)

After entering the text, press the Enter key to save the field. The layout will be redrawn to show the new field. 

You can move the field around using the mouse. Simply click and hold the mouse button anywhere on the field and drag. When you get it where you want it, release the mouse button and the field will be moved. 

To resize the field, click and drag one of the blue squares located around the selected field.

Congratulations, you have just added your first text field to the layout. Now, using the same techniques, add each of the fixed labels ("SIZE:", "LENGTH:", etc.) to the layout. Don't worry too much about placement at this time, since we will be cleaning up the look of the layout later. Once you have finished, you should have a layout that looks something like this:

Now that we have our fixed text prompts, the ones that never change, we can begin adding our variable text fields. Remember, we want to link these variable fields to the Operator Data Entry fields we created earlier. Let's begin with the first field, "SIZE". Select the Text Tool if it isn't already selected. Draw a stretch box like before, but begin next to the "SIZE:" prompt as shown below.

This will bring up the property editor as shown below. 

In the Text field, we need to enter a special "flag" that tells Producer that what you really want to print here is the first of the Operator Data Entry fields. This flag is "%1V". The percent character tells Producer that what follows is a special "flag" field. The "1V" indicates the first of the Operator Data Entry fields. 

There are many such flags that allow you to insert automatically generated or sequenced data.

After entering the flag in the Text property and clicking the Enter key, the tag will be redrawn as shown.

Notice how we made the data portion of this field a bigger font than the label that goes with it. This is purely individual preference, but I feel that it makes it easier to locate the data from the labels. 

Now go ahead and add the remainder of the variable data fields, except for the "BUNDLE#" since we plan to make that an auto sequencing field. Remember, that to refer to the second Operator Data Entry field, you would use %2V, and so on. Once your finish, your layout should look something like this:

Again, don't be too worried about how the fields line up at this point. Just get everything placed about where it belongs and we'll clean it up later.

Adding an Auto Serializing Text Field

 Now that we have placed all of the fields for the Operator Data Entry, we need to add our automatically serializing BUNDLE number. This field will not be entered into the Operator Data Entry fields like the others, so we do not refer to it using the %V flags. There is a different flag for the Serial Number fields, and that is %S. Putting a number between the percent character and the letter S indicates how many digits you want to display. For our layout, we want a three digit serial number, so we enter %3S as the text for our Text Field. Create a new text field like you did the others, positioning it next to the "BUNDLE#:" label and then enter %3S for the text.

As you can see here, the layout now contains a three digit serial number starting with 001. We have allowed the operator to specify the starting serial number by check the box "Enable Serial Number" in the Operator Data Entry configuration screen. As each tag is printed, the serial number will increment by one (the default.)

Adding a Barcode

Let's begin adding our barcodes to the layout. As we said, our layout must contain a plain 1D barcode, plus a 2D barcode that contains more information. Let's start with the 1D code.

Select the Barcode Tool and then click on the layout where you want the code to be located. Drag a stretching box up and to the right to size the barcode.

When you release the mouse button, the property editor will show the properties of this Barcode field. In this editor, you must specify the barcode symbology, scale and link. For our example we are going to use the Code128 type of barcode. We chose scale 4 (X dimension is 4 pixels wide.) 

For the link field, we click on the ellipsis button to open up the Barcode Link Editor. From this editor shown below we have pulled down the selector and chosen the field that contains the variable text field 7 (%7V, which is the heat number.) This happens to be field 16 in our example because it was the 16th field we added to the layout. The link in your own layout may be different.

After you make your settings and click the OK button, your layout will be redrawn showing the new barcode field.

Adding a Second Barcode

Now we can add our second, 2D barcode. Select the Barcode Tool if you haven't already and click in the area under the Bundle number. Be sure to click outside the blue selection box that surrounds the first barcode we place (see above) because that space is reserved as "quiet zone" and must be free of other text or codes.

In the property editor for the Barcode Field, we are going to specify the DataMatrix symbology. This is a very robust 2 dimensional barcode that will allow us to encode a large amount of data. Select a scale of 8 and rotation angle of 90.

Rather than linking directly to the other text fields that we have already placed, we are going to directly encode the barcode's contents into the link field. Our application requires us to encode the date, the heat and the bundle number, with each field separated by a TAB character. To do this, we must enter the following into the link field:

:%5V\<TAB>%7V\<TAB>%3S

Note that this field begins with a colon character. This is very critical. When the link field begins with a colon character, Producer knows that we are not linking to other text fields in the layout, but are instead directly encoding the data.

The %5V is the link to the 5th Operator Data Entry field, which is the Grade. The %7V is a link to the 7th entry field which is the Heat and the %3S encodes the three digit serial number. The \<TAB> flag inserts an ASCII TAB character between the fields. This TAB serves to separate the fields when the barcode is read later in the production process.

After entering the Link, click the Enter key to update the display of your 2D barcode. Your image should look something like this:

Adding Your Company Logo

 Now we can add our last field to the layout: the company logo. You can create your logo using any Windows painting program that will create BMP (bitmap) files. I like to use Paint, the painting program that comes with Windows.

When you create your logo, you should try to size the bitmap to approximately the size it will be on the layout. The model 1000 printer has a resolution of about 333 pixels per inch. We want our logo to be about a quarter inch square, so we are going to use Paint to create a bitmap that is 83 x 83 pixels. Save the logo in Monochrome bitmap format if you can, because Producer cannot print colored logos.

Once you have saved your BMP logo file to disk, select the Graphic Tool in the Designer and click on the layout where you want the logo to appear. We chose to put it next to the company name, in the corner of the tag. The property editor for the graphic field will allow you to specify the name of the file that contains your logo, as well as scale and other values.

In the File Name field, you may type the complete path to the logo bitmap file, our you may click on the Browse button and locate it in the File Open dialog. 

The X and Y scale fields allow you to resize the logo as needed to fit your layout.

Click the Enter key and the Designer will redraw the layout showing you the logo.

Note that your logo will look different than my made-up example.

Aligning Fields

Now that we have added all of the fields that we need to our layout, it is time to clean things up and make them look more professional. Notice in the figure above that each field has a red dot in its lower left corner. This is called the "anchor" and indicates the fixed point of the field. If your Designer does not show the anchors, select the View tab and click on Show Anchors.

You can use the mouse to individually grab and move each field, trying to line them up visually. Or you could also edit each field individually using the associated editor (double click a field to open its editor.) and manually edit the X and Y starting locations. But there is a better way. At the top of the designer, there is an Alignment tools located on the Home tab in the Arrange group.

For the Alignment tools to work, you must first select more than one field. Do this by clicking on one field, holding down the CTRL key and then clicking on the additional fields you want to select. Each selected field will have a blue selection box around it.

As you can see, I have selected five of the labels that I want to align on their "bottom" edge. This is not the bottom of the fields themselves, but the bottom of the display.

Once you have the fields selected, select the Align Bottom tool (bottom of the first column of the toolbar) and the fields will all be aligned to the "bottom-most" field.

Using this technique, align the fields as needed to clean up the appearance of the layout. Remember, if you make a mistake, you can use the Undo and Redo features to backup and correct. Once you have cleaned up your layout, it should look something like this:

That's it. We have successfully created our layout. All that's left to do is save our work.

Saving Your Work

Although we have saved this step for last, we recommend that you save your work often when designing your layouts. Although the Undo/Redo feature can save you if you make a mistake, it can't save you from an unexpected power failure or system crash.

To save your work, select the Application menu, Save menu item or click the save icon in the quick toolbar. Locate a folder where you want to put the layout and give it a descriptive name.

When you exit the designer, your layout will be loaded and ready to print. Your operator data entry fields will be presented to the operator, along with the starting serial number. All your operator has to do is enter the data and begin printing.

Conclusion

This concludes our tutorial on tag layout creation. In this tutorial we showed how to create a new layout, specifying the tag dimensions and the location and size of the tag's hole. We added multiple text fields, with both fixed and variable data. We created two barcodes, one that was 1D Code128 and the other 2D DataMatrix. We also added a logo to the layout and used the alignment tools to clean it up.