ESC/POS Printing

[pierre6]

@BrianHenderson I took a quick break to focus on other part of the app but now that i’ve got time for the esc/pos printing feature I encounter an issue.

How do you align some elements to the right? In this case the prices.

I tried messing around with some commands but here are the issues.

• 1.3.6 ESC a n (Position alignment) : This command is only effective when start processing at the beginning of a line. whereas I want the beginning if the line to be aligned left and the price to be aligned right.

• 1.3.5 ESC SP n (Set character right space amount) : This modifiy the right space amount of every following characters messing with every line in the loop.

• 1.3.1 ESC $ nL nH (Specify absolute position) : I didnt really understand that one, it didnt seem to have much impact.

Im not quite there yet but soon I hope

[BrianHenderson]

I’ll write a more full response when I’m at a computer, but the short answer is you’ll need to do some math! Use padStart or padEnd (depending on where you put it) and subtract the number of characters in the line from the total number of columns (usually 42 or 48 depending on your printer). This calculates the number of spaces between things on the left and things on the right.

Another method would be to use the tabs command in ESC/POS, I’ve done this too and it works well depending on the layout you’re going for.

[BrianHenderson]

Okay, here’s an example for you @pierre6. Also, the usual disclaimer - this is Bubble and JavaScript we’re talking about here so there’s probably half a dozen other ways you could get the same results:

1. We start with just some normal left-aligned text, which is the string ‘GRAND TOTAL:’

2. We then insert a Bubble dynamic expression for this order’s Grand Total field. I wrapped it in apostrophes because padStart is a JavaScript string method and so we need to make it a string.

3. The stuff inside the parentheses is just me calculating how many blank spaces to place before that dollar amount so that it goes all the way to the right edge of the receipt paper. If I already knew the number of spaces I needed then I could have just typed in a number.

You could read what’s inside the parentheses as "the total number of printable columns for my printer (I used a variable that I named ‘padding’ for whatever reason) minus the number of characters of whatever was to the left of this dollar amount."

Also, I could have specified some character for the padStart’s pad_string parameter but if nothing is specified then it just inserts blank spaces. Here’s an example where I use this parameter to make a horizontal line using = equal signs across the whole width of the receipt:

The “newLine” variable is purely for my convenience; it’s easier to type than the ESC/POS command for a line break which is ‘\x0A’

[BrianHenderson]

I received a private message from @becode asking about how to format the text in ESC/POS. I thought it might be useful to reply to his question here for everyone’s benefit. Here’s what he wrote:

Hello Brian,
After many tries, I finally managed to install JSprintManager on my Bubble application.
Thanks again for typing this so clearly.

Now I’m trying to format my ticket but it’s not clear to me how I can do this.
This is how it looks now in the bubble editor.

Do you have a website where I can find extra information on this or a good example?

What I don’t understand above all is how you can change the size of your font or make it bold, for example.

Here I saw a great example of yours. And I hope that you can help me with that. Thank you very much.

The general answer is this: With ESC/POS, you work line by line. To change the formatting of the text, you enter a command to change it and anything that comes afterwards will be formatted that way.

There are examples of this in the very image you sent me:
esc + '!' + '\x00' is your standard normal-sized font, usually called ‘Font A’ in documentation
esc + '!' + '\x38' will give you an emphasized double-height double-width font

Personally I like this page for examples of font controlling commands, but there’s loads of documentation online in all sorts of places for this.

One of the most baffling things about ESC/POS documentation is that it typically presents info about the commands in hex, decimal, and ASCII formats. You’ll want to make sure you’re passing hex values with this setup.

Since you asked about making something bold, you would use \x1B\x45\x01 to turn emphasis mode on and \x1B\x45\x00 to turn it off. In documentation (like this example), this command may appear as ESC E n with n having a possible value of 0 or 1.

[pierre6]

So we are done with our ESC/POS implementation

Thanks a lot @BrianHenderson for you help !

Here are a few things I struggle upon that might help others.

• Use the :join with operator followed by "," to transform :Do a search for lists to array. If you don’t use it your array will contain only one element.
  
• Learn about the .padStart JS operator. Very useful to display any kind of table.
• Extensively use the :find & replace bubble operator to make sure you don’t break your javascript when injecting any kind of text data, especially those that are created by the end user. (the :formatted as JSON-safe operator might also help?)
• Learn a bit about ESC/POS commands, you don’t necessarily need to use a lot of them to create a basic but yet effective print receipt.

In the end, even with very little knowledge about Javascript it wasnt too hard to reach the desired result.

[BrianHenderson]

That looks fantastic! Well done! It looks like you used the ESC/POS tab feature for the space between the quantity and the articles, and then the JavaScript .padStart for the space over to the price. It looks great!

You’re absolutely right about using :find and replace on any user-generated content that might have escape characters in it. You’ll want to use it to replace \ and ' and " characters with \\ and \' and \" because otherwise they could break your JavaScript and nothing will print Also make sure to replace \ with \\ before the other ones because otherwise you’re replacing what you just put in there

Nice tip about the array. I also found that using :format as texton a list with the ESC/POS command \x0A for a line break as the delimiter works to show each item on a separate line.

I recently spoke with Neodynamic support and they said they’re contemplating writing a Bubble tutorial for implementing JSPrintManager. I told them they should go for it!

[izaque.castro]

I installed the plugin, created my account and generated my key. But I can’t print

[image]

[contato.lapola]

Maybe someone could help me? I’m having difficulty implementing

[arias.hgo]

Hello @BrianHenderson,

Thanks a lot for your work on this topic

Do you think your solution could work with a SUNMI v2s mobile device?

商米文档站

Thanks in advance for your help

[Marc_atTillin]

Hi @pierre6 and @BrianHenderson ,
thanks a lot for your help on this topic. I just started working on it, however I have a minor issue. I can’t seem to have JSPrintManager running on my computer even if I installed it for windows 11 from this link. I get this error when loading the preview using brave or firefox, but it seems to work on chrome where it finds all printers connected to my computer and then printing works. Do you have any idea of why ?

[pierre6]

Hi @Marc_atTillin

Working fine for me on Brave. (JSPM version 4.0)

• Is your Brave shield / javascript blocker deactivated ?
• Is your JSPrintManager program running and on the correct version ?

[josealex170702]

I made a plugin for Bubble that allows you to print to ESC/POS via Bluetooth. Thermal Printer Bluetooth Plugin | Bubble

[Marc_atTillin]

Hi @pierre6 ,
I was on JSPM version 7.0, so I downgraded to version 4.0 but I have the same issue (I also tried with 32bit installation just in case). I deactivated brave shield and js blocker as well.
What do you mean by having JSPrintManager “running” ? do I need to do something else after downloading and installing the .exe file ?

I feel like I’m failing at the easiest step of the setup haha

[Marc_atTillin]

So it worked when encapsulating the script in the html doctype and adding back the jquery reference. The popup error telling the JSPM is not installed or not running disappeared. But I guess it’s not how you guys did it, right ?

[josealex170702]

I made a plugin to print to thermal printers using USB in a personalized and simple way.

Templates for Bubble

[josealex170702]

Try my plugin, you don’t need to install anything, just download a portable program and have it run. My plugin allows printing from the ID of an element to the thermal printer, it can also be done using commands.

Marketplace: Thermal Printer USB ESC-POS Plugin | Bubble
Demo: Bubble | No-code apps