How to create custom camera plugin?

P.S. by the way if you’re struggling to get the CLI and all that stuff working on Windows, maybe this helps:

http://mosalem.blogspot.nl/2015/10/using-taco-to-create-ionic-projects-for_19.html

This is a command line tool called “taco” which Microsoft just released, works with Ionic too, according to the article.

Hey I’ve finished my code containing the image stuff (Cordova camera, cropping, displaying) and uploaded it to my Github repo:

There’s a controller file “userProfile.ctrl.js” (and a template userProfile.html) which demonstrates how to take a picture, crop it and display it (images are stored in local storage, for simplicity).

Now there are a few things you need to know to get it working:

It works only on a device, because it needs Cordova, and camera hardware obviously So, you need to follow the steps in the README (see https://github.com/leob/ionic-quickstarter#gulp-build) to build and install on a device:

gulp build
ionic run

Now this is easy enough but there is one ‘gotcha’. When you do gulp build it will use the configuration settings from config-prod.json (https://github.com/leob/ionic-quickstarter/blob/master/src/js/config/config-prod.json).

But those settings, by default, will cause your app to run with login/auth based on Parse.com. So this will only work if you’ve got Parse.com set up.

If you don’t want this, so if you just want to run with the “mock” (fake) auth service, and still be able to use the image functionality (on a device), then simply change the value of the “devMode” from ‘false’ to “true” in config-prod.json.

So, in src/js/config/config-prod.json you get this:

"devMode": true

instead of “devMode”: false.

Now you can build and run the app on a device and it will just go to the start page or to the login page. If it goes to the login page you just put in a fake email address like a@b.com and for the password put in “password”. You then end up on the home page with 3 tabs.

Now either click on the “gear” icon in the top right corner, or (alternatively) select “User Profile” from the side menu.

You then see the 'User Profile" page where you can enter your (fake) user profile data, e,g. name and so on.

One other thing you can do there (which is what it’s all about now) is upload a profile pic. Click the image placeholder and you should get an ‘action menu’ where you can take or choose a pic, and then you can crop it and see how it gets displayed.

Hi leob,

Thanks for a job well done . I will try to run it later tonight. Pls note that my machine is Windows . And I use ionic platform add android and ionic build android to run.

I hope I won’t fall into the previous issue where there’s no index file in the www folder.

Can’t wait to try it out . Thanks once again .

1 Like

Cool, hope it works for you. As explained you can set it up so that you don’t need Parse.com or Firebase or whatever so then the setup should be minimal for you to be able to try out the image functionality.

P.S. by the way, I advise you to run with “ionic serve -c -l” (with the “labs” option, and showing errors in the console).

I’m pretty sure it will work then, I believe the “-l” option fixes the “missing index.html” problem.

If not, look at the errors in the console (terminal).

UPDATE: if you add the “-c” argument to “ionic serve” then you will probably see this error:

“libsass bindings not found. Try reinstalling node-sass?”

This is a known issue which many people (also Ionic users) have come across, if you search for “libsass bindings not found” then you will see many discussion threads about it.

The best solution seems to be this answer:

Error running gulp sass

As you can see, the solution is that it works only with certain versions of nodejs. The problem is especially with “new” nodejs versions, e.g. nodejs v.4. I am using nodejs v.0.12 and I don’t have the problem.

Another discussion and possible solution is this post:

'libsass' bindings not found

So that is the issue. I’ve added a warning and some info to my README because I’ve seen many people struggling with this issue.

P.S. if you already tried downloading the new version, then just delete the thing and do a fresh install please. I think I got to the bottom of the ENOENT and “libsass” issues and fixed it so that it works both with the old and new nodejs versions.

Hi Leob,

everything worked fine this time. I needed to install gulp and do a gulp build. after that i could see my Index.html file in the www folder. Moving forward , you architecture is strange and very unlike the normal ionic project.

I am used to a controller.js, app.js and template files. how do i continue work? am lost as to where my controller is, where to add template files and where to my own contollers or code. Do i need to read your github page again?..

kinda lost on the organistaion and how to add my own js files and controllers.

Hey that’s good to hear.

I’m very glad to hear that it works, there’s another guy who’s trying to get it working and it’s an endless story, I’m about to give up. So tell me, which nodejs are yo running, is it nodejs v.4 ?

The architecture is different from the simple starters, but it’s not that strange. The well-known AngularJS expert John Papa is one of the people who recommend this structure, see this description in his famous Style Guide:

https://github.com/johnpapa/angular-styleguide#style-y152

It’s called “directory per feature” (or module) and is better suited to larger apps (the structure in the default starter apps doesn’t scale well to larger apps, lumping everything in 3 Javascript files isn’t really a good idea).

I’ve also described the structure in the README file:

Just read that section (and maybe also the John Papa link that I gave you) and I am sure it will become all clear.

Hi Leob,

my node js version is v0.12.7. I just checked the version inside the app folder anyway using the command node --version.

As per the guy, is he running on a windows machine? what’s the issue? can you refer him to me if he’s trying to run on a windows?

I will read the documents and see what happens. Hope to provide you positive feedback soon.

Thanks for the good work. :grin:

Hi Leob,

your login.ctrl calls the service UserService.login(). How does this controller know the location of this service? I do not see any includes.

“Includes” … ? Eh, well, do you know the basics of AngularJS ? It’s called “Dependency Injection” …

Read the beginner’s guide to AngularJS and it will become clear.

Aiit. will do.

I simply want to use my own user login module. I have web Api that implements Aspnet Identity. Thats what i want to use for my User Authentications.

Okay then you would wrap your Asp API inside an AngularJS service.

Hi leob

This suggestion sounds very interesting. I tried to do something similar but the problem that I have is that I can not display the pic on the view because the cordova camera plugin returns a local file URL that does not work if I use it in an tag using the ng-source attribute (android version). Have you managed to do something similar in the android version?

Well for me ng-src works fine with local images, also on Android. What problem do you see then? Do you see any error/problem when looking at the logs with “adb logcat” or Chrome remote inspection?

However what I would recommend (instead of plain “src” or “ng-src”) is to use angular-image-cache (https://github.com/jBenes/angular-imgcache.js/tree/master).

This works transparently regardless whether the image URL is remote or local, it makes the image cache reliable (also on iOS where it isn’t) and therefore makes images from remote sources display faster, and works fine too with local images.

This is how you use it in your source code (HTML):

<img img-cache ic-src="{{image}}">

Don’t forget to add “filesystem:” to the CSP tag (Content-Security-Policy) in your index.html file, e.g:

  <meta http-equiv="Content-Security-Policy"
        content="default-src 'self' * data: gap: filesystem: https://ssl.gstatic.com https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

Hi leob

Thanks for your immediate response. A more detailed description of the problem that I have to cope with is on this link:

I just posted this link two days ago. The problem is that when I choose an image from the gallery the image is not shown on the view and is displayed as a broken link with a question mark. I will try your suggestion and I will keep you up to date about the output result.

Hi leob

I have tried to run the app and record the logs using the command “adb logcat CordovaLog:D *:S” but I do not receive any log at all. If I use the command “adb logcat” then I get a bunch of logs and I can’t catch the errors because the logs are running all the time and I can not separate the applications logs from the other ones

Any suggestions?

I always do it like this:

adb logcat|grep CONSOLE

This eliminates 99% of the rubbish and shows me only what I need.

I have installed grep using npm install but when I try to use it in adb I receive the following error: ‘grep’ is not recognized as an internal or external command