why i having a problem in the iPhone but android work good
problem usually occurs between the pages in IOS
for example :
when go to other page usually go and back in the same time without click the back button .
You should use the fix recommended by Ionic team:
https://gist.github.com/IgorMinar/863acd413e3925bf282c
Place downloaded file into www/js folder.
Add script tag in index.html: <script src="js/ngIOS9UIWebViewPatch.js"></script>
Add new dependency in app.js: angular.module('myApp', ['ngRoute', 'ngIOS9UIWebViewPatch'])
More info about that bug: http://blog.ionic.io/preparing-for-ios-9/
Related
I have implemented Barcode Scanner for my Ionic project for both iOS and Android.
But when my Scanner starts, I want to add a button inside the view and add an event to it.
I am using phonegap-plugin-barcodescanner plugin
Please help me with how to append something inside the scanning view.
If you want to add stuff to the layout of your scanner, you need to write code in the plugin itself.
YOU CANNOT INTERACT DIRECTLY WITH THE SCANNER FROM THE JS.
In fact, the plugin you use uses cordova.exec in order to launch the scanner view by passing it arguments.
For Android, you just have to know Java and some XML.
For iOS, you have to know Objective-C / Swift.
For Android, you may have 4 files to modify :
plugin.xml : home of all you dependencies
Your_Activity.java : java file which permits to interact with the scanner view itself by calling buttons, textviews, layouts, etc...
Your_Main.java : java file which gets and returns parameters from the js file of your plugin
Your_Layout.xml : xml file in res/layout which is composed of xml attributes interpreted by java
Beside that, I found two good plug-ins for cordova/ionic apps from GitHub :
phonegap/phonegap-plugin-barcodescanner
tjwoon/csZBar
And there's the expensive one, Scandit, which resolves all of your problems for about 200$ per month, check the pricing for every solution they propose.
If you use their SDK, you may be able to interact with the scanner view from js files because of their work, but they're the only company I know to do that. (perhaps ManateeWorks...)
Under this part is what I've been doing since mid-July, in order to give you ideas.
I'm currently making an ANDROID scanner layout for my ionic app.
You can find my GitHub repository here, I forked it from tjwoon's csZBar and I added some stuff my ionic app needs.
I guarantee nothing, but I'm pretty sure I'll implement an iOS layout soon (at least I'll try), and unfortunately I don't really know android / iOS mobile programming.
Here's a screenshot of the layout
I made a "tab bar" composed of 3 image buttons, a "top bar" composed of text views & image buttons. The scanner is embedded between these two.
There are pop-ups for the app's features, which pause the scanner and respond to click events.
See the README and Java files (csZBar/android/) for more information.
Don't hesitate to ask questions and/or inspect my code.
Warning
1) It's currently on development so use it at your own risks (use branch master, not develop)
2) I only modified the android part, not the iOS!
3) It doesn't work for Windows phone...
After adding plugin, installngCordova with bower install ngCordova
Add link to ng-cordova.js JS file above reference to cordova.js:
index.html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
Also, don't forget to add ngCordova module:
app.js
angular.module('myApp', ['ngCordova'])
Now you're ready to use the plugin like this:
Controller:
var module = angular.module('starter.controllers', []);
module.controller('BarcodeCtrl', function($scope, $cordovaBarcodeScanner, $ionicPlatform) {
$ionicPlatform.ready(function(){
$scope.scan = function() {
$cordovaBarcodeScanner
.scan()
.then(function(barcodeData) {
alert(JSON.stringify(barcodeData));
}, function(error) {
alert(error);
});
};
});
});
View:
<button ng-click="scan()">Scan</button>
I'm new on ionic 2 and i'm trying to insert an image, but i don't realize the real path.
inside the file app/pages/getting-started/getting-started.html
<ion-content padding class="getting-started">
<ion-card>
<ion-card-content>
<img src="img1.png" alt="">
<img src="img/img1.png" alt="">
<img src="../img/img1.png" alt="">
</ion-card-content>
</ion-card>
</ion-content>
Create a folder app/img and inserted an img1.png file inside it. and the same file inside the app/pages/getting-started folder.
So, this should be easy, but can't find anything inside the ionic docs.
Thanks
Tested with Ionic2.rc2:
The default build takes the images under src/assets/img and puts it under assets/img. In order to reference them from the scss files you need to go up a folder:
background: url('../assets/img/sports-backgrounds.jpg');
That's the only way I got it to work, even even leaving out the '../' worked on the browser while testing.
At the same time, if you're referencing the images from the view (html files), here's what works for me:
<img src="assets/img/logo-image-for-login-page.jpg"
Ionic 2 is somewhat unstable so there're still some quirks that need to be ironed out.
Good luck.
Personally, I would add the images wherever it makes more sense for you, in your case in the app folder, and add a Gulp task to copy the images to the www/build folder.
This is how my gulpfile.js lookslike: https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js
I have added this simple task to the gulpfile.js around line 66.
gulp.task('images', function() {
gulp.src('app/**/**/*.png')
.pipe(gulp.dest('www/build'))
});
Make sure the task images is added to the list of tasks that run before the watch task (the tasks listed inside [..], 3rd line). Also, make sure to run gulpWatch whenever you add a new image for example (line 7)
gulp.task('watch', ['clean'], function(done){
runSequence(
['images','sass', 'html', 'fonts', 'scripts'],
function(){
gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
gulpWatch('app/**/*.png', function(){ gulp.start('images'); });
buildBrowserify({ watch: true }).on('end', done);
}
);
});
Alternatively, you can use this gulp plug-in https://www.npmjs.com/package/ionic-gulp-image-task and require it and use in your gulpfile.js similar to the other tasks such as copyHTML, copyFonts, copyScripts here https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js
I hope that makes sense.
Since Ionic2 apps ES2015 js complies down to normal javascripts(ES5), you should have your images etc in the www/build folder
So create a folder www/build/img and add your images in there. Then you should be able to access it as build/img/img1.png
EDIT
Adding an answer to the question i don't undestand why you need to work the code in app folder but put insert the images into www folder
Ionic2 uses latest javascript standards such as ES2015 (ES6) , Typescript (Optional) . This allows us to write code in slightly different way than we do in normal javascript. With classes modules etc.
However still most of the browsers doesn't support this new javascript standards , hence Ionic uses a concept called transpiler to change the new javascript code to old fashion javascript code so that browsers can understand.
So with Ionic2 even though u code in the app folder ultimately it compiles and runs from the www folder. Technically speaking your ionic app still runs from the www folder, because of that reason you have to add your images to the www folder.
I was having same problem, I found a way, I don't know if is the best way, but it's work.
the images must go on a file sibling to build, inside folder www
- www
-- build
-- img
The following worked for me.
Inserted <img src="../../assets/imgs/logo.png" alt="couldn't load"> to home.html file located inside app/src/pages/home directory.
Location of the image is app/src/assets/imgs/logo.png
Hope this helps.
Just copy your img folder in the www folder and you're done! ;)
I had same problem. Only you must create img folder in www. --> www/img (put images in the folder...)
Then in page (html) your must reference <img src="img/logo.png" />
I test in Chrome Browser, App Android and App Ios . (Ionic 2.0.0-beta.11)
Regards!
I had the same problem while using the Ionic Beta Latest ionic#beta11.
To resolve this problem you can append the images absolute path in the copy.config.js file which will be residing in the node_modules/#ionic/app-scripts/config folder
You can append this file for specific folder by providing source (src) and destination (dest) path.
Hope this helps for copy the images folders to www/build/images folder
Thanks in advance!
<img src = "assects/img/abc.png"/>
img- file name
image should be stored in assects
I am just getting started with Ionic 2. I have created an img file in app inside it is a file logo.png. So I have created the following code:
css:
.getting-started {
.logo {
background-image: url(./img/logo.png);
}
}
html:
<ion-col offset-33 width-33 class="logo"><h1>Logo</h1></ion-col>
<h3>Welcome to your first Ionic app!</h3>
</ion-content>
I know the css is working, as if I toggle the background color, I get the expected results. However, I don't get any background image, just the Logo text specified. Where should I have put the image file?
EDIT: As of Ionic 2 RC 0, the correct place to put your images is in src/assets/img/ and the correct code to reference the image is <img src="assets/img/myImg.png">. Please see Ionic's change log for RC0 (specifically #28).
As of right now, using the official Drifty Co. Ionic 2 Conference App as a reference, images should be placed inside of the www/ directory.
In my current Ionic 2 app, an image is located at www/img/logo.png and it is referenced in app/pages/page_name/page_name.html as <img src='img/logo.png'> and it works like a charm.
Currently using:
ionic-angular v2.0.0-beta.6 (package.json)
ionic-native ^1.1.0 (package.json)
ionic-cli v 2.0.0-beta.25 (installed CLI)
Using Ionic 2 beta 6, I handled this with a simple gulp task. I dropped my images in app/assets/images (this path is completely arbitrary). Then, I added the following task to gulpfile.js:
gulp.task("assets", function() {
return gulp.src(["app/assets/images/*"])
.pipe(gulp.dest("www/build/images"));
});
You'll also need to update the watch and build tasks to include the new assets task in their calls to runSequence(). I don't believe the order of tasks in the sequence matters, in this case:
gulp.task("build", ["clean"], function(done) {
runSequence(
["sass", "html", "fonts", "assets", "scripts"],
function() {
buildBrowserify().on("end", done);
}
);
});
If you output your images to the same path as I did, then you would reference your images in CSS from ../images/image-name.png and in <img> tags from build/images/image-name.png. I have confirmed that these images are visible both from the browser and an Android device. I don't think it should be any different for iOS.
The assets folder is the correct folder to place any media.
The location of my image:
fyi: if you dont have the folder, just create it
src > assets > img > background.png
variables.scss
.backgroundImage {
background-image: url('../assets/img/background.png');
}
Then on the page I want to use it on:
home.html
<ion-content padding class="backgroundImage">
</ion-content>
You can also reference images the following way:
home.html
<ion-content padding class="backgroundImage">
<img src="./assets/img/background.png" width="50%" />
</ion-content>
www\lib\ionic inside ionic create one folder img
now your path
www\lib\ionic\img put your background image inside this img folder and in your
www\lib\ionic\css\ionic.css
inside ionic.css find .view-container class and past this line.
.view-container {
background: url("../img/main_bg.jpg") repeat scroll 0 0 / 100% 100%;
}
OK, so I found the answer on the IONIC forum. The images go in www/img, the paths to these is then:
url('../../img/appicon.png')
when referenced from css or html in a page folder which is in pages in app.
Hope this helps anyone in the future.
I was having same problem, I found a way, I don't know if is the best way, but it's work.
the images must go on a file sibling to build, inside folder www
www
build
img
Got the solution. Its using path relative to index.html and not template folder.
So we need use path without../
src="img/John_Williams.jpg"
This works both on browser and apk
I could not manage to make it work using a PNG file. It worked in the browser but when I build the app and deployed to a device it did not displayed.
Instead of fiddling with the Gulp file to understand what was going on, I figured out a simpler workaround :
Inline the image into your HTML (or CSS) using a Data URI.
There are many tools online such as this one that will convert your PNG to a Base64 data URI.
If your image is pool.jpg. Place it in /src/assets/img/pool.jpg
It needs to be in this directory (assets) as it is your source from where everything gets built.
Then stop your ionic serve command (Ctrl-C) or whatever you use.
Then delete EVERYTHING under www directory (it all gets rebuilt anyway).
Then restart your server by running 'ionic serve' again.
This will rebuild the directory with the images.
You can reference the image as background-image: url('../assets/img/pool.jpg');
in your code.
I am using ionic 3 and it's a shame it doesn't pick up changes in the assets directory. IONIC should look at this.
I 'm currently on ionic version 3.6 and I had to use this to work:
src="../../assets/img/myImage.jpg"
The path assets/img/myImage didn't work for me
I hope this helps
Hi Guys i found a method add images to ionic v2
Create a images folder in "www" directory (www/images/) and add your all images in this path.
Then give your image path like this
ex: for pages
src="images/logo.png"
in CSS
.ThemeColor{ background: url(/images/bg.png)};
That's it, works for me..
Thanks
When I add the jquery-mobile javascript to my site some of the background css images fail to load until I go to a different page and come back to the home page.
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
The second I delete the import line, the images load fine. What might be the issue?
This issue only appears on the ios safari browser and a UIWebView. Works fine in a PC browser.
Seems like it was a jquery-mobile bug. Switching to the latest beta version did the trick for me:
<script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>
On the iPhone I'm using a UIWebView to display some content that is stored on the device so my content can be viewed on the device when there is no internet connection. I'm using the jQuery and mobile stuff in an attempt to create web apps and mobile apps that use one code base.
When I include:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
everything works fine, the sprites that make up the back button, home icon etc. all work fine. When I include the above as a local resource such as:
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
The sprites do not display, I just get a dark circle where the sprite should appear. All the other attributes defined in the css work fine, just not the sprites. If I misname the local resource, everything is messed up, so I know the css as a local resource is being included, but it is being handled differently as a local resource vs a remote resource. It even works if I hit the local dev box running apache... so it must have something to do with how the web server is serving the page vs. including it as a file......
I played around with loading the same page twice with separate UIWebViews in an attempt to see if there is some timing issue... since a local resource would load much quicker than a remote resource. The second instance of the UIWebView loaded it correctly. Is there a $.mobile command I can call to refresh the page, or for the library to do it's magic?
any ideas?
thanks for any help
Question was answered in the jQuery forum. Funny, the answer was related to my comments above, and I still didn't think to look at the image files! palm2forehead
had to go in the jquery mobile css file and remove the references to the "images" directory. IOS doesn't handle directories like normal systems so once I did that all was ok.
It did not solve my issue chaning the path.
I had to look up in the mobile.css, i found that the icon were first set with an image, an then moved with classes, i had to set the the full background property on the classes that moved the background image.
Like so:
.ui-icon-plus {
background:#9c9c9c url(icons-18-white.png) no-repeat 0 50%; }
Old way were:
.ui-icon-plus {
background-position:-0 50%;}
Put everything (js,css) to www folder along with index.html file, and include file like this <script src="jquery-mobile-min.js">`, it has solved my problem.