I am using the camera preview plugin in my Ionic v1 app.
When I click Start Cam, the camera preview starts and When i Tap Swap Cam,
the $scope.swapCam() function gets called twice, i.e I can see console.log('swapping'); printing twice.
Have tested without CameraPreview.switchCamera();, works fine.
Any help appreciated. Thanks
This is my HTML
<ion-view view-title="Dashboard">
<ion-content class="padding">
<button ng-click="startCam()">Start Cam</button>
<button ng-click="swapCam()">Swap Cam</button>
</ion-content>
</ion-view>
and this is my Controller
.controller('DashCtrl', function($scope) {
$scope.startCam = function(){
CameraPreview.startCamera({x: 50, y: 50, width: 300, height: 300, toBack: false, previewDrag: true, tapPhoto: true});
}
$scope.swapCam = function(){
console.log('swapping');
CameraPreview.switchCamera();
}
})
ionic info:
#ionic/cli-utils : 1.19.1
ionic (Ionic CLI) : 3.19.1
cordova (Cordova CLI) : 6.5.0
Gulp CLI : CLI version 3.9.1 Local version 3.9.1
Cordova Platforms : android 6.1.2
Ionic Framework : ionic1 1.3.4
Related
My use case:
Call JavaScript function from JS file (included in project) in Ionic 4 on particular page.
I'm having following issue.
ERROR TypeError: t.resolve is not a function
at Object.setNativePromise (polyfills.js:3)
at L.configurable.L.set (polyfills.js:3)
at n.exports (ocw.js:4850)
at a (ocw.js:4850)
at Object.209.100 (ocw.js:4851)
at s (ocw.js:4850)
at ocw.js:4850
at Object.327.131 (ocw.js:4852)
at s (ocw.js:4850)
at ocw.js:4850
Steps followed:
Included JS file under src->assets
added reference in index.html after cordova.js file
<!-- cordova.js required for cordova apps (remove if not needed) -->
<!-- <script src="assets/ocw.js"></script> -->
<script src="cordova.js"></script>
<script src="assets/ocw.js"></script>
In desired file, declared variable as function name
called javascript function under, ionViewDidLoad
Ionic setup:
Ionic:
ionic (Ionic CLI) : 4.1.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
#ionic/app-scripts : 3.2.0
Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 6.4.0, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.2, (and 9 other plugins)
System:
ios-deploy : 1.9.2
ios-sim : 6.0.0
NodeJS : v8.12.0 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS
Xcode : Xcode 10.1 Build version 10B61
You need to export the function in your javascript file and then import it in your pagename.page.ts to be able to use it.
I'm trying to use the variables defined on the variables.scss file, but remote debugging the app i see that no variable was defined on :root and on the elements that use it has Invalid value.
variables.scss
:root {
/** primary **/
--ion-color-primary: #d76f47;
... more variables
}
page.scss:
.product-name {
color: var(----ion-color-primary);
}
angular.json (untouched)
...
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
}
],
...
This only happens while runing on the device (Android 4.4.2).
While on the browser everything works as it should be.
Ionic:
ionic (Ionic CLI) : 4.3.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : #ionic/angular 4.0.0-beta.16
#angular-devkit/build-angular : 0.10.6
#angular-devkit/schematics : 7.0.6
#angular/cli : 7.0.6
#ionic/angular-toolkit : 1.2.0
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib#8.1.1)
Cordova Platforms : android 7.1.2, browser 5.0.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.3, (and 6 other plugins)
System:
Android SDK Tools : 26.1.1
NodeJS : v9.10.1 (/usr/local/bin/node)
npm : 6.2.0
OS : Linux 4.15
Thanks in advance.
If you want to change color for your custom dom
.product-name {
color: var(--ion-color-primary);
}
but for the dom that has shadow root maybe you should to confirm if it has variable
dom-name {
--color: var(----ion-color-primary); //if dom declare --color as css4 variable
}
Ionic app seems to have stopped working and I am not able pinpoint the cause. I started again from blank app, but this error persists
Not sure if I am missing setup steps or issue with version mismatch? any pointers would help as I have wasted weeks on this issue
Accepted answers, like -
WebpackJsonp missing after Ionic 3 update or Ionic 2: ReferenceError: webpackJsonp is not defined have not worked
index.html has
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
ionic info -
cli packages: (/usr/local/lib/node_modules)
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
#ionic/app-scripts : 3.1.8
Cordova Platforms : android 6.4.0 ios 4.5.4
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
ios-deploy : 1.9.2
Node : v9.5.0
npm : 5.7.1
service.worker.js has-
// pre-cache our key assets
self.toolbox.precache(
[
'./build/main.js',
'./build/vendor.js',
'./build/main.css',
'./build/polyfills.js',
'index.html',
'manifest.json'
]
);
I did all the needed updates and added the needed code to meta in index.html, but I still get white space at the bottom of the header before the content section starts. Please see screenshot. Also, it appears like the Title is being cut.
Here is my meta:
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
My HTML:
<ion-header>
<ion-toolbar color="primary">
<ion-title>Saved</ion-title>
</ion-toolbar>
</ion-header>
My Ionic Info:
cli packages:
#ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
#ionic/app-scripts : 3.1.6
Cordova Platforms : ios 4.5.4
Ionic Framework : ionic-angular 3.9.2
System:
ios-deploy : 1.9.2
ios-sim : 5.0.12
Node : v7.10.0
npm : 4.2.0
OS : macOS High Sierra
Xcode : Xcode 9.2 Build version 9C40b
So my problem was that in App.scss I've explicitely changed the height of the Toolbar as follows:
.toolbar-background-ios {
background: #ffffff;
height: 70px; //This was the problem
}
By removing the height attribute, all works perfectly well for oth iPhone X and older iPhone 7 plus.
To elaborate if you ever want to change the height of the navigation bar, you set it directly in your variables.scss so it can be set globally like:
$toolbar-ios-height: 70px;
$toolbar-md-height: 70px;
The Very first thing to check is the Meta that should be like this
name="viewport" content="viewport-fit=cover, width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"
And if it does not resolve your issue then try to update the status
bar plugin.
Run the following command.
ionic cordova plugin add
https://github.com/apache/cordova-plugin-statusbar.git
but before doing that remove the previously installed status bar
plugin and then install the above it will surely fix your problem.
References
GitHub link : https://github.com/apache/cordova-plugin-statusbar.git
If the issue still Persists then Kindly check your Global.SCSS file and look for the following
.platform-ios.platform-cordova:not(.fullscreen)
and find the toolbar-ios in that and adjust the header properties according to your requirements.
I use ionic thumbnail list like the document said:
```
<ion-item>
<ion-thumbnail item-start>
<img src="assets/img/thumbnail-totoro.png">
</ion-thumbnail>
<h2>My Neighbor Totoro</h2>
<p>Hayao Miyazaki • 1988</p>
<button ion-button clear item-end>View</button>
</ion-item>
```
I copied same code to my project, when it didn't render correctly.
My list view show like belwo:
And i checked the html ion-item and ion-thumbnail generate is
It doesn't like ionic example. the ion-thumbnail directive incorrectly wrapped by ion-label.
I don't know what happen, below is my ionic info
```
cli packages:
#ionic/cli-plugin-cordova : 1.5.0 (/Applications/My-Project/sharemap/node_modules/#ionic/cli-plugin-cordova)
#ionic/cli-plugin-ionic-angular : 1.4.0 (/Applications/My-Project/sharemap/node_modules/#ionic/cli-plugin-ionic-angular)
#ionic/cli-utils : 1.6.0 (/Applications/My-Project/sharemap/node_modules/#ionic/cli-utils)
ionic (Ionic CLI) : 3.6.0 (/Applications/My-Project/sharemap/node_modules/ionic)
global packages:
Cordova CLI : 6.4.0
local packages:
#ionic/app-scripts : 1.3.0
Cordova Platforms : none
Ionic Framework : ionic-angular 3.0.1
System:
Android SDK Tools : 26.0.2
Node : v6.10.1
OS : macOS Sierra
Xcode : Xcode 8.3 Build version 8E162
ios-deploy : 1.8.1
ios-sim : 5.0.6
npm : 3.10.3
```
What's wrong with my code?
i found the solution:
I change the item-start directive to item-left, then problem solved.
i don't why this directive not work like Ionic Document said.
And I also found that item-end not work like document either. You need to change to item-right.
The right code is below:
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-totoro.png">
</ion-thumbnail>
<h2>My Neighbor Totoro</h2>
<p>Hayao Miyazaki • 1988</p>
<button ion-button clear item-end>View</button>
</ion-item>