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).
11 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
Hey Brian, when creating your point of sale did you ever figure out how to automatically add a line item when a barcode is scanned? I understand how to do so if they were to scan within an input and then press enter, but I’d really like to make it so that if they were to scan an item at any point (when on the checkout page) it would automatically find the product and create a line item with it and add the line item to the cart. Any thoughts?
Yes, I did! It’s very simple, too:
I have an input on the screen and the software regularly sets the focus back to that input when you’re not actively doing anything else at the moment. So, since the input is almost always focused and a barcode scanner is basically just a keyboard that types really fast and presses Enter afterwards, then it’s pretty simple to search for an item with a matching SKU/UPC/whatever and create a line item when the barcode is scanned.
I’m sure I could build something more advanced, and I might in the future because this solution isn’t bulletproof, but the simple solution allowed me to add the feature quickly and it works!
The desktop point-of-sale software I used to resell as a dealer before building my own cloud-based solution did this: The ONLY text input on the register screen was the barcode input (everything else was done with on-screen buttons or keyboard shortcuts using ALT) and so anything typed at any point in time would by default go to that input.
A thought occurs to me, though: Most barcode scanners can be programmed to add prefix or suffix characters when you scan. You could use a keyboard shortcut plugin or build your own so that when a special sequence of characters is entered then it would trigger the keyboard shortcut. You’d need to reprogram every barcode scanner, though, but if you’re only setting up one system or it’s for a business that you’re personally involved in then this would be easy to do and accomplish your goal of scanning a barcode at ANY time without an input field required.
Great idea, thank you for being a trailblazer in the bubble community!
1 Like
Working on another solution that runs a workflow when a condition is true, the condition is essentially “No input is focused”. The only problem is I’m unable to detect when inputs are focused inside of a repeating group, have you come across anything to solve this?
There are a number of plugins for repeating groups that may be helpful to you. I don’t have a recommendation on which is the best one for this purpose and this may be better suited to its own forum topic rather than this one about weight scale connectivity.
1 Like
Hello @BrianHenderson can you make a complete video how to integrate weighting machine in bubble it will be very helpful
Your work is phenomenal 
Original topic started in 2021. If you want to continue this discussion, please start a new topic
