Showing posts with label ionic framework Making a Signature Drawpad. Show all posts
Showing posts with label ionic framework Making a Signature Drawpad. Show all posts

Ionic Framework - Camera Image Uploads and Base64 Strings

Ionic Framework - Camera Image Uploads and Base64 Strings


Hi Today Discussed Ionic Framework - Camera Image Uploads and Base64 Strings menas Ionic Framework Build Mobile Application Framework. Previously more discussed Ionic Framework Today Camera Take Picture image uploads and Base64 strings. This Task discussed  more details followed. 

Ionic Framework - Camera Image Uploads and Base64 Strings
Ionic Framework - Camera Image Uploads and Base64 Strings

First Install Image Resizer Plugin

cordova plugin add https://github.com/timkalinowski/PhoneGap-Image-Resizer

Install the Actionsheet Plugin

cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin-actionsheet

Install the Camera Plugin

cordova plugin add cordova-plugin-camera

The Code

We are using the camera plugin here, but I did not use Ionic Framework with ngCordova – Camera here for the sake of simplicity, I suspect you will get the same behavior if you are using the ngCordova – Camera module to access the camera.

getPicture: function (options) {
    var q = $q.defer();
 
    navigator.camera.getPicture(function (result) {
        // Do any magic you need
        q.resolve(result);
    }, function (err) {
        q.reject(err);
    }, options);
 
    return q.promise;
},resizeImage: function (img_path) {
    var q = $q.defer();
    window.imageResizer.resizeImage(function (success_resp) {
        console.log('success, img re-size: ' + JSON.stringify(success_resp));
        q.resolve(success_resp);
    }, function (fail_resp) {
        console.log('fail, img re-size: ' + JSON.stringify(fail_resp));
        q.reject(fail_resp);
    }, img_path, 200, 0, {
        imageDataType: ImageResizer.IMAGE_DATA_TYPE_URL,
        resizeType: ImageResizer.RESIZE_TYPE_MIN_PIXEL,
        pixelDensity: true,
        storeImage: false,
        photoAlbum: false,
        format: 'jpg'
    });
 
    return q.promise;
},
toBase64Image: function (img_path) {
    var q = $q.defer();
    window.imageResizer.resizeImage(function (success_resp) {
        console.log('success, img toBase64Image: ' + JSON.stringify(success_resp));
        q.resolve(success_resp);
    }, function (fail_resp) {
        console.log('fail, img toBase64Image: ' + JSON.stringify(fail_resp));
        q.reject(fail_resp);
    }, img_path, 1, 1, {
        imageDataType: ImageResizer.IMAGE_DATA_TYPE_URL,
        resizeType: ImageResizer.RESIZE_TYPE_FACTOR,
        format: 'jpg'
    });
 
    return q.promise;
}

Supporting File Uploads To Parse

/********************************************************
 *                                                      *
 * @param _params.photo base64 representation of photo  *
 * @param _params.caption string to go with photo       *
 ********************************************************/ 
savePhotoToParse: function (_params) {
    var ImageObject = Parse.Object.extend("ImageInfo");
 
    // create the parse file object using base64 representation of photo
    var imageFile = new Parse.File("mypic.jpg", {base64: _params.photo});
 
 
    // save the parse file object
    return imageFile.save().then(function () {
 
        _params.photo = null;
 
        // create object to hold caption and file reference
        var imageObject = new ImageObject();
 
        // set object properties
        imageObject.set("caption", _params.caption);
        imageObject.set("picture", imageFile);
 
        // save object to parse backend
        return imageObject.save();
 
    }, function (error) {
        alert("Error " + JSON.stringify(error, null, 2));
        console.log(error);
    });
 
}

Using Charts in Your Ionic Framework Mobile App

Using Charts in Your Ionic Framework Mobile App

Hi Today Discussed Ionic Framework Using charts in your Ionic Framework Mobile Appplication Highcharts and Stockcharts More attractive and pretty chart highcharts. Here Looks Like pretty chart using Ionic Framework is Follows Code.

Using Charts in Your Ionic Framework Mobile App
Using Charts in Your Ionic Framework Mobile App


Index Page

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link rel="stylesheet" href="css/angular-chart.css">
        <link href="css/style.css" rel="stylesheet">
        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->
        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>
        <!-- your app's js -->
        <script src="js/Chart.min.js"></script>
        <script src="js/angular-chart.min.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Ionic Blank Starter</h1>
            </ion-header-bar>
            <ion-content>
            </ion-content>
        </ion-pane>
    </body>
</html>

Module Inject
angular.module('starter', ['ionic', 'chart.js'])
Controller Page

controller("ChartController", function($scope) {
    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Series A', 'Series B'];
    $scope.data = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
    ];
});

Html Page

 <ion-content ng-controller="ChartController">
    <div class="card">
        <div class="item item-divider">
            A line chart
        </div>
        <div class="item item-text-wrap">
            <canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}"></canvas>
        </div>
    </div>
    <div class="card">
        <div class="item item-divider">
            A bar chart
        </div>
        <div class="item item-text-wrap">
            <canvas id="bar" class="chart chart-bar" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}"></canvas>
        </div>
    </div>
</ion-content>



Ionic Framework web services loop $http json request

Ionic Framework web services loop $http json request

Ionic Framework web services loop $http json request
Web Services Loop $http json request

Today Discussed Ionic Framework web Services data looping Concepts.  Angularjs Previously discussed angularjs looping concepts same based ionic framework used. Angularjs and Ionic Framework is same concepts. Here follows this sample code in ionic framework and more information and example click here

controller('DataCtrl', function($scope, $http, data) {
  $scope.name = 'World';
  $scope.allads = [];
  $scope.data= [];

  $http.get('http://www.mysite.com/list.json').success(function(data) {
    $scope.allads = data;
    $scope.loadMore();
  });

  var counter = 0;

  $scope.loadMore = function() {
    var data = [];
    var l = $scope.data.length;
    var m = Math.min(l+10, $scope.allads.length);
    for ( var i = l; i < m; i++) {
      data.push($scope.allads[i]);
    }

    console.log('Loading more!', m);
    $scope.ads = $scope.ads.concat(data);
    $scope.$broadcast('scroll.infiniteScrollComplete');
  };

  $scope.$on('stateChangeSuccess', function() {
    $scope.loadMore();
  });

  // THIS METHOD LOADS 4 LOCAL TEST ITEMS WITH THE ADSSERVICE
  //$scope.ads = ads;
})
and
.service('AdsService', function($q) {

  return {
    ads : [
        { shortrelativetime:'30 min ago', title: 'TST อาหารเสริมเพี่มความสูง', group:'Vehicles', category:'Cars', province:'Vientiane Capital', district:'Xaythany', price:'24000', currency:'USD', photo:'20140202-040753-c1395444fd.jpg', id: 1 },
        { shortrelativetime:'1 day ago', title: 'TST Samsung Galaxy Grand', group:'High Tech', category:'Phones', province:'Vientiane Capital', district:'Xaythany', price:'6000', currency:'THB', photo:'20140218-101800-1602504d17.jpg', id: 5 },
        { shortrelativetime:'1 day ago', title: 'TST ຂາຍດິນປຸກສ້າງ', group:'Real Estate', category:'Land or House', province:'Vientiane Capital', district:'Xaythany', price:'850000', currency:'THB', photo:'20140715-080420-4a0ba40b89.jpg', id: 6 },
        { shortrelativetime:'08 Jun 2014', title: 'TST HTC One', group:'High Tech', category:'Phones', province:'Vientiane Capital', district:'Xaythany', price:'12000', currency:'THB', photo:'20140604-083644-046276fe30.jpg', id: 9 }
    ],
    getAds: function() {
        return this.data
    },
    getAd: function(adId) {
        var dfd = $q.defer()
        this.ads.forEach(function(ad) {
            if (ad.id === adId) dfd.resolve(ad)
        })

        return dfd.promise
    }

  }
})

ionic framework Making a Signature Drawpad

ionic framework Making a Signature Drawpad


Ionic Framework Making a Signature Drawpad  today discussed this task is Recently I was working on some app and wanted an opportunity for the user to write something down. As I was working with the html5 canvas, I found a very good looking library which I want to show you today: The signature pad. This library allows to draw on your device, with not just a normal bold line but with a quite realistic appeal. Let’s make a simple app to test it!

ionic framework Making a Signature Drawpad
ionic framework Making a Signature Drawpad


Setup a simple App



ionic start devdactic-signature blank
cd devdactic-signature
bower install --save signature_pad
I like to install those packages whenever possible through bower, as it makes managing those dependencies a lot easier. As bower will install our libs always to the same folder, we can go ahead and include the js file at the top of our index.html file:

<script src='lib/signature_pad/signature_pad.js'></script>

Include the Signature Pad functionalities

To use the library, we must define a canvas element inside our index.html which will be the area for the user to draw his signature (or anything else). For this tutorial, we will just have a tiny area at the top, which has the signatureCanvas id so we can get it later in our controller. Additionally I created 2 buttons, which can clear the area or save the current content of the area. Below we have a image, which will show our last saved signature from the canvas. So go ahead and replace everything inside the body with this:

<body ng-app='starter' ng-controller='SignatureCtrl'>
 
    <ion-pane>
      <ion-header-bar class='bar-calm'>
        <h1 class='title'>Devdactic Signature Drawpad</h1>
      </ion-header-bar>
 
      <ion-content class='has-header padding' scroll='false'>
          <canvas id='signatureCanvas' width='300' height='180' style='border: 1px solid black;'></canvas>
          <div class='button-bar'>
              <a class='button button-energized' ng-click='clearCanvas()'>Clear</a>
              <a class='button button-balanced' ng-click='saveCanvas()'>Save</a>
          </div>
          <br>
          <img ng-src='{{signature}}'/>
      </ion-content>
    </ion-pane>
  </body>
We have now defined everything we need inside our index, now we will create the controller which will use the signature pad functionality. Open your app.js and add this:

.controller('SignatureCtrl', function($scope) {
    var canvas = document.getElementById('signatureCanvas');
    var signaturePad = new SignaturePad(canvas);
 
    $scope.clearCanvas = function() {
        signaturePad.clear();
    }
 
    $scope.saveCanvas = function() {
        var sigImg = signaturePad.toDataURL();
        $scope.signature = sigImg;
    }
})
First of all, we get our canvas element through our defined id. Afterwards, we create a new SignaruePad from our canvas element. Now we can simply call functions on this element, thats all! Our clearCanvas() will, well, obviously just clear the canvas drawing area, and our saveCanvas() function gets the image data from the canvas by calling the toDataURL() on our signature pad. This info can be directly used to update our image below.

These are just some simple functions, there are some more things you can edit, which include:

  • dotSize – Size of dot
  • minWidth – Minimum size of a line
  • maxWidth – Maximum sizw of a line
  • backgroundColor – Color used when the canvas is cleared
  • penColor – Color of your line
  • onBegin & onEnd – Callback functions