js

Tabla impresa en impresora térmica

Imprimir tabla en impresora térmica

Las impresoras térmicas permiten la impresión de texto y la alineación del mismo, pero ¿qué pasa cuando queremos imprimir una tabla que sea alineada correctamente en caso de que el texto sobrepase el ancho? para ello debemos implementar un algoritmo propio.

Tabla impresa en impresora térmica

Tabla impresa en impresora térmica

Por ello es que en este post te voy a enseñar a imprimir datos tabulados o básicamente imprimir una tabla bien alineada y con separadores en una impresora térmica, usando únicamente texto.

Verás que podremos imprimir las celdas y columnas de la tabla respetando el máximo ancho del ticket, ya sea dibujando los separadores o solo ordenando los datos.

(más…)

Por parzibyte, hace

Rotar imagen en navegador web con JavaScript y canvas

En este artículo te voy a enseñar a rotar una imagen con HTML y JavaScript a través de canvas, de manera que podrás girar una imagen los grados que tú quieras, es decir, rotarla 90, 180, 270 o cualquier cantidad.

Veremos cómo cargar una imagen, pintarla en un canvas, agregarle rotación y después hacer cosas como descargar esa imagen o enviarla al backend que puede ser con Node, C#, PHP, etcétera.

(más…)

Por parzibyte, hace
Datos formateados como tabla en ticket en impresora térmica

JavaScript: tabular datos con límite de longitud, separador y relleno

El día de hoy veremos un algoritmo que he querido desarrollar desde hace mucho y que no fue tan complejo como creí. Se trata de una forma de crear una tabla con JavaScript y que los datos se acomoden automáticamente en cada columna para que no superen una longitud predefinida.

Datos formateados como tabla en ticket en impresora térmica

Datos formateados como tabla en ticket en impresora térmica

De este modo podremos crear tablas (en forma de texto) en donde el contenido se va a ajustar automáticamente, especificando un separador y una longitud por columna.

(más…)

Por parzibyte, hace
Dividir cadena en JavaScript usando separador y arreglo

JavaScript: separar cadena en bloques

En el post de hoy vamos a ver cómo dividir una cadena en pedazos si es que supera una máxima longitud. Por ejemplo, separar la string en JS si mide más de 5, y además de eso dividirla en fragmentos de N cantidad.

Vamos a ver cómo separar una cadena cada cierto número de caracteres y también cómo dividirla en trozos pequeños colocados en un arreglo donde se respete una cierta longitud.

(más…)

Por parzibyte, hace

Prevenir salto de línea en textarea de HTML

En este post vamos a ver cómo evitar que el usuario presione “Enter” en un textarea de HTML para que no se puedan agregar nuevas líneas o saltos de línea.

Te voy a enseñar a prevenir que el usuario agregue más líneas dentro del textarea escuchando el evento del teclado, y a partir del mismo puedes hacer más cosas para prevenirlo al momento de copiar y pegar o arrastrar.

(más…)

Por parzibyte, hace

Tiempo relativo con JavaScript y RelativeTimeFormat

En este post de JavaScript vamos a mostrar el tiempo relativo transcurrido o faltante entre 2 fechas de manera relativa usando Intl.RelativeTimeFormat.

Básicamente vamos a mostrar el “hace 2 minutos”, “hace 2 horas,” “dentro de 1 día”, “dentro de un mes” pero siendo capaces de cambiar el idioma.

De este modo podremos mostrar el tiempo que falta o el tiempo que ha transcurrido con JavaScript en cualquier idioma.

(más…)

Por parzibyte, hace
Calcular nota final de unidad y laboratorio - Ejercicio resuelto con JavaScript

JavaScript: calcular nota de estudiante con formulario (ejercicio resuelto)

Hoy vamos a resolver un ejercicio con JavaScript, HTML y CSS. La solicitud dice así:

Diseñar y desarrollar un formulario para calcular la nota de la unidad de una asignatura.El usuario debe enviar los datos mediante un formulario en HTML

 

Por medio de JavaScript procesar los datos recibidos y enviarlos a otra página donde debe imprimir el nombre del estudiante, el nombre de la asignatura y las notas obtenidas y el calculo de la nota del laboratorio, de la nota del parcial y de la unidad.

(más…)

Por parzibyte, hace
Bot de Telegram - Agregar globo de texto o bocadillo a imagen para memes

Agregar globo de texto a imagen con bot de Telegram

Hoy vamos a ver cómo agregar un globo o bocadillo a cualquier imagen con un bot de Telegram usando Node y JavaScript para dicha tarea.

Una cosa será el bot de Telegram y otra el procesamiento de la imagen. Podemos usar ambas cosas por separado y mejorar cada una de ellas o combinarlas.

Bot de Telegram - Agregar globo de texto o bocadillo a imagen para memes

Bot de Telegram – Agregar globo de texto o bocadillo a imagen para memes

Técnicamente hablando vamos a escuchar si el usuario envía una imagen en Telegram (ya sea en grupos o en privado) y una vez que la envíe veremos el texto que la acompaña.

En caso de que el texto coincida con la orden vamos a combinar las 2 imágenes, redimensionando el globo o bocadillo según sea el caso y después vamos a responder con esa imagen ya modificada.

Nota: esto fue hecho por diversión para hacer memes y comentar rápidamente en Facebook o similares, aunque se pueden sacar varias cosas de aquí.

(más…)

Por parzibyte, hace

Variables del entorno con node y archivo .env

En el corto post de hoy veremos cómo leer variables del entorno con Node.js desde un archivo.

Normalmente estas environment variables se guardan en un archivo .env que no distribuimos junto con el repositorio (mejor distribuimos un .env.example) y que cada programador debe crear al momento de clonar el proyecto.

Veamos entonces cómo leer cosas secretas como claves API, tokens, etcétera de un archivo .env en Node con JavaScript usando el paquete dotenv.

(más…)

Por parzibyte, hace
Imprimir en impresora térmica conectada por Bluetooth en Android desde JavaScript

Imprimir ticket en impresora térmica bluetooth desde JavaScript con Android

El día de hoy vamos a hacer una cosa que varios me han pedido y que siempre he querido hacer: imprimir en una impresora térmica Bluetooth desde Android usando JavaScript.

Básicamente vamos a enviar un ticket a una thermal printer con Bluetooth desde el navegador web sin cuadros de diálogo ni cosas extrañas: tan solo usando un plugin gratuito desarrollado por mí y JavaScript puro.

Debido a que esto es hecho desde el navegador con JS luego puedes usarlo para imprimir en una impresora térmica Bluetooth desde Vue, React, Angular, TypeScript, etcétera: cualquier cosa que compile, use o traspile a JavaScript.

(más…)

Por parzibyte, hace
Leyendo código de barras para enviarlo a otro sitio usando algo como una API

Leer código de barras con cámara y enviarlo a página web

En este post te mostraré cómo leer un código de barras con una cámara usando JS (desde un teléfono, tableta o computadora con cámara web) y además enviarlo a una página web.

Esto nos va a permitir:

  • Usar la webapp expuesta aquí como una API, sin que tu sitio necesite HTTPS
  • Saltar la seguridad del acceso a la cámara solo en HTTPS, pues puedes leer el código de barras con la cámara y luego enviarlo a tu verdadero sitio web

Al final esta aplicación web será como una API gratuita para leer un código de barras y enviarlo a tu sitio web. Veamos los detalles a continuación.

(más…)

Por parzibyte, hace
Ticket impreso con impresora Xprinter usando plugin - Soporta imágenes, códigos QR, de barras y acentos

Comunicar JavaScript con impresora térmica usando plugin v3

En el tutorial de hoy vamos a ver cómo comunicarnos con una impresora térmica desde JavaScript para imprimir tickets, abrir el cajón, cortar el papel y otras cosas usando un plugin como intermediario y HTTP.

Con esto podremos imprimir tickets o recibos desde JS, imprimir imágenes, códigos de barras, códigos QR, imágenes como base64, caracteres personalizados y muchas cosas más.

(más…)

Por parzibyte, hace
Sweetalert 2 y ventas - mostrar cambio calculado según importe y pago de cliente

Sweetalert 2 – Mostrar total de venta y cambio a partir de pago

En este post sobre Sweetalert 2 (Sweet Alert 2) veremos un ejercicio práctico: cómo solicitar el pago del cliente y mostrar el cambio (Dinero que se devuelve al comprador cuando entrega una cantidad superior al importe) en la misma alerta, validando todo.

Veremos cómo escuchar el cambio del input de la alerta, modificar el HTML de la misma y validar según una variable externa.

Recomiendo ver el tutorial de SweetAlert2 antes de leer este artículo.

(más…)

Por parzibyte, hace

Limpiar input file de HTML con JavaScript

En este corto post de programación con JS puro vamos a ver cómo resetear, reiniciar, reestablecer o limpiar un elemento input de tipo file.

Explicado con otras palabras veremos cómo eliminar el archivo seleccionado de un input tipo file o input de archivo, para que parezca que no se ha seleccionado un archivo.

Lo haremos con JavaScript puro para que puedas aplicarlo a cualquier framework.

(más…)

Por parzibyte, hace