bitpay / cordova-plugin-qrscanner

A fast, energy efficient, highly-configurable QR code scanner for Cordova apps and the browser.
MIT License
568 stars 772 forks source link

Automatically let the view transparent #117

Closed manoel-freitas closed 6 years ago

manoel-freitas commented 6 years ago

The plugin works very well, but you have to manually make a CSS code to the html of the ion-content of the page and the ion-app, transparent. as i mentioned in this thread of the forum.

The problem is in the show() method of the plugin, where the method let the webview transparent, but not the html of the ionic. and in particular there are these to classes that let the background color of the app set by #fff, so i resolved this adding a class with set the background color as transparent as important. and add to the classList of the ion-content and ion-app. and in the ion-app on the ionViewWillLeave lifecycle removing the class of the classList. because if continue with this class, all the app will be with a background transparent. and if you do not call the hide() what set the webview to a white color all the app will be transparent with the camera open.

So. this issue is to ask the possibility of the plugin do this automatically.

janpio commented 6 years ago

This is about: https://ionicframework.com/docs/native/qr-scanner/ Discussion and code samples are here: https://forum.ionicframework.com/t/ionic-qr-code-scan-not-opening-camera-for-ios-and-android-devices/101512

Maybe the show method (and similar) could be changed to automatically change the CSS. If this is better done individually by each user, it should be added to the docs and made clear that manual work is required.

manoel-freitas commented 6 years ago

@janpio maybe adding the code of the discussion, maybe a litte better of the mine. in this method https://github.com/bitpay/cordova-plugin-qrscanner/blob/0cb180ec9931dfe56348bdb3def0a9eebf4599ee/src/common/src/createQRScannerAdapter.js#L175

Can resolve the problem. What do you think ?

janpio commented 6 years ago

This is the underlying Cordova plugin - you don't want to change that. Everything that refers to Ionic would be to specific.

If at all, you want to have something like this in the Ionic Native plugin: https://github.com/ionic-team/ionic-native/blob/master/src/@ionic-native/plugins/qr-scanner/index.ts#L144

But as the plugins only wrap the Cordova plugin, I don't actually think that there should be any code changes. I would suggest a documentation change at the Ionic Native plugin that adds a good example on what code to execute to make the background transparent.

manoel-freitas commented 6 years ago

yeah, i think that too. A global sass Variable ?

ryuhhnn commented 6 years ago

I'm having trouble getting this to display, not because of the background color, but because of the opacity. The opacity is set to 1 and doesn't allow the camera to show, but if I set the opacity to 0 it shows just fine. Anybody else have this issue?

jlf123 commented 6 years ago

@ryuhhnn what element are you setting the opacity to 0?

kemmo commented 6 years ago

Thanks to @ryuhhnn. I've the same issue, and I've spent lot of time trying to fix it with the background color. At the end setting the ion-app element with "opacity:0" fix that and I can show the camera preview properly.

bitjson commented 6 years ago

Several issues with transparency are fixed in 2.6.0 🚀

If you're still having trouble, please feel free to open a new issue.