ESC/POS Printing

@BrianHenderson thanks for the reply! appreciate this so much :slightly_smiling_face:

In my current POS, they have a mobile application that can be downloaded in google play and we are using Android Tablet to use the Store POS interface.
I’m curious if this is feasible if we will push using bubble.io as a backend and we will use other platforms to create a mobile app and will connect to bubble.io for data sync?

Also, same with a cash drawer, does the bubble have the functionality to connect with two Bluetooth for printing receipts and printing very small stickers that include the name of the customer and the product they ordered which will be put in the cup?

@jabguiapal I’ve not done anything related to mobile apps or Bluetooth so I cannot answer your questions with any certainty. Sorry!

Thank you so much @BrianHenderson

Brian, do you have to write a plug-in in bubble io or do you just pop in some JavaScript without writing a plug-in to get jsprintmanager to work?
Thanks

Looks like a great solution

Hi @cookjeremiah, no plug-in is needed aside from the free Toolkit plugin to trigger javascript in workflows.

With the JSPrintManager software from Neodynamic then all you need to do is upload a few javascript files to your app and then put some code in an HTML container on your page. That’s it! If you basically just copy & paste some of their example code into an HTML element in Bubble then it works almost immediately.

I love that they allow you to test and build as much as you want for free, and only when you’re ready to go live in production then you’re required to buy a license from them. Extremely generous and extremely fair to see if it’s a solution that will work well for you before buying.

I can speak from experience to say their tech support service is also top notch. They were very patient with me as I figured out how to get everything to work :laughing:

Learning the ESC/POS and ZPL languages to build my receipts and labels was a fascinating process. Every time I got a receipt from a store or restaurant I was always studying it to relate to what I had figured out for my app :nerd_face: :face_with_monocle:. It was well worth the time invested though because now I can use just about any receipt printer or label printer that I want! There’s something delightfully anachronistic about injecting dynamic values from Bubble into javascript code to control an ESC/POS device. I didn’t know a lick of javascript or ESC/POS before starting this process but I’ve pieced enough of it together that I achieved my goal and launched a successful product into the hands of real live users.

6 Likes

You are a great help, thanks so much Brian. I sent you a note also on your washdryfoldpos website.

Thanks,

Jeremiah

hi,
Json is pretty easy and i have a hack for it

What is the hack you have for it?

1 Like

Hello @BrianHenderson

Thanks for sharing your experience with JSPM, it looks promising.

I started implementing JSPM but I probably messed up somewhere.

Here are the steps I followed :

  1. Install JSPrintManager Client App. This step seems alright since I am able to print ESC/POS from the testing URL

  2. Download JSPrintManager.js and uploaded all the JS files (components and scripts) in my app. I am able access the files through the AWS url. I wonder if I did something wrong with the naming ? Should the name contain the .js extension ?

  3. Add the HTML component to the page
    image

I can see the HTML on the page preview but installed printers are not retrieved

image

  1. Add the script reference to the Page HTML Header

image

  1. Add the Script Code to an HTML component on the page

So I think there is some issues with steps 4 and 5. How does the HTML component that display the checkbox and button know what to print ? Is the script suppose to be in the header ?

This is pretty new to me so any help would be appreciated :slight_smile:

Hi @pierre6

I’m glad you got it working on their testing URL - that’s great news! I’ve used it many times for a “reality check” to make sure it wasn’t my hardware that had failed somehow :grinning_face_with_smiling_eyes:

I think that you’ll want to remove the jquery script reference, since Bubble handles that already. I remember running into that issue myself back when I first got started.

I’m sure adding the script references to the header in the way you did is perfectly fine. For myself, I went to the “SEO / Metatags” tab of the Bubble editor and added my script references to the “script in the body” section. Seemed to work for me.

I found copying and pasting the code from this example page was easiest for me to get working. You’ll need to put both the “HTML Code” and “Script Code” sections together into one HTML element on a page in your Bubble app.

Once you can get that example to print, then it’s a matter of learning how to substitute Bubble dynamic values here and there, how to work with Javascript, and how the ESC/POS language works. I’m not going to pretend to have any sort deep understanding of any of it - it was more of a “hammer it out until it works” kind of process.

Oh, and one more thing for when you start subbing in Bubble dynamic values - be sure to use the Javascript escape character (the backslash \ ) before apostrophes and quotation marks (\’ and \") when printing strings or else nothing will print. I usually append the “:find and replace” function to user-submitted values that I suspect might potentially have those characters.

2 Likes

Thanks Brian,

Really appreciate your answer it’s very helpfull :slight_smile:

So I removed the script reference from the page header to add it to the SEO/metatags tab in Script in the body and removed the jquery line. I might try to put it back to the page header once I am able to print my first receipt but let’s do it that way for the moment.

I also put both HTML code and Script Code in the same HTML component but I am still not able to print from bubble.

Here is the console log:

The first error is A “meta” element with an “http-equiv” attribute whose value is “X-UA-Compatible” must have a “content” attribute with the value “IE=edge”.
It doesnt seem to matter, here is why : html - What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do? - Stack Overflow.

But it’s the second error that might be the issue, here is what i’ve found about that topic : javascript - Uncaught ReferenceError: $ is not defined? - Stack Overflow

So I think the HTML component is trying to run before the Script References i.e. before JSPM is defined.

I dont really understand what they mean by “You should put the references to the XXX scripts first.

Here is a link to the page: https://app.trouver-un-reparateur.fr/version-test/pdf_generator/Lorem%20ipsum…?debug_mode=true

And a link to the editor: Trouverunreparateur | Bubble Editor

Any idea?

PS:

Oh, and one more thing for when you start subbing in Bubble dynamic values - be sure to use the Javascript escape character (the backslash \ ) before apostrophes and quotation marks (\’ and ") when printing strings or else nothing will print. I usually append the “:find and replace” function to user-submitted values that I suspect might potentially have those characters.

Thanks for that too, I bet that will save me a lot of time :grinning_face_with_smiling_eyes:

I’m pretty sure there are more files that you need to include. I’ll check once I’m in the office today.

Edit: Or maybe not; the setup has changed a bit since I first installed it. I’ll study this a bit more before replying further.

1 Like

I found part of your problem - you need to provide the actual URL of the file for JSPrintManager.js that you uploaded. It can’t be just <script src="JSPrintManager.js"></script> Instead we’re expecting to see something that starts with https://s3.amazonaws.com/


Look up the file in your Data > File Manager tab and get its address:

I see it’s been uploaded more than once, you might want to get rid of the duplicates.

I don’t think this advice will solve all your problems but it’s a start.

Also, I’m remembering that I too had difficulties with getting the list of installed printers to work. Instead, try just directly typing in the name of your printer instead of trying to use that dropdown menu in the example code to select one.

1 Like

Thanks a lot Brian,

I do not have a printer to test it right now but tomorrow I will be able to.

I managed to print my first receipt from bubble based on the example code :partying_face:

Now it’s time to learn ESC/POS and JS languages :slight_smile:

Thanks a lot for your help !

3 Likes

Yahoo! You’re off to the races now! Receipt printers, cash drawers, label printers, and weight scales are at your command :partying_face::nerd_face::raised_hands:

2 Likes

Hi,
I’ve gone over @BrianHenderson and @pierre6 conversation several times and I just get a blank page when I load it up.
The Chrome console shows me a “$.ajax is not a function” error and I can’t seem to work out why.

Any ideas?

Thanks.

Hi @nicholas2,

Try to remove this line from the Script References.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

As Brian explained, bubble already handles jquery.

1 Like

Thanks @pierre6 that got it working.

I did see Brian’s comment regarding that but I didn’t really understand with my limited knowledge.

Thanks again!

2 Likes