星期一, 6月 13, 2016

[ubuntu] 調整系統時間與時區

最近在裝VM踩到系統時間未設定正確的雷,導致API的授權認證一直過期。
記錄一下這個腦洞的錯誤。


#查看系統時間 (發現時間錯誤)
date


Sun Apr 10 19:12:58 CST 2016 

#國家時間與頻率標準實驗室
sudo ntpdate time.stdtime.gov.tw
Tue Jun 14 10:20:14 CST 2016

#將硬體時間與系統時間同步
sudo hwclock -w

#重設時區 (需為root的權限)
sudo dpkg-reconfigure tzdata

Local time is now:      Sun Apr 10 19:14:39 CST 2016.
Universal Time is now:  Sun Apr 10 11:14:39 UTC 2016.


星期日, 6月 12, 2016

[C] error: unknown type name 'bool'這種錯誤

error: unknown type name 'bool'這種錯誤
可以加入#include

或換編譯 C99之後才有 http://zh.wikipedia.org/wiki/Stdbool.h

[ubuntu] 常用的指令


記錄一下常用的指令集

安裝SMB


#安裝
apt-get install samba


#安裝完畢後,先暫停服務修改設定檔.
/etc/init.d/samba stop


#編輯設定檔
sudo vim /etc/samba/smb.conf


#測試設定檔有無錯誤 (不用在指定的目錄下執行即可)
testparm





#重新啟動
/etc/init.d/samba restart

#顯示目前smb的狀態

sudo smbstatus


#新版後的ubuntu

sudo service smbd start
Stop
sudo service smbd stop
Restart
sudo service smbd restart

網路設定


[CSS] 使用css transition 做出underline的效果

作者示範了各種underline的動畫效果,有需要的朋友可以參考一下。
我的案例需要下圖中記錄的SlideIn效果。


http://bradsknutson.com/blog/css-sliding-underline/

星期二, 5月 24, 2016

[PHP] php-extension: 範例練習

經過前幾次的練習與說明,筆記一下因為自已的需求測試的範例


範例: 從自已建一個額外的C語言的檔案呼叫



1.修正一下config.m4指定載入額外的C語言

dnl config.m4 for extension


PHP_ARG_ENABLE(foo, whether to enable foo extension support,
  [--enable-foo Enable foo extension support])

dnl 檢測extension是否已被啟動
if test $PHP_FOO != "no"; then

 AC_MSG_CHECKING("start to enable extension");

  dnl PHP_NEW_EXTENSION(foo, php_foo.c, $ext_shared)

  dnl 注意多引用了自定義C語言func
    PHP_NEW_EXTENSION(foo, php_foo.c hello_world_c.c, $ext_shared)


fi


2.先建立自已的C的實作與標頭檔
hello_world_c.h, hello_world_c.c

int hello_world_c_add(int, int);


/*Hello World program*/

#include <stdio.h>
#include "hello_world_c.h"

int hello_world_c_add(int a,int b){
 int sum = 0;
 printf("hello_world_c_add is coming Orz\n");
 printf("%d\n", a);
 printf("%d\n", b);
 sum = a+b;
 printf("sum=%d\n", sum);

 return sum;
}
int main(){
 printf("Hello World C :D");
 printf("sum=%d",hello_world_c_add(10,10));
 return 0;
}


3. 在php_foo.c裡面include hello_world_c.h檔


#include "hello_world_c.h"//內部的c func

#include "php_foo.h"

#if COMPILE_DL_FOO
ZEND_GET_MODULE(foo)
#endif

....

3. 新增一個PHP_FUNCTION: 呼叫剛剛的hello_world_c_add


//呼叫自定義的c函數,來處理加法

PHP_FUNCTION(foo_hello_add) {

  php_printf("run foo_hello_add\n");

  int val1;
  int val2;
  int sum;

  //parse parameters
  if (zend_parse_parameters(ZEND_NUM_ARGS() TSRMLS_CC, "ll", &val1,&val2 ) == FAILURE) {
      RETURN_FALSE;
  }

  php_printf("val1=%d\n",val1);
  php_printf("val2=%d\n",val2);

  sum = hello_world_c_add(val1,val2);

  RETURN_DOUBLE(sum);
}




範例: C實作/標頭檔搬到子資料夾




接著想把不同自定義的C函式庫分裝到不同的sub-folder後就爆了以下訊息:



目前這個範例卡關中...

範例: 全域變數的操作




範例: 回傳resouce



參考




  • https://github.com/jheth/hello-php-extension
  • 在 PHP Extension 中加入 static 和 dynamic library
  • Linux静态链接库与动态链接库的区别及动态库的创建
  • Linux中创建静态库和动态库
  • http://php.net/manual/en/internals2.structure.globals.php
  • https://github.com/walu/phpbook/blob/master/12.5.md


星期一, 5月 23, 2016

[PHP] php-extension編譯C++


如有c++函式庫需要處理,請在config.m4加入以下指令:

PHP_REQUIRE_CXX()

PHP_SUBST(YOUREXTENSION_SHARED_LIBADD)

PHP_ADD_LIBRARY_WITH_PATH(stdc++, "", YOUREXTENSION_SHARED_LIBADD)

PHP_ADD_LIBRARY(stdc++,EXTRA_LDFLAGS)

dnl 上面設定好了,PHP_NEW_EXTENSION的第二個參數就可以輸入 c++的檔案了,下面的例子還是C
PHP_NEW_EXTENSION(foo, php_foo.c, $ext_shared)

[PHP] config.m4 指令集筆記

記錄一下一定會忘記的php-ext常用的指令說明。

指令集

  • AC_MSG_CHECKING 
畫面輸出訊息 checking whether to enable foo extension support 
 
  • PHP_SUBST 


PHP_SUBST(XXXX_SHARED_LIBADD), 其中 XXXX 為 PHP Extension 的名稱 (全大寫)


  • PHP_ADD_LIBRARY_WITH_PATH 
  • PHP_CHECK_LIBRARY
  • PHP_ADD_INCLUDE 
  • PHP_ADD_BUILD_DIR 

  • PHP_ADD_LIBRARY_WITH_PATH 


完整指令

XXXX: 你想要載入的extension name


PHP_ADD_LIBRARY_WITH_PATH([library name], [library path], XXXX_SHARED_LIBADD)


例如我們想加入 libabc.so, 而該檔案在 /usr/lib, 則我們會加入: PHP_ADD_LIBRARY_WITH_PATH(abc, /usr/lib, XXXX_SHARED_LIBADD)

  • PHP_NEW_EXTENSION 
完整指令 PHP_NEW_EXTENSION(extname, sources [, shared [,sapi_class[, extra-cflags]]])
範例 PHP_NEW_EXTENSION(foo, foo.c bar.c baz.cpp, $ext_shared)

參考
http://tglcowcow.blogspot.tw/2008/05/php-extension-static-dynamic-library.html

星期五, 5月 20, 2016

[Flickrlinkr] phpFlickr: The web service endpoint returned a "HTTP/1.1 403 Forbidden" response


今天在VM重建flickrlinkr偵錯時發生了以下錯誤:


The web service endpoint returned a "HTTP/1.1 403 Forbidden" response


由於使用phpFlickr類別時,有用到curl,所以請安裝curl for php元件


安裝方法如下


sudo apt-get install php5-curl


安裝完畢後,請重啟apache2

sudo service apache2 restart

[GIT] server certificate verification failed. 錯誤排除

fatal: unable to access 'https://bigd@bitbucket.org/shark_tech/thegrand.git/': server certificate verification failed. CAfile: /etc/ssl/certs/ca-certificates.crt CRLfile: none


bigd@ubuntu:/var/www/thegrand$  export GIT_SSL_NO_VERIFY=1

bigd@ubuntu:/var/www/thegrand$  git submodule update --init --recursive

星期三, 5月 18, 2016

[CSS 3動畫] animation 語法動畫筆記

最近一些case需要使用大量的css動畫,把一些處理到的指令筆記一下


animation的短指令

animation: name duration timing-function delay iteration-count direction;



定義動畫結束後如何停止最後一個狀態

animation-fill-mode : none | forwards | backwards | both;


none:不改变默认行为。

forwards :当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

both:向前和向后填充模式都被应用。

星期一, 5月 16, 2016

[PHP] php extension 初試: extension parser parameter (接收參數)


接續先前的基本範例,接著要來練習怎麼接收帶入extension的參數:


zend_parse_parameters方法

zend_parse_parameters提供不同的接收變數的方式, 變數1: ZEND_NUM_ARGS() TSRMLS_CC, 二個值中間是空白,ZEND_NUM_ARGS表示傳入參數的個數 變數2: 傳入變數的格式化字串

星期五, 5月 13, 2016

[PHP] php extension 初試

拜讀完php-extension骨架練習,
如果C語言忘得差不多錄影檔有從基本的C語言開始教起:D


如果C語言已經很熟的話,可以跳至26:38秒開始

測試環境

  1. MacOSX EI
  2. MAMP (所以流程中有其他錯誤要處理一下:D)

ZVal是什麼

http://php.net/manual/en/internals2.variables.intro.php



Note:


PHP is a dynamic, loosely typed language, that uses copy-on-write and reference counting.
所有的php變數型態都是定義在一個zval的struct,並且使用copy-on-write(寫入時複製)與reference counting(來判斷變數是否還有被使用)。

Null-Terminated String



初始化 ZVAL



簡化


ZVAL設定值

ZVAL_STRING
ZVAL_LONG
ZVAL_BOOL

星期二, 5月 10, 2016

星期五, 5月 06, 2016

[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一个空结束的(和空填充的)字节串

星期五, 4月 29, 2016

[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


星期四, 4月 28, 2016

[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

星期三, 4月 27, 2016

[快快樂樂學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

星期二, 4月 26, 2016

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

星期四, 3月 31, 2016

[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

即可

星期日, 3月 27, 2016

[快快樂樂學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/

星期一, 3月 21, 2016

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
有提供一些變數的常數
ConstantDescriptionExample
ICL_LANGUAGE_CODECode for the current languagefr
ICL_LANGUAGE_NAMEName of current language, in the current languageFrançais
ICL_LANGUAGE_NAME_ENName of the current language name in EnglishFrench

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

星期二, 3月 08, 2016

[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; ,瀏覽器即會使用預設的值。

星期日, 3月 06, 2016

[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 普通話

星期五, 3月 04, 2016

[快快樂樂學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





星期四, 3月 03, 2016

[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

星期三, 3月 02, 2016

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

本文記錄一下如何修改bootstrap modal overlay的背景色
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;

Sass

Changes the bootstrap-variables to:
$modal-backdrop-bg:           red;

星期一, 2月 29, 2016

[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

星期日, 2月 07, 2016

[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/




其他你感興趣的文章

Related Posts with Thumbnails