Close QR Code Scanner After 'X' Amount of Time

Hi there,

I’m building a journey tracking and ticket scanning app to log journeys and scanned tickets to our backend. Our backend is all set up and working and I’m able to log data from the app to the backend absolutely fine.

The functionality I’m working on is as follows:

  1. On page 1, press ‘Scan Tickets’ button which navigates to page 2 (Working)
  2. When page 2 mounts, open the QR code scanner (Working)
  3. When the QR code scanner scans a ticket, post data to our backend API and then open a valid / invalid page, let’s call it page 3 (Working)
  4. After the valid / invalid page has been open for 2 seconds, navigate back to page 2 (which then re-opens the QR code scanner as per step 2 above (Working)

Here’s the bit I’m struggling with…

  1. If the QR code scanner has been open for longer than 15 seconds without having scanned a QR code ticket, close the QR code scanner and navigate back to Page 1 (Not Working)

The reason I want it like this, is that I don’t want the bus driver to have to have to navigate away from the camera while driving, and I want to navigate away from the camera after 15 seconds to conserve battery. The driver can then press the 'Scan Tickets button again at the next bus stop.

I’ve tried the following:

  • Setting an app variable logging the time that page 2 mounts
  • Setting a delay for 15 seconds from the ‘Page Mounts’ event
  • Piping the delay to a conditional logic flow which compares NOW() to the timestamp of the last scan (also set in an app variable)
  • If true, navigate back to page 1

I think the problem is that when the QR code scanner opens, it probably exists as it’s own page on the navigation stack and only triggers events on scanning a QR code, pressing cancel or throwing an error, which means none of the logic I’ve tried ever gets touched.

I would love to know if what I want to achieve is possible and any help anyone can offer on this would be greatly appreciated!

Hi!

You’ve done extensive research into the subject, that’s awesome. Unfortunately, as you’ve found, I’m not sure if there is a way to implement this feature at the moment.

Something you might try is if moving the logic for the delay and navigating back thing to the global canvas would allow you to navigate back even when the QR scanner is open :thinking: Not sure it will work, but it’s worth a try if you haven’t already!

Hi @Mevi,

Thanks for getting back on this - I did try but no joy I’m afraid. I think we need the QR Code Scanner component to be available somehow (via Receive Event and Trigger Event perhaps?) in order to get this working.

Thought I’d add some notes to this thread having just built a QR code-based productivity tool for internal use. The QR scanner is good, but can be really frustrating if you don’t do things just right.

After a few hours of frustration, we found that the following things produced very reliable results.

  1. When scanning, the QR code should be centered in the scanning area (there are no cross-hairs or alignment target)

  2. The QR code should be oriented vertically, and “right side up” - the scanner does not deal with rotation or orientation very well - so if the QR code is presented at an angle to the scanner, it doesn’t appear to cope with that beyond more than a couple of degrees. I don’t know that QR codes have an “up” side, but the way the codes are printed on our chips, presenting them to the scanner “the right way up” produced an almost immediate scan.

  3. Too close, and it won’t scan; too far and it won’t scan - present the code to the scanner at roughly arms-length distance, and deliberately and slowly move the camera closer to the code. When everything is just right, it will scan.

  4. Too much light, and it won’t scan - ambient daylight is fine. Bright light can glare, and again it won’t scan.

  5. Have a good camera - we tried using a really cheap device (2mp camera) and while the pixels are enough, the focal length wouldn’t allow the code to be big enough for the scanner to recognize while still staying in focus. We used a reasonably recent iphone instead, and that worked fine.

2 Likes

Thanks @Chris_Ice, great findings. We share the same experience, added my feedback on your points. :+1:

The QR code should be oriented vertically, and “right side up” - the scanner does not deal with rotation or orientation very well - so if the QR code is presented at an angle to the scanner, it doesn’t appear to cope with that beyond more than a couple of degrees. I don’t know that QR codes have an “up” side, but the way the codes are printed on our chips, presenting them to the scanner “the right way up” produced an almost immediate scan.

I can also confirm we are having issues with scanning speed due to varying the orientation of the QR code. This is odd as QR codes have a 4th ‘notch’ indented from the ‘bottom right’ corner to give the reader its orientation. I suspect the image processing algorithm built in to the scanner to transform ‘mis-aligned’ scans slows things down…

Too close, and it won’t scan; too far and it won’t scan - present the code to the scanner at roughly arms-length distance, and deliberately and slowly move the camera closer to the code. When everything is just right, it will scan.

I can also confirm this is the case with our testing. Especially on cheaper phones where the autofocus keeps range-finding in-between scans.

Too much light, and it won’t scan - ambient daylight is fine. Bright light can glare, and again it won’t scan.

Can also confirm this too.

Have a good camera - we tried using a really cheap device (2mp camera) and while the pixels are enough, the focal length wouldn’t allow the code to be big enough for the scanner to recognize while still staying in focus. We used a reasonably recent iphone instead, and that worked fine.

This is the most frustrating one for us as we need our app to work on lowest common denominator devices. High-end iPhones and Androids do not suffer from this but sadly, we cannot expect our users to all have these high-end phones :frowning:

2 Likes

If possible, make the QRs big and make sure that they’re always presented right way up…hope for the best. Always provide an option for manual entry in case the scan doesn’t work. :confused:

There are other QR scanners out there - unclear if/how they could be tested and integrated in your application within the AG framework.

Hey, crazy idea - maybe use the camera simply to take a photo - and then http POST that photo to an online QR decoder service?

As a test, Zebra Crossing has this service:

https://zxing.org/w/decode.jspx

[ hm: unintended side-effect is that the flow function seems to add photos to the user’s photo library on their local filesystem - this may or may not pose a clean-up issue later ]

It’s not a bad shout, thanks for the idea!

However, our use case is quite specific - scanning tickets as people board the bus, so we are constrained by keeping the scan-to-scan time as low as possible. The round time trip to an external API is likely to be slower I would suspect.

We did more testing today and the quality of phone is really the limiting factor for this - I think we could make more optimisations if we were building a native app from scratch, of course, but for now this is what we have :slight_smile:

@Chris_Ice We are aware the QR code scanner could be improved, but some relief for you will be when we finish support for third party plugins, which will enable you to find/develop a scanner that works as best it can :slight_smile: We are currently working on this feature, so hopefully it won’t take much longer for it to be out. It will, however, still take some weeks at the very least.

@Ben_Morris actually, I found a way to do what you want! The main point is that you should move the logic for the QR code to the global canvas, which is always open and such can handle all you need (use receive event (configured to trigger from trigger event) on the global canvas and trigger event in the button (configured to trigger the specific receive event node on global canvas)). Here’s an example:

To complete this logic, add to the page focused event of the page where you open the qr code scanner that it sets the qr_scanner_open to false.

1 Like