2017年4月17日 星期一

玩玩 Gstreamer

先安裝: sudo apt-get install gstreamer-1.0  libgstreamer1.0-dev gstreamer-tools
參考網址:
1.  https://gstreamer.freedesktop.org/documentation/tutorials/basic/index.html
2.  https://gstreamer.freedesktop.org/documentation/tutorials/basic/gstreamer-tools.html
程式範例:
      git clone git://anongit.freedesktop.org/gstreamer/gst-docs
      cd ./gst-docs/examples/tutorials
      gcc basic-tutorial-1.c -o basic-tutorial-1 `pkg-config --cflags --libs gstreamer-1.0`
      ./basic-tutorial-1

3. Gstreamer 名詞解釋:
    Elements: Gstreamer 的基礎單元
        例如一些內建的基礎單元: videotestsrc, decodebin, videoconvert, xvimagesink 等等,
        用 gst-inspect-1.0|egrep 查看說明:
        gst-inspect-1.0|egrep "videotestsrc|decodebin|videoconvert|xvimagesink"

    Pipeline: 管線, gst-launch-1.0 用 ! 將處理單元串接在一起, 根據輸入的順序由左至右一一串接資料流, 這種將資料流與處理單元互相串接集合成套稱之為管線

    GstPad: Gstreamer 用來作為溝通的端口稱之為 pads,簡稱 GstPad, 分別有:
            Sink pad: 作為資料吸入端
            Source pad: 作為資料輸出端
 
    Filter: 過濾中間端,有兩個端口(GstPads),端口型態一邊是輸入端(sink pad),另一邊則是輸出端(source pad)
 
    Property: 屬性, 由成對的 key=value 所組成的敘述, 例如:
                  uri="http://127.0.0.1:8080/movie.mp4"
                  uri="file:///home/mint/movie.mp4"
                  location="movie.mp4"

    Muxed: 例如一個檔案帶有 video 及 audio 資料流的稱之為 multiplexed (簡稱 muxed) file,
           常見的資料流格式: Matroska(MKV), Quick Time(QT,MOV), Advanced System Format(ASF), MWV, WMA ...等等

    Demuxer:資料流的解開程序稱之為 demuxers, 有一個吸入端(single sink pad), 多個輸出端(multiple source pad)
        例如decodebin就有一個吸入端(sink pad)及兩個輸出端分別是audio及video(source pads),用來分離出影像及聲音用

4. Gstreamer 常用處理單元:
    展現聲音單元通常用 osssink, 其他還有 "directsoundsink", "esdsink", "alsasink", "osxaudiosink", or "artsdsink".
    展現影像單元通常用 xvimagesink, 其他還有  "d3dvideosink", "ximagesink", "sdlvideosink", "osxvideosink", or "aasink".
    當處理單元無法連結時,有可能是格式不相容,可以先行轉換:
    影像傳換用: videoconvert
    聲音傳換用: audioconvert,  聲音取樣率轉換用 audioresample

5. 播放範例:
    播放影像測試信號源, 花樣採用第 11 號影像源
    gst-launch-1.0  videotestsrc pattern=11 ! videoconvert ! autovideosink
 
    擷取檔案 oceans.mov,由 decodebin 先分離出聲音與影像, 再透過聲音/影像轉換器轉換後分別交由alsasink及xvimagesink播放出來
    gst-launch-1.0  filesrc location=oceans.mov ! decodebin name=decoder decoder. ! queue ! audioconvert ! audioresample ! alsasink decoder. ! videoconvert ! xvimagesink




 

2017年4月16日 星期日

讓 c++ 程式與 Javascript 做朋友

參考網址: https://nodejs.org/api/addons.html
node-gyp 是編譯 nodejs 模組的工具,用 c++ 語言寫模組的程式,經由node-gyp開發工具編譯成 .node 模組, javascript 程式則透過 require 將自訂模組引進加以運用:

1. 先安裝 node-gyp
    sudo npm install node-gyp -g

2. 用 JSON 語法,將目標(targets)需求(所要定義的模組名稱 target_name, 及原始c++檔案名稱 sources ),寫入 binding.gyp 檔案,例如:
// binding.gyp
    {  "targets": [
          {
                "target_name":  "hellocc",
                "sources":  [ "hello.cc" ]
          }                    
    ]}

3. 開始寫 c++ 程式,先引入標頭檔 node.h,所有取用 javascript 的部份,要使用node.h內所提供的方法及宣告, 最主要部份是編寫 Method這個c++程式,  而init()主要是將c++的程式模組名稱匯出,類似 module.exports = { } 這個動作,最後交由巨集 NODE_MODULE(hellocc,init) 將 javascript 模組名稱與c++程式相互連結.
 // hello.cc:
    #include < node.h >
    namespace demo {
          using v8::FunctionCallbackInfo;
          using v8::Isolate;
          using v8::Local;
          using v8::Object;
          using v8::String;
          using v8::Value;
          void Method(const FunctionCallbackInfo < Value >& args) {
                  Isolate* isolate = args.GetIsolate(); // 獲取輸出入參數的方法
                  args.GetReturnValue().Set(String::NewFromUtf8(isolate, " cc"));// 回傳字串 cc
          }
         void init(Local < Object > exports) {
                NODE_SET_METHOD(exports, "hello", Method); // exports.hello = Method
         }
        NODE_MODULE(hellocc, init)
   }

4. configure 讓 node-gyp 根據 binding.gyp 的內容,自動建立 node-gyp 編譯環境,並將檔案寫進 build 目錄內:
     node-gyp configure  

5. build 開始編譯 hello.cc,如果沒意外的話,將會產生 hellocc.node 模組
     node-gyp build

6. 寫一個  javascript 引進該模組使用,已經編譯好的模組通常放在 ./build/Release下面:
    // hello.js
    const addon = require('./build/Release/hellocc'); // 引入自訂模組
    console.log(addon.hello()); // 呼叫模組程式 hello( ), 並印出傳回來的字串

7. 執行 javascript, 印出  cc
    js hello.js

8. clean 刪除編譯環境,會將整個目錄 build 全部移除.
    node-gyp clean


   
 

2017年4月6日 星期四

聊聊 npm ABC

參考文章: https://docs.npmjs.com/getting-started/using-a-package.json
安裝 npm (sudo apt-get install npm ,它是 Node Package Mmagement的縮寫),主要是用來管理套件的工具.

(A) npm init,  package.json
若要自訂功能可以將文件寫在 package.json 裡面, package.json 內容是用 json (Javascript Object Notation的縮寫)的語法來描述,它是成對的 key:value 加上逗號後,全部再用大括號框起來,其中key必須是用雙引號括起來的字串, value 除了可以用雙引號括起來的字串外,若有多個項目時,也可以用另一個json的語法來描述.一個最簡單的package.json內容,裡面必須要有"name"及"version"這兩個key的描述,其他可以選擇性的加入,另外key敘述的順序並不重要,當用 npm init 執行時,它會用問答的方式一個一個填入package.json裡面:

// package.json
   {
     // 常用的 key 有:
    "name": "目前的專案名稱"
    "version": "版本編號,通常使用像是 1.0.0 這種3個數字的方式來編碼",
    "description": "簡單的敘述",
    "main": "主程式檔案名稱",
    "scripts":
          {  // 可以執行的命令列, 例如
            "test": "js --version"
            "go": "js main.js"
          },
    "keywords": "關鍵詞",
    "author": "作者姓名",
    "license": "版權宣告",
    "bugs": "待解問題",
    "homepage": "官網網址",
    "dependencies": "依賴相關套件",
    "devDependencies": "依賴開發中的相關套件"
    "repository":
         { //該專案的寄存位置
            "type": "git",
            "url":  "https://github.com/username/package"
         }
  }

每次初始一個專案都要一個個輸入填寫,會覺得煩死人,可以利用nodejs對物件的語法將它匯出來( 檔案路徑及名稱是 ~/.npm-init.js ),需要注意跟json語法不同的是 ~/.npm-init.js 實際上是一個javascript,會經 nodejs執行過,因此對於物件的key並不需特別用雙引號括起來.示範用工具 vi 來編輯檔案 ~/.npm-init.js:

        vi   ~/.npm-init.js

//檔案內容
  module.exports = {
       name: 'hello',
       version: '1.0.0',
  }

將它存檔之後,只要一道命令:
    npm init -y
正常來講,會在當前目錄底下生成package.json檔案,內容就是上述檔案匯出的預設值,同時也不會出現惱人的問答,當然直接編輯package.json也是可以的.

(B) npm install, dependencies, devDependencies
如果在package.json有描述dependencies,那麼指令 npm install 就會自動安裝缺少的相關套件,一般並不需要特別去填寫這個項目,如果要自行安裝單獨套件只要下命令:
   npm install 套件名稱
如果npm install後面再添加 --save 那該套件名稱的相關性,自然會寫進package.json的 dependencies 物件裡面,如果npm install後面再添加 --save-dev 那該套件名稱的相關性就會自動寫入package.json的 devDependencies 物件裡面,示範安裝套件 uglifyjs, javascript-obfuscator, js-beautify, browserify:
   npm install   --save-dev   uglify-js@github:mishoo/UglifyJS2#harmony
   npm install   --save-dev   javascript-obfuscator
   npm install   --save   js-beautify
   npm install   --save   browserify
當完成安裝後再打開檔案package.json,可以看到在dependencies及devDependencies處,會自動加入上述套件名稱,而套件所提供的命令,通常放在 ./node_modules/套件名稱/bin 或是./node_modules/套件名稱/js/bin目錄下,用 ls 指令來找找看:
   ls -al node_modules/uglify-js/bin/uglifyjs
   ls -al node_modules/javascript-obfuscator/bin/javascript-obfuscator.js
   ls -al node_modules/js-beautify/js/bin/js-beautify.js
   ls -al node_modules/browserify/bin/cmd.js

(C) npm run, scripts
有了命令檔的存放位置後,就可自行定義由 javascript 所寫的命令,把它加在package.json的scripts物件定義裡面:
"scripts:": {
   "uglify": "js node_modules/uglify-js/bin/uglifyjs"
   "encode": "js node_modules/javascript-obfuscator/bin/javascript-obfuscator.js"
   "beauty": "js node_modules/js-beautify/js/bin/js-beautify.js"
   "browse": "js node_modules/browserify/bin/cmd.js"
   }
存檔完,用 'npm  run  自訂命令  主參數  --  其它參數' 來執行,不用輸入一長串的指令,例如:
   npm run uglify my.js
   npm run encode my.js --  -o my_obfus.js
   npm run beauty  my.js
   npm run browse my.js
當然上述簡化的動作用 linux 指令 ln -sf 也可以做到, 只是產生的連結檔,恐影響到整個專案的目錄結構,看起來雜亂無章,將它寫在 package.json裡,列出檔案時就乾淨多了.使用者也只要根據這個 package.json 就可以下載到該專案所需要的資源,省事方便多了.

2017年4月2日 星期日

上 github 申請帳號, 上傳網頁, 開啟個人網頁伺服器

加入會員:
   1. 上 github網站 ( https://github.com ) 註冊( sign-up )一個帳號, 填入
       a. 使用者名稱 (Username)
       b. 電子郵件帳號( Email Address )
       c. 認證密碼( Password )
   2. 點擊 Create an account 確認加入會員
   3. 到信箱去收電子郵件, 點選郵件內的連結認證函

會員登入:
   1. 登入(sign-in) github 網站, 鍵入申請會員時所填寫的個人資訊:
       a. 使用者名稱 (Username)或電子郵件帳號( Email Address )
       b. 認證密碼( Password )
   2. 點擊 Sign In 確認進入維護個人網頁伺服器


註冊使用個人網頁: 參考網址文章 https://pages.github.com/
   1. 登錄後, 在右下角 Your repositories 處點擊 New repository 建立個人網頁專用網址
   2. 在 repository 欄的地方, 填入前述所申請的個人網頁, 例如 amitmason.github.io,  其中 amitmason 必需是改用自己所申請的英文名稱.
   3. 點擊 Create repository

建立並上傳網頁:   
   1. 開啟終端機先下載個人網頁的 repository, 一開始是空的專案: 
       git clone https://github.com/amitmason/amitmason.github.io
   2. 進入專案目錄
       cd amitmason.github.io
   3. 建立網頁:
       echo "Hello, this is my web pages" > index.html
   4. 上傳
       git add --all
       git commit -m "My webpage"
       git push -u origin master
   5. 填寫登錄帳號及密碼
   6. 回到 github 個人網頁的 repository, 點選設定(Settings) 允許 Github Pages 運作.
   7. 開啟網址,瀏覽網頁.


2017年4月1日 星期六

linux mint 安裝新版 wine 示範並安裝 Window application

安裝 wine1.8 過程:
sudo  add-apt-repository ppa:ubuntu-wine/ppa
sudo apt-get update
sudo apt-get install wine1.8

安裝 wine 最新開發版過程:
sudo add-apt-repository ppa:wine/wine-builds
sudo apt-get update
sudo apt-get install winehq-devel
參考:
http://askubuntu.com/questions/879304/wine-2-0-says-it-supports-office-2013-how-do-i-actually-install-it
p.s.  SketchUP 2016 與 wine 2.4 版似乎不相容, 安裝時會有問題!, 因此最好還是安裝 wine1.8


底下會安裝 windows application: SketchUP 2016
1. 下載 32位元版本的 sketchup 2016:  https://www.sketchup.com/zh-TW/download/all
或直接下載: http://dl.trimble.com/sketchup/2016/zh-TW/SketchUpPro-2016-1-1450-80432-zh-TW-x86.exe

2. 設定組態以便安裝 sketchup 2016, 執行: 選單 -> Wine -> Configure wine 來設定程式組態, 參考文章:  http://askubuntu.com/questions/719504/how-do-i-install-sketchup-on-ubuntu-15-10
    a. 應用程式(標籤): window 版本選擇 windows 7
    b. 函式庫(標籤): 新增函式庫覆載 riched20, 新增一筆.
    c. 套用設定成 "預設組態"

3. 瀏覽選擇要安裝的程式(SketchUpPro-2016-1-1450-80432-zh-TW-x86.exe),啟用滑鼠右鍵選擇用Wine Loader來安裝, 安裝完成後, 它會加在: 選單 -> Wine -> SketchUp 程式底下,點選就可以執行.

4. 關閉 Sketchup 的歡迎畫面詳見: https://www.youtube.com/watch?v=9Tk__kTjiJc
    a.下載 Resource Hacker:  http://www.angusj.com/resourcehacker/
    b. 用 Wine Loader執行Resource Hacker修改以下2個檔案, 找尋startup的機碼,將它刪除並存檔:
         c:/Program Files (x86)/SketchUp/SketchUp 2016/SketchUp.exe
         c:/Program Files (x86)/SketchUp/SketchUp 2016/resources/zh-TW/SketchUpRc.dll
    c. Resource Hacker 存檔時會先將原檔案更名,並將主檔名附加 _original 備份,以防不時之需

5. 瀏覽並選擇程式: 啟用滑鼠右鍵, 選擇 SketchUp.exe 使用 Wine loader 來執行.


p.s.  Linux mint 18.1 的 wine 升級成 2.0.1: 詳見: https://wiki.winehq.org/Ubuntu
   sudo dpkg --add-architecture i386 
   wget https://dl.winehq.org/wine-builds/Release.key 
   sudo apt-key add Release.key
   sudo apt-add-repository 'deb https://dl.winehq.org/wine-builds/ubuntu/ xenial main'
        sudo   apt-get update
        sudo apt-get install --install-recommends winehq-stable

2017年3月29日 星期三

解決 geany 與新酷音輸入法相衝

Geany 在 linux mint 中文版與新酷音輸入法的 Ctrl + Space 相衝,只要修改快速鍵定義就可以了:
1. 求助(H) -> 快速鍵(K)
往下拉到 "補完字詞" , 它的設定正好是 Ctrl + Space
2. 點選 Edit
    往下拉到 "補完字詞" , 點選並修正此快速鍵的定義
3. 重新開啟 Geany


另外透過安裝完 js-beautify可以啟用 javascript 的美化功能, 先安裝好 js-beautify
     sudo npm -g install js-beautify
再來開啟 Geany  自訂命令, 透過滑鼠右鍵叫出選單:
      格式(F) -> 發送選取區域到(S) -> 設定自訂命令 -> Add
命令欄填入 js-beautify
按 OK 完成設定,
之後將所選的文字並透過滑鼠右鍵叫出選單傳給自訂命令:
      格式(F) -> 發送選取區域到(S) -> js-beautify
也可以用它所定義的快速鍵(Ctrl+1 ...等等)直接美化所選的文字區域

另外也可以 uglify-js 來醜化或美化, 若要支援 ES6, 可以安裝 harmony版本的 Uglifyjs2
   sudo npm install uglify-js@github:mishoo/UglifyJS2#harmony -g
若不加任何參數,它內定會將 javascript 醜化,加上參數 -b 或 --beautify 可以改成美化的功能, 因此命令列若改用:
  uglifyjs -b
或
  uglifyjs --beautify
就相當於
  js-beautify
的功能
但 ulifyjs --beautify 功能比不上  js-beautify 來的好用, 習慣上還是直接用 js-beautify 就好

2017年3月28日 星期二

linux mint 18 安裝 brackets

1. 到  http://brackets.io/ 下載 brackets binary
    sudo wget https://github.com/adobe/brackets/releases/download/release-1.9/Brackets.Release.1.9.64-bit.deb
2. 安裝遺失的library: libgcrypt11 及 libcurl3
    sudo wget https://launchpad.net/~ubuntu-security-proposed/+archive/ubuntu/ppa/+build/7110687/+files/libgcrypt11_1.5.4-2ubuntu1.1_amd64.deb
    sudo apt deb libgcrypt11_1.5.4-2ubuntu1.1_amd64.deb
    sudo apt-get install libcurl3
3. 最後安裝所下載的 brackets
    sudo apt deb Brackets.Release.1.9.64-bit.deb
4. 喜愛的插件(extensions):
    Autoprefixer
    Beautify
    Bracket Color Picker
    Bracket Git
    Emmet
    Inline Regex Editor
    Integrated Development
    Markdown Preview
    Match Highloghter
5.喜愛的佈景主題:
    DarkSoda