Najlepszy sposób, aby aplikacja ionic2 była całkowicie przezroczysta?

Question

Niedawno natknąłem się na całkiem nową wtyczkę cordova o nazwie cordova-plugin-qrscanner (https://github.com/bitpay/cordova-plugin-qrscanner). Używam już wcześniej innych skanerów QR, ale te po prostu nakładają się na jakiś rodzimy interfejs kamery, dopóki QR nie zostanie zeskanowany, a następnie wróci do aplikacji.

Jednak podejście do tej wtyczki jest nieco inne. Kamera jest pokazywana "za" Twoją aplikacją i musisz zrobić wszystko przezroczyście, aby ją zobaczyć.

Jest to bardzo interesujące, ponieważ można wtedy łatwo dodać niestandardowe nakładki za pomocą HTML i CSS. Jednak nie jestem do końca pewien, jakie jest najlepsze podejście.

Po dodaniu wtyczki i po prostu wywołaniu QRScanner.scan(displayContents); nic nie widać, ale skaner działa już w tle. Następnie rekurencyjnie usunąłem z aplikacji wszelkie style (patrz simplest way to remove all the styles in a page) i ustawiłem kolor tła na przezroczysty, aby zobaczyć, czy zadziałało. Tak, ale oczywiście nadal widziałem tekst, który był wyświetlany wcześniej.

Sądzę, że mógłbym utworzyć i wypchnąć nową stronę z moją nakładką, ustawić kolor tła jako przezroczysty, a następnie przejść wstecz po zeskanowaniu kodu. Ale czuje się naprawdę beznadziejnie.

Czy ktoś ma lepsze rozwiązanie?
Czy istnieje na przykład sposób "zamiany" całej widocznej części aplikacji z nakładką i przywrócenia stanu po zeskanowaniu kodu?

Dzięki za pomoc.

EDIT:

To nie to samo, wtyczki, ale ten artykuł dotyczy moje pytanie.

http://www.joshmorony.com/ionic-go-create-a-pokemon-go-style-interface-in-ionic-2/

Stosowanie styli css działa, ale znowu, reszta aplikacji nie jest użyteczny wtedy.

Answer 1

Nie uczyniłbym aplikacji przejrzystą, ponieważ nie widzę sensu tego. Zamiast tego po prostu pokazywałbyś zawartość kamery w dziale na twojej stronie i warstwowałeś inne elementy HTML, używając wyższego indeksu Z niż element zawierający obraz z kamery.

Answer 2

As @vrijdenker powiedział, że powinieneś wyświetlać zawartość kamery na odpowiednim poziomie i nie dziwacznie włamać się do CSS.

Aby to zrobić można zdalnego debugowania aplikacji, aby zlokalizować kontener kamery i zastosować trochę CSS na nim zmodyfikować z-index/Wyświetl/itp

zdalnego debugowania na Androida:

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

zdalnego debugowania na iOS:

https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html

można to zrobić na prawdziwym Devi ce lub na symulatorze

Answer 3

@Andreas Miałem problem kilka tygodni temu.Oto jak to naprawiłem:

1) Najpierw utwórz klasę o nazwie lowOpacity na swoim temacie/variables.scss, musi być globalna, jeśli utworzysz ją w scss strony, to dodanie jej dynamicznie nie będzie praca:

.lowOpacity { 
    opacity: 0; 
} 

2) Kiedy pokazują qrScanner, należy zastosować klasę do elementu jon-app i opcjonalnie zarejestrować działanie BackButton:

  this.qrScanner.show().then(()=>{ 
       let unregister = this.platform.registerBackButtonAction(()=>{ 
        this.closeQrScanner(); 
        unregister(); 
       }); 
       window.document.querySelector('ion-app').classList.add('lowOpacity'); 
      }); 

3) Pamiętaj, aby usunąć klasę po skanowaniu qrScanner coś ot zostało zamknięte:

closeQrScanner() { 
    this.qrScanner.hide().then(()=>{ 
     window.document.querySelector('ion-app').classList.remove('lowOpacity'); 
    }); // hide camera preview 
} 

ngOnDestroy() { 
    this.closeQrScanner(); 
} 

Nadzieja pomaga