¡Códigos de barras!

parzibyte · Feb 5, 2020 · 27fca16 · 27fca16
1 parent bff1c6c
commit 27fca16
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 1 deletion.
diff --git a/Impresora.js b/Impresora.js
@@ -19,7 +19,14 @@ const C = {
     AlineacionDerecha: "right",
     AlineacionIzquierda: "left",
     FuenteA: "A",
-    FuenteB: "B"
+    FuenteB: "B",
+    AccionBarcode: "barcode",
+    Medida80: 80,
+    Medida100: 100,
+    Medida156: 156,
+    Medida200: 200,
+    Medida300: 300,
+    Medida350: 350,
 };
 
 const URL_PLUGIN = "http://localhost:8000";
@@ -125,4 +132,18 @@ class Impresora {
         this.operaciones.push(new OperacionTicket(C.AccionQr, contenido));
     }
 
+    barcode(contenido, medida) {
+        medida = parseInt(medida);
+        if (medida !== C.Medida80 &&
+            medida !== C.Medida100 &&
+            medida !== C.Medida156 &&
+            medida !== C.Medida200 &&
+            medida !== C.Medida300 &&
+            medida !== C.Medida350) {
+            throw Error("Valor para medida del barcode inválido");
+        }
+        let payload = contenido.concat(",").concat(medida.toString());
+        this.operaciones.push(new OperacionTicket(C.AccionBarcode, payload));
+    }
+
 }
diff --git a/ejemplos/barcode/index.html b/ejemplos/barcode/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1,
+            shrink-to-fit=no">
+    <meta name="description" content="Demostrar capacidades de plugin de
+            impresión para impresora térmica en JavaScript">
+    <meta name="author" content="Parzibyte">
+    <title>Imprimir códigos de barras en impresora térmica</title>
+    <!-- Cargar el CSS de Boostrap-->
+    <link
+            href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+            rel="stylesheet"
+            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+            crossorigin="anonymous">
+</head>
+<body>
+<main role="main" class="container-fluid">
+    <div class="row">
+        <div class="col-12">
+            <h1>Códigos de barras en thermal printer</h1>
+            <p>En este ejemplo se muestra cómo imprimir un código de barras en una ticketera</p>
+            <a href="//parzibyte.me/blog">By Parzibyte</a>
+            <br>
+            <a class="mb-2 btn btn-danger btn-sm"
+               href="../../index.html">Documentación</a>
+            <div class="alert alert-danger">Recuerda que el plugin debe estar ejecutándose en segundo plano</div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <div class="form-group">
+                <label for="listaDeImpresoras">Selecciona tu impresora</label>
+                <select class="form-control" id="listaDeImpresoras"></select>
+            </div>
+            <div class="form-group">
+                <label for="tamanioBarcode">Tamaño del código de barras</label>
+                <select class="form-control" id="tamanioBarcode">
+                    <option value="80">80</option>
+                    <option value="100">100</option>
+                    <option value="156">156</option>
+                    <option value="200">200</option>
+                    <option value="300">300</option>
+                    <option value="350">350</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="codigo">Contenido del código de barras</label>
+                <textarea placeholder="Escribe el contenido del código de barras" id="codigo" cols="30"
+                          rows="5" class="form-control"></textarea>
+            </div>
+            <div class="form-group">
+                <button class="btn btn-success" id="btnImprimir">Imprimir
+                    en impresora seleccionada
+                </button>
+            </div>
+        </div>
+        <div class="col-12 col-lg-6">
+            <h2>Log</h2>
+            <button class="btn btn-warning btn-sm" id="btnLimpiarLog">Limpiar
+                log
+            </button>
+            <pre id="estado"></pre>
+        </div>
+    </div>
+</main>
+<script src="../../Impresora.js"></script>
+<script src="./script.js"></script>
+</body>
+</html>
diff --git a/ejemplos/barcode/script.js b/ejemplos/barcode/script.js
@@ -0,0 +1,61 @@
+const $estado = document.querySelector("#estado"),
+    $listaDeImpresoras = document.querySelector("#listaDeImpresoras"),
+    $codigo = document.querySelector("#codigo"),
+    $btnLimpiarLog = document.querySelector("#btnLimpiarLog"),
+    $btnImprimir = document.querySelector("#btnImprimir"),
+    $tamanioBarcode = document.querySelector("#tamanioBarcode");
+const loguear = texto => $estado.textContent += (new Date()).toLocaleString() + " " + texto + "\n";
+const limpiarLog = () => $estado.textContent = "";
+
+$btnLimpiarLog.addEventListener("click", limpiarLog);
+const limpiarLista = () => {
+    for (let i = $listaDeImpresoras.options.length; i >= 0; i--) {
+        $listaDeImpresoras.remove(i);
+    }
+};
+const obtenerListaDeImpresoras = () => {
+    loguear("Cargando lista...");
+    Impresora.getImpresoras()
+        .then(listaDeImpresoras => {
+            loguear("Lista cargada");
+            limpiarLista();
+            listaDeImpresoras.forEach(nombreImpresora => {
+                const option = document.createElement('option');
+                option.value = option.text = nombreImpresora;
+                $listaDeImpresoras.appendChild(option);
+            })
+        });
+};
+obtenerListaDeImpresoras();
+/*
+ * La magia sucede a continuación
+ * */
+$btnImprimir.addEventListener("click", () => {
+    // Recuperar el código de barras
+    let contenido = $codigo.value;
+    // Validar
+    if (!contenido) {
+        return alert("Escribe el contenido del código de barras");
+    }
+    // Ahora la impresora
+    let impresoraSeleccionada = $listaDeImpresoras.options[$listaDeImpresoras.selectedIndex].value;
+    if (!impresoraSeleccionada) {
+        return alert("Selecciona una impresora");
+    }
+    // El tamaño..
+    let tamanioBarcode = $tamanioBarcode.options[$tamanioBarcode.selectedIndex].value;
+    if (!tamanioBarcode) {
+        return alert("Selecciona el tamaño");
+    }
+    // Si está bien se ejecuta esto...
+    let impresora = new Impresora();
+    impresora.barcode(contenido, tamanioBarcode);
+    // Dos saltos de línea
+    impresora.feed(2);
+    // Terminar en la impresora seleccionada
+    loguear("Imprimiendo...");
+    impresora.imprimirEnImpresora(impresoraSeleccionada)
+        .then(respuesta => {
+            loguear("Al imprimir el código de barras tenemos: " + respuesta);
+        })
+});
diff --git a/index.html b/index.html
@@ -86,6 +86,9 @@ <h1>Ejemplos</h1>
                         <li>
                             <a href="./ejemplos/qr/index.html">Códigos QR</a>
                         </li>
+                        <li>
+                            <a href="./ejemplos/barcode/index.html">Códigos de barras</a>
+                        </li>
                     </ol>
                 </div>
                 <div class="col-12">
-Original file line number
+Diff line change
@@ Expand Up / @@ -86,6 +86,9 @@ <h1>Ejemplos</h1> @@
                             <li>
                                 <a href="./ejemplos/qr/index.html">Códigos QR</a>
                             </li>
+                            <li>
+                                <a href="./ejemplos/barcode/index.html">Códigos de barras</a>
+                            </li>
                         </ol>
                     </div>
                     <div class="col-12">
@@ Expand Down @@