Forum Academy Marketplace Showcase Pricing Features

ESC/POS Printing

@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 :grinning_face_with_smiling_eyes:

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.

1 Like

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:

Screen Shot 2022-04-13 at 9.40.46 PM

  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:
Screen Shot 2022-04-13 at 10.18.01 PM
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’
Screen Shot 2022-04-13 at 10.29.29 PM

1 Like

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.

image

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.

So we are done with our ESC/POS implementation :partying_face:

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.
    image
  • 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.

2 Likes

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 :astonished: Also make sure to replace \ with \\ before the other ones because otherwise you’re replacing what you just put in there :sweat_smile:

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!

1 Like

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

[image]