Some progress with text field

README.md

@@ -37,4 +37,9 @@ This layer contains code to interact with printers
 
 ## Documentation of supported languages
 
-- [TSPL](documentations/TSPL.pdf)
+- [TSPL](documentations/TSPL.pdf)
+
+### Usefull units:
+
+- 1 pt = 1/72 inch
+- 1 dot = 1 / dpi

package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@types/w3c-web-usb": "^1.0.10",
+    "clean-html": "^2.0.1",
     "image-pixels": "^2.2.2",
     "usb": "^2.11.0"
   }

src/commands/Command.ts

@@ -10,6 +10,10 @@ export default abstract class Command {
      */
     abstract get commandString(): string
 
+    print(fn: (command: string) => void) {
+        fn(this.commandString)
+    }
+
     /**
      * Write the command data to a USB device
      * @param device Device to write to
@@ -40,7 +44,7 @@ export default abstract class Command {
      * @param data Byte array to send
      * @param device Device to write to
      */
-    protected async writeBytes(data: Uint8Array, device: UsbDevice): Promise<void> {
+    protected async writeBytes(data: Uint8Array|ArrayBuffer, device: UsbDevice): Promise<void> {
         await device.writeData(data)
     }
 

src/commands/CommandGenerator.ts

@@ -1,4 +1,4 @@
-import { UnitSystem } from "..";
+import { Point, UnitSystem } from "./index"
 import Command from "./Command";
 import CommandGroup from "./CommandGroup";
 import { LabelDirection } from "./tspl";
@@ -9,8 +9,13 @@ import { LabelDirection } from "./tspl";
 export default interface CommandGenerator<T extends Command> {
     commandGroup: (commands: T[]) => CommandGroup<T>
     print: (sets: number, copiesPerSet: number) => T
-    text: (content: string, x: number, y: number) => T
-
+    text: (content: string, x: number, y: number, font: string|"default", size: number) => T
+    upload: (name: string, data: ArrayBuffer|Uint8Array) => T
+    line: (start: Point, end: Point, thickness: number) => T
+    /**
+     * Should instruct the printer to display the image of the label on its screen instead of printing it
+     */
+    display: () => T
     /**
      * This should generate the needed commands to set up a label before printing
      */

src/commands/CommandGroup.ts

@@ -14,6 +14,12 @@ export default abstract class CommandGroup<T extends Command> extends Command {
         this.commands = commands
     }
 
+    print(fn: (command: string) => void) {
+        for (let commandIndex in this.commands) {
+            this.commands[commandIndex].print(fn)
+        }
+    }
+
     async write(device: UsbDevice): Promise<void> {
         for (let commandIndex in this.commands) {
             await this.commands[commandIndex].write(device)

src/commands/index.ts

@@ -4,4 +4,5 @@ export { default as CommandGroup } from "./CommandGroup"
 export type PrinterLanguage = "tspl"
 export type UnitSystem = "imperial"|"metric"|"dot"
 
-export * as tspl from "./tspl"
+export * as tspl from "./tspl"
+export * from "./types"

src/commands/tspl/TSPLCommandGenerator.ts

@@ -1,7 +1,7 @@
-import { UnitSystem } from "..";
+import { Point, UnitSystem } from "..";
 import CommandGenerator from "../CommandGenerator";
 import TSPLCommand from "./TSPLCommand";
-import { TSPLCLSCommand, TSPLCommandGroup, TSPLDirectionCommand, TSPLGapCommand, TSPLPrintCommand, TSPLSizeCommand, TSPLTextCommand } from "./commands";
+import { TSPLCLSCommand, TSPLCommandGroup, TSPLDiagonal, TSPLDirectionCommand, TSPLDisplay, TSPLDownload, TSPLGapCommand, TSPLPrintCommand, TSPLRawCommand, TSPLSizeCommand, TSPLTextCommand } from "./commands";
 import { LabelDirection } from "./types";
 
 /**
@@ -16,8 +16,13 @@ class TSPLCommandGenerator implements CommandGenerator<TSPLCommand> {
         return new TSPLPrintCommand(sets, copiesPerSet)
     }
 
-    text(content: string, x: number, y: number): TSPLCommand {
-        return new TSPLTextCommand(content, x, y, "1")
+    text(content: string, x: number, y: number, font: string|"default", size: number): TSPLCommand {
+        const fontName = font == "default" ? "0" : font
+        return new TSPLTextCommand(content, x, y, fontName, 0, size, size, "left")
+    }
+
+    upload(name: string, data: ArrayBuffer | Uint8Array): TSPLCommand {
+        return new TSPLDownload(name, data)
     }
 
     setUp(width: number, height: number, gap: number, offset: number, direction: LabelDirection, mirror: boolean = false, unitSystem: UnitSystem): TSPLCommand {
@@ -30,6 +35,17 @@ class TSPLCommandGenerator implements CommandGenerator<TSPLCommand> {
 
         return new TSPLCommandGroup(commands)
     }
+
+    display() {
+        return new TSPLCommandGroup([
+            new TSPLDisplay("CLS"),
+            new TSPLDisplay("IMAGE")
+        ])
+    }
+
+    line(start: Point, end: Point, thickness: number): TSPLCommand {
+        return new TSPLDiagonal(start, end, thickness)
+    }
 }
 
 export default new TSPLCommandGenerator()

src/commands/tspl/commands/basic/TSPLDiagonal.ts

@@ -0,0 +1,19 @@
+import TSPLCommand from "../../TSPLCommand";
+import { Point } from "@/commands";
+
+export default class TSPLDiagonal extends TSPLCommand {
+    private readonly start: Point
+    private readonly end: Point
+    private readonly thickness: number
+
+    constructor(start: Point, end: Point, thickness: number = 3) {
+        super()
+        this.start = start
+        this.end = end
+        this.thickness = thickness
+    }
+
+    get commandString(): string {
+        return `DIAGONAL ${this.start.x}, ${this.start.y}, ${this.end.x}, ${this.end.y}, ${this.thickness}`
+    }
+}

src/commands/tspl/commands/basic/TSPLDisplay.ts

@@ -0,0 +1,20 @@
+import TSPLCommand from "../../TSPLCommand";
+
+export type DisplayType = "CLS"|"IMAGE"
+
+/**
+ * Displays the image buffer on the screen
+ * {@link /documentsions/TSPL.pdf}
+ */
+export default class TSPLDisplay extends TSPLCommand {
+    private readonly type: DisplayType
+
+    constructor(type: DisplayType) {
+        super()
+        this.type = type
+    }
+
+    get commandString(): string {
+        return `DISPLAY ${this.type}`
+    }
+}

src/commands/tspl/commands/basic/TSPLDownload.ts

@@ -0,0 +1,34 @@
+import { UsbDevice } from "@/helpers/USBUtils"
+import TSPLCommand from "../../TSPLCommand"
+
+type Data = ArrayBuffer|Uint8Array
+/**
+ * A raw TSPL command. Can be used to use a command that is not yet supported
+ */
+export default class TSPLDownload extends TSPLCommand {
+    /**
+     * Name of the file on the printer
+     */
+    private readonly fileName: string
+    private readonly data: Data
+
+    /**
+     * Initialize a command with a raw body
+     * @param body
+     */
+    constructor(fileName: string, data: Data) {
+        super()
+        this.fileName = fileName
+        this.data = data
+    }
+
+    get commandString(): string {
+        return `DOWNLOAD "${this.fileName}", ${this.data.byteLength},`
+    }
+
+    async write(device: UsbDevice): Promise<void> {
+        await this.writeString(this.commandString, device)
+        await this.writeBytes(this.data, device)
+        await this.terminateCommand(device)
+    }
+}

src/commands/tspl/commands/basic/index.ts

@@ -7,4 +7,7 @@ export { default as TSPLDirectionCommand } from "./TSPLDirectionCommand"
 export { default as TSPLPrintCommand } from "./TSPLPrintCommand"
 export { default as TSPLBarCommand } from "./TSPLBarCommand"
 export { default as TSPLQRCommand } from "./TSPLQRCommand"
-export { default as TSPLBlockCommand } from "./TSPLBlockCommand"
+export { default as TSPLBlockCommand } from "./TSPLBlockCommand"
+export { default as TSPLDownload } from "./TSPLDownload"
+export { default as TSPLDisplay } from "./TSPLDisplay"
+export { default as TSPLDiagonal } from "./TSPLDiagonal"

src/commands/types.ts

@@ -0,0 +1 @@
+export type Point = {x: number, y: number}

src/examples/node/index.ts

@@ -1,6 +1,7 @@
 import { Label } from "@/labels"
-import TextField from "@/labels/fields/TextField"
+import { Line, Text } from "@/labels/fields"
 import { PrinterService } from "@/printers"
+import fs from "fs"
 
 export default async () => {
     const printers = await PrinterService.getPrinters()
@@ -9,11 +10,23 @@ export default async () => {
     if(printers.length > 0) {
         const printer = printers[0]
 
-        const label = new Label(70, 30)
-        const text = new TextField("Hello", 5, 10)
-
-        label.add(text)
-        await printer.print(label, 1, 3)
+        const fontName = "super.TTF"
+        const testText = "Hello 4"
+        const fontSize = 40
+        const textX = 10
+        const textY = 10
+
+        const font = fs.readFileSync(__dirname+"/"+fontName).buffer
+
+        const label = new Label(50, 25)
+        const text = new Text(testText, textX, textY)
+        const line = new Line({x: textX, y: textY + fontSize}, {x: textX + 100, y: textY + fontSize})
+
+        text.setFont(fontName, fontSize)
+        label.registerFont(font, fontName)
+        label.add(text, line)
+
+        await printer.display(label)
         await printer.close()
     }
 }

src/helpers/USBUtils.ts

@@ -111,7 +111,7 @@ export class UsbDevice {
      * Write data to an USB device
      * @param data Data to write
      */
-    async writeData(data: Uint8Array): Promise<void> {
+    async writeData(data: Uint8Array|ArrayBuffer): Promise<void> {
         const endpointNumber = this.outEndpoint
         await this.device.transferOut(endpointNumber!, data)
     }

src/helpers/UnitUtils.ts

@@ -1,9 +1,19 @@
 import { UnitSystem } from "@/commands"
 
+const pointsPerInch = 72
+
 export function valueWithUnit(value: number, unitSystem: UnitSystem) {
     switch(unitSystem) {
         case "dot": return `${value} dot`
         case "imperial": return value
         case "metric": return `${value} mm`
     }
+}
+
+/**
+ * Convert a value from dots in points in a given dpi
+ */
+export function dotToPoint(dots: number, dpi: number): number {
+    const inch = dots / dpi
+    return Math.round(inch * pointsPerInch)
 }