Forum Academy Marketplace Showcase Pricing Features

How to connect a weight scale to your Bubble app

I’ve been asked via private message a few times lately about weight scale integration with Bubble for the point-of-sale system I built. I thought it might be useful to post my answer here so that I can just link people to it in case I get asked again!

There are three different methods to connect a weight scale that you might consider researching as you build your Bubble app:

The first would be to simply use a scale that has a HID mode (keyboard emulation) and a USB connection, where it appears to the computer as if it was a keyboard just typing in the number for the weight. That way, you could just use a standard Bubble text input field to get the result from the scale. This usually requires pressing a button on the scale itself to send the signal or setting up the scale to output a signal whenever an item is placed on the scale. Only certain scales offer this feature, but this is by far the simplest and quickest way to “integrate” a scale.

The next option is to use a keyboard wedge program, which is a program installed on the user’s computer that sends communications back and forth from the scale and provides a keyboard output as described before. The advantage of this is that many wedge programs allow you to set your own keyboard shortcut combo so that you can manually trigger a weight scale reading at any time with certain keypresses.

The final method is to install a program on the user’s computer that fully facilitates communication directly from your Bubble app with the weight scale connected to the user’s computer with a serial cable. This is what I use and it allows full control of the scale from within my Bubble app - I can press a button in my app and it reads the scale, and I don’t have to have any sort of text input field focused at the time, either. This provides the best user experience and the most “native” appearance of weight scale integration. However, this is by far the most complex approach and requires the most work. It may also require some Javascript code to make it work depending on your application. Two programs I recommend researching to accomplish this are JSPrintManager by Neodynamic and QZ Tray by QZ Industries. I use JSPrintManager in my app because I found it easier to learn and use. Another HUGE advantage of these programs is that they allow full native control of receipt printers, cash drawers, and label printers without needing to use the browser’s print dialog (which is why I use it for my point-of-sale cash register systems).

6 Likes

Hey @BrianHenderson !!
Thanks for your post! That was awesome!

I’m building a POS system for a customer, and she wants to connect it with the cash drawer. The system already has the print system built. Is there any other way to open the cash drawer without any of the products you’ve mentioned?

I appreciate any help you can provide!

And congrats on your system! I watched all the videos, and it’s incredible.

Thanks, buddy!

Thiago Torres

Thank you for your kind words, Thiago!

How are they controlling the printer, and is it a receipt printer? In most POS systems, the cash drawer is controlled through the receipt printer. There is a special command you send to the receipt printer and it sends a pulse through its cash drawer port.

Alternatively, most receipt printers have an option in their driver settings to allow you to kick open the drawer each time a document is printed. That’s a pretty easy way to get started if you want to keep things super simple. However, if you only want to open the drawer then you have to print out a bit of blank paper with this method.

If you’re not using a receipt printer at all, then that’s fine but you’ll still need to send a pulse to the drawer to kick it open. A web-connected relay of some sort would do the trick, although I do not have any specific recommendations on that. I personally dislike the idea of giving anything online access to the cash drawer (seems like a security risk), which is why I went the route of using JSPrintManager which is installed on the client’s device and only allows local control on the client’s computer to kick open the drawer. I’m pressing a button within my Bubble app, sure, but it’s being handled by JavaScript in their browser and being interpreted by the JSPrintManager program installed on their computer.

Long story short, for most cash drawers you need to send a +24V DC high signal for about 200 milliseconds or so on a particular pin of the cash drawer cable. It depends on your cash drawer and its specs, though, so check your drawer’s manufacturer’s documentation.

I found this article helpful to understand some of this subject when I was researching it: BeagleHardware.com - How to program a cash drawer to open

1 Like