Lorawan-stack: Show end device QR code
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;
- 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 importspkg/qrcode - Add rpcs to services that can generate QR codes, i.e. extend
EndDeviceRegistryandJsEndDeviceRegistrywith 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
johanstokking
All 8 comments
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.
htdvisser
on 1 Oct 2019
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 alsoGateway) with the requested field mask - pass
EndDeviceto the gRPC service and let it render the QR code (return as image blob and/or[][]boolbitmap and/or text value)
johanstokking
on 1 Oct 2019
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.
kschiffer
on 4 Oct 2019
It's already in progress, see here; https://github.com/TheThingsNetwork/lorawan-stack/pull/1413/files#diff-9cb528d150f69af9e93f350e10df9c7fR86
johanstokking
on 4 Oct 2019
@kschiffer see https://github.com/TheThingsNetwork/lorawan-stack/blob/master/api/qrcodegenerator.proto
johanstokking
on 12 Nov 2019
Adding help wanted for new hire to pick this up
johanstokking
on 24 Aug 2020
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.
bafonins
on 2 Mar 2021
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.
johanstokking
on 16 Mar 2021
Related issues
ecities
·
5Comments
bafonins
·
5Comments
ZeroSum24
·
3Comments
kschiffer
·
4Comments
kschiffer
·
7Comments
Most helpful comment
Sure, but in V3 there's no "the backend", especially when concerning fields are spread across multiple components.
We could:
EndDevice(future alsoGateway) with the requested field maskEndDeviceto the gRPC service and let it render the QR code (return as image blob and/or[][]boolbitmap and/or text value)