Best way to make ionic2 app completely transparent? - css

Question

I recently came across a fairly new cordova plugin called cordova-plugin-qrscanner (https://github.com/bitpay/cordova-plugin-qrscanner). I have been using other QR Scanners before, but those simply overlay some kind of native camera UI until the QR has been scanned and then return back to the app.
However, the approach of this plugin is a bit different. The camera is actually shown "behind" your app and you have to make everything transparent in order to see it.
This is very interesting because you can then easily add custom overlays with HTML and CSS. However, I am not quite sure what the best approach is here.
After adding the plugin and simply calling QRScanner.scan(displayContents); you can't see anything, but the scanner is already running in the background. I then recursively removed any styles (see simplest way to remove all the styles in a page) from the app and set the background-color to transparent to see if it worked. It did, but I could obviously still see the text that was displayed before.
I guess I could create and push a new page with my overlay on it, set the background-color to transparent and then navigate back once the code has been scanned. But this feels really hacky.
Does anyone have a better solution for this?
For example, is there a way to "swap" the whole visible part of the app with the overlay and restore the state after the code has been scanned?
Thanks for your help.
EDIT:
It's not the same plugin, but this article is relevant to my question.
http://www.joshmorony.com/ionic-go-create-a-pokemon-go-style-interface-in-ionic-2/
Applying the css styles works, but again, the rest of the app is not usable then.

Answer 1

#Andreas I had the some problem a few weeks ago. Here is how I fixed it:
1) First of all, create a class called lowOpacity on your theme/variables.scss, it has to be global, if you create it in the page's scss adding it dynamically won't work:
.lowOpacity {
opacity: 0;
}
2) When you show the qrScanner, you should apply the class to the ion-app element, and optionally register a backbutton action:
this.qrScanner.show().then(()=>{
let unregister = this.platform.registerBackButtonAction(()=>{
this.closeQrScanner();
unregister();
});
window.document.querySelector('ion-app').classList.add('lowOpacity');
});
3) Remeber to remove the class after the qrScanner scanned something ot was closed:
closeQrScanner() {
this.qrScanner.hide().then(()=>{
window.document.querySelector('ion-app').classList.remove('lowOpacity');
}); // hide camera preview
}
ngOnDestroy() {
this.closeQrScanner();
}
Hope it helps

Answer 2

I wouldn't make the app transparent, since I don't see the point of that.
Instead you would just show the contents of the camera in a div in your page, and layer other HTML elements on top of that using a higher z-index than the element containing the camera image.

Answer 3

As #vrijdenker said you should display the camera content to the right level and do not weirdly hack the CSS.
To do that you can remote debug your app to localise the camera container and apply some CSS on it to modify the z-index / display / etc.
Remote debug on Android:
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
Remote debug on iOS:
https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
You can do that on real device or on simulator