July | 2016 | KungTee

Monthly Archives: July 2016

ionic & ngCordova GPS Map

Published July 29, 2016 | By admin

ให้เปิดไฟล์ index.html ในส่วนของ Header ให้ แปะไว้ด้านบนลองลงมาจาก style.css

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=true&amp;">
        </script>

1 2	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&"> </script>

ให้เปิดไฟล์ app.js แล้วแปะ Controller ลงไป

.controller('MapCon', function($scope, $cordovaGeolocation, $ionicLoading) {
  var myLocation = new google.maps.LatLng(13.770742, 100.5024268);
  var RMUTP = new google.maps.LatLng(13.770999, 100.504326);

  var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: myLocation,
    zoom: 15
  });


  console.log(map)

  $scope.map = map;
  $ionicLoading.show();
  var posOptions = {
    timeout: 10000,
    enableHighAccuracy: true
  };
  $cordovaGeolocation
    .getCurrentPosition(posOptions)
    .then(function(position) {


      $ionicLoading.hide();

      var lat = position.coords.latitude;
      var lng = position.coords.longitude;


      //  alert("Got position: " + lat + ", " + lng);



      var myLocation = new google.maps.LatLng(lat, lng);


      var map = new google.maps.Map(document.getElementById('map'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: myLocation,
        zoom: 12
      });
      var marker = new google.maps.Marker({
        map: map,
        label: "U",
        position: myLocation
      });
      var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
      var beachMarker = new google.maps.Marker({
        position: RMUTP,
        map: map,
        icon: image
      });


    }, function(err) {

      $ionicLoading.hide();

      if (error.code == PositionError.PERMISSION_DENIED) {
        alert("Permission denied. check setting");
      } else if (error.code == PositionError.POSITION_UNAVAILABLE) {
        alert("Cannot get position. May be problem with network or can't get a satellite fix.");
      } else if (error.code == PositionError.TIMEOUT) {
        alert("Geolocation is timed out.");
      } else {
        alert(error.message);
      }
    });
})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

.controller('MapCon', function($scope, $cordovaGeolocation, $ionicLoading) {

var myLocation = new google.maps.LatLng(13.770742, 100.5024268);

var RMUTP = new google.maps.LatLng(13.770999, 100.504326);

var map = new google.maps.Map(document.getElementById('map'), {

mapTypeId: google.maps.MapTypeId.ROADMAP,

center: myLocation,

zoom: 15

});

console.log(map)

$scope.map = map;

$ionicLoading.show();

var posOptions = {

timeout: 10000,

enableHighAccuracy: true

};

$cordovaGeolocation

.getCurrentPosition(posOptions)

.then(function(position) {

$ionicLoading.hide();

var lat = position.coords.latitude;

var lng = position.coords.longitude;

// alert("Got position: " + lat + ", " + lng);

var myLocation = new google.maps.LatLng(lat, lng);

var map = new google.maps.Map(document.getElementById('map'), {

mapTypeId: google.maps.MapTypeId.ROADMAP,

center: myLocation,

zoom: 12

});

var marker = new google.maps.Marker({

map: map,

label: "U",

position: myLocation

});

var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';

var beachMarker = new google.maps.Marker({

position: RMUTP,

map: map,

icon: image

});

}, function(err) {

$ionicLoading.hide();

if (error.code == PositionError.PERMISSION_DENIED) {

alert("Permission denied. check setting");

} else if (error.code == PositionError.POSITION_UNAVAILABLE) {

alert("Cannot get position. May be problem with network or can't get a satellite fix.");

} else if (error.code == PositionError.TIMEOUT) {

alert("Geolocation is timed out.");

} else {

alert(error.message);

}

});

})

ส่วนหน้า index.html ในส่วนของ body ให้ใส่ tag ด้านล่างลงไปเพื่อสแดงผล

    <!-- Google Maps -->
          <div id="map"></div>

          <div class="buttons" ng-click="locate()">
              <button class="button button-clear icon ion-android-locate"></button>
          </div>

1

2

3

4

5

6

</div>

ให้เปิดไฟล์ style.css ซึ่งจะอยู่ในฟอรเดอร์ www/css/ และกำหนด style ให้กับ element id map

/* Empty. Add your own CSS if you like */
#map {
  width: 100%;
  height: 80%;
  background-color: yellow;
}

1

2

3

4

5

6

/* Empty. Add your own CSS if you like */

#map {

width: 100%;

height: 80%;

background-color: yellow;

}

Posted in ionic, Uncategorized | Leave a comment

ngCordova FlashLight

Published July 28, 2016 | By admin

<!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 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="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane ng-controller="MyCtrl">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>

    <div class="card">
      <div class="item item-text-wrap">
        <button class="button button-block button-calm" ng-click="LightOn()">
            เปิดไฟ
        </button>
        <button class="button button-block button-assertive" ng-click="LightOff()">
            ปิดไฟ
        </button>
      </div>
    </div>

          </ion-content>
    </ion-pane>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<!DOCTYPE html>

<html>

<head>

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above

-->

</head>

<ion-pane ng-controller="MyCtrl">

<ion-header-bar class="bar-stable">

<h1 class="title">Ionic Blank Starter</h1>

</ion-header-bar>

<ion-content>

เปิดไฟ

</button>

ปิดไฟ

</button>

</div>

</ion-content>

</ion-pane>

</body>

</html>

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic','ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller('MyCtrl', function($scope, $cordovaFlashlight) {

$scope.LightOn=function(){
  $cordovaFlashlight.switchOn()
    .then(
      function (success) { /* success */ },
      function (error) { /* error */ });
}

$scope.LightOff=function(){
  $cordovaFlashlight.switchOff()
    .then(
      function (success) { /* success */ },
      function (error) { /* error */ });

}



})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules

// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)

// the 2nd parameter is an array of 'requires'

angular.module('starter', ['ionic','ngCordova'])

.run(function($ionicPlatform) {

$ionicPlatform.ready(function() {

if(window.cordova && window.cordova.plugins.Keyboard) {

// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard

// for form inputs)

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

// Don't remove this line unless you know what you are doing. It stops the viewport

// from snapping when text inputs are focused. Ionic handles this internally for

// a much nicer keyboard experience.

cordova.plugins.Keyboard.disableScroll(true);

}

if(window.StatusBar) {

StatusBar.styleDefault();

}

});

})

.controller('MyCtrl', function($scope, $cordovaFlashlight) {

$scope.LightOn=function(){

$cordovaFlashlight.switchOn()

.then(

function (success) { /* success */ },

function (error) { /* error */ });

}

$scope.LightOff=function(){

$cordovaFlashlight.switchOff()

.then(

function (success) { /* success */ },

function (error) { /* error */ });

}

})

Posted in AngularJS, ionic | Tagged Flash On | Leave a comment

เมนูรายงานที่สามารถดูได้จากระบบ MIS

Published July 24, 2016 | By admin

ในระบบ MIS สามารถเข้าดูเมนูต่างๆ ที่มีการ update และข้อมูลค่อนข้างครบถ้วน (ถ้าส่วนในข้อมูลไม่ครบหรือไม่แน้ใจจะแสดงสีตัวอักษรเป็นสีแดง) วิธีการเข้าใช้งานให้เข้าเว็บไซต์ http://mis.rmutp.ac.th และทำการ Login เมื่อ Login แล้วสามารถกดตามหัวข้อด้านล่างเพื่อเข้าดูรายละเอียดทันที

หมวดข้อมูลคุลากร

บุคลากร แผนภูมิและข้อมูลสารสนเทศ ค่อนข้างจะ 100% สามารถดูรายละเอียดได้ถึงข้อมูลรายบุคคล

ผู้เกษียณอายุ แสดงข้อมูลได้ละเอียด และสามารถเลือกดูข้อมูลอีกหลายสิบปีข้างหน้าได้ เพื่อคาดการ์ณผู้จะเกษียณอายุได้

อบรม/ประชุม/สัมมนา สามารถดูรายละเอียดการเข้าร่วมอบรม ประชุม สัมมนาได้ และแสดงเป็นกราฟเพื่อคาดการ์ณสถิติการพัฒนาบุคลากรในแต่ละปีได้

ผู้รับทุนการศึกษา เมนูนี้มีข้อมูลปีการศึกษา 58 ไม่แน้ใจว่า กบ. ไม่ลงข้อมูลหรือว่าปี 59 ยังไม่ได้มีข้อมูลขอทุน

อาจารย์/อายุงาน/ตำแหน่งวิชาการ ข้อมูลนี้แยกตำแหน่งอาจารย์ใน HRM ออกมา แต่ข้อมูลอาจารย์ที่จ้างพิเศษจะไม่อยู่ในนี้

จำแนกตามระดับการศึกษา เป็นการแยกข้อมูลบุคลากร ตามระดับการศึกษา แต่ละหน่วยงาน

หมวดข้อมูลนักศึกษา

นักศึกษาทั้งสิ้น เมนูนี้มีข้อมูลปีการศึกษา 58 ปีการศึกษา 59 เป็นข้อมูลที่เด็กกำลังจะเข้าเรียนในเทอมนี้ข้อมูลยังไม่นิ่ง

แผนรับนักศึกษา ข้อมูลจากทะเบียนมีแค่ปี 57 ที่รับมาเรียนปี 58 ซึ่งข้อมูลการรับปีปัจจุบันยังไม่มี

นักศึกษา FTES เป็นข้อมูลจากทะเบียนโหลดเป็นไฟล์ excel และ pdf

นักศึกษาเกรดเฉลี่ยต่ำกว่า 2 แสดงข้อมูลจากเกรดนักศึกษาที่ไม่ถึง 2 แสดงเป็นกราฟและสามารถแยกเป็นคณะ เพื่อเข้าถึงข้อมูลเด็กที่มีแนวโนมจะเรียนไม่จบได้

หมวดข้อมูลหลักสูตร

หลักสูตร-นักศึกษา แสดงระดับหลักสูตร แยกคณะ สาขา และจำนวนนักศึกษาในหลักสูตร

หลักสูตร-อาจารย์ (สสท.) แสดงข้อมูลหลักสูตรต่อจำนวนอาจารย์ โดยแยกอาจารย์ประจำ อาจารย์พิเศษ และจ้างมา ข้อมูลจากระบบทะเบียน

หลักสูตร-อาจารย์ (กบ.) คล้ายกับข้อที่ 2. แต่แสดงข้อมูลจากอาจารย์ของมหาวิทยาลัยที่มีข้อมูลอยู่ในระบบ HRM

หมวดข้อมูลหน่วยงาน
ข้อหน่วยงาน และข้อมูลบุคลากร แยกได้ครบถ้วน แต่ข้อมูลอาคารและข้อมูลห้องไม่ได้ดึงจากระบบ BIM

หมวดข้อมูลกองคลัง
แสดงข้อมูลวัสดุจากระบบ ERP เพื่อให้บุคลากรกองคลังและผู้ที่เกี่ยวข้องเรียกดูข้อมูลได้

หมวดข้อมูลครุภัณฑ์
ข้อมูลเก่าไม่ได้อัพเดท ดึงจาก HRM

หมวดข้อมูลการวิจัย
ข้อมูลดึงจากระบบบริหารงานวิจัย rpm.rmutp.ac.th มาแสดงเป็นกราฟและแสดงข้อมูลเป็นรายปี

หมวดข้อมูลแผนปฎิบัติงาน
ข้อมูลแผนการปฏิบัติงาน ที่มีปัญหา ไม่สามารถหาข้อมูลที่ถูกต้องมาแสดงได้ ปัญหาในระบบ BPM กับข้อมูลจริงที่กองแผนรายงานไม่ตรงกัน

หมวดข้อมูลสถิติ
เป็นการนำข้อมูลในหมวดหมู่ต่างๆ มาแสดงเป็นกราฟ เช่น

สถิติแผนรับสมัครนักศึกษา

ผู้เกษียณรายปีต่อหน่วยงาน

สถิติรับพนักงานในรอบ 5 ปี

สถิติการเข้าใช้งานระบบ MIS

Posted in update web 2016 | Tagged mis | Leave a comment

ปรับปรุงรายงานสถิติการเข้าใช้งาน edoc

Published July 24, 2016 | By admin

ปรับปรุงระบบรายงานการเข้าใช้งานระบบสารบรรณอิเล็กทรอนิกส์ หรือ edoc ให้แสดงผลถูกต้อง สามารถเข้าใช้งานได้ที่ http://203.158.144.140/edoc_report/userreport.aspx หรือจากหน้าระบบสารบรรณอิเล็กทรอนิกส์และเลือกคลิ๊กตามรูปด้านล่าง

ปรับแก้ไขปีให้ถูกต้องจาก 2014 เป็น 2016

ในแท็บด้านบน ส่วนตารางข้อมูล สามารถแสดงรายงานแยกตามบุคคล เพื่อแสดงสถิติการเข้าใช้ edoc เป็นรายบุคคลในแต่ละเดือน แต่ละปีได้

Posted in update web 2016 | Tagged edoc | Leave a comment

Update BPM Track เพื่อแสดงผลการติดตามโครงการและกิจกรรมตามแผนงบประมาณ

Published July 24, 2016 | By admin

Update BPM Track เพื่อแสดงผลการติดตามโครงการและกิจกรรมตามแผนงบประมาณ มีการปรับแก้ให้แสดงผลแบบ P และ A ในแต่ละไตรมาศ สามารถแสดงกิจกรรมหรือโครงการ ที่กำลังดำเนินการ ยังไม่ดำเนินการ หรือดำเนินการแล้วเสร็จได้ ในปีงบประมาณปัจจุบัน และสามารถคลิ๊กดูรายละเอียดได้

เมือกดเข้าไปดูจากชื่อโครงการหรือกิจกรรมจะแสดงรายละเอียดดังภาพด้านล่าง

Posted in update web 2016 | Tagged bpm track | Leave a comment

ionic framework & Sqlite & ngCordova

Published July 22, 2016 | By admin

ionic framework & Sqlite & ngCordova เป็นการใช้งานฐานข้อมูล sqlite ที่เป็นฐานข้อมูลบน smart phone ที่นิยมใช้กันใน ionic สามารถใช้ ngCordova ในการ install plugin Sqlite เพื่อใช้งานได้ทันทีดังนี้

สร้างโปรเจ็คใหม่ด้วย command prompt

ionic start sqlapp blank

1

ionic start sqlapp blank

cd sqlapp

1

cd sqlapp
ไปที่ folder sqlapp และ open with atom (text editor)
ไปที่ไฟล์ config.xml แก้ไข name กับ widget id
ใช้ bower install ngcordova

bower install -g ngCordova

1

bower install -g ngCordova

หลังจากนั้นให้เปิดไฟล์ index.html และนำ script ng-cordova.js ไปวางไว้ก่อน cordova.js

<script src="lib/ngCordova/dist/ng-cordova.js"></script><script src="cordova.js"></script>

1

<script src="lib/ngCordova/dist/ng-cordova.js"></script><script src="cordova.js"></script>

หลังจากนั้นให้เปิดไฟล์ app.js และเพิ่ม ngCordova ในส่วนของ angular.module()

angular.module('starter', ['ionic','ngCordova'])

1

angular.module('starter', ['ionic','ngCordova'])
ลง plugin Sqlite

cordova plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git

1

cordova plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git
เปิดไฟล์ app.js กำหนด var db = null; ไว้ด้านบนสุด

ในส่วนของไฟล์ app.js ในส่วนของ $ionicPlatform.ready จะให้สร้าง db และสร้าง table ขึ้นมา

.run(function($ionicPlatform, $cordovaSQLite) {
    $ionicPlatform.ready(function() {
      try {
        db = $cordovaSQLite.openDB({
          name: "my.db",
          location: 'default'
        });
        $cordovaSQLite.execute(db,
          "CREATE TABLE IF NOT EXISTS translog " +
          "(id integer primary key, action text, " +
          "amount integer)"
        );
      } catch (e) {
        alert(e);
      } finally {

      }

      if (window.cordova && window.cordova.plugins.Keyboard) {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

        // Don't remove this line unless you know what you are doing. It stops the viewport
        // from snapping when text inputs are focused. Ionic handles this internally for
        // a much nicer keyboard experience.
        cordova.plugins.Keyboard.disableScroll(true);
      }
      if (window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

.run(function($ionicPlatform, $cordovaSQLite) {

$ionicPlatform.ready(function() {

try {

db = $cordovaSQLite.openDB({

name: "my.db",

location: 'default'

});

$cordovaSQLite.execute(db,

"CREATE TABLE IF NOT EXISTS translog " +

"(id integer primary key, action text, " +

"amount integer)"

);

} catch (e) {

alert(e);

} finally {

}

if (window.cordova && window.cordova.plugins.Keyboard) {

// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard

// for form inputs)

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

// Don't remove this line unless you know what you are doing. It stops the viewport

// from snapping when text inputs are focused. Ionic handles this internally for

// a much nicer keyboard experience.

cordova.plugins.Keyboard.disableScroll(true);

}

if (window.StatusBar) {

StatusBar.styleDefault();

}

});

})

ที่ command prompt สั่ง ionic platform add android
และใช้คำสั่ง ionic run android
พิมพ์คำสั่ง monitor ใน command prompt เพื่อเปิด android monitor
พิมพ์คำสั่ง ionic run android หรือใช้คำสั่ง ionic emulate android
เราสามารถเข้าดู app ของเราใน android monitor ได้จากภาพ และให้เลือก save db ลงมาเพื่อดูว่ามีข้อมูลอะไรบ้าง

แก้ไขไฟล์ app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var db = null;
angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform, $cordovaSQLite) {
    $ionicPlatform.ready(function() {
      try {
        db = $cordovaSQLite.openDB({
          name: "my.db",
          location: 'default'
        });
        $cordovaSQLite.execute(db,
          "CREATE TABLE IF NOT EXISTS translog " +
          "(id integer primary key, action text, " +
          "amount integer)"
        );
      } catch (e) {
        alert(e);
      } finally {

      }

      if (window.cordova && window.cordova.plugins.Keyboard) {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

        // Don't remove this line unless you know what you are doing. It stops the viewport
        // from snapping when text inputs are focused. Ionic handles this internally for
        // a much nicer keyboard experience.
        cordova.plugins.Keyboard.disableScroll(true);
      }
      if (window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
  //*****************COUNT DATA****************
  .controller('MyCon', function($scope, $ionicPlatform, $cordovaSQLite,$interval) {


    $scope.ShowCount = function() {
      /* SELECT COMMAND */
      $cordovaSQLite.execute(db,
        "SELECT count(*) as totaldata FROM translog"
      ).then(
        function(res) {
          if (res.rows.length > 0) {
            alert("have : " + res.rows.item(0).totaldata + " record.");
          }
        },
        function(error) {
          alert(error);
        }
      );

    }

    //*****************GET ALL DATA****************
    $scope.ShowAllData = function() {
      /* SELECT COMMAND */
      $scope.logs = [];
      $cordovaSQLite.execute(db,
        "SELECT * FROM translog ORDER BY id DESC"
      ).then(
        function(res) {
          if (res.rows.length > 0) {
            for (var i = 0; i < res.rows.length; i++) {
              $scope.logs.push({
                id: res.rows.item(i).id,
                action: res.rows.item(i).action,
                amount: res.rows.item(i).amount
              });
            }
          }
        },
        function(error) {
          alert(error);
        }
      );

    }



    //*****************INSERT DATA****************
    $scope.add = function(action, amount) {

      try {
        if (action == 'expense') {
          amount = amount * -1;
        } else {
          amount = amount * 1;
        }

        if (amount != 0) {
          $cordovaSQLite.execute(db,
            "INSERT INTO translog (action, amount) VALUES(?,?)", [action, amount]
          );
        }
        alert("Inserted.");
        $scope.ShowAllData();
      } catch (e) {
        alert(e);
      } finally {

      }








      //$state.go('summary');

    };

    //*****************DELETE DATA****************
    $scope.delete = function(id) {

      try {

        if (id != '') {
          $cordovaSQLite.execute(db,
            "DELETE FROM translog WHERE id=?", [id]
          );
        }
        alert("Deleted.");
        $scope.ShowAllData();
      } catch (e) {
        alert(e);
      } finally {

      }
    };

//$scope.ShowAllData();

$interval($scope.ShowAllData, 2000,1);





  })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules

// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)

// the 2nd parameter is an array of 'requires'

var db = null;

angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform, $cordovaSQLite) {

$ionicPlatform.ready(function() {

try {

db = $cordovaSQLite.openDB({

name: "my.db",

location: 'default'

});

$cordovaSQLite.execute(db,

"CREATE TABLE IF NOT EXISTS translog " +

"(id integer primary key, action text, " +

"amount integer)"

);

} catch (e) {

alert(e);

} finally {

}

if (window.cordova && window.cordova.plugins.Keyboard) {

// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard

// for form inputs)

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

// Don't remove this line unless you know what you are doing. It stops the viewport

// from snapping when text inputs are focused. Ionic handles this internally for

// a much nicer keyboard experience.

cordova.plugins.Keyboard.disableScroll(true);

}

if (window.StatusBar) {

StatusBar.styleDefault();

}

});

})

//*****************COUNT DATA****************

.controller('MyCon', function($scope, $ionicPlatform, $cordovaSQLite,$interval) {

$scope.ShowCount = function() {

/* SELECT COMMAND */

$cordovaSQLite.execute(db,

"SELECT count(*) as totaldata FROM translog"

).then(

function(res) {

if (res.rows.length > 0) {

alert("have : " + res.rows.item(0).totaldata + " record.");

}

},

function(error) {

alert(error);

}

);

}

//*****************GET ALL DATA****************

$scope.ShowAllData = function() {

/* SELECT COMMAND */

$scope.logs = [];

$cordovaSQLite.execute(db,

"SELECT * FROM translog ORDER BY id DESC"

).then(

function(res) {

if (res.rows.length > 0) {

for (var i = 0; i < res.rows.length; i++) {

$scope.logs.push({

id: res.rows.item(i).id,

action: res.rows.item(i).action,

amount: res.rows.item(i).amount

});

}

},

function(error) {

alert(error);

}

);

}

//*****************INSERT DATA****************

$scope.add = function(action, amount) {

try {

if (action == 'expense') {

amount = amount * -1;

} else {

amount = amount * 1;

}

if (amount != 0) {

$cordovaSQLite.execute(db,

"INSERT INTO translog (action, amount) VALUES(?,?)", [action, amount]

);

}

alert("Inserted.");

$scope.ShowAllData();

} catch (e) {

alert(e);

} finally {

}

//$state.go('summary');

};

//*****************DELETE DATA****************

$scope.delete = function(id) {

try {

if (id != '') {

$cordovaSQLite.execute(db,

"DELETE FROM translog WHERE id=?", [id]

);

}

alert("Deleted.");

$scope.ShowAllData();

} catch (e) {

alert(e);

} finally {

}

};

//$scope.ShowAllData();

$interval($scope.ShowAllData, 2000,1);

})

index.html

<!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 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="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane ng-controller="MyCon">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content >



        <div class="list">
          <a href="#" class="item item-icon-left" ng-repeat="log in logs">
              <h2>{{log.amount}}</h2>
              <p>{{log.action}}</p>
              <button ng-click="delete(log.id)" class="button button-block button-assertive">
                 delete
              </button>
          </a>
      </div>

        <button ng-click="ShowCount()"> Show count</button>
          <button ng-click="ShowAllData()"> Show all data</button>

     <hr/>
     <div class="list">
               <label class="item item-input">
                   <span class="input-label">Insert Amount</span>
                   <input type="number" ng-model="amount">
               </label>
           </div>

           <div class="row">
               <div class="col col-50">
                   <button ng-click="add('income', amount)" class="button button-large button-block button-balanced">
                       Income :)
                   </button>
               </div>
               <div class="col col-50">
                   <button ng-click="add('expense', amount)" class="button button-large button-block button-assertive">
                       Expense :(
                   </button>
               </div>
           </div>

      </ion-content>
    </ion-pane>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

<!DOCTYPE html>

<html>

<head>

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above

-->

</head>

<ion-pane ng-controller="MyCon">

<ion-header-bar class="bar-stable">

<h1 class="title">Ionic Blank Starter</h1>

</ion-header-bar>

<ion-content >

<h2>{{log.amount}}</h2>

<p>{{log.action}}</p>

delete

</button>

</a>

</div>

<button ng-click="ShowCount()"> Show count</button>

<hr/>

<span class="input-label">Insert Amount</span>

</label>

</div>

Income :)

</button>

</div>

Expense :(

</button>

</div>

</ion-content>

</ion-pane>

</body>

</html>

Posted in ionic | Leave a comment

chat

Published July 21, 2016 | By admin

index.html

<!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 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/app.js"></script>
    </head>
    <body ng-app="starter">

        <ion-pane ng-controller="ChatCtrl">


            <ion-header-bar class="bar-stable">

                <h1 class="title">Chat App :)</h1>

            </ion-header-bar>
            <ion-content class="has-footer">
              <div class="list list-inset">
            <label class="item item-input">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="text" placeholder="Search" ng-model="SearchInput">
            </label>
            </div>
                <div class="list">

                    <a ng-repeat="c in chatLogs | filter : SearchInput" class="item item-icon-left" href="#">
                        <i class="icon {{c.chat_icon}}"></i>
                        <h2>{{c.chat_message}}</h2>
                        <em>{{c.username}}
                            on
                            {{c.chat_date}}</em>
                    </a>

                </div>

            </ion-content>

            <ion-footer-bar class="item-input-inset footer-item-input-insert bar-dark">
                <label class="item-input-wrapper">
                    <input type="text" placeholder="Message" ng-model="newMsg">
                </label>
                <button ng-click="postMsg(newMsg)" class="button button-clear" >
                    Reply
                </button>
            </ion-footer-bar>
        </ion-pane>

    </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

<!DOCTYPE html>

<html>

<head>

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above

-->

</head>

<ion-pane ng-controller="ChatCtrl">

<ion-header-bar class="bar-stable">

</ion-header-bar>

<ion-content class="has-footer">

</label>

</div>

<h2>{{c.chat_message}}</h2>

<em>{{c.username}}

on

{{c.chat_date}}</em>

</a>

</div>

</ion-content>

<ion-footer-bar class="item-input-inset footer-item-input-insert bar-dark">

</label>

Reply

</button>

</ion-footer-bar>

</ion-pane>

</body>

</html>

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if (window.cordova && window.cordova.plugins.Keyboard) {
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

            // Don't remove this line unless you know what you are doing. It stops the viewport
            // from snapping when text inputs are focused. Ionic handles this internally for
            // a much nicer keyboard experience.
            cordova.plugins.Keyboard.disableScroll(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.controller('ChatCtrl', function($scope, $http, $ionicPopup) {

    var icon = 'ion-printer';
    var name = 'Tee';

    var reload = function() {
        $http({
            url: 'http://203.158.144.140/demo_ionic_chat/Home/GetChat'
        }).then(function(res) {
            $scope.chatLogs = res.data;
        });
    }
    $scope.postMsg = function(newMsg) {
        $http.post(
            'http://203.158.144.140/demo_ionic_chat/Home/PostChat',
            {
                'username': name,
                'chat_message': newMsg,
                'chat_icon': icon
            },
            {
                method: 'POST',
                headers: {'Content-Type':'application/x-www-form-urlencoded;charset=utf-8;'}
            }
        ).then(function(res) {
            //console.log(res);
            $scope.newMsg='';
            reload();
        });
    }

    //init function;
    reload();


})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules

// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)

// the 2nd parameter is an array of 'requires'

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {

$ionicPlatform.ready(function() {

if (window.cordova && window.cordova.plugins.Keyboard) {

// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard

// for form inputs)

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

// Don't remove this line unless you know what you are doing. It stops the viewport

// from snapping when text inputs are focused. Ionic handles this internally for

// a much nicer keyboard experience.

cordova.plugins.Keyboard.disableScroll(true);

}

if (window.StatusBar) {

StatusBar.styleDefault();

}

});

})

.controller('ChatCtrl', function($scope, $http, $ionicPopup) {

var icon = 'ion-printer';

var name = 'Tee';

var reload = function() {

$http({

url: 'http://203.158.144.140/demo_ionic_chat/Home/GetChat'

}).then(function(res) {

$scope.chatLogs = res.data;

});

}

$scope.postMsg = function(newMsg) {

$http.post(

'http://203.158.144.140/demo_ionic_chat/Home/PostChat',

{

'username': name,

'chat_message': newMsg,

'chat_icon': icon

},

{

method: 'POST',

headers: {'Content-Type':'application/x-www-form-urlencoded;charset=utf-8;'}

}

).then(function(res) {

//console.log(res);

$scope.newMsg='';

reload();

});

}

//init function;

reload();

})

Posted in ionic | Leave a comment

ionic & ngordova

Published July 20, 2016 | By admin

ngCordova คือ plugins เพื่อให้ ionic สามารถสั่งงานไปยัง iOS & Android device ได้ เช่นสามารถสั่งให้ส่งเสียงร้อง สั่งให้ทำงานร่วมกับกล้อง ร่วมกับ location สามารถสั่งให้อุปกรณ์ต่างๆ ทำงาน โดยสามารถเขียนคำสั่งได้จาก AngularJS ในการควบคุมการทำงาน ซึ่งสามารถเข้าใช้ plugins ต่างๆได้ที่ http://ngcordova.com/

ตัวอย่าง ngCordova

ก่อนที่จะใช้งาน plugins จะต้องลง bower เพื่อใช้คำสั่งผ่าน command prompt ก่อนโดยการเปิด command prompt และพิมพ์ดังนี้

npm install bower

1	npm install bower

หลังจากนั้นจะต้องเปิดไฟล์ index.html ใน project และเพิ่มโค้ดใน html เพื่อเรียกใช้คำสั่ง cordova (ให้ใส่ไว้ด้านบนส่วนของ header)

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

1 2	<script src="lib/ngCordova/dist/ng-cordova.js"></script> <script src="cordova.js"></script>

และเพิ่ม ngCordova ในส่วนของไฟล์ www/js/app.js ตรง angular.module(‘starter’, [‘ionic’,’ngCordova‘])

และในไฟล์ app.js จะต้องเพิ่ม cordovaPlugin.someFunction ใน ionicPlatform.ready เพื่อให้โปรแกรมทำงานเมื่ออุปกรณ์พร้อมใช้งานไม่งั้นโปรแกรมจะ error

$ionicPlatform.ready(function() {
  $cordovaPlugin.someFunction().then(success, error);
});

1

2

3

$ionicPlatform.ready(function() {

$cordovaPlugin.someFunction().then(success, error);

});

Posted in Uncategorized | Leave a comment

ionic command

Published July 19, 2016 | By admin

ionic command จะพิมพ์ใน command prompt (cmd) เพื่อทำงาน โดยมีคำสั่งที่สำคัญดังนี้

1) คำสั่งสร้าง apps

ionic start app1 blank

1	ionic start app1 blank

ตรง app1 คือชื่อ apps ที่จะสร้าง

2) คำสั่งเปิด run serve เพื่อจำลอง app ผ่าน browser เพื่อง่ายต่อการพัฒนา apps เริ่มต้น

ionic serve

1	ionic serve

3) คำสั่งปิด serve กรณีที่ทำแล้วอยากจำลองผ่าน emulator หรือ ผ่าน device จริงจะต้องปิด serve โดยพิมพ์

q

1

q

4) ให้ ionic download sources สำหรับใช้งานกับ android device

ionic platform add android

1	ionic platform add android

ให้ ionic download sources สำหรับใช้งานกับ iOS device

ionic platform add ios

1	ionic platform add ios

กรณีที่ error จากการ ใช้คำสั่ง ionic platform add สามารถใช้คำสั่ง remove ได้

ionic platform remove android / ios

1	ionic platform remove android / ios

5) run app

สำหรับ android device / emulator

ionic run android

1	ionic run android

สำหรับ iOS device (จะต้องใช้บน Mac OS และถ้าจะลงเครื่องจริงจะต้องทำผ่าน x code)

ionic build ios

1	ionic build ios

ionic emulator ios

1	ionic emulator ios

6) build icon / splash screen

ionic resources

1	ionic resources

ถ้ารูป icon หรือ splash ไม่เปลี่ยนให้พิมพ์เพิ่ม

ionic resources --icon
ionic resources --splash

1 2	ionic resources --icon ionic resources --splash

Posted in ionic | Tagged ionic command | Leave a comment

KungTee – So Ku

Technology Web & Application

ionic & ngCordova GPS Map

ngCordova FlashLight

เมนูรายงานที่สามารถดูได้จากระบบ MIS

ปรับปรุงรายงานสถิติการเข้าใช้งาน edoc

Update BPM Track เพื่อแสดงผลการติดตามโครงการและกิจกรรมตามแผนงบประมาณ

ionic framework & Sqlite & ngCordova

chat

ionic & ngordova

ionic command

Recent Posts

Recent Comments

Archives

Categories

M	T	W	T	F	S	S
« Jan				Aug »
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31