How to design QR Scan focus screen with FMX

[Bob Baudewyns 3]

Hi,

 

I'm developing an application that needs to scan QR Code.

For the GUI design, I'd like to provide the usual scan focus screen with a transparent square inside a rectangle (the screen) like the attached mock-up.

I already tried different approaches but not very successful.

 

Any idea how could I design this with FMX ?

 

Thanks   

[Rollo62 536]

What OS are you looking for ?

 

Generally you can check this:

https://github.com/andrea-magni/ScannerMApp

https://github.com/flydev-fr/ZXing.Delphi.Demo

Winsoft "Camera for IOS", "Camera for Android" + "OBR ML Library for Android".

https://delphiworlds.com/2020/11/native-camera-ios-android/

 

Generally I would try to use the bulit-in system barcode scanner, not trying to create my own one.

 

 

[Bob Baudewyns 3]

Hi,

Thanks for your feedback.

 

My app is intended for Android and iOS.

I already know all these solutions and examples. 

By the way, I am using ZXing with the standard FMX Camera because this is the same code for all platforms.

With my friend Erik from Winsoft, I need 3 libraries as mentioned by you.

But I am indeed using Winsoft's Barcode for FireMonkey to generate the QR codes 

 

My problem is not generating or scanning QR codes. This is working just fine.

It is just a matter of look & feel for the scanning screen as explained above.

 

 

[Rollo62 536]

If you have a video scanning as background, you could simply add 4 TRectangle with opacity around the center, maybe controlled by margins.

Then you have darkened frame around.

Instead of Rect you could also check a filled TPath.

Probably you can work with filter effects directly on the background image, but i think you need some kind of custom blur filter.

Edited August 21, 2021 by Rollo62

[Bob Baudewyns 3]

Thank you again Rollo62,

 

In the meantime, I did something very close in the IDE with:

- 1 TGridPanelLayout

- 4 Outer Black TRectangle with opacity 0.5

- 8 Inner Yellow TRectangle with appropriate rounded corners

 

With a TImage as background for rendering the camera, it looks Ok to me

 

 

[Rollo62 536]

That looks OK for me, I would do the same.

 

What I meant was using the TPath, with a punched-out center hole and using its Bitmap fill property with effects.

I just clicked a roughly demo together, only tested under Win32, see enclosed.

 

This is just as proof of concept, it seems to work well, but needs some refinements of course.

This would allow to use any masked path, but of course requires a bitmap copy right now.

 

 

T418_ImgHole_001.zip

Edited August 23, 2021 by Rollo62

[Bob Baudewyns 3]

Hey, well done !

Thanks