@vitonimal wrote:
Hello! I was wondering if there was a replacement for ionic-audio for ionic 4 + Capacitor. Is Native Audio the way to go? https://ionicframework.com/docs/native/native-audio. I see that it is a Cordova plugin though, but it seems compatible.
Thanks!
Posts: 2
Participants: 1
@pabloo87 wrote:
Hi, the other day was a bit bored so i made this effect to make the background blur while showing the menu and i wanted to share it with the community.
It’s a subtle effect, i don’t know if it can be appreciated in a low resolution gif, sorry.Anyways, in case it fits your project you can follow this steps:
Generate a new directive: ionic generate directive blur-menu
Then paste this code to blur-menu-directive.ts
import { Directive, ElementRef, HostListener, Input } from '@angular/core'; import { Platform } from '@ionic/angular'; @Directive({ selector: '[appBlurMenu]' }) export class BlurMenuDirective { @Input('appBlurMenu') blurLevel; constructor(private el: ElementRef, private platform: Platform) { const platforms = platform.platforms(); const applePlatforms = ['ios', 'iphone', 'ipad']; const apple = applePlatforms.some(p => platforms.includes(p)) ? true : false; el.nativeElement.style.transition = apple ? '0.4s backdrop-filter' : '0.3s backdrop-filter'; } @HostListener('ionWillOpen') ionWillOpen() { this.setBackdropFilter(`blur(${this.blurLevel.toString() || '2'}px)`); } @HostListener('ionWillClose') ionWillClose() { this.setBackdropFilter('None'); } setBackdropFilter(value) { this.el.nativeElement.style.backdropFilter = value; } }Add the appBlurMenu directive to ion-menu like this
<ion-menu contentId="main-content" type="overlay" appBlurMenu>You may also adjust the effect level like this: (default value is 2)
<ion-menu contentId="main-content" type="overlay" appBlurMenu="5">It’s a very simple code but i hope some of you may use it!
Posts: 1
Participants: 1
@Rashadab wrote:
I recently ran in to this problem out of no where. Every thing was working perfectly fine before, but recently I am not able to subscribe to a topic. I cant see the topics name on the cloud messaging portal.
The weird part is that I already have the plugin installed.
I ran the following commands.ionic cordova plugin add cordova-plugin-firebasex npm install @ionic-native/firebase-xHere is a part of my cordova plugin list
ordova-plugin-firebasex 9.0.2-cli "Google Firebase Plugin" cordova-plugin-googlemaps 2.7.0-20200330-2338 "cordova-plugin-googlemaps" cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard" cordova-plugin-ionic-webview 4.1.1 "cordova-plugin-ionic-webview" cordova-plugin-market 1.2.0 "Market" cordova-plugin-nativestorage 2.3.2 "NativeStorage" cordova-plugin-screen-orientation 3.0.2 "Screen Orientation" cordova-plugin-splashscreen 5.0.3 "Splashscreen" cordova-plugin-statusbar 2.4.3 "StatusBar" cordova-plugin-whitelist 1.3.4 "Whitelist" cordova-plugin-x-socialsharing 5.4.7 "SocialSharing" cordova-promise-polyfill 0.0.2 "cordova-promise-polyfill"Any one familiar with this situation?
Posts: 1
Participants: 1
@nenopej wrote:
Hello all !
I have a problem with the File Opener and Document Viewer plugin using Capacitor.
It throws me the following error when building an application: package android.support.v4.content does not exist
Does anyone know what this is about? Thanks !
Posts: 1
Participants: 1
@ricardofvallejo6969 wrote:
Hi, on Android devices, using async await is not working for me. Am I the only one?
For example, getting a value from Capacitor’s Storage plugin is resolved with async await in the browser but not on AndroidUsage example:
I have a storage.service.ts with the following:
exportasyncfunctiongetStorage(key:string):Promise<any> {
const item = await Storage.get({ key: key });
if(!item.value||item.value!=='undefined') {
returnJSON.parse(item.value);
}
}And then on my page, for example:
webToken:string;asyncngOnInit() {
const token = await getStorage('token');
console.log('token', token)
}and in the “run console” on android studio I get
I/Capacitor/Console: File:http://192.168.1.4:8100/pages-login-login-module.js- Line 134 - Msg: token [object Object]
behavior on iOS:
[log] - token {“token”:“abcd”,“fetchedAt”:“2020-04-12T20:01:35.721Z”}
behaviour on ionic serve
token {token: “abcd”, fetchedAt: “2020-04-12T19:03:29.765Z”}
wrong behavior on Android
Msg: token [object Object]if I do a {{webToken | json }} on the view, I get the _isScalar, blabla objectmy capacitor version
Capacitor Doctor
Latest Dependencies:
@capacitor/cli: 2.0.1
@capacitor/core: 2.0.1
@capacitor/android: 2.0.1
@capacitor/ios: 2.0.1
Posts: 1
Participants: 1
@DevMushref wrote:
Dear Ionic community, greetings!
I wish you all the best and safety during this COVID-19 crisis!!
I am trying to build an app that does the following:
Each user who signs up in the app will have the ability to create QR Codes depending on how many he/she wants.
1 QR Code = 1 person
What’s that for? Well, in weddings, the person wants to invite only 100 people, but many of these people will bring their neighbors, friends, their 5 kids, etc…
So I want the wedding owner to use my app to create invitation cards with unique QR Codes for each person, instead of printing the card and share it via WhatsApp or whatever.
So at the entrance gate the security guy scans the QR and let the person with the QR in.
What I need is:
Is there an API that does this QR generation job for me that works JS? Angular to be exact?
Thank you.
Posts: 1
Participants: 1
@GopiRamadoss wrote:
Hi Team,
We are trying to install our Andriod app (Ionic app) into a secured Clover Payment device and it is giving below error when try to install.
"This application is attempting to load the following URL: Http://localhost. For Security reasons, non-HTTPS URLS are not allowed. "
Is it possible to run our webview in HTTPS?
Thanks in advance.
Posts: 1
Participants: 1
@lily28 wrote:
Please help me, all I want to do is create a simple accordion in ionic 5
I had created ionic accordion list by following a tutorial blog link that used widgets for creating an accordion dropdowns, Below is the link of that blog…
https://masteringionic.com/blog/2019-01-27-creating-a-simple-accordion-widget-in-ionic-4/The problem is no list appears and no error shown
This is my .html file
home.page.html<ion-header> <ion-toolbar> <ion-title> Ionic Accordion </ion-title> </ion-toolbar> </ion-header> <ion-content padding> <app-accordion *ngFor="let technology of technologies" name="{{ technology.name }}" description="{{ technology.description }}" (change)="captureName($event)"> </app-accordion> </ion-content>mi-accordion.component.html
<h2 (click)="toggleAccordion()"> {{ name }} <span *ngIf="isMenuOpen">▲</span> <span *ngIf="!isMenuOpen">▼</span> </h2> <div [ngClass]="this.isMenuOpen ? 'active' : 'inactive'"> <p>{{ description }}</p> <ion-button type="button" color="primary" fill="solid" size="default" (click)="broadcastName(name)">Console log me!</ion-button> </div>Can someone help if I am missing something? And please tell me if you need others code
Posts: 1
Participants: 1
@deathrake wrote:
Hello Guys,
i am new to ionic and was figuring out a way to run a piece of code in my app even after users kills it just like Avg antivirus. i tried background mode plugin from katzer it works but when users kills it from memory the app stops. Do i have to write my whole app in native code in android studio ?
any suggeestions or workaround is greatly appreciated
Posts: 1
Participants: 1
@franciscocab wrote:
Hi. I need some help, I want to add an image object detection module in my application. It should detect the object in the image and tell me the name. I want to avoid using Google Vision and others like it, but create my own model and use it in the application. This is possible?
Posts: 3
Participants: 3
@benzata wrote:
I have been busting my head for a few days with the notifications.
I’ve checked all the topics on the subject, but could not resolve my problem.
When I schedule more than one notification, I receive each of them once, BUT when I click one of them, the “showAlert” triggers multiple times and I need to close multiple alerts.
Here’s my code:
constructor(private activatedRoute: ActivatedRoute, private channel: DataService, public alertController: AlertController, private plt: Platform, private LocalNotif: LocalNotifications, public actionSheetController: ActionSheetController) { this.plt.ready().then(() => { this.LocalNotif.on('click').subscribe(res => { const msg = res.data ? res.data.mydata : ''; this.showAlert(res.title, res.text, msg); }); this.LocalNotif.on('trigger').subscribe(res => { const msg = res.data ? res.data.mydata : ''; this.showAlert(res.title, res.text, res.id); }); }); } scheduleNotification(Value, Value2, Value3) { this.LocalNotif.schedule({ id: Value3, title: Value2, text: Value2, foreground: true, led: { color: '#90EE90', on: 500, off: 500 }, smallIcon: 'res://icontransparent.png', icon: 'file://assets/icon/icon-big.png', sound: 'file://assets/Sounds/me-too.mp3', data: { mydata: 'Hidden message 1'}, trigger: { at: new Date(Value), count: 1} }); console.log(new Date(Value)); } scheduleNotification2(Value, Value2, Value3) { this.LocalNotif.schedule({ id: Value3, title: Value2, text: Value2, foreground: true, led: { color: '#90EE90', on: 500, off: 500 }, smallIcon: 'res://icontransparent.png', icon: 'file://assets/icon/icon-big.png', sound: 'file://assets/Sounds/me-too.mp3', data: { mydata: 'Hidden message 2'}, trigger: { at: new Date (new Date(Value).getTime() - 900000), count: 1} }); console.log(new Date(Value).getTime()); } showAlert(head, sub, msg) { this.alertController.create({ header: head, subHeader: sub, message: msg, buttons: ['OK'], }).then(alert => alert.present()); }I would be extremely grateful for any ideas!
Posts: 1
Participants: 1
@betty0579 wrote:
I want to create a custom keyboard. I was figured out to show keyboard settings via "open native settings " .
But I don’t have any idea what I have to do to show my app on this system keyboard list.
It seems I need to install my app as a system app and need the permission "WRITE_SECURE_SETTINGS " but I don’t know about the workflow.
Thanks for your help.
Posts: 1
Participants: 1
@XSfera wrote:
Good afternoon.
I need to implement a different set of pod libraries depending on the plugin settings.
For example when enabling authorization in addition and with Google
“plugins”: {
“CapacitorFirebaseAuth”: {
“providers”: [
“phone”,
“google.com”
]
}then connect
pod 'CapacitorFirebaseAuth/social‘, :path => ‘…/…/node_modules/capacitor-firebase-auth’if the set is without Google for example
“plugins”: {
“CapacitorFirebaseAuth”: {
“providers”: [
“phone”
]
}the standard way
pod 'CapacitorFirebaseAuth‘, :path => ‘…/…/node_modules/capacitor-firebase-auth’How can this be implemented? Maybe there are some hooks for additional edits to the podfile?
Posts: 1
Participants: 1
@Rajasekhar123 wrote:
**is it possible google plus login without firebase ** I have web client id which is giiven by the client by i’m trying to google plus login i’m getting error ( only showing 10).
Posts: 1
Participants: 1
@varunparmar wrote:
How do i get rid of this blue outline around the button? It only shows when the button is pressed
Posts: 1
Participants: 1
@slavikzdes wrote:
Hi People,
In my ionic-v3 app I use Admob free plugin to show google ads on IOS and Android platform. However, this plugin doesn’t show the google ads on Browser Platform. I also tried to add Google Adsense but it also doesn’t work.
Could you please help me to insert google ads into my app and show it on Browser platform. This is very important!
Thank you in advance!!
Posts: 1
Participants: 1
@JosephOR wrote:
Hey folks,
bit of a noob here so bare with me. Im having trouble running the app in Xcode, when it opens in Xcode there are many errors, mainly relating to capacitor, and im not sure if i’ve done something wrong.
steps ive taken (all using ionic cli)
ionic start
i went through all the options, and added capacitor at this point.
ionic serve
all works fine
ionic build
npx cap add ios
ads ios folder to project
npx cap open ios
then Xcode opens, and i see all the errors (app wont ‘play’)So all i have done in the project is made a new page, and added a few components. I have tried a few steps i found here and elsewhere, such as install cocopods etc…but after about 7 attempts I always end up back at the same place.
ive added a screenshot of how the project looks when it opens in Xcode. Any help here would be great as at this point im clueless as tho where the problem might even be happening!
Posts: 1
Participants: 1
@Pharao2k wrote:
Hey,
I’m currently evaluating Ionic as a basis for an app that should be distributed as an Android and iOS app as well as a Web-based PWA. As a foundation Ionic v5 with Angular is being used.I noticed that during compilation there are (in my case) more than 120+ Javascript files being generated (numbered from 1 to 122). When compiling it as a native app this is probably irrelevant as they are local anyway, but when deploying them as a PWA this will involve a LOT of requests (of mostly 1-5 KB) to show a rather small-ish application. I especially noticed it during test runs of my app via the ngrok tunnel, as this easily reaches the max connection limit due to a lot of initial requests.
Is there a supported way to package those files into just a few combined JS files? There are the usual helper tools for this, but I assume that those will not be Ionic-compatible.
Thanks!
Posts: 1
Participants: 1
@Pratikjaiswa15 wrote:
I am trying to use firebase phone auth in ionic 4 with invisible Recaptcha. I have set ReCaptcha properties to window object. But still getting the following error
TypeError: Cannot read property ‘RecaptchaVerifier’ of undefined
What has gone wrong? Thank you in advance
window.service.ts
get windowRef(){ return window; }page.ts
constructor(public win :WindowService){} ngOnInit() { this.windowRef = this.win.windowRef; this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', { 'size': 'invisible', // error on this line }); } send(){ const appVerifier = this.windowRef.recaptchaVerifier; this.afauth.signInWithPhoneNumber("+XXXXXXXXXXXX", appVerifier).then(function (success) { // code sent }).catch(err =>{console.log(err}) }.html
<div id="recaptcha-container"></div>Attempt 2
this.recaptchaVerifier =new firebase.auth.RecaptchaVerifier('sign-in-button', { 'size': 'invisible', // same error });
Posts: 1
Participants: 1
Capacitor Doctor 
