Show end device QR code

[johanstokking]

Summary

Show end device QR code in Console

Why do we need this?

For testing, validation and saving to file

What is already there? What do you see now?

CLI support in progress, see #1392;

$ ttn-lw-cli device generate-qr app1 dev1 --file qr.png

What is missing? What do you want to see?

Be able to see and save QR codes in the Console

There are multiple types of QR codes that the user needs to be able to choose.

How do you propose to implement this?

I'd suggest generating the QR code in the browser, using for example qrcode.react

The question is mostly where the contents come from. We probably have a "claim QR code" that needs the claim_authentication_code that's stored in JS, but we could have other QR codes as well that need other components.

We have a few options;

1. Implement QR code generation in pkg/webui, so that it knows which fields it needs and how everything is formatted. This is essentially how the CLI works too, as it imports pkg/qrcode
2. Add rpcs to services that can generate QR codes, i.e. extend EndDeviceRegistry and JsEndDeviceRegistry with rpcs to list formats and generate QR code values. This allows the Console to discover QR codes and avoids implementing QR codes in Javascript (although it's not rocket science)

Can you do this yourself and submit a Pull Request?

@htdvisser what do you think?

Can review

[htdvisser]

I do see value in an approach where the backend generates QR codes. That way we can also make them available through our APIs, maybe even rendered into svg/png/pdf. We wouldn't have to re-implement QR rendering in every client (in case we'd ever want iOS/Android/... clients) and can just use the rendered images directly.

[johanstokking]

Sure, but in V3 there's no "the backend", especially when concerning fields are spread across multiple components.

We could:

• add a gRPC service that lists QR code formats and their required field mask
• let callers obtain the fields through the normal way (i.e. contact device registries)
• let caller provide the EndDevice (future also Gateway) with the requested field mask
• pass EndDevice to the gRPC service and let it render the QR code (return as image blob and/or [][]bool bitmap and/or text value)

[kschiffer]

I'm fine with generating the QR code on the frontend as well but I agree with @htdvisser that a backend approach would be more versatile.

[johanstokking]

It's already in progress, see here; https://github.com/TheThingsNetwork/lorawan-stack/pull/1413/files#diff-9cb528d150f69af9e93f350e10df9c7fR86

[johanstokking]

@kschiffer see https://github.com/TheThingsNetwork/lorawan-stack/blob/master/api/qrcodegenerator.proto

[johanstokking]

Adding help wanted for new hire to pick this up

[bafonins]

I think we need some input from @kschiffer for UX as it seems that the server side is ready and can generate qr codes for end devices.

[johanstokking]

Let's pick this up in a next version.

References:

• https://github.com/TheThingsIndustries/lorawan-stack-support/issues/334
• https://github.com/TheThingsIndustries/lorawan-stack/issues/2345

---

With the current API support, it should be really straightforward. The image is generated in PNG format in the desired size and only needs to be shown somewhere.

@kschiffer for ideas on where to put the image.

BTW it would be really nice to be able to save the image as well.