14
.
11
.
2023
14
.
02
.
2020
Backend
Tutorial
Software

WebUSB - Print Image and Text in Thermal Printers

Burak Aybar
Ruby Developer

We use thermal printers daily like on restaurants, shops or kiosks, basically everywhere. Instead of using lots of different applications to print the receipt/ticket, it is nice to have just one application which can allow modifying styling too.

WebUSB allowed us to connect this wide usage device to the webpages in any Chrome/Firefox without requiring any installation! Here you are going to see how we can implement this portable solution that can print the details of your order together with your logo or any images in your application with only knowing javascript! Before going into details, at the end of the day, we will be able to print an image and text like the picture below.

Epson TM-T20II Thermal Printer [1]

WebUSB thermal printed image and text

What is a Thermal Printer?

Technically;

Thermal printing (or direct thermal printing) is a digital printing process which produces a printed image by selectively heating the coated thermochromic paper, or thermal paper as it is commonly known when the paper passes over the thermal print head. The coating turns black in the areas where it is heated, producing an image [2].

Basically;

A thermal printer is a printer that makes use of heat to produce the image on paper [3].

What does it mean WebUSB and Thermal Printers for Businesses?

In recent years, the time of implementation and prototyping possibilities have become crucial to the market, faster you launch to the market more opportunities you can get. To cope with that, web applications are trying to have more powerful APIs such as WebUSB, WebBluetooth and similar APIs to be able to compete with desktop and embedded applications. This kind of APIs enables us to increase the usage of web applications while developing products, and it brings some advantages such as platform independence, portability, and comprehensibility.

One of the examples of usage area of WebUSB is thermal printers. Due to the quality of the print, speed, and technological advances, it has become increasingly popular. These printers are widely used in supermarkets, libraries, restaurants, bars, transport industry, lottery and betting, kiosks, petroleum stations, POS systems and in the medical industry, such as heart monitoring machines, or geological engineering (it records the real-time images of subsurface activities and earthquakes). These are just a few broad examples of the usage of thermal printers. The list will be endless if you think of places that you get a receipt every day.

Let's Code Thermal Printer with WebUSB

As I discussed earlier, in the previous article, one of our projects needed to connect to the USB device through the browser. The traditional methods were not enough to tackle this requirement and brought many problems, such as insecureness and compatibility problems. That's why the WebUSB API has been created: to provide a way for websites to connect to users' USB devices.

For the project, which I have been working on, not only connecting the USB device on the browser was required, but also you had to upload the various logos and give a command to the thermal printer to print this logo. That could be very challenging to maintain this kind of printers.

If you're not sure what ESC/POS commands are, check out my previous article explaining the protocols for printing an image and text on thermal printers.

How about printing a text on Thermal Printer?

Actually, printing a text is easier than printing an image. Here, we have simply split the sentence to the characters, then we have converted to decimal format.

Easy, right?

Once you have constructed your array of decimal representations for your image or text with command codes, you simply need to call the function for transferring the data to the thermal printer:

If you're not sure what a device is, check out my previous article explaining the printing the data on thermal printers via WebUSB.

Summary

In this blog post, I have introduced how to print text and images in thermal printers via WebUSB. In the beginning, we understood what is a thermal printer, and then we saw how this plays an important role for businesses. Finally, we finished with practising by programming with a fully working implementation of printing an image and text in Javascript.

It's already in production and battle-tested with thousands of different visitors, devices, locations every week. Join the journey!

If you're interested in more blog posts like this, please visit our Visuality Blog or our Medium Page

Resources

[1]https://theuniformsolution.com/product/epson-tm-t20ii-thermal-printer/

[2]https://en.wikipedia.org/wiki/Thermal_printing

[3]https://www.techopedia.com/definition/3629/thermal-printer

Burak Aybar
Ruby Developer

Check my Twitter

Check my Linkedin

Did you like it? 

Sign up To VIsuality newsletter

READ ALSO

Michal - Highlights from Ruby Unconf 2024

Highlights from Ruby Unconf 2024

14
.
11
.
2023
Michał Łęcicki
Conferences
Visuality
Cezary Kłos - Optimizing Cloud Infrastructure by $40 000 Annually

Optimizing Cloud Infrastructure by $40 000 Annually

14
.
11
.
2023
Cezary Kłos
Backend
Ruby on Rails

Smooth Concurrent Updates with Hotwire Stimulus

14
.
11
.
2023
Michał Łęcicki
Hotwire
Ruby on Rails
Software
Tutorial

Table partitioning in Rails, part 2 - Postgres Stories

14
.
11
.
2023
Jarosław Kowalewski
Backend
Postgresql
Ruby on Rails

N+1 in Ruby on Rails

14
.
11
.
2023
Katarzyna Melon-Markowska
Ruby on Rails
Ruby
Backend

Turbo Streams and current user

29
.
11
.
2023
Mateusz Bilski
Hotwire
Ruby on Rails
Backend
Frontend

Showing progress of background jobs with Turbo

14
.
11
.
2023
Michał Łęcicki
Ruby on Rails
Ruby
Hotwire
Frontend
Backend

Table partitioning in Rails, part 1 - Postgres Stories

14
.
11
.
2023
Jarosław Kowalewski
Postgresql
Backend
Ruby on Rails

Table partitioning types - Postgres Stories

14
.
11
.
2023
Jarosław Kowalewski
Postgresql
Backend

Indexing partitioned table - Postgres Stories

14
.
11
.
2023
Jarosław Kowalewski
Backend
Postgresql
SQL Views in Ruby on Rails

SQL views in Ruby on Rails

14
.
11
.
2023
Jan Grela
Backend
Ruby
Ruby on Rails
Postgresql
Design your bathroom in React

Design your bathroom in React

14
.
11
.
2023
Bartosz Bazański
Frontend
React
Lazy Attributes in Ruby - Krzysztof Wawer

Lazy attributes in Ruby

14
.
11
.
2023
Krzysztof Wawer
Ruby
Software

Exporting CSV files using COPY - Postgres Stories

14
.
11
.
2023
Jarosław Kowalewski
Postgresql
Ruby
Ruby on Rails
Michał Łęcicki - From Celluloid to Concurrent Ruby

From Celluloid to Concurrent Ruby: Practical Examples Of Multithreading Calls

14
.
11
.
2023
Michał Łęcicki
Backend
Ruby
Ruby on Rails
Software

Super Slide Me - Game Written in React

14
.
11
.
2023
Antoni Smoliński
Frontend
React
Jarek Kowalewski - ILIKE vs LIKE/LOWER - Postgres Stories

ILIKE vs LIKE/LOWER - Postgres Stories

14
.
11
.
2023
Jarosław Kowalewski
Ruby
Ruby on Rails
Postgresql

A look back at Friendly.rb 2023

14
.
11
.
2023
Cezary Kłos
Conferences
Ruby

Debugging Rails - Ruby Junior Chronicles

14
.
11
.
2023
Piotr Witek
Ruby on Rails
Backend
Tutorial

GraphQL in Ruby on Rails: How to Extend Connections

14
.
11
.
2023
Cezary Kłos
Ruby on Rails
GraphQL
Backend
Tutorial

Tetris on Rails

17
.
03
.
2024
Paweł Strzałkowski
Ruby on Rails
Backend
Frontend
Hotwire

EURUKO 2023 - here's what you've missed

14
.
11
.
2023
Michał Łęcicki
Ruby
Conferences

Easy introduction to Connection Pool in ruby

14
.
11
.
2023
Michał Łęcicki
Ruby on Rails
Backend
Ruby
Tutorial

When crazy ideas bring great time or how we organized our first Conference!

04
.
12
.
2023
Alexander Repnikov
Ruby on Rails
Conferences
Visuality