▄▄▄▄▄   █▀▄▀█ ▄███▄   ██   █▄▄▄▄   ▄▀  █     ▄███▄   
  █     ▀▄ █ █ █ █▀   ▀  █ █  █  ▄▀ ▄▀    █     █▀   ▀  
▄  ▀▀▀▀▄   █ ▄ █ ██▄▄    █▄▄█ █▀▀▌  █ ▀▄  █     ██▄▄    
 ▀▄▄▄▄▀    █   █ █▄   ▄▀ █  █ █  █  █   █ ███▄  █▄   ▄▀ 
              █  ▀███▀      █   █    ███      ▀ ▀███▀   
             ▀             █   ▀                        
                          ▀                             

Smeargle es un conjunto de utilidades y clases escrita en vanilla javascript según las especificaciones en formato json de SweetTicketDesign para el diseño de tickets que seran emitidas a ticketeras termicas con la ayuda de PukaHTTP.

Indice :card_index_dividers:

1. Hello World
2. Layouts Texto
3. Layout Imagenes
4. Layout Qr
5. Estilos
6. Configuración Ticket

Comenzando :rocket:

Instalación mediante npm

npm i @puyu.pe/smeargle-js

O mediante CDN

<script src="https://unpkg.com/@puyu.pe/smeargle-js/dist/smeargle.min.js"></script>

Hello word :bookmark_tabs:

const printer = Object.freeze({
    "name": "192.168.1.40",
    "type": "ethernet"
});

const jsonData = SmeargleJs.Ticket.builder()
    .addInfo("printer", printer)
    .addText("hello world", SmeargleJs.center())
    .toJson()

// your function to send print job to Puka
sendToPuka(jsonData)

Layouts :toolbox:

Texto

Para el diseño de texto, se tiene a disposición los siguientes metodos

SmeargleJs.Ticket.builder()
    .addText("texto", styleOptional)
    .addRow(stylezedRow)
    .addLine(charOptional, styleOptional)
    .addTextLayout(textLayout)

Los estilos son opcionales, ver lista completa.

Ejemplo

const header = SmeargleJs.StylizedRow.build()
    .add("CAN", SmeargleJs.charxels(4))
    .add("DESCRIPCIÓN")
    .add("TOTAL", SmeargleJs.charxels(7));

const firstRow = SmeargleJs.StylizedRow.build()
    .add("3", SmeargleJs.charxels(4))
    .add("arroz")
    .add("39.20", SmeargleJs.charxels(7));

SmeargleJs.Ticket.builder()
    .addText("PUYU", SmeargleJs.title())
    .addText("Fecha 07/06/2024", SmeargleJs.left())
    .addLine() // simple line
    .addRow(header)
    .addLine("-", SmeargleJs.bold())
    .addRow(firstRow)

Imagenes

• La ruta debe ser un ruta local en la pc donde esta instalado PukaHTTP.
• Se puede omitir configurar la ruta con setPath, puka inyectara el logo según su configuración.

const logo = SmeargleJs.ImageBlock.builder()
    .setPath("/home/user/downloads/logo.png");

const defaultLogo = SmeargleJs.ImageBlock.builder();

const json = SmeargleJs.Ticket.builder()
    .addImage(logo, SmeargleJs.center().width(240).height(190))
    .addImage(defaultLogo, SmeargleJs.right())
    .toJson()

Qr

• QrErrorLevel por defecto es Q.
• QrType por defecto es IMG, por cuestiones de compatibilidad.
• Por defecto el qr estara centrado.
• Por defecto el ancho del qr es de 290 en formato QrType.IMG

Importante!, si QrType se configura en NATIVE, entonces el ancho maximo es de 16, siendo 16 un tamaño muy grande y 1 uno muy pequeño.

const qr = SmeargleJs.QrBlock.builder()
    .setData("20450523381|01|F001|00000006|0|9.00|30/09/2019|6|sdfsdfsdf|")
    .setCorrectionLevel(SmeargleJs.QrErrorLevel.L)
    .setQrType(SmeargleJs.QrType.NATIVE);

const json = SmeargleJs.Ticket.builder()
    .addQrCode(qr, SmeargleJs.right().width(4))
    .toJson()

Estilos

Los estilos configurables para texto son:

const customStyle = SmeargleJs.Style.builder()
    .bold()
    .normalize()
    .charxels(8)
    .fontHeight(2)
    .fontWidth(2)
    .fontSize(2)
    .bgInverted()
    .pad("*")
    .center()
    .right()
    .left()
    .align(SmeargleJs.Justify.CENTER);

Los estilos configurables para imagenes y qr son:

const customStyle = SmeargleJs.Style.builder()
    .center()
    .right()
    .left()
    .align(SmeargleJs.Justify.CENTER)
    .width(290)
    .height(290)
    .scale(SmeargleJs.Scale.SMOOTH)
    .size(290)

Adicionalmente SmeargleJs dispone de varios metodos que acortan la inicialización de un objeto Style, los siguientes metodos construyen un objeto Style internamente.

SmeargleJs.center(4)
SmeargleJs.right(8)
SmeargleJs.left(7)
SmeargleJs.bold()
SmeargleJs.scale(SmeargleJs.Scale.SMOOTH)
SmeargleJs.charxels(8)
SmeargleJs.centerBold()
SmeargleJs.title()
SmeargleJs.normalize()
SmeargleJs.fontWidth(2)
SmeargleJs.fontHeight(2)
SmeargleJs.fontSize(2)
SmeargleJs.bgInverted()
SmeargleJs.pad("*")
SmeargleJs.width(290)
SmeargleJs.height(290)
SmeargleJs.size(290)
SmeargleJs.leftBold()
SmeargleJs.rightBold()
SmeargleJs.subtitle()

Configuración Ticket

• La configuración es mediante el metodo builder de la clase SmeargleJs.Ticket
• Se puede configurar el numero de caractares máximo en una linea en el papel termico (blockWidth)
• Se puede configurar el metodo de corte: feed y mode
• Se puede agregar estilos globales mediante MapStyles

const properties = SmeargleJs.Properties.builder()
    .setBlockWidth(48)
    .setCut(SmeargleJs.CutProperty.builder()
        .feed(4)
        .mode(SmeargleJs.CutMode.FULL)
    )

const styles = SmeargleJs.MapStyles.builder()
    .addGlobalStyle(SmeargleJs.normalize());

const ticket = SmeargleJs.Ticket.builder(properties, styles);

Normalmente solo sera necesario configurar el número de caracteres máximo y algun estilo global

const styles = SmeargleJs.MapStyles.builder()
    .addGlobalStyle(SmeargleJs.normalize());

const ticket = SmeargleJs.Ticket.builder(SmeargleJs.blockWidth(48), styles);