A new panel for the barcode scanner

7 Jan 2022Engineering5 min read

Scanning a barcode in Hargapedia now opens a panel you can drag up to see more prices, while keeping the product details and action buttons in place.

When we added barcode scanning to Hargapedia, we gave it a panel that slides up over the camera whenever it recognises a product. The panel shows what you’ve scanned, where you can buy it and a couple of buttons for what to do next.

This week’s update replaces that panel with one you can pull up to see more prices, without leaving the scanner.

I designed the new panel and we built it using Gorhom’s Bottom Sheet library. We’ve also made a few changes to the scanner itself, including an upgrade to the camera library.

Three heights

The panel opens at 40% of the screen’s height, leaving enough of the camera visible behind it. Drag it upwards and it stops at 70%, then at 89%, where it takes up nearly the whole screen.

Pull it down and the panel closes, returning you to the camera so you can scan another product.

The product photo and name stay at the top of the panel. Underneath is a list of prices from up to ten retailers, with each row showing the retailer’s logo, price and a Buy Now button.

Tapping Buy Now opens the retailer’s page. If the link can’t be opened, the app takes you to the product page instead.

The price list scrolls independently inside the panel, but the two main action buttons stay at the bottom. Track Price adds the product to your Price Tracker, while Show More opens the full product page.

Those buttons remain visible whichever height you’ve dragged the panel to, even when you’re scrolling through the prices. Track Price also disappears if you’ve already added the product to your list.

The Scan screen with a product barcode inside a wide rectangular frame with a yellow scan line. A white panel covers the bottom 40% of the screen: an arrow-shaped handle pointing up, the product photo and the name 100Plus Active Replenish Isotonic 1lit, a Giant on HappyFresh row at RM2.34 with a yellow BUY NOW! button, the top of an Aeon on HappyFresh row at RM2.42, and TRACK PRICE and SHOW MORE buttons pinned at the bottom — The panel at its lowest and highest positions, with more retailer prices visible when expanded. The action buttons stay at the bottom.

The same panel pulled up to nearly full height under the Scan header, with the handle pointing down and square top corners. Eight retailer rows with their logos, Giant and Aeon on HappyFresh, Potboy, TMG Mart on Shopee, F&N on Lazada, Lotus's Online, Shopee Mart and F&N Life, from RM2.34 to RM3.00, each with a BUY NOW! button, the line Tap Show More for more prices, and the TRACK PRICE and SHOW MORE buttons still at the bottom — The panel at its lowest and highest positions, with more retailer prices visible when expanded. The action buttons stay at the bottom.

Making the handle follow your finger

I wanted the handle at the top of the panel to indicate which way it could move.

Instead of a single horizontal bar, I used two short bars that change their angle as the panel moves.

At 40%, they form an arrow pointing upwards. At the middle stop they straighten into a line, and at the highest position they form a downward arrow.

The panel’s top corners change too. They’re rounded when the panel is lower down and gradually become square as it approaches full height.

Both effects follow the dragging movement, rather than waiting until the panel has settled at one of its three stops.

Gorhom’s Bottom Sheet handles the dragging and snap points, so we didn’t have to build the entire gesture interaction ourselves.

We initially put the panel together on a sample screen, with fixed product data and no camera. Once the layout, scrolling and dragging worked there, we moved it into the barcode scanner.

Changes to the scanner

The screen behind the panel has had some work too.

We’ve upgraded the camera library, and barcode detection now uses Google’s ML Kit. The scanner only responds to product barcodes, the kind printed on packaging.

We also changed the scanning frame from a square to a wide rectangle, closer to the shape of the barcodes people will be pointing their cameras at.

While the app looks up a barcode, a spinner appears in the header. If the code doesn’t match anything in our database, a short message tells you that no products were found.

The scan button beside the search bar on the home screen now uses a barcode icon as well.

Update, February 2022

We’ve made a few more changes to how the panel loads and how the scanner handles repeated scans.

Previously, scanning a barcode fetched the product and all its prices in a single request. The panel couldn’t open until everything had come back.

Now we fetch the product first and open the panel as soon as we have its name and photo. The prices are requested separately and appear inside the panel when they’re ready, with a loading indicator in the meantime.

We’ve also moved control over which retailers appear in the panel to the server. The team can choose them by chain, retailer, sales channel or type of price.

There were two scanning problems to fix as well.

Sometimes the scanner wouldn’t recognise a second barcode after the panel had been closed, because the screen hadn’t fully reset.

The other problem was duplicate scans. The camera can report the same barcode many times a second, and those events can arrive faster than React updates the component’s state. That meant another scan could get through before the screen knew it was already processing one.

We changed that part to use a ref, which updates immediately without waiting for a React render. Once a scan starts, the ref blocks subsequent events until the scanner is ready again.

With that in place, we’ve also reduced the delay before accepting another scan from two seconds to half a second.