Using the Cordova Camera Plugin

- Use the Cordova camera plugin and the ngCordova wrapper within your application - Leverage the built-in camera of your device through the plugin to obtain image data from the camera.
yogykwan · May 19, 2017 · 620e0fc · 620e0fc
1 parent d731f5e
commit 620e0fc
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 2 deletions.
diff --git a/conFusion-Ionic/config.xml b/conFusion-Ionic/config.xml
@@ -80,6 +80,10 @@
     </platform>
     <engine name="android" spec="^6.2.3" />
     <engine name="ios" spec="^4.4.0" />
+    <plugin name="cordova-plugin-camera" spec="^2.4.1">
+        <variable name="CAMERA_USAGE_DESCRIPTION" value=" " />
+        <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value=" " />
+    </plugin>
     <plugin name="cordova-plugin-console" spec="^1.0.5" />
     <plugin name="cordova-plugin-device" spec="^1.1.4" />
     <plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />

diff --git a/conFusion-Ionic/package.json b/conFusion-Ionic/package.json
@@ -6,6 +6,8 @@
         "cordova-android": "^6.2.3",
         "cordova-ios": "^4.4.0",
         "cordova-plugin-app-event": "file:node_modules/cordova-plugin-app-event",
+        "cordova-plugin-camera": "^2.4.1",
+        "cordova-plugin-compat": "^1.1.0",
         "cordova-plugin-console": "^1.0.5",
         "cordova-plugin-device": "^1.1.4",
         "cordova-plugin-splashscreen": "^4.0.3",
@@ -36,7 +38,11 @@
             "cordova-plugin-whitelist": {},
             "ionic-plugin-keyboard": {},
             "de.appplant.cordova.plugin.local-notification": {},
-            "cordova-plugin-x-toast": {}
+            "cordova-plugin-x-toast": {},
+            "cordova-plugin-camera": {
+                "CAMERA_USAGE_DESCRIPTION": " ",
+                "PHOTOLIBRARY_USAGE_DESCRIPTION": " "
+            }
         },
         "platforms": [
             "android",

diff --git a/conFusion-Ionic/www/js/controllers.js b/conFusion-Ionic/www/js/controllers.js
@@ -2,7 +2,7 @@
 
 angular.module('conFusion.controllers', [])
 
-  .controller('AppCtrl', function ($scope, $ionicModal, $timeout, $localStorage) {
+  .controller('AppCtrl', function ($scope, $ionicModal, $timeout, $localStorage, $ionicPlatform, $cordovaCamera) {
 
     // With the new view caching in Ionic, Controllers are only called
     // when they are recreated or on app start, instead of every page change.
@@ -75,6 +75,58 @@ angular.module('conFusion.controllers', [])
       }, 1000);
     };
 
+    $scope.registration = {};
+
+    // Create the registration modal that we will use later
+    $ionicModal.fromTemplateUrl('templates/register.html', {
+      scope: $scope
+    }).then(function (modal) {
+      $scope.registerform = modal;
+    });
+
+    // Triggered in the registration modal to close it
+    $scope.closeRegister = function () {
+      $scope.registerform.hide();
+    };
+
+    // Open the registration modal
+    $scope.register = function () {
+      $scope.registerform.show();
+    };
+
+    // Perform the registration action when the user submits the registration form
+    $scope.doRegister = function () {
+      // Simulate a registration delay. Remove this and replace with your registration
+      // code if using a registration system
+      $timeout(function () {
+        $scope.closeRegister();
+      }, 1000);
+    };
+
+    $ionicPlatform.ready(function () {
+      var options = {
+        quality: 50,
+        destinationType: Camera.DestinationType.DATA_URL,
+        sourceType: Camera.PictureSourceType.CAMERA,
+        allowEdit: true,
+        encodingType: Camera.EncodingType.JPEG,
+        targetWidth: 100,
+        targetHeight: 100,
+        popoverOptions: CameraPopoverOptions,
+        saveToPhotoAlbum: false
+      };
+      $scope.takePicture = function () {
+        $cordovaCamera.getPicture(options).then(function (imageData) {
+          $scope.registration.imgSrc = "data:image/jpeg;base64," + imageData;
+        }, function (err) {
+          console.log(err);
+        });
+
+        $scope.registerform.show();
+
+      };
+    });
+
   })
 
   .controller('MenuController', ['$scope', 'dishes', 'favoriteFactory', 'baseURL',

diff --git a/conFusion-Ionic/www/templates/register.html b/conFusion-Ionic/www/templates/register.html
@@ -0,0 +1,48 @@
+<ion-modal-view>
+  <ion-header-bar>
+    <h1 class="title">Register</h1>
+    <div class="buttons">
+      <button class="button button-clear" ng-click="closeRegister()">Close</button>
+    </div>
+  </ion-header-bar>
+  <ion-content>
+    <form ng-submit="doRegister()">
+      <div class="list">
+        <label class="item item-input">
+          <span class="input-label">Your Picture</span>
+        </label>
+        <label class="item item-input">
+          <img class="padding" ng-src="{{registration.imgSrc}}">
+        </label>
+        <label class="item item-input">
+          <button class="button button-block button-positive" type="button" ng-click="takePicture()">
+            Take Picture
+          </button>
+        </label>
+        <label class="item item-input">
+          <span class="input-label">First Name</span>
+          <input type="text" ng-model="registration.firstname">
+        </label>
+        <label class="item item-input">
+          <span class="input-label">Last Name</span>
+          <input type="text" ng-model="registration.lastname">
+        </label>
+        <label class="item item-input">
+          <span class="input-label">Username</span>
+          <input type="text" ng-model="registration.username">
+        </label>
+        <label class="item item-input">
+          <span class="input-label">Telephone Number</span>
+          <input type="tel" ng-model="registration.telnum">
+        </label>
+        <label class="item item-input">
+          <span class="input-label">Email</span>
+          <input type="email" ng-model="registration.email">
+        </label>
+        <label class="item">
+          <button class="button button-block button-positive" type="submit">Register</button>
+        </label>
+      </div>
+    </form>
+  </ion-content>
+</ion-modal-view>
diff --git a/conFusion-Ionic/www/templates/sidebar.html b/conFusion-Ionic/www/templates/sidebar.html
@@ -42,6 +42,9 @@ <h1 class="title">Navigation</h1>
         <ion-item menu-close ng-click="reserve()">
           Reserve Table
         </ion-item>
+        <ion-item menu-close ng-click="register()">
+          Register
+        </ion-item>
       </ion-list>
     </ion-content>
   </ion-side-menu>