Just a Computer Graphics Studio & My Life

Archive for the ‘教學’ Category

[iOS] 產生 QRCode (QRCode Generator)

已經可以從iOS SDK呼叫method來掃描QRCode,那麼是否也能從iOS SDK來產生 QRCode (QRCode Generator)

QRCode Generator.PNG

(繼續閱讀…)

廣告

[iOS] 光學字元識別 (OCR)

光學字元識別 (Optical Character Recognition, OCR),是指對文字資料的圖像檔案進行分析識別處理,取得文字及版面資訊的過程。像是Google Translation App,已經可以透過OCR來即時辨識多國文字!

OCR sample

辨識出來應為1234HappyBoy0

(繼續閱讀…)

[Ionic][AngularJS] 選單

就像人生,面臨許多選擇,AngularJS選單可以怎麼呈現呢?

[Ionic][AngularJS] 選單.png

View的部分可以這麼寫:

/**
 Theme: AngularJS Select
 IDE: Sublime
 Language: Javascript
 Date: 106/07/13
 Author: HappyMan
 Blog: https://cg2010studio.com/
 */

    <select ng-init="somethingHere = kidList[0]"
ng-model="somethingHere"
ng-options="option.Name for option in kidList"
ng-change="select()">
    </select>

  • ng-init為預設值
  • ng-model為被選擇的變數
  • ng-options為選擇項目
  • ng-change為選擇後的行為

Controller可以這麼做:

/**
 Theme: AngularJS Select
 IDE: Sublime
 Language: Javascript
 Date: 106/07/13
 Author: HappyMan
 Blog: https://cg2010studio.com/
 */

  $scope.kidList = JSON.parse(AuthService.storageGet('kidList'));

  $scope.select = function () {
       $scope.selectId = $scope.somethingHere.Id;
  };

參考:getting the ng-object selected with ng-change

[Ionic][AngularJS] 回傳呼叫 (Callback)

呼叫API之後,要等它處理完並傳回訊息,就能進行接下來的工作,這個行為叫做回傳呼叫 (Callback),類似其它語言的ClosureBlock

那麼在AngularJS要怎麼實現Callback呢?

原來函數中的參數,可以函數型態傳入呀!

/**
 Theme: Callback
 IDE: Sublime
 Language: Javascript
 Date: 106/07/08
 Author: HappyMan
 Blog: https://cg2010studio.com/
 */

function two() {
	console.log("value is 2")
}
function one(callback) {
	console.log("value is 1")
	callback()
}
one(function() {
	two()
}) 

執行結果:

value is 1
value is 2

參考:Wait for callback response in AngularJS / Ionic

[Git] Git查詢Repository位址

這幾個月還滿常Git查詢Repository位址,還是把它記錄下來好囉~看SO有超過2000顆星,看來重要性很高!

原因是除了公司擁有的Repository,還有GitHubBitbucket等空間,突然想要重抓就必須知道位置,只是一行指令,不過我沒有特別記憶,未來就直接複製來用吧~

git config –get remote.origin.url

就會顯示如下的結果:

https://HappyMan@bitbucket.org/happystudio/happymall-ios.git

祝開發愉快:)~

參考:How can I determine the URL that a local Git repository was originally cloned from?

[Ionic][AngularJS] Youtube 離開畫面停止播放

承接[Ionic][AngularJS] 載入Youtube影片,想要離開畫面就停止播放,該怎麼做呢?因為進到下一頁,正在播放的影片還沒有被移除,就會持續播放下去。

在controllers.js中寫:

.controller('ResultCtrl', function($scope, $sce) {

  $scope.pauseVideo = function() {
    console.log('postMessage pauseVideo');
    var iframe = document.getElementsByTagName("iframe")[0].contentWindow;
    iframe.postMessage('{"event":"command","func":"' + 'pauseVideo' +   '","args":""}', '*');
  }

  $scope.playVideo = function() {
    console.log('postMessage playVideo');
    var iframe = document.getElementsByTagName("iframe")[0].contentWindow;
    iframe.postMessage('{"event":"command","func":"' + 'playVideo' +   '","args":""}', '*');
  }

  $scope.$on('$ionicView.beforeLeave', function(){
    console.log('pauseVideo');
    $scope.pauseVideo();
  });

  $scope.$on('$ionicView.enter', function(){
    console.log('playVideo');
    $scope.playVideo();
  });

})

還要在Youtube影片網址後方連接參數⋯⋯

?enablejsapi=1

格式會像是:https://www.youtube.com/embed/uSmcLz2FAUI?enablejsapi=1

程式碼才會有作用喔~

參考:How to pause or stop an iframe youtube video when you leave a tab view or minimise your Ionic App

[AngularJS] Angular Chart

有時候一些數據想要視覺化呈現,讓人看了一目瞭然,如果不想要自己花時間做介面與動畫,那麼就可以考慮第三方套件Angular Chart

Angular Chart Radar Chart.png

(繼續閱讀…)

標籤雲

%d 位部落客按了讚: