Hi,
I have a ionic app which stores the data in sqlite database , here we want to provide a functionality where we want to upload images and associate them with the database record, like one comment can have multiple images, such type of relationship.
Can any one suggest how to achieve this in optimum way.
Thanks,
Seema Sharma
1 post - 1 participant
Is there any plugin to switch on and off front flashlight of android mobile?
Although I have developed an app for back flashlight with flashlight plugin.
Thanks 
1 post - 1 participant
I’m having issue where I present a component, A, which then presents a component B. Both components have the ModalController service injected. Component B gets dismissed via this.modalController.dismiss(). This works: component B disappears on that call to dismiss(). Then, component A gets dismissed via this.modalController.dismiss() BUT this second call to dismiss() does not work - i.e. component A remains not dismissed.
I can dismiss component A if I call dismiss() on it before presenting component B, then the dismiss of component B works and they are both dismissed in that case, but this is not what I want. I want A to present B, B to dismiss, then A to dismiss - this seems not possible right now, is that right?
Has anyone else seen such an issue? Does anyone have a solution? Any help would be much appreciated!
4 posts - 2 participants
I have a PWA that I have built using ionic 5 and am having an issue loading PDFs with the Capacitor Browser. I am using the following code to load remote PDF documents in the browser:
browserOpen(location) {
Plugins.Browser.open({
url: location,
toolbarColor: "#5A5DF5",
windowName: "_system"
});
}
This is working great. However, when I use the same code to load a PDF that is hosted under the same site that serves the PWA, the pdf opens full screen and has no controls for me to close the window or navigate back to the app. I end up having to close and reopen the app to resume. Does anyone have any insight as to what might be happening or how to force these “local” PDFs to open in the browser?
1 post - 1 participant
Hello i want to make dark mode for my Ionic 3 Angular 5 project. I made the functions that change themes as i wanted.
My problem is that scss variables in my ionic.theme.dark scss file inside the theme folder don’t apply e.g. $background-color simple css rules apply just ok. e.g. p{font-size:40px}.
I think there is a workaround because when i just call the ionic.theme.dark in the variables.scss file without putting it in a class it works fine but when i need to call the dark mode inside the class e.g. .dark-theme{@import “./ionic.theme.dark”;} it calls only the css rules not the variables
For example
.dark-theme{
p{
font-size:76px
}
$text-color: #fff !default;
$link-color: color($colors, primary) !default;
$background-color: rgba(0,0,0,0.6) !important;
$subdued-text-color: #666 !default;
}
p font-size works but $background-color doesn't, same thing happens when i loose the !default in all variables Any idea why?
1 post - 1 participant
when i run ionic serve, i get this :
react-scripts start
[react-scripts]｢wds｣: Project is running at http://192.168.43.160/
[react-scripts]｢wds｣: webpack output is served from
[react-scripts]｢wds｣: Content not from webpack is served from /home/epsilon/lab/mobile/myApp/public
[react-scripts]｢wds｣: 404s will fallback to /
[react-scripts] Starting the development server…
[react-scripts]
[react-scripts] events.js:292
[react-scripts] throw er; // Unhandled ‘error’ event
[react-scripts] ^
[react-scripts] Error: ENOSPC: System limit for number of file watchers reached, watch ‘/home/epsilon/lab/mobile/myApp/public/assets/icon’
[react-scripts] at FSWatcher.start (internal/fs/watchers.js:169:26)
[react-scripts] at Object.watch (fs.js:1415:11)
[react-scripts] at createFsWatchInstance (/home/epsilon/lab/mobile/myApp/node_modules/webpack-dev-server/node_modules/chokidar/lib/nodefs-handler.js:38:15)
[react-scripts] at setFsWatchListener (/home/epsilon/lab/mobile/myApp/node_modules/webpack-dev-server/node_modules/chokidar/lib/nodefs-handler.js:81:15)
[react-scripts] at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/epsilon/lab/mobile/myApp/node_modules/webpack-dev-server/node_modules/chokidar/lib/nodefs-handler.js:233:14)
[react-scripts] at FSWatcher.NodeFsHandler._handleDir (/home/epsilon/lab/mobile/myApp/node_modules/webpack-dev-server/node_modules/chokidar/lib/nodefs-handler.js:429:19)
[react-scripts] at FSWatcher. (/home/epsilon/lab/mobile/myApp/node_modules/webpack-dev-server/node_modules/chokidar/lib/nodefs-handler.js:477:19)
[react-scripts] at FSWatcher. (/home/epsilon/lab/mobile/myApp/node_modules/webpack-dev-server/node_modules/chokidar/lib/nodefs-handler.js:482:16)
[react-scripts] at FSReqCallback.oncomplete (fs.js:168:5)
[react-scripts] Emitted ‘error’ event on FSWatcher instance at:
[react-scripts] at FSWatcher._handleError (/home/epsilon/lab/mobile/myApp/node_modules/webpack-dev-server/node_modules/chokidar/index.js:260:10)
[react-scripts] at createFsWatchInstance (/home/epsilon/lab/mobile/myApp/node_modules/webpack-dev-server/node_modules/chokidar/lib/nodefs-handler.js:40:5)
[react-scripts] at setFsWatchListener (/home/epsilon/lab/mobile/myApp/node_modules/webpack-dev-server/node_modules/chokidar/lib/nodefs-handler.js:81:15)
[react-scripts] [… lines matching original stack trace …]
[react-scripts] at FSReqCallback.oncomplete (fs.js:168:5) {
[react-scripts] errno: -28,
[react-scripts] syscall: ‘watch’,
[react-scripts] code: ‘ENOSPC’,
[react-scripts] path: ‘/home/epsilon/lab/mobile/myApp/public/assets/icon’,
[react-scripts] filename: ‘/home/epsilon/lab/mobile/myApp/public/assets/icon’
[react-scripts] }
[ERROR] react-scripts has unexpectedly closed (exit code 1).
｢wds｣: Project is running at The Ionic CLI will exit. Please check any output above for error details.
i’m beginner in ionic, some one can help me ?
2 posts - 2 participants
(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)
1 post - 1 participant
Running ionic serve after a fresh installed ionic react application
Steps to reproduce:
Dependencies below
"dependencies": {
"@capacitor/core": "2.2.0",
"@ionic/react": "^5.0.7",
"@ionic/react-router": "^5.0.7",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^8.0.3",
"@types/jest": "^24.0.25",
"@types/node": "^12.12.24",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"@types/react-router": "^5.1.4",
"@types/react-router-dom": "^5.1.3",
"axios": "^0.19.2",
"ionicons": "^5.0.0",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"typescript": "3.8.3"
}
Workspace Used:
Windows 10, node version 6.12.1, ionic 6.9.1
Any steps how to solve this error?
1 post - 1 participant
I am trying to update the size of the below ion-row depending on the screen my Ionic app is being used on.
Here is my current code, I want to change the size of this ion-row depending on user’s screen size:
<ion-row class="rowStyle">
<ion-icon name="mail" class="iconStyle"></ion-icon>
<ion-input type="email"></ion-input>
</ion-row>
.rowStyle {
background-color: white;
padding-left: 10px;
border-radius: 30px;
margin-top: 10px;
ion-icon {
margin-top: 13px;
margin-right: 10px;
}
}
.iconStyle {
color: var(--ion-color-primary);
}
I am able to change the size of an ion-col with the below code, but applying only this to the ion-row above doesn’t work:
<ion-grid>
<ion-row>
<ion-col size="12" size-sm="8" offset-sm="2"">Some text</ion-col>
</ion-row>
</ion-grid>
To try get around this, I added ion-cols around the ion-icon & the ion-input, but that messes up my styling.
Can someone please tell me how I can apply this sizing to just the ion-row above?
1 post - 1 participant
Why Ionic Docs is showing a topic about an unavailable ion-tab component.
When a new ionic 5 project is created from scratch using latest cli, and then we try to use ion-tab in a template, the IDE(WebStorm and VSCode) shows this warning “Unknown html tag” and the component it’s render as a simple div.
is this a documentation mistake or is this the expected behavior?
1 post - 1 participant
Is it possible to embed capacitor browser in the app? I want three tabs containing three separate web pages.
The Capacitor Browser documentation seems to open only in a full screen window.
import { Plugins } from '@capacitor/core';
const { Browser } = Plugins;
await Browser.open({ url: 'http://capacitor.ionicframework.com/' });
1 post - 1 participant
Hi, I have a POS app that works with a thermal printer with the Bluetooth Serial plugin. When the order is too long, I split the invoice in chunks of 300 bits. On my phone it works well 100% of the time, but when I try to use a Huawei phone (the one that is being used in the store) it skips one or several iterations of the print call in the loop.
I don’t know it if is an async/await issue, or a Bluetooth communication issue. Anyway there are the 2 functions I use for printing.
async printTicket(order: Order, sale?: Sale) {
let ticket: any[] = await this._printer.generateReceipt(order, sale);
let chunks: any[] = await chunk(ticket, 300);
return new Promise((res, rej) => {
this._printer.getDefaultPrinter().then(async printer => {
if (printer) {
for (let index = 0; index < chunks.length; index++) {
await this.sendToPrinter(chunks[index], index, chunks.length, printer.address);
await this._misc.delay(100);
}
res(ticket)
} else {
this._misc.presentSimpleAlert('Error', '', 'Impresora no seleccionada');
rej()
}
}).catch(error => rej(error))
})
}
async sendToPrinter(data, index, total, address) {
return new Promise ((resolve, reject) => {
const bt = this._printer.connectBT(address).subscribe(async _ => {
this._misc.presentToast("Imprimiendo parte " + (index + 1) + ' de ' + total);
await this._printer.writeData(data);
this._printer.deviceDisconnected().then(res => {
this._misc.presentToast("Dispositivo bluetooth desconectado");
bt.unsubscribe()
resolve(data);
}).catch(err => reject(err));
})
}
Any help will be much appreciated.
EDIT: Also, I split the order into chunks because when the order is too long, some printers stop printing the invoice after 5 seconds or so…
1 post - 1 participant
(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)
1 post - 1 participant
HI I would like to design a scrollable tab . Kindly guide me on how to do that . Please provide with some code …
I am using following ionic configuration
“dependencies”: {
“@angular/common”: “~9.1.6”,
“@angular/core”: “~9.1.6”,
“@angular/forms”: “~9.1.6”,
“@angular/platform-browser”: “~9.1.6”,
“@angular/platform-browser-dynamic”: “~9.1.6”,
“@angular/router”: “~9.1.6”,
“@ionic-native/core”: “^5.0.7”,
“@ionic-native/splash-screen”: “^5.0.0”,
“@ionic-native/status-bar”: “^5.0.0”,
“@ionic/angular”: “^5.0.0”,
“cordova-android”: “^8.1.0”,
“rxjs”: “~6.5.1”,
“tslib”: “^1.10.0”,
“zone.js”: “~0.10.2”
},
1 post - 1 participant
I’m new in javascript and ionic, I got “process is not defined” when use this module, is there any solutions for this? or any other module to handle this? thanks in advance
1 post - 1 participant
I look for any accordion or collapsable list using ionic and react but I can’t find any documentation in ionic component, does anyone got sample using this ionic-react?
Thanks
1 post - 1 participant
Hi,
I got a strange bug since migrating from Ionic 4 to Ionic 5.
I have a modal with a canvas to draw on pictures. The canvas is fullscreen and there are translucent toolbars in the header and footer. The footer toolbar contains an ion-radio-group and an ion-range.
After each restart of the app, the first time (and only the first time) I enter the page with the canvas, the picture gets displayed wrong. It’s not fullscreen and behind the header and footer is a white background. Then the image is scrollable, what means that the header and footer aren’t overlaping the ion-content. After closing the canvas and reopening it, everything works fine, no matter if it’s a new picture or the same. It only doesn’t work the very first time after closing and opening the app again.
I noticed that this bug only occurs if the ion-range or ion-radio-group are in the header or footer toolbar. If I remove them, everything is fine.
The bug exists in Android and iOS.
With Ionic 4, everything worked as expected, but with Ionic 5 it does not. Is this a bug or am I missing a change from Ionic 4 to Ionic 5?
The template:
<ion-header [className]="drawing === false ? 'toolsVisible' : 'toolsHidden'">
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="saveAndQuit()">
<ion-icon slot="icon-only" name="checkmark"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button (click)="clearCanvas()">
<ion-icon slot="icon-only" name="refresh"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content fullscreen forceOverscroll="false">
<div id="canvas-container">
<canvas #imgCanvas (touchstart)="startDrawing($event)" (touchmove)="moveDrawing($event)" (touchend)="endDrawing()">
</canvas>
</div>
</ion-content>
<ion-footer [className]="drawing === false ? 'toolsVisible' : 'toolsHidden'">
<ion-toolbar>
<ion-row>
<ion-col *ngFor="let color of colors" class="color-block" [style.background]="color" tappable (click)="selectColor(color)"></ion-col>
</ion-row>
<ion-radio-group [(ngModel)]="selectedColor">
<ion-row>
<ion-col *ngFor="let color of colors" class="ion-text-center">
<ion-radio [value]="color"></ion-radio>
</ion-col>
</ion-row>
</ion-radio-group>
<ion-range min="2" max="20" [(ngModel)]="brushSize">
<ion-icon id="thinBrushIcon" slot="start" name="ellipse"></ion-icon>
<ion-icon slot="end" name="ellipse"></ion-icon>
</ion-range>
</ion-toolbar>
</ion-footer>
Left screenshot: First time entering the page --> broken
Right screenshot: Second time entering the page --> working
I tried a few fixes, but nothing worked. I would be very happy, If someone has a clue what the problem is…
1 post - 1 participant
i’m using ionic file to save blob which i’m getting in response from an api, response is in form of string which is a blob.
Trying to convert blob(which is in string format) to ArrayBuffer then saving ArrayBuffer to file.writeFile() method.
public saveAsPdfFile(buffer: any, fileName: string): void {
this.getStoragePath().then(url=>{
let successMsg:any;
let data = this.str2ab(buffer);
//this.translate.get('downloadedSuccessfully').subscribe((res: string) => { successMsg = res; });
// atob(this.string_Base64PDF)
this.file.createFile(url, fileName+".pdf", true)
.then(() => {
console.log("file created");
this.file.writeFile(url, fileName+".pdf", data,{ replace: true }).then(() => {
this.showAlert(successMsg);
}).catch((err) => {
console.log(err)
});
})
});
}
str2ab(str) {
var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char
var bufView = new Uint16Array(buf);
for (var i=0, strLen=str.length; i < strLen; i++) {
bufView[i] = str.charCodeAt(i);
}
return buf;
}
file is getting created but when i open error says “filename.pdf is of invalid format” tried same with excel also thows same error. let me know what i’m missing
1 post - 1 participant
Hello! Please tell me how you can update items so that the list of items is not lost. The algorithm steps are as follows: 1) from the list of tasks https://prnt.sc/t4ald1 we go to the card 2) make some changes or try to take a photo from the camera https://prnt.sc/t4amr0. 3) then return to the list https://prnt.sc/t4andu we get the following https://prnt.sc/t4aobp.
blocks.page.html - https://pastebin.com/X5xaXark
blocks.page.ts - https://pastebin.com/1ZKXimVC
1 post - 1 participant