En estos últimos meses he estado trabajando en un diseñador de tickets para imprimir en impresoras térmicas usando los comandos ESC POS.
El diseñador gratuito es web y se puede usar para crear tus propios tickets, ya sea ticket de venta, factura de venta, recibo de compra y cualquier otro diseño para imprimir en impresoras térmicas.
Si quieres puedes probarlo ya mismo con el enlace a continuación, pero te recomiendo revisar el contenido del post antes de probarlo: https://parzibyte.me/apps/ticket-designer/#/first-steps
Vas a poder imprimir imágenes, texto con formato, tablas, códigos QR, códigos de barras, cortar el papel, avanzarlo, abrir el cajón y diseñar cualquier recibo para tu impresora POS.
Esto funcionará con impresoras USB sobre Windows, Linux y Raspberry; además de impresoras Bluetooth en Android. Todo usando el mismo diseñador de recibos ESC POS.
Con el ESC POS ticket designer vas a poder:
Te repito que el diseñador es web y se puede instalar como una app nativa gracias a que es una PWA. Así que debe funcionar en casi todos los entornos que cuenten con un navegador web actualizado.
Nota importante: si quieres más información sobre el diseñador o tienes dudas, te invito a revisar los vídeos que he grabado hablando sobre el software: https://www.youtube.com/playlist?list=PLat1rFhO_zZiFR2CdNJWkcCcRKO0sYQVL
Dentro del diseñador vas a encontrar una guía paso a paso que te dirá lo que tienes que hacer para configurar tu impresora térmica y descargar las herramientas necesarias según tu sistema operativo.
Como puedes ver, es una guía paso a paso para instalar tu impresora, compartirla en donde sea necesario y finalmente realizar una prueba de impresión.
Solo debes seguir la guía cuidadosamente una vez, y cuando consigas imprimir un recibo de prueba ya podrás diseñar tus tickets para imprimirlos en la impresora térmica más adelante.
La parte principal es la lista de diseños. Ahí aparecerán todos los tickets que has creado con la opción de editar sus operaciones, sus datos (como la impresora térmica donde serán impresos), eliminarlos o imprimirlos directamente.
También tendrán un indicador de la conexión exitosa con el plugin. Por ejemplo, en la siguiente captura todavía no he configurado mi impresora, así que el diseñador me lo indica:
En este apartado podemos crear un nuevo diseño indicando su nombre y seleccionando la impresora, o podemos hacer clic en Operaciones de cualquier diseño para ir al módulo principal: las operaciones que se pueden hacer para nuestros diseños.
Al inicio, no habrá ninguna operación. Podremos elegir entre todas las operaciones disponibles:
Basta con elegir una operación para agregarla al ticket, y desde que la agregamos los cambios se van a ir guardando automáticamente. Podemos imprimir para revisar nuestro diseño, y exportar o importar la lista de operaciones para tener un respaldo siempre.
Por ejemplo, aquí tengo un diseño de un ticket de venta que hice usando el propio creador de recibos web y es el que pudiste ver impreso al inicio del post:
También puedes fijarte que el estado de la conexión ahora es exitoso, pues ya estoy ejecutando el plugin.
En este caso te estoy enseñando solo algunas operaciones que puedes agregar a tus diseños para imprimir en tiqueteras, pero más adelante subiré vídeos explicando cada operación en profundidad: https://www.youtube.com/playlist?list=PLat1rFhO_zZiFR2CdNJWkcCcRKO0sYQVL
Nota: al menos en el escritorio, puedes arrastrar y soltar las operaciones para intercambiarlas de lugar.
He probado este diseñador de tickets para impresoras térmicas en varios lugares como en Raspberry Pi OS con Chromium, Android con Chrome, Windows 10 con Chrome, Windows 11 con Chrome y Linux con Firefox. Solo necesitas un navegador actualizado.
Por ejemplo, aquí una captura del diseñador en Android. Fíjate en que la conexión también es exitosa:
Otra característica muy importante del diseñador es que cuenta con un generador de código fuente a partir del diseño que estás haciendo. Con esto, puedes crear tu ticket y luego copiar el código fuente para imprimirlo de manera programada.
Para ello, habilita el Modo desarrollador en Ajustes. Después, ve a las operaciones del diseño y elige tu lenguaje de programación a la derecha.
Lo he llevado tan lejos que incluso genera código para el lenguaje de programación C:
Por ahora el diseñador de tickets genera código para ejecutarse en:
Si te lo preguntas, el código que se genera a partir del diseño de la imagen es el siguiente:
#include <stdio.h>
#include <curl/curl.h>
struct RespuestaHttp
{
char *datos;
size_t size;
};
size_t write_callback(void *contents, size_t size, size_t nmemb, void *userp)
{
// Esta función puede ser invocada varias veces por CURL. https://curl.se/libcurl/c/CURLOPT_WRITEFUNCTION.html
size_t realsize = size * nmemb;
struct RespuestaHttp *mem = (struct RespuestaHttp *)userp;
mem->datos = malloc(realsize + 1);
if (mem->datos == NULL)
{
printf("No se pudo asignar memoria\n");
return CURL_WRITEFUNC_ERROR;
}
memcpy(mem->datos, contents, realsize);
mem->size = realsize;
mem->datos[realsize] = 0;
return realsize;
}
int main(void)
{
CURL *curl;
CURLcode res;
curl_global_init(CURL_GLOBAL_DEFAULT);
curl = curl_easy_init();
if (!curl)
{
printf("No se pudo inicializar CURL\n");
return 0;
}
struct RespuestaHttp respuesta;
respuesta.datos = NULL;
respuesta.size = 0;
curl_easy_setopt(curl, CURLOPT_URL, "http://localhost:8000/imprimir");
curl_easy_setopt(curl, CURLOPT_POST, 1L);
curl_easy_setopt(curl, CURLOPT_POSTFIELDS, "{\"nombreImpresora\":\"PT210\",\"serial\":\"\",\"operaciones\":[{\"nombre\":\"EstablecerAlineacion\",\"argumentos\":[1]},{\"nombre\":\"ImprimirCodigoQr\",\"argumentos\":[\"https://parzibyte.me/blog\",200,1,0]},{\"nombre\":\"EscribirTexto\",\"argumentos\":[\"https://parzibyte.me/blog\\n\"]}]}");
curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, write_callback);
curl_easy_setopt(curl, CURLOPT_WRITEDATA, (void *)&respuesta);
res = curl_easy_perform(curl);
if (res == CURLE_OK)
{
if (strcmp(respuesta.datos, "true\n") == 0)
{
printf("Impreso correctamente");
}
else
{
printf("Error con el plugin: %s", respuesta.datos);
}
}
else
{
fprintf(stderr, "Error en la petición: %s\n", curl_easy_strerror(res));
}
free(respuesta.datos);
curl_easy_cleanup(curl);
curl_global_cleanup();
return 0;
}El código fuente del diseñador está en GitHub: https://github.com/parzibyte/esc-pos-ticket-designer
Para el caso del diseñador en sí, es una aplicación totalmente web; no necesitas internet para usarla y todos los datos se guardan en tu computadora. Recomiendo instalarla como PWA para que sea todavía más rápida.
En caso de que se te haya olvidado, aquí puedes usar el diseñador de tickets para impresoras térmicas.
Siempre quise hacer un creador de facturas para que cualquier persona con una impresora térmica pueda imprimir tickets sin ningún límite, y al fin lo he creado.
Es una herramienta que usa otra de las herramientas que yo he creado: mi plugin. Con esto, tanto usuarios como programadores pueden diseñar facturas para imprimir en POS printers de manera programada o usando la herramienta, revisando el código fuente generado.
Su desarrollo ha sido largo y complejo, ya que además de la complejidad que representa hacer el diseñador que sea compatible con varios plugins utilicé tecnologías nuevas para mí como Vue 3, Tailwind y SQLite3 en la web con OPFS.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.