ODK Central QR code should include a white border and be on screen on mobile

1. What is the problem? Be very detailed.
It's hard to use ODK Central from a mobile device to configure others via QR code.

Two issues: the QR code is partly (landscape)or fully (portrait) off screen, so I can't scan it into another device running Collect.

Secondly, switching the mobile browser to desktop mode, I can view glances of the QR code and open the image in a new tab. Unfortunately, that image gets shown on a black background, which ODK Collect fails to recognise. Finally, saving the image and viewing it shows a white background, and bingo we can scan it.
The black background is likely an Android or browser thing, but I've been bitten so often by it that I suggest including a simple white border could fix this minor UX issue.

2. What app or server are you using and on what device and operating system? Include version numbers.

ODK Central 1.2.2
ODK Collect 2021.2.0 (latest of each at time of writing)

3. What you have you tried to fix the problem?
Complaining here.

4. What steps can we take to reproduce the problem?
See 1.

5. Anything else we should know or have? If you have a test form or screenshots or logs, attach below.

Hi @Florian_May! The QR code is an image, so it should be possible to save it using the browser. However, we've heard from others that that's not clear and that it'd be helpful for it be easier to save/download the QR code. We're not sure exactly what that'll look like, but it's definitely something we're thinking about.

Also, in general, Central is designed for wider screens, so you'll encounter issues when viewing it on a mobile device. We'd like it to be easier to use Central on a mobile device. However, that's a big project, so it's probably not a change we'll be able to make soon.

1 Like

Cheers Matt!
So would a simple white border around the QR code, but part of that image, be possible easily?

I'd love if the QR code were on a separate page instead of a modal. That would be far more accessible on mobile screens. That would also be the ideal place for other settings to include in the QR code.

Could you say more about your current workflow? :turtle: How are you configuring devices right now? We know a few different ways that QR codes can be used: a Central user can configure devices at the office; the QR code can be printed out and scanned; and the QR code can be saved using the browser, then that image file can be shared. It sounds like you're accessing Central from a mobile device away from the office. Is that right? What are the circumstances when that tends to happen?

My current workflows are:

My 90% use case is setting up devices for a new season.

  • At the start of a season, I add app users as needed to a project.
  • There is one app user per distinct turtle monitoring program.
  • For each app user, I scan the QR code off my desktop monitor into one tablet, then adjust settings for that program (while consulting with their local coordinator), then save the QR code to our internal Wiki or disseminate via email.
  • My local coordinators scan the QR code into their fleet of devices.

I could save a few steps if I could configure the settings before generating the QR code. There are some settings however that I probably need to configure locally, such as the offline map layers.

When testing and developing, I'm often offline and have only my mobile and a tablet with me.

  • My mobile runs my password manager and can easily log into my ODK Central instances.
  • The tablet then scans the QR code off the mobile screen.
  • I had to save the QR code as a file, then open it, pinch it smaller than fullscreen with one hand, while scanning it with the tablet in the other hand. Having twins definitely helps with doing three things with two hands, but I'd argue this could be easier.
  • Now that we can have multiple projects, scanning QR codes to and fro will likely decrease. I can have all testing projects right next to my production projects on the same device, which is great.

When holding a workshop, I was caught out by the QR code image on a black presentation slide - devices couldn't scan it. I had to break out of the presentation and display the QR code on a white background.

Having said that, the missing white border has never held me back, it's just a stumbling block.
Quick fixes:

  • Make ODK Collect be able to scan QR codes with black borders? This also caught me out when I tried to scan a white barcode off a black sensor. The barcode scanner absolutely refused to scan it.
  • Include a slim white border in the generated QR code?

Thank you, @Florian_May! It's very helpful to hear more about your workflow.

We definitely want to make QR codes in Central more customizable so that most settings can be configured in Central.

We're also thinking about including additional information in the QR code image, for example, the App User name. Doing so would change how we generate the image. But however that ends up working technically, I imagine we'd be able to give the image a white border. :white_square_button:

I'm not sure what the timeline will be for either of those changes, but we're definitely thinking about how to improve the experience around QR codes!

1 Like

Thanks Matt! A simple white border would fix those minor niggles nicely, but there's no urgency. Bonus points for added info! Much easier to tell 20 QR code images apart this way.

1 Like