### JSZPL Size Property Usage Examples Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md Provides examples of how to use the Size and SizeType properties in JSZPL for defining element dimensions. It shows both explicit SizeType instantiation and implicit absolute value assignment. ```javascript grid.width = new SizeType(250, SizeType.Absolute); grid.columns.push(new SizeType(1, SizeType.Relative)); // Alternative absolute value assignments: grid.width = 250; grid.width = new Size(250); grid.width = new Size(250, SizeType.Absolute); ``` -------------------------------- ### Create and Configure a Label Element Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md This JavaScript example shows how to instantiate a Label object, set its dimensions, print density, and padding. It also demonstrates adding a Text element as content to the label and generating the corresponding ZPL code. ```javascript const label = new Label(); label.printDensity = new PrintDensity(PrintDensityName['8dpmm']); label.width = 100; label.height = 50; label.padding = new Spacing(10); const text = new Text(); label.content.push(text); text.fontFamily = new FontFamily(FontFamilyName.D); text.text = 'Hello World!'; const zpl = label.generateZPL(); //^XA //^FO10,10^AD,N,, //^FB780,1,0,L,0 //^FDHello World!^FS //^XZ ``` -------------------------------- ### JSZPL Browser Integration Example Source: https://context7.com/danieleeuwner/jszpl/llms.txt Provides an HTML structure demonstrating how to use JSZPL directly in a web browser. It includes a button to generate ZPL code for a label with text and a QR code, displaying the output in a textarea. Requires the 'jszpl.bundle.js' script. ```html ``` -------------------------------- ### Initialize and Configure Label in Browser JSZPL Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md This example shows how to initialize a JSZPL Label object in a browser environment, setting its print density, dimensions, and padding. It then adds a text element and generates the corresponding ZPL code. ```html ``` -------------------------------- ### Create a Circle Element in JavaScript Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md Illustrates the creation of a Circle object, setting its fill property and dimensions to draw a filled circle. The example includes the generated ZPL code. ```javascript const circle = new Circle(); label.content.push(circle); circle.fill = true; circle.width = 150; circle.height = 150; const zpl = label.generateZPL(); //^XA //^FO10,10^GC150,150,B^FS //^XZ ``` -------------------------------- ### Create Line Elements in JavaScript Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md Shows how to create two Line objects with different starting and ending points and thickness, add them to a label, and generate the corresponding ZPL code for drawing lines. ```javascript const line1 = new Line(); label.content.push(line1); line1.x1 = 50; line1.y1 = 50; line1.x2 = 150; line1.y2 = 150; line1.thickness = 5; const line2 = new Line(); label.content.push(line2); line2.x1 = 50; line2.y1 = 150; line2.x2 = 150; line2.y2 = 50; line2.thickness = 5; const zpl = label.generateZPL(); //^XA //^FO50,50^GD100,100,5,B,L^FS //^FO50,50^GD100,100,5,B,R^FS //^XZ ``` -------------------------------- ### JSZPL PrintDensity Property Usage Example Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md Demonstrates how to set the print density for a JSZPL Label using the PrintDensity object and the PrintDensityName enum. ```javascript const label = new Label(); label.printDensity = new PrintDensity(PrintDensityName['8dpmm']); ``` -------------------------------- ### Configure Text Element for Label Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md This JavaScript snippet illustrates how to create a Text element, assign a font family, and set the text content. It's designed to be added to a Label's content array. The example also shows how to generate the ZPL for the configured text. ```javascript const text = new Text(); label.content.push(text); text.fontFamily = new FontFamily(FontFamilyName.D); text.text = 'Hello World!'; const zpl = label.generateZPL(); //^XA //^FB780,1,0,L,0 //^FDHello World!^FS //^XZ ``` -------------------------------- ### Define Alignment Values for Text Elements (JavaScript) Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md Defines an enum for alignment values (Start, Center, End) used for horizontal and vertical alignment of text within its parent container. ```javascript const AlignmentValue = { Start: 'Start', Center: 'Center', End: 'End', } const text = new Text(); text.verticalAlignment = new Alignment(AlignmentValue.Center); text.horizontalAlignment = new Alignment(AlignmentValue.Center); ``` -------------------------------- ### Display Images using Graphic Component in jszpl Source: https://context7.com/danieleeuwner/jszpl/llms.txt Shows how to use the Graphic component to display images on labels. It includes examples for both Node.js (using pngjs) and browser environments, converting images to binary pixel data. Requires 'jszpl', 'pngjs' (for Node.js), and browser DOM APIs. ```javascript // Node.js example using pngjs const { Label, Graphic, GraphicData, PrintDensity, PrintDensityName, Spacing } = require('jszpl'); const PNG = require('pngjs').PNG; const fs = require('fs'); const label = new Label(); label.printDensity = new PrintDensity(PrintDensityName['8dpmm']); label.width = 100; label.height = 50; label.padding = new Spacing(10); // Read and process image const imageBuffer = fs.readFileSync('logo.png'); const imageData = PNG.sync.read(imageBuffer); const imageBits = []; let index = 0; for (let y = 0; y < imageData.height; y++) { for (let x = 0; x < imageData.width; x++) { const red = imageData.data[index++]; const green = imageData.data[index++]; const blue = imageData.data[index++]; const opacity = imageData.data[index++]; // Convert to black/white based on luminance let value = 0; if (opacity !== 0) { value = (((red + green + blue) / 3) < 180) ? 1 : 0; } imageBits.push(value); } } const graphic = new Graphic(); label.content.push(graphic); graphic.width = 200; // Display width (will resize image) graphic.height = 200; // Display height graphic.data = new GraphicData(imageData.width, imageData.height, imageBits); graphic.border = 2; // Optional border const zpl = label.generateZPL(); // Output: ^XA^FO...^GFA,bytecount,bytecount,widthBytes,hexdata^FS^XZ // Browser example const graphic2 = new Graphic(); const image = new Image(); image.onload = function() { const canvas = document.createElement('canvas'); canvas.width = image.width; canvas.height = image.height; const context = canvas.getContext('2d'); context.drawImage(image, 0, 0); const canvasData = context.getImageData(0, 0, canvas.width, canvas.height); const bits = []; let idx = 0; for (let y = 0; y < canvasData.height; y++) { for (let x = 0; x < canvasData.width; x++) { const r = canvasData.data[idx++]; const g = canvasData.data[idx++]; const b = canvasData.data[idx++]; const a = canvasData.data[idx++]; bits.push(a !== 0 && ((r + g + b) / 3) < 180 ? 1 : 0); } } graphic2.data = new GraphicData(image.width, image.height, bits); }; image.src = 'logo.png'; ``` -------------------------------- ### Configure and Generate ZPL Grid Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md This snippet demonstrates how to instantiate and configure a Grid object in jszpl. It shows setting column and row sizes, border thickness, and spacing. The generated ZPL code is then produced using the label.generateZPL() method. ```javascript const grid = new Grid(); label.content.push(grid); grid.columns.push(new Size(150, SizeType.Absolute)); grid.columns.push(new Size(1, SizeType.Relative)); grid.rows.push(new Size(150, SizeType.Absolute)); grid.rows.push(new Size(1, SizeType.Relative)); grid.border = 2; grid.columnSpacing = 2; grid.rowSpacing = 2; const zpl = label.generateZPL(); //^XA //^FO10,10^GB780,380,2,,0^FS //^FO14,14^GB152,152,2,,0^FS //^FO168,14^GB618,152,2,,0^FS //^FO14,168^GB152,218,2,,0^FS //^FO168,168^GB618,218,2,,0^FS //^XZ ``` -------------------------------- ### Configure Spacing for UI Elements (JavaScript) Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md Demonstrates how to create Spacing objects for margin and padding properties, supporting 0, 1, 2, or 4 parameters for left, top, right, and bottom values. ```javascript // 0 parameters // default values of 0 for all sides label.padding = new Spacing(); // 1 parameter // 10 for all sides label.padding = new Spacing(10); // 2 parameters // 10 for left and right, 20 for top and bottom label.padding = new Spacing(10, 20); // 4 parameters // 10 left, 20 top, 30 right, 40 bottom label.padding = new Spacing(10, 20, 30, 40); ``` -------------------------------- ### Control Size and Spacing with JSZPL Source: https://context7.com/danieleeuwner/jszpl/llms.txt Illustrates how to manage element dimensions and margins/padding using Size and Spacing classes. Supports absolute, relative, and fractional sizing for elements like Boxes and Grids. Requires the 'jszpl' library. ```javascript const { Label, Box, Grid, Size, SizeType, Spacing, PrintDensity, PrintDensityName } = require('jszpl'); const label = new Label(); label.printDensity = new PrintDensity(PrintDensityName['8dpmm']); label.width = 100; label.height = 50; // Spacing examples label.padding = new Spacing(10); // 10 on all sides label.padding = new Spacing(10, 20); // 10 left/right, 20 top/bottom label.padding = new Spacing(10, 20, 30, 40); // left, top, right, bottom const box = new Box(); label.content.push(box); box.margin = new Spacing(5); // Space around element // Size with SizeType examples const grid = new Grid(); label.content.push(grid); // Absolute: exact pixel/dot value grid.columns.push(new Size(150, SizeType.Absolute)); // Same as: grid.columns.push(150); // Relative: proportional to siblings grid.columns.push(new Size(1, SizeType.Relative)); // Takes 1 part grid.columns.push(new Size(2, SizeType.Relative)); // Takes 2 parts (twice as wide) // Fraction: fraction of parent (value < 1) grid.columns.push(new Size(0.5, SizeType.Fraction)); // 50% of parent width const zpl = label.generateZPL(); ``` -------------------------------- ### Create a Box Element in JavaScript Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md Demonstrates how to instantiate a Box object, set its dimensions and fill properties, and add it to a label's content. The generated ZPL code is then shown. ```javascript const box = new Box(); label.content.push(box); box.fill = true; box.width = 150; box.height = 150; const zpl = label.generateZPL(); //^XA //^FO0,0^GB150,150,150,,0^FS //^XZ ``` -------------------------------- ### Initialize and Configure Label in Node.js JSZPL Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md This snippet illustrates setting up a JSZPL Label in a Node.js environment. It configures print density, size, and padding, then adds a text element and generates the ZPL output. ```javascript const { Label, PrintDensity, PrintDensityName, Spacing, Text, FontFamily, FontFamilyName } = require('jszpl'); const label = new Label(); label.printDensity = new PrintDensity(PrintDensityName['8dpmm']); label.width = 100; label.height = 50; label.padding = new Spacing(10); const text = new Text(); label.content.push(text); text.fontFamily = new FontFamily(FontFamilyName.D); text.text = 'Hello World!'; const zpl = label.generateZPL(); ``` -------------------------------- ### Initialize ZPL Designer and Label with JSZPL Source: https://github.com/danieleeuwner/jszpl/blob/development/demo/index.html This snippet demonstrates the initialization of the ZPLDesigner and the creation of a Label object. It sets essential label properties like print density, padding, width, and height. The code requires the ZPLDesigner and Label classes from the JSZPL library. ```javascript var designer = new ZPLDesigner(zplDesigner); designer.initialize(); var label = new Label(); label.printDensity = new PrintDensity(PrintDensityName['8dpmm']); label.padding = new Spacing(15); label.width = 100; label.height = 50; ``` -------------------------------- ### Create and Generate a Basic Label with Text (JavaScript) Source: https://context7.com/danieleeuwner/jszpl/llms.txt Demonstrates the fundamental process of creating a label, setting its dimensions and print density, adding a text element, and generating the ZPL II output. Requires the 'jszpl' library. ```javascript const { Label, PrintDensity, PrintDensityName, Spacing, Text, FontFamily, FontFamilyName } = require('jszpl'); // Create a 100mm x 50mm label at 8 dpmm (304 DPI) const label = new Label(); label.printDensity = new PrintDensity(PrintDensityName['8dpmm']); label.width = 100; // millimeters label.height = 50; // millimeters label.padding = new Spacing(10); // 10 dots padding on all sides // Add content to the label const text = new Text(); label.content.push(text); text.fontFamily = new FontFamily(FontFamilyName.D); text.text = 'Hello World!'; // Generate ZPL output const zpl = label.generateZPL(); // Output: // ^XA // ^FO10,10^AD,N,, // ^FB780,1,0,L,0 // ^FDHello World!^FS // ^XZ ``` -------------------------------- ### Create and Configure Grid Layout in jszpl Source: https://context7.com/danieleeuwner/jszpl/llms.txt Demonstrates creating a Grid component with specified rows, columns, borders, and spacing. It also shows how to position Text elements within the grid cells. Requires the 'jszpl' library. ```javascript const { Label, Grid, Text, Size, SizeType, FontFamily, FontFamilyName, PrintDensity, PrintDensityName, Spacing } = require('jszpl'); const label = new Label(); label.printDensity = new PrintDensity(PrintDensityName['8dpmm']); label.width = 100; label.height = 50; label.padding = new Spacing(10); const grid = new Grid(); label.content.push(grid); // Define 2 columns: first 150px absolute, second takes remaining space grid.columns.push(new Size(150, SizeType.Absolute)); grid.columns.push(new Size(1, SizeType.Relative)); // Define 2 rows: first 150px absolute, second takes remaining space grid.rows.push(new Size(150, SizeType.Absolute)); grid.rows.push(new Size(1, SizeType.Relative)); grid.border = 2; grid.columnSpacing = 2; grid.rowSpacing = 2; grid.padding = new Spacing(10); // Add text to specific cells const text00 = new Text(); grid.content.push(text00); text00.text = 'Cell (0,0)'; text00.fontFamily = new FontFamily(FontFamilyName.D); // Default grid position is (0, 0) const text10 = new Text(); grid.content.push(text10); text10.text = 'Cell (1,0)'; text10.fontFamily = new FontFamily(FontFamilyName.D); text10.grid.column = 1; // Second column const text01 = new Text(); grid.content.push(text01); text01.text = 'Cell (0,1)'; text01.fontFamily = new FontFamily(FontFamilyName.D); text01.grid.row = 1; // Second row const text11 = new Text(); grid.content.push(text11); text11.text = 'Cell (1,1)'; text11.fontFamily = new FontFamily(FontFamilyName.D); text11.grid.column = 1; text11.grid.row = 1; const zpl = label.generateZPL(); // Generates ZPL with bordered grid cells and positioned text ``` -------------------------------- ### Inject Raw ZPL Commands with JSZPL Source: https://context7.com/danieleeuwner/jszpl/llms.txt Shows how to use the Raw component to insert custom ZPL commands directly into the label output. This is useful for features not explicitly supported by JSZPL components. Requires the 'jszpl' library. ```javascript const { Label, Raw, PrintDensity, PrintDensityName, Spacing } = require('jszpl'); const label = new Label(); label.printDensity = new PrintDensity(PrintDensityName['8dpmm']); label.width = 100; label.height = 50; label.padding = new Spacing(10); // Inject raw ZPL for custom effects const raw = new Raw(); label.content.push(raw); raw.data = ` ^FO50,50^GB100,100,100^FS ^FO75,75^FR^GB100,100,100^FS ^FO93,93^GB40,40,40^FS `; // Combine with standard components const raw2 = new Raw(); label.content.push(raw2); raw2.data = '^FO200,50^A0N,50,50^FDRaw ZPL^FS'; const zpl = label.generateZPL(); // Output: // ^XA // ^FO50,50^GB100,100,100^FS // ^FO75,75^FR^GB100,100,100^FS // ^FO93,93^GB40,40,40^FS // ^FO200,50^A0N,50,50^FDRaw ZPL^FS // ^XZ ``` -------------------------------- ### Position Elements within a Grid (JavaScript) Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md Illustrates how to use GridPosition to place elements in specific columns and rows within a Grid container. It also shows how to define grid dimensions and spacing. ```javascript const grid = new Grid(); label.content.push(grid); grid.columns.push(new Size(1, SizeType.Relative)); grid.columns.push(new Size(1, SizeType.Relative)); grid.rows.push(new Size(1, SizeType.Relative)); grid.rows.push(new Size(1, SizeType.Relative)); grid.columnSpacing = 2; grid.rowSpacing = 2; grid.border = 2; grid.padding = new Spacing(10); const text00 = new Text(); grid.content.push(text00); text00.text = '(0, 0)'; text00.fontFamily = new FontFamily(FontFamilyName.D); const text10 = new Text(); grid.content.push(text10); text10.text = '(1, 0)'; text10.fontFamily = new FontFamily(FontFamilyName.D); text10.grid.column = 1; const text01 = new Text(); grid.content.push(text01); text01.text = '(0, 1)'; text01.fontFamily = new FontFamily(FontFamilyName.D); text01.grid.row = 1; const text11 = new Text(); grid.content.push(text11); text11.text = '(1, 1)'; text11.fontFamily = new FontFamily(FontFamilyName.D); text11.grid.column = 1; text11.grid.row = 1; ``` -------------------------------- ### Raw ZPL Data Component Usage in jszpl Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md Illustrates the usage of the Raw component to embed arbitrary ZPL commands directly into a label. It shows how to assign raw ZPL data and generate the final ZPL output. ```javascript const raw = new Raw(); label.content.push(raw); raw.data = " ^FO50,50^GB100,100,100^FS ^FO75,75^FR^GB100,100,100^FS ^FO93,93^GB40,40,40^FS "; const zpl = label.generateZpl(); //^XA //^FO50,50^GB100,100,100^FS //^FO75,75^FR^GB100,100,100^FS //^FO93,93^GB40,40,40^FS //^XZ ``` -------------------------------- ### Create and Generate Boxes with Fill, Border, and Corners (JavaScript) Source: https://context7.com/danieleeuwner/jszpl/llms.txt Illustrates the creation of different types of boxes on a label: a filled box, a bordered box with rounded corners, and a box used as a container for text. Requires the 'jszpl' library. ```javascript const { Label, Box, Text, FontFamily, FontFamilyName, PrintDensity, PrintDensityName, Spacing } = require('jszpl'); const label = new Label(); label.printDensity = new PrintDensity(PrintDensityName['8dpmm']); label.width = 100; label.height = 50; label.padding = new Spacing(10); // Filled box const filledBox = new Box(); label.content.push(filledBox); filledBox.fill = true; filledBox.width = 150; filledBox.height = 150; // Bordered box with rounded corners const borderedBox = new Box(); label.content.push(borderedBox); borderedBox.border = 3; borderedBox.width = 200; borderedBox.height = 100; borderedBox.left = 200; borderedBox.cornerRadius = 10; // Box as container with text inside const containerBox = new Box(); label.content.push(containerBox); containerBox.border = 2; containerBox.width = 300; containerBox.height = 80; containerBox.left = 0; containerBox.top = 200; containerBox.padding = new Spacing(5); const textInBox = new Text(); containerBox.content.push(textInBox); textInBox.text = 'Text inside box'; textInBox.fontFamily = new FontFamily(FontFamilyName.D); const zpl = label.generateZPL(); // Output: // ^XA // ^FO10,10^GB150,150,150,,0^FS // ^FO210,10^GB200,100,3,,1^FS // ^FO10,210^GB300,80,2,,0^FS // ^FO15,215^AD,N,, // ^FB290,1000,0,L,0 // ^FDText inside box^FS // ^XZ ``` -------------------------------- ### Configure and Generate Centered Text on a Label (JavaScript) Source: https://context7.com/danieleeuwner/jszpl/llms.txt Shows how to create a label and add text with specific font, vertical and horizontal alignment, and line spacing. It also illustrates overriding default character dimensions. Requires the 'jszpl' library. ```javascript const { Label, Text, FontFamily, FontFamilyName, Alignment, AlignmentValue, PrintDensity, PrintDensityName, Spacing } = require('jszpl'); const label = new Label(); label.printDensity = new PrintDensity(PrintDensityName['8dpmm']); label.width = 100; label.height = 50; label.padding = new Spacing(10); const text = new Text(); label.content.push(text); text.text = 'Centered Text'; text.fontFamily = new FontFamily(FontFamilyName.D); text.verticalAlignment = new Alignment(AlignmentValue.Center); text.horizontalAlignment = new Alignment(AlignmentValue.Center); text.lineSpacing = 5; // Vertical space between lines // Optional: Override character dimensions text.characterWidth = 30; text.characterHeight = 40; const zpl = label.generateZPL(); // Output: // ^XA // ^FO10,205^AD,40,30, // ^FB780,1000,0,C,0 // ^FDCentered Text\&^FS // ^XZ ``` -------------------------------- ### Create and Configure Text Element in JSZPL Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md This snippet demonstrates how to create a Text element, set its content, font family, and alignment within a JSZPL label. It shows the programmatic approach to defining text properties before generating ZPL code. ```javascript const text = new Text(); label.content.push(text); text.text = 'Hello World!'; text.fontFamily = new FontFamily(FontFamilyName.D); text.verticalAlignment = new Alignment(AlignmentValue.Center); text.horizontalAlignment = new Alignment(AlignmentValue.Center); const zpl = label.generateZPL(); ``` -------------------------------- ### SerialNumber Component Usage in jszpl Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md Demonstrates how to instantiate and configure the SerialNumber component for generating sequential labels in ZPL. It shows setting font family, prepend text, and generating the ZPL output. ```javascript const serialNum = new SerialNumber(); label.content.push(serialNum); serialNum.fontFamily = new FontFamily(FontFamilyName.D); serialNum.prependText = 'Label '; const zpl = label.generateZPL(); // ^XA // ^FO10,10^AD,,, // ^FB780,1,0,L,0 // ^SNLabel 1,1,N^FS // ^XZ ``` -------------------------------- ### Update and Initialize ZPL Designer View with JSZPL Source: https://github.com/danieleeuwner/jszpl/blob/development/demo/index.html This snippet focuses on updating the ZPLDesigner with the created label, resetting the canvas position, setting the focus to the label, and initializing the designer's view. It assumes the designer and label objects have already been configured. ```javascript designer.label = label; designer.update(); designer.resetCanvasPosition(); designer.focus = label; designer.initializeView(); ``` -------------------------------- ### Add Grid and Text Content to ZPL Label using JSZPL Source: https://github.com/danieleeuwner/jszpl/blob/development/demo/index.html This code segment shows how to add a Grid element with a border and padding to a ZPL label, and then add a Text element with a specific font and content to the grid. This functionality relies on the Grid, Spacing, Text, and FontFamily classes from the JSZPL library. ```javascript var grid = new Grid(); grid.border = 2; grid.padding = new Spacing(15); label.content.push(grid); var title = new Text(); title.fontFamily = new FontFamily(FontFamilyName.F); title.text = 'JSZPL!'; grid.content.push(title); ``` -------------------------------- ### Add Child Elements to Container Elements (JavaScript) Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md Demonstrates how to add child elements to container elements like Label, Box, Circle, and Grid. Child elements are positioned relative to their parent. ```javascript const label = new Label(); const text = new Text(); label.content.push(text); ``` -------------------------------- ### Web Browser Image Processing to Black and White Array Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md This JavaScript code snippet demonstrates how to process an image in a web browser, converting it into a black and white array representation (1s and 0s). It utilizes the HTML Canvas API to draw the image and extract pixel data. The conversion threshold is set at 180 for pixel intensity. ```javascript const graphic = new Graphic(); const image = new Image(); image.onload = function() { const canvas = document.createElement('canvas'); canvas.width = image.width; canvas.height = image.height; const context = canvas.getContext('2d'); context.drawImage(image, 0, 0); const imageData = context.getImageData(0, 0, canvas.width, canvas.height); let index = 0; const imageBits = []; for (let y = 0; y < imageData.height; y++) { for (let x = 0; x < imageData.width; x++) { const red = imageData.data[index++]; const green = imageData.data[index++]; const blue = imageData.data[index++]; const opacity = imageData.data[index++]; let value = 0; if (opacity != 0) { value = (((red + green + blue) / 3) < 180) ? 1 : 0; } imageBits.push(value); } } graphic.data = new GraphicData(image.width, image.height, imageBits)); }; image.src = data; ``` -------------------------------- ### Generate Serial Numbers with JSZPL Source: https://context7.com/danieleeuwner/jszpl/llms.txt Demonstrates how to create incrementing serial numbers for labels using the SerialNumber component. It supports custom formatting, leading zeros, and incremental values. Requires the 'jszpl' library. ```javascript const { Label, SerialNumber, FontFamily, FontFamilyName, Alignment, AlignmentValue, PrintDensity, PrintDensityName, Spacing } = require('jszpl'); const label = new Label(); label.printDensity = new PrintDensity(PrintDensityName['8dpmm']); label.width = 100; label.height = 50; label.padding = new Spacing(10); const serialNum = new SerialNumber(); label.content.push(serialNum); serialNum.fontFamily = new FontFamily(FontFamilyName.D); serialNum.format = 'Label 0001'; // Starting format with leading zeros serialNum.increment = 1; // Increment by 1 for each label serialNum.printLeadingZeroes = true; // Preserve leading zeros serialNum.horizontalAlignment = new Alignment(AlignmentValue.Center); const zpl = label.generateZPL(); // Output: // ^XA // ^FO10,10^AD,,, // ^FB780,1000,0,C,0 // ^SNLabel 0001\&,1,Y^FS // ^XZ // When printing multiple labels: Label 0001, Label 0002, Label 0003... ``` -------------------------------- ### Define Font Families for Text Elements (JavaScript) Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md Defines an enum for font family names (A-F) used by the Text element. Fonts G-V are not implemented and will cause errors. ```javascript const FontFamilyName = { A : 'A', B : 'B', D : 'D', E : 'E', F : 'F', //G : 'G', //H : 'H', //P : 'P', //Q : 'Q', //U : 'U', //V : 'V', } const text = new Text(); text.fontFamily = new FontFamily(FontFamilyName.D); ``` -------------------------------- ### Draw Lines with jszpl Source: https://context7.com/danieleeuwner/jszpl/llms.txt The Line component in jszpl draws diagonal lines between two specified points. Line thickness is configurable. It can be used to create simple lines or patterns like an 'X'. ```javascript const { Label, Line, PrintDensity, PrintDensityName, Spacing } = require('jszpl'); const label = new Label(); label.printDensity = new PrintDensity(PrintDensityName['8dpmm']); label.width = 100; label.height = 50; label.padding = new Spacing(10); // Diagonal line (top-left to bottom-right) const line1 = new Line(); label.content.push(line1); line1.x1 = 50; line1.y1 = 50; line1.x2 = 150; line1.y2 = 150; line1.thickness = 5; // Diagonal line (bottom-left to top-right) - creates X pattern const line2 = new Line(); label.content.push(line2); line2.x1 = 50; line2.y1 = 150; line2.x2 = 150; line2.y2 = 50; line2.thickness = 5; const zpl = label.generateZPL(); // Output: // ^XA // ^FO60,60^GD100,100,5,B,L^FS // ^FO60,60^GD100,100,5,B,R^FS // ^XZ ``` -------------------------------- ### Define Barcode Types for Barcode Elements (JavaScript) Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md Defines an enum for various barcode types supported by the Barcode element. Usage involves instantiating BarcodeType with a name from the enum. ```javascript const BarcodeTypeName = { Code11: 'Code11', Interleaved25: 'Interleaved25', Code39: 'Code39', PlanetCode: 'PlanetCode', PDF417: 'PDF417', EAN8: 'EAN8', UPCE: 'UPCE', Code93: 'Code93', Code128: 'Code128', EAN13: 'EAN13', Industrial25: 'Industrial25', Standard25: 'Standard25', ANSICodabar: 'ANSICodabar', Logmars: 'Logmars', MSI: 'MSI', Plessey: 'Plessey', QRCode: 'QRCode', DataMatrix: 'DataMatrix', PostNet: 'PostNet' } const barcode = new Barcode(); barcode.type = new BarcodeType(BarcodeTypeName.Code11); ``` -------------------------------- ### Generate Barcodes with jszpl Source: https://context7.com/danieleeuwner/jszpl/llms.txt The Barcode component in jszpl supports various barcode types including Code128, QR codes, Data Matrix, EAN, and UPC. It allows configuration of data, dimensions, and interpretation line display. ```javascript const { Label, Barcode, BarcodeType, BarcodeTypeName, PrintDensity, PrintDensityName, Spacing } = require('jszpl'); const label = new Label(); label.printDensity = new PrintDensity(PrintDensityName['8dpmm']); label.width = 100; label.height = 80; label.padding = new Spacing(10); // Code128 barcode const barcode128 = new Barcode(); label.content.push(barcode128); barcode128.type = new BarcodeType(BarcodeTypeName.Code128); barcode128.data = 'ABC123456'; barcode128.height = 80; barcode128.width = 300; barcode128.subset = 'B'; // Use subset B for alphanumeric barcode128.interpretationLine = true; // Show human-readable text // QR Code const qrCode = new Barcode(); label.content.push(qrCode); qrCode.type = new BarcodeType(BarcodeTypeName.QRCode); qrCode.data = 'https://example.com'; qrCode.height = 150; qrCode.width = 150; qrCode.left = 350; // Data Matrix const dataMatrix = new Barcode(); label.content.push(dataMatrix); dataMatrix.type = new BarcodeType(BarcodeTypeName.DataMatrix); dataMatrix.data = 'DataMatrix123'; dataMatrix.height = 100; dataMatrix.width = 100; dataMatrix.left = 550; // EAN-13 barcode const ean13 = new Barcode(); label.content.push(ean13); ean13.type = new BarcodeType(BarcodeTypeName.EAN13); ean13.data = '5901234123457'; ean13.height = 100; ean13.top = 200; const zpl = label.generateZPL(); // Output includes ^BCN for Code128, ^BQ for QR, ^BXN for DataMatrix, ^BEN for EAN13 ``` -------------------------------- ### Render Circles and Ellipses with jszpl Source: https://context7.com/danieleeuwner/jszpl/llms.txt The Circle component in jszpl renders circular or elliptical shapes. By adjusting width and height, ellipses can be created. It supports filled shapes and bordered hollow shapes. ```javascript const { Label, Circle, PrintDensity, PrintDensityName, Spacing } = require('jszpl'); const label = new Label(); label.printDensity = new PrintDensity(PrintDensityName['8dpmm']); label.width = 100; label.height = 50; label.padding = new Spacing(10); // Filled circle const filledCircle = new Circle(); label.content.push(filledCircle); filledCircle.fill = true; filledCircle.width = 150; filledCircle.height = 150; // Bordered circle (hollow) const hollowCircle = new Circle(); label.content.push(hollowCircle); hollowCircle.border = 5; hollowCircle.width = 100; hollowCircle.height = 100; hollowCircle.left = 200; // Ellipse (different width/height) const ellipse = new Circle(); label.content.push(ellipse); ellipse.fill = true; ellipse.width = 200; ellipse.height = 100; ellipse.left = 350; const zpl = label.generateZPL(); // Output: // ^XA // ^FO10,10^GC150,150,B^FS // ^FO210,10^GC100,5,B^FS // ^FO360,10^GE200,100,100,B^FS // ^XZ ``` -------------------------------- ### Define GraphicData Class for Image Data Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md The GraphicData class is used to store image binary data along with its width and height. It serves as a data structure for image information within the library. ```javascript class GraphicData { constructor(width, height, data) { this.data = data || []; this.width = width || 0; this.height = height || 0; } } ``` -------------------------------- ### JSZPL SizeType Enum Definition Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md Defines the SizeType enum used in JSZPL for specifying how element sizes are interpreted. It includes Absolute, Fraction, and Relative types for flexible dimensioning. ```javascript const SizeType = { Absolute : 0, // exact size Fraction : 1, // size as fraction of parent Relative : 2, // size together with siblings as part of parent } ``` -------------------------------- ### JSZPL PrintDensityName Enum Definition Source: https://github.com/danieleeuwner/jszpl/blob/development/README.md Defines the PrintDensityName enum for setting the print density of a JSZPL Label. It lists common dot per millimeter (dpmm) values supported by Zebra printers. ```javascript const PrintDensityName = { '6dpmm' : 6, '8dpmm' : 8, '12dpmm' : 12, '24dpmm' : 24, } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.