Overlay customization

[blinkid]

Overlay customization

[Cerovec]

Hi,

1. We don't have an API to specify the message. Currently the only possible way is to set it up on the native side. On iOS, you can do that with the following:

This tooltip is part of PPIdCardOverlaySubview. You will need to create custom overlay view controller as a subclass of PPIDCardOverlayViewController and in viewDidLoad method set your text: self.idCardSubview.tooltipLabel.text = @"Example". After that, scanningViewController is initialised like this:

OverlayViewController *ovc = [[OverlayViewController alloc] init];    

/** Create new scanning view controller */
UIViewController<PPScanningViewController> *scanningViewController =
    [PPViewControllerFactory cameraViewControllerWithDelegate:self 
           overlayViewController:ovc coordinator:coordinator error:nil]

2. Also, on the native side, you can customize the whole UI. If the only thing you want to customize is the ratio of the box, you can do that very similarily to the above

self.idCardSubview.tooltipLabel.viewfinderWidthToHeightRatio = 85.60 / 53.98

We hope it helps!

Jurica.

[lirfu]

Hi @ghensley,

feel free to ask if you need more assistance.
If this sovles your issue, make sure you close it.
Thanks!

[ghensley]

Thanks guys. I've done custom iOS overlay in the past, and it wasn't too bad of a process, but Android gave me some major headaches. Was really imagining similar behavior to what I did here, but supporting Android as well.

I realize that's a bit of a stretch, but it seems like a very useful feature to implement for people looking for an intermediate between writing their own overlay and the stock one.

[jcular]

Closed due to inactivity.

[wibb36]

Any news on customizing the overlay camera with Javascript instead of doing it natively?

[i1E]

Hi @wibb36,

we have exposed settings for changing strings in camera overlay to JS API:
https://github.com/BlinkID/blinkid-react-native/blob/master/BlinkID/overlays/blinkidOverlays.js#L17

[YoniCosta]

@i1E Hi,
still no customizing the overlay with react-native ?
having a bit of problems building native overlays.

[SandraZiv]

Hi @YoniCosta

unfortunately, we still don't support custom UI in JS, but it can be done manually by editing plugin source in native and then wrapping the new code in JS.

We plan to enable custom UI at some point, but it is not in our focus currently.

Best regards,
Sandra

[YoniCosta]

Hi @SandraKuzmic ,
Thank you for the fast response.
is there a another guide besides those ones for the implementation of native custom ui overlays ?
https://github.com/BlinkID/blinkid-android#recognizerRunnerView
https://github.com/BlinkID/blinkid-ios#recognizerRunnerViewController
Maybe a video tutorial? (looked for one all over your youtube channel with out any successes)

[SandraZiv]

Hi @YoniCosta

we don't have any additional resources/tutorials. If you have any specific questions about implementation we can assist you with that.

Best regards,
Sandra

EDIT: You can also check native sample for Android and iOS.