thegnuu
commented
2 years ago Unfortunately you have not pushed your android folder, so I cannot see exactly what is going on there. But I changed a few files in your branch and it works on my devices. I will just post the changes here, you can simply replace those files:
global.scss
/*
* App Global CSS
* ----------------------------------------------------------------------------
* Put style rules here that you want to apply globally. These styles are for
* the entire app and not just one component. Additionally, this file can be
* used as an entry point to import other CSS/Sass files to be included in the
* output CSS.
* For more information on global stylesheets, visit the documentation:
* https://ionicframework.com/docs/layout/global-stylesheets
*/
/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";
/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import "~@ionic/angular/css/display.css";
/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";
body.scanner-active {
--background: transparent;
--ion-background-color: transparent;
}home.page.ts
import { Component } from '@angular/core';
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor() {}
async startScan() {
const root = document.querySelector(':root') as HTMLElement;
BarcodeScanner.hideBackground();
// Additional ionic styling stuff
document.querySelector('body').classList.add('scanner-active');
await BarcodeScanner.checkPermission({ force: true });
const result = await BarcodeScanner.startScan();
// if the result has content
if (result.hasContent) {
console.log(result.content); // log the raw scanned content
}
document.querySelector('body').classList.remove('scanner-active');
}
async toggleTorch() {
await BarcodeScanner.toggleTorch();
}
}home.page.html
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title> Blank </ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Blank</ion-title>
</ion-toolbar>
</ion-header>
<div id="container">
<ion-button (click)="startScan()">start</ion-button>
<ion-button (click)="toggleTorch()">torch</ion-button>
</div>
</ion-content>This should work on your side as well, please test it out :) It should as well point out how to handle the css variables used in ionic if you want to keep your ionic UI....
salazarbarrera
anusha-kaparapu
Describe the bug I can't turn on the torch despite I can effectively see its state changed by logging the output of BarcodeScanner.getTorchState(). I'm not sure if I'm doing something wrong or if the plug-in fails with my setup.
You can see an example project in this branch.
To Reproduce
Clone the example repo above (this one) and checkout the flashligthSupport branch.
Connect the device, execute
$ ionic cap run androidand select the target device. Alternatively you can compile, install and run it with Android Studio after executing$ ionic cap add android.After seeing the splash screen, you will see a "...Scanner Interface" div above the captured image from the camera. It will scan, but the flashlight won't work despite the program calls enableTorch().
Expected behavior The torch should work. Alternatively, getTorchState() should acknowledge that enableTorch() didn't change the state of the flashlight.
Version v3.0.0
Smartphone
Additional context
This issue sort of takes off from where issue #156 was left.