JavaScript Library Samples: Printers and Multiple Labels Printing

 DYMO Label Framework, SDK Samples  22 Responses »
Nov 172011
 

Here is one more sample demonstrates capabilities of DYMO Label JavaScript library. The correspondent JavaScript file is here.

Getting Printers

First, the sample shows how to retrieve a list of available DYMO printers. For each printer it shows all the available properties. To get the printer list use dymo.label.framework.getPrinters function. The function returns an array contains information regarding each printer. The sample calls getPrinters and then put all the information onto a table, see createPrintersTable() for details.

Note: There are helpful function to filter the result list to contain only LabelWriter or Tape printers; use dymo.label.framework.getLabelWriterPrinters or dymo.label.framework.getTapePrinters accordingly. This might be useful if your application is designed to print on die-cut labels or D1 tapes only.

Print Multiple Labels

Next, the sample shows how to print multiple labels at once, in one print job. The sample leverages the library’s LabelSet functionality do archive that. For each printer the sample creates one label set record represent data to be printed on one label. also the sample demonstrates how to apply different text styles to the print data. It uses a feature called text markup, the ability to apply formatting attributes/tags very similar to HTML ones.  

// create label set to print printers' data
var labelSetBuilder = new dymo.label.framework.LabelSetBuilder();
for (var i = 0; i < printers.length; i++)
{
    var printer = printers[i];

    // process each printer info as a separate label
    var record = labelSetBuilder.addRecord();

    // compose text data
    // use framework's text markup feature to set text formatting
    // because text markup is xml you can use any xml tools to compose it
    // here we will use simple text manipulations to avoid cross-browser compatibility.
    var info = "<font family='Courier New' size='14'>"; // default font
    info = info + "Printer: <b>" + printer.name + "n</b>"; 
    info = info + "PrinterType: " + printer.printerType;
    info = info + "n<font size='10'>is local: " + printer.isLocal;
    info = info + "nis online: " + printer.isConnected + "</font>";

    if (typeof printer.isTwinTurbo != "undefined")
    {
        if (printer.isTwinTurbo)
            info = info + "<i><u><br/>The printer is TwinTurbo!!!</u></i>";
        else
            info = info + "<font size='6'><br/>Oops, the printer is NOT TwinTurbo</font>";
    }

    if (typeof printer.isAutoCutSupported != "undefined")
    {
        if (printer.isAutoCutSupported)
            info = info + "<i><u><br/>The printer supports auto-cut!!!</u></i>";
        else
            info = info + "<font size='6'><br/>The printer does not supports auto-cut</font>";
    }

    info = info + "</font>";

    // when printing put info into object with name "Text"
    record.setTextMarkup("Text", info);
}

See print() function for a complete sample.

Note: Here is another blog post regarding using text markup. And one more regarding printing multiple labels.

DYMO Label Framework JavaScript Library: Advanced Text Formatting

 DYMO Label Framework, SDK Samples  17 Responses »
Oct 042011
 

There are two ways of providing dynamic text data to be printed on your labels. In both cases the text can be “styled”, so different parts of the text will use different fonts, sizes and/or styles.

The first way covers most use cases for text formatting needs, it is simple, and, of cause, has some limitations. The limitation is that it supports line-by-line formatting only. So, each line can have its own formatting, but all characters in the same line will use the same formatting. If this is OK for your application, then here are the steps needed to utilize this method. first, you have to design you label layout/template. The easiest way to design a label is by using DYMO Label software. While designing, type a sample data for a label object, and apply some formatting, on line by line basis, e.g. make the first line bold, save the file, and put it on your server. 

image

Those are manual steps, now we will need some JavaScript. Load the label by using openLabelXml. Now you can set your real data by using setLabelText or, if you need to print multiple labels, by using a LabelSet. You pass a plain string without any formatting to the setLabelText method, and the library will apply line-by-line formatting for you based on the sample data in the label file. For example, if you call setLabelText(‘Will E. CoyotenACME Birdingn2200 Desert Meadows WaynLas Vegas, NV 89122’), the output will be like that:

image

The second way to format the text is by using so called “Text Markup” feature. It is some what more complex than the first formatting method, but in return you have the full control over the font attributes and can do character-by-character formatting. First, you design your label as described above, but you don’t have to specify any sample data. Next you have to construct a “text markup”.  A text markup is an xml string contains tags controlling font attributes, plus plain text data. The Supported tags are ones similar to HTML tags: <font>, <b>, <i>, <u>, <s>, <br>. Full xml-schema definition is available here. After you have the markup text, you can print it by using a LabelSet and setTextMarkup method.

var labelSet = new dymo.label.framework.LabelSetBuilder();
var record = labelSet.addRecord();

var textMarkup = '...';
record.setTextMarkup('Text', textMarkup);
label.print('DYMO LabelWriter 450', null, labelSet.toString());

Here is an example demonstrates different formatting capabilities: http://labelwriter.com/software/dls/sdk/samples/js/TextMarkup/TextMarkup.html, and the corresponded JavaScript http://labelwriter.com/software/dls/sdk/samples/js/TextMarkup/TextMarkup.js. Type anything into the “Text to Print” text box and click on any button below. The output should correspond to the button’s caption. The corresponded text markup will be copied to the “Text Markup” text box, so you can examine it without going into JavaScript debugger. Also, you can just type any text markup in the box and print it by clicking on “Print text markup” button. Just make sure it is a correct xml and correct markup. If it is not, a runtime error/exception is thrown.