In this post we will look at different ways for printing multiple labels from a web application.
Option #1
The first option is just to call the print() method several times. Each call to print() will produce a single label. Between calls you will call other library functions like setObjectText() to update the label’s content. The pseudo-code is like this:
var label = dymo.label.framework.openLabelXml("<?xml>..."); // label #1 label.setObjectText("Text", "Some text"); label.print("DYMO LabelWriter 450 Turbo"); // label #2 label.setObjectText("Text", "Some other text"); label.print("DYMO LabelWriter 450 Turbo"); // label #3 // ...
This option is straightforward but unfortunately is not very efficient. Each call to print() function creates a separate print job. This might be a problem if hundreds of labels are being printed. But more important it might be not fast enough. The reason is that due to the printer hardware design some LabelWriter models might need to reverse feed a label at the beginning of each print job. Thus printing each label in a separate print job might be up to 5-10 times slower that printing all labels in one print job.
The solution is to do printing in one print job, so each label is printed as a single job’s “page”. For this there is option #2.
Option #2 – Printing Using a LabelSet
A “labelset” contains data to be printed on labels. Conceptually it is very similar to a dataset/recordset or a database table. A labelset consists of a set of records. Each record represents data for a single label. A record consists of a set of “fields”. Each field name is a name of an object on the label. A field value is text to be printed for that object. A record can be seen as a dictionary/associative array. The dictionary’s keys are label object names. The dictionary’s values are text for the label object. The dictionary can have only one key, e.g. if there is only one object on the label. But also it can have multiple keys to specify data for different label objects. It is NOT necessary to specify data for each object on the label; if a record does not have an appropriate key the object text will remain as-is (so, the object is a kind of ‘static’ text).
To do multiple label printing two pieces of information need to be defined. One piece defines what to print and the other piece defines how to print. “How to print” means how/where to put data on the label. That is specified by the label file. “What to print” is the actual data. That is specified by a labelset.
One more way to look at multiple label printing from the point of view of the MVC (Model-View-Controller) design pattern. In this case a labelset is the Model, the data to be processed/printed. A label (file) is the View. It specifies a presentation or layout for the data to be printed. And the library is the Controller, it binds the label and the labelset in print() operation.
LabelSet API
The Labelset API is quite simple. To create a labelset call dymo.label.framework.LabelSetBuilder constructor, like
var labelSet = new dymo.label.framework.LabelSetBuilder();
To add a new record, call the addRecord() method of the LabelSetBuilder object,
var record = labelSet.addRecord();
To set record data, call the setText() method. The first parameter is an object/field name, the second – an object text/field value,
record.setText("Description", itemDescription); record.setText("ItemCode", itemCode);
To print a labelset, just pass it as a third argument to print() method (the first argument is a parameter name, and the second argument is printing parameters; you can use empty string to specify default printing parameters),
label.print("DYMO LabelWriter 450 Turbo", '', labelSet);
Samples
To demonstrate using LabelSet we will look at two samples. Both of them use Google Docs spreadsheet as a data source. They take a spreadsheet data using Google Data JSON API and convert to appropriate labelset. The spreadsheet itself is displayed on a web page as well, so it is more clear what data are printed. Although for these samples spreadsheets are read-only it is possible to make them “editable”, so “live” data will be printed.
Sample #1 – Addresses
A spreadsheet for this sample contains address data. Each part of the address – name, street, city, state, zip – is in it’s own column. So, each spreadsheet row contains a full address, and specifies data for one label. The sample page is here, the java script code is here.
Upon page load a request is made to get the spreadsheet’s data:
function loadSpreadSheetData() { removeOldJSONScriptNodes(); var script = document.createElement('script'); script.setAttribute('src', 'http://spreadsheets.google. com/feeds/list/tSaHQOgyWYZb6mUPGgrsOGg/1/public/values?alt=json-in-script&callback=window. _loadSpreadSheetDataCallback'); script.setAttribute('id', 'printScript'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); };
This is done by dynamically creating a <script> element to avoid cross-domain security restrictions. Upon request completion a callback function is called; the callback gets passed the returned spreadsheet’s data in json format to a function that generates a labelset and saves it in labelSet variable.
function loadSpreadSheetDataCallback(json) { labelSet = createLabelSet(json); };
createLabelSet() function iterates through all spreadsheet rows, and for each row it creates one labelset record. Each record contain only one “field”, because the label we going to print contains only one address object named “Address”.
function createLabelSet(json) { var labelSet = new dymo.label.framework.LabelSetBuilder(); for (var i = 0; i < json.feed.entry.length; ++i) { var entry = json.feed.entry[i]; var name = entry.gsx$name.$t; var street = entry.gsx$streetaddress.$t; var city = entry.gsx$city.$t; var state = entry.gsx$state.$t; var zip = entry.gsx$zip.$t; var address = name + '\n' + street + '\n' + city + ', ' + state + ' ' + zip; var record = labelSet.addRecord(); record.setText("Address", address); } return labelSet; }
As you see, the function is pretty straightforward. The most complex part is to get the spreadsheet’s columns values (name, street, city, etc variables) and combine them into one address block (address variable).
A label file is fetched from the server on the page loading as well. The label is saved in the “label” variable. We used jQuery library to fetch the label xml, but any other AJAX toolkit library can be used as well.
function loadLabel() { // use jQuery API to load label $.get("Address.label", function(labelXml) { label = dymo.label.framework.openLabelXml(labelXml); }, "text"); }
The final step is printing itself. It is done from Print button’s onclick handler.
printButton.onclick = function() { try { if (!label) throw "Label is not loaded"; if (!labelSet) throw "Label data is not loaded"; label.print(printersSelect.value, '', labelSet); } catch (e) { alert(e.message || e); } };
For simplicity the sample throws an exception if the label or labelset is still being loaded. If everything is OK, the printing itself is as simple as calling the print() method. There should be three labels printed with the following content:
Sample #2 – Inventory List
The second sample is very similar to the first one. The only difference is the data itself. For this sample the data is an inventory list with two columns. The first column is a textual description of an inventory item. The second is the item’s “code”/”id”. Instead of combining different columns into one field (as in the first sample), these two column are used independently to provide data for two different objects on the label. The “ItemDescription” column provides data for the text object, while the “ItemCode” column provides data for the barcode object. So, each record in the labelset will have two “fields”, one for each object. This is done by calling setText() method twice.
function createLabelSet(json) { var labelSet = new dymo.label.framework.LabelSetBuilder(); for (var i = 0; i < json.feed.entry.length; ++i) { var entry = json.feed.entry[i]; var itemDescription = entry.gsx$itemdescription.$t; var itemCode = entry.gsx$itemcode.$t; var record = labelSet.addRecord(); record.setText("Description", itemDescription); record.setText("ItemCode", itemCode); } return labelSet; }
The full code is available here. Four labels should be printed:
Conclusion
We have looked at two different ways to print multiple labels. The second one that uses a “labelset” concept is a recommended way to print multiple labels. You could even use it to print a single label, in this case you will not have to change your code much if you need to print multiple labels in the future. The data for labels might come from different sources, .e.g. entered directly by user, read from a corporate database, or fetched from a third-party provider like Google Docs as in the blog’s samples.
In the next post we will look at various ways to format text data on a label, e.g. how to specify different font size, font style, etc on character-by-character basis.
Hi…
How can I preview a labelset?
Comment by DGF — June 13, 2011 @ 5:49 pm |
there is no direct support for that, but it is possible. Basically you will have to call label.setObjectText() for each object data in a record, and then call label.render() to get a preview of the label for the particular record. Do this for each record in a label set.
Some samples for calling render are available on http://labelwriter.com/software/dls/sdk/samples/js/VisitorManagement/VisitorManagement.html
Comment by Vladimir — June 14, 2011 @ 11:19 pm |
Thanks for your comment… I got one solution for it. This code is inside the “updatePreview” function.
var valores=labelSet.getRecords(); //get all the records we add to build the labelSet.
for (cont=1; cont<=valores.length;cont++)
{
setAddress(valores[cont-1]["Address"]); //Get the Address of each record and set the Address of the current label with this information..
pngData = label.render(); //label is defined just like in the preview example.
labelImage = document.getElementById('DymolabelImage'+cont); //we have several html div's for this .
labelImage.src = "data:image/png;base64," + pngData;
}
:D
Comment by DGF — June 17, 2011 @ 1:04 am |
Great! thanks for posting this.
Comment by Vladimir — June 22, 2011 @ 1:56 am |
Sorry about that…yes, WordPress did “eat” some of my last post. I think I was able to discern your advice and have tried it as well (as you will see).
If I pass “Line 1″ to setTextMarkup everything is fine. However, if I add a break tag “
()” to the end I receive the error message ‘documentElement is null or not an object.” If it doesn’t come through, the characters between the double quotes should be “lessthan, br, forwardslash, greaterthan”If this is the right code, I should be able to send “line1,break,line2,break,line3″ to the function and receive a label with three lines on it, correct?
Thanks again.
Eric
Comment by Eric — April 19, 2011 @ 3:45 am |
I did not quite understand your note about “()”. Here is a sample that should print two lines:
The output is like this:
Measurement 1:
passed
Comment by Vladimir — April 19, 2011 @ 4:38 am |
also, you can use ‘new line’ character ‘\n’:
Comment by Vladimir — April 19, 2011 @ 4:49 am |
Thank you Vladimir…that was a helpful start.
I am having trouble using the “” element in the setTextMarkup function call. When I pass “Address Line 1” to the function, everything prints as expected. However when I simply add “” to the text (e.g. “Address Line 1” I get the following error message “‘documentElement’ is null or not an object.”
I am currently working with a label layout with an Address Object named “ADDRESS” and I would like to pass all 3 or 4 lines of an address to it to be displayed on the label. I am assuming that I would need to utilize the tag in order to tell the Address Object where to begin a new line. Is this correct?
Thanks again for your help.
Comment by Eric — April 19, 2011 @ 12:18 am |
could you provide the full sample (seems like WordPress ‘ate’ some formatting)? I assume you are trying to insert line lines? to do that use
‘<br/> tag. Make sure it is ‘<br/> not just ‘<br>, so the markup string is well formed xml
Comment by Vladimir — April 19, 2011 @ 12:55 am |
I am curious if you have any documentation or samples that illustrate how to format the data on the label (e.g. bold, italics, etc…). You eluded to such features above but I have been unable to location any information on how to accomplish this.
My specific situation is that I am using the JavaScript library to print from a web application and utilize the LabelSet feature to print multiple copies if reqeusted. Therefore, I am using the labelset.addrecord.setText method to get the text on the label. I have seen in the JS docs that there is also a setTextMarkup method but I am unclear on how to utilize this method.
Please advise and I apologize if the information has been here and I just haven’t found it.
Comment by Eric — April 16, 2011 @ 11:23 pm |
Hi Eric,
Yes, setTextMarkup() has to be used. Unfortunately there are no samples and the documentation is very limited.
Anyway, the markup string passed to the function should contain a xml string according to the schema. The allowed tags are simple html tags for text formatting, e.g. ‘<b>’ to make text bold, ‘<i>’ for italic, etc. To specify font name and size use ‘font’ tag with ‘family’ and ‘size’ attributes. E.g. using the following markup text:
"<font family=’Courier New’ size=’36′>6×7=<b>42</b></font>"
the output will look like
Comment by Vladimir — April 17, 2011 @ 3:55 am |
Thank you for helping an old functional programmer :-)
Comment by Bill Hodges — February 17, 2011 @ 2:57 am |
anytime :)
Comment by Vladimir — February 17, 2011 @ 12:47 pm |
Does this do it?
var labels = document.getElementById(‘labels’);
printParamsXml = createLabelWriterPrintParamsXml(params.copies = labels.value);
label.print(printerName,printParamsXml);
Comment by Bill Hodges — February 17, 2011 @ 2:38 am |
no
var labels = document.getElementById(‘labels’);
printParamsXml = dymo.label.framework.createLabelWriterPrintParamsXml({copies: labels.value});
label.print(printerName,printParamsXml);
Comment by Vladimir — February 17, 2011 @ 2:45 am |
I am using SDK 8.2.3 V1.0. I wish to programmatically set the number of copies.
I defined the params as:
var printParamsXml = ‘\
\
2\
‘;
I get the desired number of labels with:
var labels = document.getElementById(‘labels’)
I have been unable to “discover” how to set the value of “Copies” at run time.
Any ideas? suggestions?
Thanks,
Bill
Comment by Bill Hodges — February 17, 2011 @ 1:55 am |
use createLabelWriterPrintParamsXml() function
/** Creates an xml stream suatable to pass to printLabel() function as printParamsXml parameter
// Created printing parameters are for printing on LabelWriter printers
// Parameters:
// – params – an JavaScript object with following properties (not all properties have to be defined, if a property is not defined a default value will be used)
// params.copies – number of copies to print
// params.jobTitle – print job title/description
// params.flowDirection – prints label content as left-to-right or right-to-left use FlowDirection enum to specify values
// params.printQuality – printing quality, one of ‘Text’, ‘BarcodeAndGraphics’, or ‘Auto’
// params.twinTurboRoll – the roll to print on if the printer is TwinTurbo. One of ‘Left”, ‘Right’, or ‘Auto’
*/
dymo.label.framework.createLabelWriterPrintParamsXml = function(params)
Then pass params xml to printLabel function, like
dymo.label.framework.printLabel(printerName, printParamsXml, labelXml)
Comment by Vladimir — February 17, 2011 @ 1:59 am |
Greetings is it possible to use the dymo labelwriter with silverlight?
Comment by wijnand — January 27, 2011 @ 5:55 am |
yes, it is possible, and there are several ways to archive it:
Comment by Vladimir — January 27, 2011 @ 7:36 am |
Is there a way to use LabelSets with an applescript and from a pc command line
Comment by Jon Marecki — January 6, 2011 @ 6:33 am |
LabelSet API is not available from AppleScript. On Windows, the LabelSets are supported as a part of DYMO Label Framework API. There is no sample yet, but the code would be like this:
void PrintMultipleLabelsWithLabelSet() { // load label layout ILabel label = Label.Open("MyTextLabel.label"); // create a label set LabelSetBuilder labelSetBuilder = new LabelSetBuilder(); // populate label set with data for three labels // the code assumes that the label contains an object with reference name set to "TEXT" for (int i = 1; i <= 3; ++i) labelSetBuilder.AddRecord().AddText("TEXT", string.Format("label {0}", i)); // get a reference to first connected printer ILabelWriterPrinter printer = Framework.GetLabelWriterPrinters().First(p => p.IsConnected) as ILabelWriterPrinter; // print three labels with default printing parameters label.Print(printer, null, labelSetBuilder.Xml); }see DymoLabelFramework.chm from SDK installer for the LabelSetBuilder class reference
Comment by Vladimir — January 6, 2011 @ 9:44 am |
PS: framework rocks btw, this is so much nicer than the old way
Comment by Alex Lusco — August 7, 2010 @ 1:27 pm |
One thing I found interesting and stumped me for a bit before I debugged through the framework code: when using a labelset if you do
var record = labelSet.addRecord();
record.setText(“NAME”,”Alex”);
record.setText(“PRICE”,5); // this causes a crash
There is an issue, it bugs out at line 1769 of the latest hosted version. Its where you use objValue.indexOf. Obviously the issue here was me being an idiot and setting the price field to a 5 and not “5″, but it is a mistake you might consider catching in the framework and converting to string so that doesn’t fail.
Alex
Comment by Alex Lusco — August 7, 2010 @ 1:26 pm |
I should be clearer, it only errors when you actually go to print the thing and it converts the labelset to xml, also is there any place to help and post bug reports other than the developers blog? or is this fine?
Comment by Alex Lusco — August 7, 2010 @ 1:31 pm |