[PHP] ffmepg 相關筆記

最近工作需要用到一些audio的處理，記錄一下相關的ffmpeg討論資源。

php 使用exec 執行 ffmpeg指令
http://www.phpro.org/tutorials/Video-Conversion-With-FFMPEG.html

Binary data 處理
http://blog-en.openalfa.com/how-to-work-with-binary-data-in-php

Audio codec:
https://trac.ffmpeg.org/wiki/audio%20types

讀取WAV檔
http://www.mcpressonline.com/web-languages/easily-manage-wav-files-with-php.html

WAV file/read
https://gist.github.com/Xeoncross/3515883
https://github.com/boyhagemann/Wave

音频格式详解：WAV
http://www.aliog.com/39896.html

READ WAV
http://www.bloggingzeal.com/how-to-read-a-wav-file-with-php/

pack/unpack format
a - NUL-padded string
A - SPACE-padded string
h - Hex string, low nibble first
H - Hex string, high nibble first
c - signed char
C - unsigned char
s - signed short (always 16 bit, machine byte order)
S - unsigned short (always 16 bit, machine byte order)
n - unsigned short (always 16 bit, big endian byte order)
v - unsigned short (always 16 bit, little endian byte order)
i - signed integer (machine dependent size and byte order)
I - unsigned integer (machine dependent size and byte order)
l - signed long (always 32 bit, machine byte order)
L - unsigned long (always 32 bit, machine byte order)
N - unsigned long (always 32 bit, big endian byte order)
V - unsigned long (always 32 bit, little endian byte order)
f - float (machine dependent size and representation)
d - double (machine dependent size and representation)
x - NUL byte
X - Back up one byte
@ - NUL-fill to absolute position

a一个填充空的字节串
A一个填充空格的字节串
b一个位串，在每个字节里位的顺序都是升序
B一个位串，在每个字节里位的顺序都是降序
c一个有符号char（8位整数）值
C一个无符号char（8位整数）值；关于Unicode参阅U
d本机格式的双精度浮点数
f本机格式的单精度浮点数
h一个十六进制串，低四位在前
H一个十六进制串，高四位在前
i一个有符号整数值，本机格式
I一个无符号整数值，本机格式
l一个有符号长整形，总是32位
L一个无符号长整形，总是32位
n一个16位短整形，“网络”字节序（大头在前）
N一个32位短整形，“网络”字节序（大头在前）
p一个指向空结尾的字串的指针
P一个指向定长字串的指针
q一个有符号四倍（64位整数）值
Q一个无符号四倍（64位整数）值
s一个有符号短整数值，总是16位
S一个无符号短整数值，总是16位，字节序跟机器芯片有关
u一个无编码的字串
U一个Unicode字符数字
v一个“VAX”字节序（小头在前）的16位短整数
V一个“VAX”字节序（小头在前）的32位短整数
w一个BER压缩的整数
x一个空字节（向前忽略一个字节）
X备份一个字节
Z一个空结束的（和空填充的）字节串

[jQuery plugin/CSS] 處理Youtube影片置入背景RWD的方法 :D

最近製作的網站有需要將youtube影片放置某一個元素裡面當背景，
找了二個不錯的資料如下，有興趣的朋友可以試玩一下。

http://rochestb.github.io/jQuery.YoutubeBackground/
https://github.com/chriscoyier/Fluid-Width-Video
http://www.seanmccambridge.com/tubular/

[PHP] Composer 教學筆記

現在寫php一定要會用的套件管理工具composer

安裝

參考一下這篇
http://iambigd.blogspot.tw/2013/07/php-composer.html

快速安裝使用

1. 首先要在專案下建立composer.json，加入你要引用的套件(管理套件相依性)

{
    "require": {
        "monolog/monolog": "1.2.*"
    }
}

2. 然後執行composer install

3. 接著就會在專案下產生composer.lock檔案以及vendor目錄

composer.lock

在首次安裝套件完畢後，會產生這個檔案，裡面記錄了所安裝套件的資訊。這個檔案的真正作用是：如果目錄中有這個檔案，執行安裝時，就不會去搜尋更新的版本，而是依照這個檔案中記錄的版本來安裝。這個設計很重要，因為新版的套件很有可能與目前使用的版本不相容，如果不是使用同樣版本，很難保證系統的穩定。過去在使用pear來管理套件時，如果不注意，就有可能發生升級導致的慘劇。

vendor目錄(預設目錄)

主要含以下內容

• vender/autoload.php

只要引用這個檔案，就可以載入套件中所有對外公開的類別。

require 'vendor/autoload.php';

• vender/composer

自動載入的載入器與快取檔

• 各套件資料夾目錄

依造命名規則/

場景應用注意(From 大澤小木鐵phpconf簡報):

1. Git只需要加入composer.json 與composer.lock，方便其他成員使用
2. 請由專案負責人進行composer的第一次安裝與之後的更新
3. 不要將vendor資料夾送入Git，其他團隊成員應該只要透過composer install安裝
4. Library的composer.lock不要加入Git

參考

1. https://speakerdeck.com/jaceju/begining-composer
2. http://ithelp.ithome.com.tw/question/10136653

[EC2] 安裝 ffmpeg

記錄一下成功安裝ffmepg在EC2的步驟。

1. 首先建立ffmepg資料夾

$cd /usr/local/bin/

$sudo mkdir ffmpeg

$cd ffmpeg

2. weget下載stable 包

$sudo wget http://ffmpeg.gusari.org/static/64bit/ffmpeg.static.64bit.2014-07-16.tar.gz

3. 解開下載的tar檔

$sudo tar -xzf ffmpeg.static.64bit.2014-07-16.tar.gz

之後會解出ffmpeg與ffprobe二個資料夾

$ls -al

ffmpeg  ffmpeg.static.64bit.2014-07-16.tar.gz  ffprobe

4. 執行測試

$./ffmpeg -version

列出這一版的資訊

ffmpeg version N-63893-gc69defd

built on Jul 16 2014 05:38:01 with gcc 4.6 (Debian 4.6.3-1)

configuration: --prefix=/root/ffmpeg-static/64bit --extra-cflags='-I/root/ffmpeg-static/64bit/include -static' --extra-ldflags='-L/root/ffmpeg-static/64bit/lib -static' --extra-libs='-lxml2 -lexpat -lfreetype' --enable-static --disable-shared --disable-ffserver --disable-doc --enable-bzlib --enable-zlib --enable-postproc --enable-runtime-cpudetect --enable-libx264 --enable-gpl --enable-libtheora --enable-libvorbis --enable-libmp3lame --enable-gray --enable-libass --enable-libfreetype --enable-libopenjpeg --enable-libspeex --enable-libvo-aacenc --enable-libvo-amrwbenc --enable-version3 --enable-libvpx

libavutil      52. 89.100 / 52. 89.100

libavcodec     55. 66.101 / 55. 66.101

libavformat    55. 43.100 / 55. 43.100

libavdevice    55. 13.101 / 55. 13.101

libavfilter     4.  8.100 /  4.  8.100

libswscale      2.  6.100 /  2.  6.100

libswresample   0. 19.100 /  0. 19.100

libpostproc    52.  3.100 / 52.  3.100

5. 如果要在每個路徑下都能使用請做一下symbol link

$sudo ln -s /usr/local/bin/ffmpeg/ffmpeg /usr/bin/ffmpeg

TIP: 軟連結請勿打錯路徑，否則在/usr/bin/ffmpeg 會顯示紅色!!

參考資源

官網stable build
http://ffmpeg.gusari.org/static/64bit/

本文參考
http://stackoverflow.com/questions/15057151/installing-ffmpeg-on-amazon-linux-cpp-gcc-libstdc-dependancies

[快快樂樂學WordPress] 記錄一些wordpress plugin需要用的資料

Google到的Wordpress plugin教學蒐集

//好像很老的玩家lol
http://blog.wpjam.com/article/write-plugin-by-yourself/

//官方
http://codex.wordpress.org/Writing_a_Plugin
http://codex.wordpress.org/Adding_Administration_Menus
http://codex.wordpress.org/Plugin_API

fullpage.js 一頁式的網站樣版工具

如果你需要一頁式的網站樣版，可以參考一下fullpage.js這個套件

http://alvarotrigo.com/fullPage/#firstPage

[CSS3] CSS transform/transition/animation 初學筆記

最近幫朋友弄了一個網站，需要使用很多CSS transition與animation的效果，
順道找了一些不錯的資訊學習，看完就可以馬上上手許多:D，很適合初學者們

短語法

可用屬性

參考如下：

https://www.openfoundry.org/tw/tech-column/9233-css3-animation
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
http://blog.iwege.com/posts/the-different-between-transform-transition-animation.html

超強transform解說：
https://desandro.github.io/3dtransforms/

[CSS] 讓youtube影片放入DIV後能夠填滿寬高的解法

如果你有需要使用youtube連結當背景播放影片的話，可以參考以下網址的解法，
試過是可行的:D 有需要的朋友可以看看。

https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

[jQuery] scroll animation 外掛

快速上手的scroll animation外掛

https://github.com/mpalpha/animate-scroll

[Apache] Could not reliably determine the server's fully qualified domain name 錯誤訊息

AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1. Set the 'ServerName' directive globally to suppress this message

只要在
sudo vim /etc/apache2/apache2.conf

加入ServerName localhost

即可

[快快樂樂學Wordpress] wordpress來指定某個用戶登入以實作SSO(單點登入)

最近實作了一個wp的SSO機制，
主要用了get_user_by的方法來取得用戶的資訊後，
再透過wp_set_current_user與wp_set_auth_cookie設定用戶的session並執行wp_login的hook即可。

if($user){

   //do the single sing on
   wp_set_current_user( $user_id, $user->user_login );
      wp_set_auth_cookie( $user_id );
      
      //email
      // echo $user->user_login;

      do_action( 'wp_login', $user->user_login,$user );
  }
 

REF

http://carlofontanos.com/auto-login-to-wordpress-from-another-website/

[快快樂樂學Wordpress] 新增plugin教學

//註冊文章類型->也會產生一個admin的側欄，多一個類型就會多一個側欄
register_post_type

//新增外掛至admin的側欄
add_menu_page

REF
https://developer.wordpress.org/reference/functions/add_menu_page/
https://codex.wordpress.org/Function_Reference/register_post_type

[Wordpress] 自訂的php頁面呼叫wp function

require_once(dirname(dirname(__FILE__)).'/wp-load.php');

Markdown-Cheatsheet 參考表

現在流行使用Markdown來寫文件了了，
有興趣的朋友可以看一下下面這個github repo。
看一下就可以快速入門了。

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

update:

這裡有更多語法
http://pages.tzengyuxio.me/pandoc/

[WordPress] Woocomerce login hook筆記

記錄一下woocommerce hook的筆記

//一般wp_login的hook

function so_26675676_your_function($user_login, $user) {
 // your code
}
add_action('wp_login', 'so_26675676_your_function', 10, 2);

//woocommerce login hook，你可以自訂_wp_http_referer參數

add_filter( 'woocommerce_login_redirect', 'krex_redirect'); add_filter( 'woocommerce_registration_redirect', 'krex_redirect'); function krex_redirect( $redirect_to ) { if ( ! empty( $_REQUEST['_wp_http_referer'] ) ){ $ref = wp_unslash( $_REQUEST['_wp_http_referer'] ); } return $ref; }

//shortcode

[woo_social_login redirect_url="轉頁的網址"]

/*----------------------------------------------------
------------------------*/
// redirects for login / logout
/*----------------------------------------------------------------------------*/
add_filter('woocommerce_login_redirect', 'login_redirect');

function login_redirect($redirect_to) {

 $location = $_SERVER['HTTP_REFERER'];
wp_safe_redirect($location);
exit();

}

add_action('wp_logout','logout_redirect');

function logout_redirect(){

$location = $_SERVER['HTTP_REFERER'];
wp_safe_redirect($location);
exit();

}

• https://www.skyverge.com/blog/advanced-woocommerce-social-login/
• https://github.com/woothemes/woocommerce/commit/014e31952828377bf7a1ebf4e812a43d0bcefa67#commitcomment-3351995

[Wordpress Plugin] 多國語言插件

好用但要付錢的WPML多國語言插件 :D

有提供一些變數的常數

Constant	Description	Example
ICL_LANGUAGE_CODE	Code for the current language	fr
ICL_LANGUAGE_NAME	Name of current language, in the current language	Français
ICL_LANGUAGE_NAME_EN	Name of the current language name in English	French

ICL_LANGUAGE_CODE

Code for the current language

fr

ICL_LANGUAGE_NAME

Name of current language, in the current language

Français

ICL_LANGUAGE_NAME_EN

Name of the current language name in English

French

REF
https://wpml.org/
https://wpml.org/documentation/support/wpml-coding-api/

[CSS] 使用Media Query來處理不同裝置所需的樣式筆記

記錄一下相關media query的筆記。

• media query可用來依據裝置特性套用樣式。
• min-width (而不是 min-device-width) 以確保獲得最通用的體驗。
• 針對元素使用相對大小，避免版面走樣。

實作方法

使用link標籤

使用import語法

查詢語法

一般RWD最常使用以下屬性

屬性	結果
min-width	任何超過查詢中指定寬度的瀏覽器都會套用規則。
max-width	任何未超過查詢中指定寬度的瀏覽器都會套用規則。
min-height	任何超過查詢中指定高度的瀏覽器都會套用規則。
max-height	任何未超過查詢中指定高度的瀏覽器都會套用規則。
orientation=portrait	任何高度大於或等於寬度的瀏覽器都會套用規則。
orientation=landscape	任何寬度大於高度的瀏覽器都會套用規則

[CSS] 重設 絕對定位的值

今天在試media query重新定位某個icon時，發現一直無法清掉left，

查了一下google大神，可以在覆寫的css中改加上 left:auto; ，瀏覽器即會使用預設的值。

[Html5]多國語系 i18n 字串符設定

新版的lang設定值已進化成以下的列表了，有需求要朋友可以參考一下。

Lang對應清單

zh-Hans 簡體中文

zh-Hans-CN 大陸地區使用的簡體中文

zh-Hans-HK 香港地區使用的簡體中文

zh-Hans-MO 澳門使用的簡體中文

zh-Hans-SG 新加坡使用的簡體中文

zh-Hans-TW 臺灣使用的簡體中文

zh-Hant 繁體中文

zh-Hant-CN 大陸地區使用的繁體中文

zh-Hant-HK 香港地區使用的繁體中文

zh-Hant-MO 澳門使用的繁體中文

zh-Hant-SG 新加坡使用的繁體中文

zh-Hant-TW 臺灣使用的繁體中文

其他舊式用法，PS：不符合RFC 4646規範

zh-hakka 客家話

zh-cmn 普通話

[快快樂樂學Wordpress] 自訂樣版: 基礎架構 (1)

記錄一下新增wordpress樣版的筆記

樣版基本需求檔案

請在theme folder之下新增下面三個檔案

index.php

style.css

function.php

之後後台就會出現你的樣版了

DEMO

因為index.php與function.php什麼都沒寫，因此網站會呈現一片空白 Orz

完成的佈景主題所需要的檔案

 style.css

 header.php

 footer.php

 index.php

 single.php

 page.php

 sidebar.php

 comments.php

 archives.php

 search.php

 searchform.php

 404.php

 functions.php

[Html5] 在網頁播放midi音樂檔

因為工作需求需要在網頁上播放midi，

查了一下使用html5 audio的播放器是無法播放的，

使用舊式的object tag chrome會跳出禁用的警告，

最後使用https://github.com/chenx/MidiPlayer 這個方法是最簡單處理的，

只需要下載一個js檔就可以簡單使用了!!

Features

Can specify these in constructor parameter list: midi, target, loop, maxLoop, end_callback.

• - midi: MIDI file path. 
• - target: Target html element that this MIDI player is attached to. 
• - loop: Optinoal. Whether loop the play. Value is true/false, default is false. 
• - maxLoop: Optional. max number of loops to play when loop is true. Negative or 0 means infinite. Default is 1. 
• - end_callback: Optional. Callback function when MIDI ends. 
• e.g., use this to reset target button value from "stop" back to "play".
• Can specify a debug div, to display debug message: setDebugDiv(debug_div_id).
• Start/stop MIDI by: start(), stop().
• If a MIDI started play, call start() again will stop and then restart from beginning.

範例

//初始化
 // * @param midi    MIDI file path.
                    // * @param target  Target html element that this MIDI player is attached to.
                    // * @param loop    Optinoal. Whether loop the play. Value is true/false, default is false.
                    // * @param maxLoop Optional. max number of loops to play when loop is true.
                    // *                Negative or 0 means infinite. Default is 1.
                    // * @param end_callback Optional. Callback function when MIDI ends.
                    midiPlayer = new MidiPlayer(url, MIDI_ELEM_ID, true, 1, function() {
                        console.log('midi done');
                    });

//播放
 midiPlayer.play();
//停止
 midiPlayer.stop();

參考連結

https://github.com/mudcube/MIDI.js => 功能最強大的midi庫
https://developer.mozilla.org/zh-TW/docs/Web_Audio_API
http://stackoverflow.com/questions/5789734/does-the-html5-audio-tag-encompass-mid-midi-unofficially
http://homeofcox-cs.blogspot.tw/2015/04/play-midi-in-browser-by-javascript-only.html
https://github.com/chenx/MidiPlayer

[Bootstrap 3] 變更modal overlay的背景色方法

本文記錄一下如何修改bootstrap modal overlay的背景色

http://stackoverflow.com/questions/10585689/change-the-background-color-in-a-twitter-bootstrap-modal

To change the color via:

CSS

Put these styles in your stylesheet after the bootstrap styles:

.modal-backdrop {
   background-color: red;
}

Less

Changes the bootstrap-variables to:

@modal-backdrop-bg:           red;

Source

Sass

Changes the bootstrap-variables to:

$modal-backdrop-bg:           red;




[Bootstrap 3] 自訂5欄的girdsystem

本文講解如何擴充bootstrap 3，支援5欄的gird system

http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap/

[AngularJS-3rd] Angular 1.4.8 使用angular dialogs service module

最近把anrgular升級到1.4.8，記錄一下要處理的流程。

相依模組

 angular-sanitize (此模組在1.4.8被獨立了，要記得include)
 angular-ui-bootstrap Version: 1.1.0 - 2016-01-18

載入模組

ngSanitize

ui.bootstrap

dialogs.main

Dialog的控制器

要注意一下因為ui-bootstrap升級後，所以原本的$modalInstance要改用$uibModalInstance

[TaipeiOpenData] Taipei OMG(Open, Mobility, Green) 綠色交通應用開發大賽: LazyPark 懶人停

今年看了Taipei市政府舉辦了Taipei OMG(Open, Mobility, Green) 綠色交通應用開發大賽，希望參賽者透過現在的Open Data API(停車場、公車等API)來打造綠色交通應用。

由於去年買了新車，時常有找停車位的需求，因此就找到同事Eric一起來參賽，
另外為了填補簡報太工程師風格的問題，也找了公司市場行銷同事Franny來幫忙!!
順利的進入決賽隊伍，如果有看到此篇文章的格友們，快去投票官網https://taipeiomg.bhuntr.com/vote  投我們一票吧!!!

由於太多組的題目太類似的了，請支持LazyPark懶人停才對喔!!!

懶人停APP 介紹

這個APP就發想就是考量正在路上急用的用路人，因此我們只想簡化APP的操作方式，絕對不是下班沒時間開發lol。最後決定的版本就是透過省時與省錢二種查詢方式，加Web定位的方式，來提供用戶前五筆的停車場資訊。



另外考量WebAPP定位不夠準確(有誤差)以及考量有些用路人可能會前查詢目的地附近是否有相關停車資訊，因此你可以點選手動輸入目的地連結，即可手動輸入你的位址。

想試用的話，點選此網址即可開啟APP http://taipeiomg.cloudapp.net/app/#/home

有使用建議也可以貼到 粉絲團喔: https://www.facebook.com/lazypark4you/

[iOS Swift] 設定textbox變password

如果使用textbox讓用戶作為密碼輸入欄位，
只要將Secure Text Entry打開即可 :D
如下圖：

[GoogleMap] 如何監聽zoom變更的控制

如何監聽zoom變更的控制

var 
 map = new google.maps.Map($mapElement[0], mapOptions);
                console.log($mapElement[0]);
                
                google.maps.event.addListener(map, 'zoom_changed', function () {
                    var zoomLevel = map.getZoom();
                    logger.debug('zoom_changed to level: ' + zoomLevel);
}

[GIT] 重設Git專案

簡單重設Git專案的指令步驟

$>rm -rf .git 

$>git init

[iOS Swift] 如何新增專案內的資料夾

當專案愈來愈大的時候，
就需要好好定義一下專案目錄的結構，
記錄一下Xcode如何在專案中新增資料夾。

1. 專案目錄下按右鍵
2. 選擇New Group即可

[iOS Swift] 發送網路請求錯誤: App Transport Security has blocked a cleartext

在使用https://github.com/Alamofire/Alamofire來進行網路資源的request，

執行後發生以下的錯誤：

App Transport Security has blocked a cleartext 

解決方法只要info.plist檔案加入App Transport Security Settings的key，

並在此key下面再新增Allow Arbitrary Loads的key且屬性請設為YES即可

參考:

http://stackoverflow.com/questions/31254725/transport-security-has-blocked-a-cleartext-http

[iOS Swift] 替新的ViewControll場景加入控制器

記錄一下如何新增一個swift的控制器給新增的場景

1.  新增一個cocoa class

[iOS Swift] 如何重新命名ViewControll

記錄一下如何使用Xcode去重新命名你的ViewController，


1. 重新命名你的ViewController.swift檔名與裡面的類別名稱

ex: 改名為Page1VC.swift

[iOS] 模擬器尺吋的調整

由於不小心按了快速鍵導致模擬器變太小，所以記錄一下這篇...
請按選單列的Window->Scale->尺寸選擇

[freebooard] freeboard自定外掛踩雷

在測試自定義freeboard外掛的時候，發現設定屬性填空字串或空陣列，

初始化整個儀表版是會錯誤的。有用這個套件的朋友要注意一下。

[AngularJS] i18n 使用筆記

記錄一下angular translate的使用快速筆記。

環境設定

請引用angular-translate.min.js
使用模組 pascalprecht.translate

語言檔

透過 $translateProvider新增多國語系檔對應的內容，你可以另存以下的js至zh_TW.js檔

angular.module('myApp.controllers').config(function ($translateProvider) {
 $translateProvider
 .useSanitizeValueStrategy('escaped')
 .translations('zh_TW', {
  TRANSLATION_ID: 'Hello world !!',
  TRANSLATION_ID_2: 'Hello world !! {{value}}',
  TRANSLATION_ID_3: 'Hello world !! {{value1}},{{value2}}',
 });
});

$translate service處理多語系

  $translate('').then(function(translation) {
                    //translation為取得的鍵值

                });

Filter處理多語系

{{ 'TRANSLATION_ID' | translate }}

動態取代多國語言參數

使用filter

{{ 'TRANSLATION_ID_2' | translate:'{"value": 'Ken' }' }}

使用filter與多個參數

{
'TRANSLATION_ID_3': 'Hello world !! {{value1}},{{value2}}'
}

如果要多參數時，請在新增一個json變數至scope，如 $scope.translationData = {value1: 'Ken',value2: 'Ken2'}

{{ 'TRANSLATION_ID_3' | translate: translationData }}

使用directive表示式 在元素內透過translate與translate-values二個directive進行資料繫結

translate="TRANSLATION_ID_3" translate-values="{ value1: translationData.value1,value2: translationData.value2 }

事件

可以取得當語言變更的事件

$rootScope.$on('$translateChangeSuccess', function () {

// Language has changed
 });

啟動app設定語言方法

myApp.config(['$translateProvider','$windowProvider',
    function($translateProvider,$windowProvider) {
    var defaultLanguage = 'zh_TW';//你定義的語系檔名稱

    $translateProvider.use(defaultLanguage);
}])

REF

http://angular-translate.github.io/docs/#/guide/00_installation

[CI] 客制化404控制器來處理查詢結果不存在的解法

因為想客制化404的頁面來處理當用戶查詢條件結果不存在時的對應頁面，

但又不想覆想原本的show_404();系統內建的方法。

因此新增了一個新的Error_404的控制器，裡面放了index()與object_not_found()二個方法。分別針對網址亂key in 的404處理與針對查詢結果失敗的404處理。

因此在其他查詢結果的控制器如果遇到查詢失敗時，直接呼叫Error_404控制器中的object_not_found方法，因此我們需要了解如何透過CI在控制器中如何呼叫另一個控制器的方法。

參考的解法如下

yes you can

load like this inside your controller 

$this->load->library('../controllers/whathever');

and call the following method:

$this->whathever->functioname();

[Apache] apache無法啟動: make_sock: could not bind to address 0.0.0.0:80 no listening sockets available

發現VM的apache無法啟動，噴了一些
make_sock: could not bind to address 0.0.0.0:80 no listening sockets available的錯誤，找到這篇wiki https://wiki.apache.org/httpd/CouldNotBindToAddress

可能是有其他process程式佔住port或不是root的權限(Unix based systems disallow non-root users to bind processes to port numbers below 1024. Get root!)

不過最後下了apachectrl start就開啟了....

[CI] 不使用其他library在樣版裡面再讀另一個樣版

簡單的在樣版裡面又load另一個樣版的範例如下：

你要載入的目的地樣版，注意這裡的$content請輸入你的樣版路徑

<div id="content"><?php $this->load->view($content) ?></div>

在控制器裡面新增一個content變數，裡面寫你樣版的路徑

$view_data = array();
$view_data['content'] = '另一個view的路徑';
$this->load->view('主view的路徑', $view_data);

http://stackoverflow.com/questions/15096828/load-a-view-inside-another-view

[php] htaccess: Options not allowed here 異常

今天在架CI的舊專案時，發現以下error。

[Fri Dec 04 15:51:36.019560 2015] [core:alert] [pid 19393] [client 10.211.55.2:58540] /var/www/<專案名稱>/.htaccess: Options not allowed here

解決方法是把原本htaccess下面的Options設定先註解掉就好了，

不知為何先前要寫這一行XD

#Options +FollowSymLinks

        

RewriteEngine On

RewriteCond %{REQUEST_URI} ^(system|application).*

RewriteRule ^(.*)$ /index.php?/$1 [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php?/$1 [L]

[Javascript] Slideout.js製作手機滑動的側欄選單

想要有mobile web app的側欄選單，可以參考Slideout.js。

此元件有跟angular的eeh-navigation module整合，

先記錄一下。有使用再來寫使用說明。

[Handlerbar.js] 如何透過handlebar.js取得資料集內的資料

如果使用handlebar.js想要取得綁定的索引值的話，其內建的helpe就有提供@index與@key，供我們取得索引。

陣列資料

{{#each array}}

{{@index}}: {{this}}

{{/each}}

物件資料

{{#each object}}

{{@key}}: {{this}}

{{/each}}

基本上你可以取得索引值後，可以將這個值render在元素的屬性上，

例如data-index="{{#index}}"，之後用jquery綁定元素可以簡單取得資料集裡面的目標資料了。

[Bower] ubuntu run bower 發生錯誤

在新裝的ubuntu裝完npm又裝bower後，發現bower無法使用

bigd@ubuntu:~$ bower
/usr/bin/env: node: No such file or directory


可以安裝 nodejs-legacy就可以解決

sudo apt-get install nodejs-legacy

[jQuery] ajax request queue 蒐集

記錄一些使用jquery ajax queue的解決方案，目前要找的需求是要能支援concurrent ajax requ，而不是一個接著一個發送。

$.ajaxMultiQueue
https://github.com/GeReV/jQuery.ajaxMultiQueue

$.AjaxQueue https://gist.github.com/iambigd/46fe33eaf3dec450e965

http://dreamerslab.com/demos/javascript-loose-coupling-with-jquery-queue-plugin

目前使用$ajaxQueue方案，再多用一個Wrapper包起來即可。

[Android] 解除選單背景色變透明度(background-is-always-transparent)的問題

最近在處理APP選單變透明的問題，
會導致畫面的字會重疊，因此就被發bug了，
試了一些解法，最後成功的方式，記錄一下免得有新手爆雷XD

只要在styles.xml裡面加入android:panelBackground控制就好，
完整擷圖如下：

參考:
http://stackoverflow.com/questions/27787890/android-optionsmenu-issue-background-is-always-transparent

[AngularJS-3rd] eeh-navigation 選單模組

 eeh-navigation強大的選單模組，作者也提供完整的範例。

[Andriod] 使用按鈕觸發選單: openOptionsMenu();

使用按鈕觸發menu被顯示。

Button menuBtn = (Button)this.findViewById(R.id.topic_3_menu_button);
menuBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Log.d(TAG,"點擊功能選單鈕");
openOptionsMenu();
}


});

http://stackoverflow.com/questions/18913635/how-to-trigger-a-menu-button-click-event-through-code-in-android

Youtube 讓iframe有透明度

記錄一下在做youtube iframe滿版時遇到元素被遮住的問題，
可以加wmode=transparent 字串到Video的URL後面即可。
遇到IE瀏覽器記得要下meta讓IE執行edge模式

Add this in your html:

http-equiv="X-UA-Compatible" content="IE=edge" />

The page in IE is rendering in Quirk mode.

Try using Youtubes iframe embed method (if thats not what you are already doing, and add: ?wmode=transparent to the url (replace ? with & if it is not the first url variable)

[UI-Bootstrap] 讓0.12.1版的popup value支援html

如果為了讓popover的支援顯示html語法，可以自行手動新增這個directive。

記錄一下google後的記錄~~

代碼如下：

備註: 0.13版似乎已被merge進主幹了

/*新增一個ui.bootstrap.popover*/
angular.module( 'ui.bootstrap.popover' )
.directive( 'popoverHtmlUnsafePopup', function () {
    return {
        restrict: 'EA',
        replace: true,
        scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
        template: '










'
    };
})
.directive( 'popoverHtmlUnsafe', [ '$tooltip', function ( $tooltip ) {
    return $tooltip('popoverHtmlUnsafe', 'popover', 'click' );
}]);

其他用法:

1. 另外在往後的版本還有新增popover-is-open，可以提供更多彈性的控制
Starting with the 0.13.4 release, we've added the ability to programmatically control when your tooltip/popover is open or closed via the tooltip-is-open or popover-is-open attributes.

2. popover-trigger="mouseenter" 提供mouse觸發顯示

3. 手機顯示時，讓popover只維持一個關掉的方法

 angular.element(document.body).bind('click', function (e) {
         logger.debug('body click from ng');
         //Find all elements with the popover attribute
         var popups = document.querySelectorAll('*[popover]');

         if (popups) {
             //Go through all of them
             for (var i = 0; i < popups.length; i++) {
                 //The following is the popover DOM elemet
                 var popup = popups[i];
                 //The following is the same jQuery lite element
                 var popupElement = angular.element(popup);

                 var content;
                 var arrow;
                 if (popupElement.next()) {
                     //The following is the content child in the popovers first sibling
                     content = popupElement.next()[0].querySelector('.popover-content');
                     //The following is the arrow child in the popovers first sibling
                     arrow = popupElement.next()[0].querySelector('.arrow');
                 }
                 //If the following condition is met, then the click does not correspond
                 //to a click on the current popover in the loop or its content.
                 //So, we can safely remove the current popover's content and set the
                 //scope property of the popover
                 if (popup != e.target && e.target != content && e.target != arrow) {
                     if (popupElement.next().hasClass('popover')) {
                         //Remove the popover content
                         popupElement.next().remove();
                         //Set the scope to reflect this
                         popupElement.scope().tt_isOpen = false;
                     }
                 }
             }
         }
     });

參考:

    

http://stackoverflow.com/questions/11703093/how-to-dismiss-a-twitter-bootstrap-popover-by-clicking-outside

https://jsfiddle.net/mattdlockyer/C5GBU/2/

http://mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/

http://stackoverflow.com/questions/23048990/can-bootstrap-tooltips-be-turned-off-based-on-device-screen-size

http://plnkr.co/edit/fhsy4V?p=preview

https://github.com/angular-ui/bootstrap/issues/618

http://stackoverflow.com/questions/31770019/angular-ui-bootstrap-popover-how-add-a-close-button

[Java] log4j 的設定檔配置筆記

先前有筆記一下如何設定log4j，這篇只要蒐集一些有關log4j.xml的一些工作手寫:D

• log4j.xml 的優先權會大於 log4j.properties
• log4j.jar不要放在每個application中
• Web專案的話log4j.xml 的檔案路徑請放在 WEB-INF/classes/之下
• Java專案的話可以建一個resoucrce資料夾，並把log4j.xml放在之下
• 或著自行指定路徑，再利用DOMConfigurator.configure去讀取ex: DOMConfigurator.configure(log4jConfigurationFilename);

參考
http://wiki.apache.org/logging-log4j/Log4jConfigurationHelp

[Android] 解決SearchView發生 API版本錯誤

今天在使用SearchView時，

發生elicpse會發生View requires API Level11 (current min is 7): 錯誤

只要

Right click on the project folder > Android tools > Clear Link Markers 就可以解決啦

[Anroid] EditText onTextChanged 低級錯誤 infini loop

很腦的bug，記錄一下，不小心造成onTextChanged無窮執行，

起因在於更新UI Text時，又call了一下setText的函數，因為onTextChanged觸發時，Text已在UI變更，不應再使用setText

[GoogleMap] 如何動態載入Googlemap API

最近試著使用google map的離線api，目前google可以找到不同版本的，目前測試是3.8.2。

如果是在頁面直接透過script標籤引入mapapi.js是沒什麼大問題的!!

不過由於要實作讓使用者切換線上與離線地圖就發現了很扯的bug，

記錄以下失敗的方法，有需要的朋友可以參考。

嘗試失敗的方法

使用document.write，整個瀏覽器白畫面，無法使用且google map無法完全載入

                     var jsTag = '<' + 'script src="http://localhost:8080/js/libs/offlinemap/google/mapapi.js"' +
                        ' type="text/javascript"><' + '/script>';
                document.write(jsTag);

使用document.createElement的方法，console會噴以下這個錯誤 
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

   var element = document.createElement("script");
                element.src = "js/libs/offlinemap/google/mapapi.js";
                element.type = "text/javascript";
                document.getElementsByTagName("head")[0].appendChild(element);

成功的方法

[Java] Granule Asset 函式庫測試

記錄一下使用Granule來編譯js/css檔的過程，雖然專案有點舊了，但試用起來效果還不錯。
主要是看上有JSP Tag很好整合。

功能如下

1. Combine and compresses JS and CSS using different methods: on fly or in build process, CSS and JS fast compression or more sophisticated Google Closure compression, or just simple file combining.
2. No-lock in solution. The tag just put around existing scripts. The tag can be turn on/off on the different levels: page and application.
3. Debug and production modes.
4. Calculate dependencies using Closure Library package/namespace system.
5. Can automatically choose optimization methods.
6. Multiple combinations of JS/CSS even with different compression methods on one page.
7. Support JSP includes.
8. Several types of cache, memory and file.
9. Automatically regenerates the bundle if you modify an included file.
10. Proxy-friendly GZip support.
11. Rewrites relative URLs in your CSS files.
12. JSP, JSF, Grails integration.
13. Multiple loggers support (SLF4J, Log4J, Apache Logger)
14. Can be setup to preserve license headers of JS libraries.
15. JDK1.5 and higher even for Google Closure Compiler.

安裝

[Java] Granule 解決tomcat8 檔案路徑回傳null問題

https://github.com/JonathanWalsh/Granule

最近找了這個工具來幫js/css瘦身，在tomcat 8下轉換assets file路徑會在getRealPath下產生Exception。

The parameter for getRealPath() is a 'virtual path' which - unfortunately - is a concept used in the Java docs but not actually defined anywhere. It is assumed to be a path to a resource in your web application and the separator in that case is always '/' regardless of platform.

解決方法要在html頁面引用javascript file時，要多加一個/

[Shellscript] 批次修改檔名

一行指令修改檔案: D 測試環境Mac OSX已ok

 find . -name '*.jpg' -exec sh -c 'mv "$0" "${0%.jpg}.png"' {} \;


For M$ windows可以參考這個軟體