星期一, 11月 06, 2017

如何在node js中上傳檔案


ref:
multipart/form-data

What does enctype='multipart/form-data' mean?
https://stackoverflow.com/questions/4526273/what-does-enctype-multipart-form-data-mean

https://www.hacksparrow.com/handle-file-uploads-in-express-node-js.html

1. 可以用express內建的body parser,解出multipart/form-data後,直接利用req.filename來存取資料。

2. 可以在 ios中,找相關程式來形成post的multipart/form-data後,送給server解析

星期日, 6月 11, 2017

處理二欄Word論文時,殺不掉的最後空白頁面

在寫二欄Word論文時,常常會碰到殺不掉的最後空白頁面,造成很大的困擾。把最後一頁刪除,則文件格式會跑掉;不刪除,則列印時都會出現最後空白一頁,多送紙。

解決方法:
到最後一行,把字型設定到最小,就可以解決這鳥問題。(不正規解法,但有用。)

星期一, 4月 17, 2017

OpenStack Install with CentOS

bg 重裝...Orz



安裝文件參考
https://www.hkitblog.com/?p=28724

vSwitch觀念影片
https://youtu.be/7x-JzMDN6Wc


很重要,必看***Introduction to Open vSwitch (OVS)
https://www.youtube.com/watch?v=rYW7kQRyUvA

心得:
0. 要用對外網路,不要用預設的命令,改用 (https://www.rdoproject.org/networking/neutron-with-existing-external-network/)
packstack --allinone --provision-demo=n --os-neutron-ovs-bridge-mappings=extnet:br-ex --os-neutron-ovs-bridge-interfaces=br-ex:eth0 --os-neutron-ml2-type-drivers=vxlan,flat
以上會加入vswitch,之後才能對vm內外互通。
After completion, given a single machine with a current IP of 192.168.122.212 (我的主機是192.168.0.226)/24 via DHCP with gateway of 192.168.122.11(192.168.0.1):
Make /etc/sysconfig/network-scripts/ifcfg-br-ex resemble:
DEVICE=br-ex
DEVICETYPE=ovs
TYPE=OVSBridge
BOOTPROTO=static
IPADDR=192.168.122.212 0.226 # Old eth0 IP since we want the network restart to not 
                       # kill the connection, otherwise pick something outside your dhcp range
NETMASK=255.255.255.0  # your netmask
GATEWAY=192.168.122.1  0.1 # your gateway
DNS1=192.168.122.1   0.1  # your nameserver
ONBOOT=yes
The file above will move the network parameters from eth0 to br-ex. 
Make /etc/sysconfig/network-scripts/ifcfg-eth0 resemble (no BOOTPROTO!):
Note: if on Centos7, the file could be /etc/sysconfig/network-scripts/ifcfg-enp2s0 and DEVICE should be enp2s0
DEVICE=eth0
TYPE=OVSPort
DEVICETYPE=ovs
OVS_BRIDGE=br-ex
ONBOOT=yes
It is also possible to use a bond. In that case /etc/sysconfig/network-scripts/ifcfg-bond0 may look like this:
DEVICE=bond0
DEVICETYPE=ovs
TYPE=OVSPort
OVS_BRIDGE=br-ex
ONBOOT=yes
BONDING_MASTER=yes
BONDING_OPTS="mode=802.3ad"
This means, we will bring up the interface and plug it into br-ex OVS bridge as a port, providing the uplink connectivity.
Restart the network service
# reboot
or, alternatively:
# service network restart
Now, create the external network with Neutron.
# . keystonerc_admin
# neutron net-create external_network --provider:network_type flat --provider:physical_network extnet  --router:external
Please note: "extnet" is the L2 segment we defined with –os-neutron-ovs-bridge-mappings above.
You need to create a public subnet with an allocation range outside of your external DHCP range and set the gateway to the default gateway of the external network.
Please note: 192.168.122.10.1/24 is the router and CIDR we defined in /etc/sysconfig/network-scripts/ifcfg-br-ex for external connectivity.
# neutron subnet-create --name public_subnet --enable_dhcp=False --allocation-pool=start=192.168.122.100.200,end=192.168.122.200.210 \
                        --gateway=192.168.122.10.1 external_network 192.168.122.00.0/24

接下來的,也許可以在圖形化介面做了
Get a cirros image, not provisioned without demo provisioning:
curl http://download.cirros-cloud.net/0.3.4/cirros-0.3.4-x86_64-disk.img | glance \
         image-create --name='cirros image' --visibility=public --container-format=bare --disk-format=qcow2
That's all you need to do from admin perspective to allow your users to connect their private networks to the outside world. Now let's switch to the user.
Since you haven't created a user yet:
openstack project create --enable internal
openstack user create --project internal --password foo --email bar@corp.com --enable internal
Now, let's switch to the newly created user:
# export OS_USERNAME=internal
# export OS_TENANT_NAME=internal
# export OS_PASSWORD=foo
Then create a router and set its gateway using the external network created by the admin in one of previous steps:
# neutron router-create router1
# neutron router-gateway-set router1 external_network
Now create a private network and a subnet in it, since demo provisioning has been disabled:
# neutron net-create private_network
# neutron subnet-create --name private_subnet private_network 192.168.100.0/24
Finally, connect your new private network to the public network through the router, which will provide floating IP addresses.
# neutron router-interface-add router1 private_subnet
Easiest way to the network and to launch instances is via horizon, which was set up by packstack.

1. 如果instance建不起來,有kvm錯誤,要先確定bios有打開虛擬化功能
2. 預設對外ip無法通訊,要設定floating IP前,先確定vSwitch網卡設定是否ok,可參考

https://www.hkitblog.com/?p=28801

3.






Meteor框架記錄

Meteor框架跟django框架很類似,但也有很多不同的地方,如
  1. meteor框架的架構主要是會分成client及server,資料庫的部分使用mongodb的collection(這部分的程式碼是可以共用的)。
  2. 檔案架構如下,其中imports目錄下的程式碼meteor不會主動載入,需要匯入的時候使用import語法匯入

  • client
  • server
  • imports
  • public
  1. 在各個目錄下面,會需要設計許多html網頁樣板,meteor會自動掃描樣板整合。
  2. 網頁樣板中的(只要一份)、(只要一份)、
  3. 在各個目錄下面,會需要設計許多javascript程式,用來輔助樣板功能
  4. 在路由的部分,可使用iron router及flow router,如果沒有要整合其他的前端框架,使用iron router 就可以了


Meteor應用設計流程如下:

  1. 可利用bootstrap,規劃設計各個版面先
  2. 把版面改成meteor樣板
  3. 設定路由
  4. 針對各個頁面去設計mongodb的集合
  5. 針對各個js, 設計輔助功能, 利用meteor語法讀取資料,配製版面
  6. 設計表單,針對表單的相關js設計事件處理方法,讀取表單的資料新增到mongodb集合中
  7. 基本工能測試服務後,移除不安全的套件
  8. 移除 autopublish功能,修改程式碼加入公開集合操作的函式,加強安全性

Meteor好用套件:
  1. bootstrape
  2. iron router
  3. huston admin
  4. accounts-ui
  5. accounts-password

星期二, 3月 14, 2017

Install Ubuntu 14.04 on MacAir 2016

REF:

1. Get the wireless driver and put into the flash drive

http://askubuntu.com/questions/626642/how-to-install-broadcom-wireless-drivers-offline

"
If you are using Ubuntu 14.04.2 installation media the driver will not build
If you have 14.04.2, then download 64-BIT DRIVER FROM UBUNTU REPOSITORY or 32-BIT DRIVER, copy it to your home folder and run the same command. But you still need dkms_XXXXX.deb file from installation disk. Or you you can download it from HERE."


2. Install the Ubuntu according to the article

 https://medium.com/@philpl/ubuntu-14-10-running-on-my-macbook-18991a697ae0#.x4gsfg78u

星期六, 3月 11, 2017

Why Docker? VM or Physical

一些想法
Q:Docker 要裝在實體機還是VM中?
裝在實體機中,效能當然是最好。但是如果沒有用到實體機的全部資源,或實體機運算能力強大,可以把實體機切割成多個VMs,例如同時跑 Windows及Linux VM,如此可充分利用硬體資源。

Q:為什麼實體機有了Docker還要裝多個VM?
Docker有一些限制,如不能跑Windows VM等。

Q:為什麼要在雲端VM中跑Docker?
1. 雲端中心有大量資源,只要有錢,運算能力可以隨時Scale UP。網路頻寬可隨時加大。
2. 雲端中心租用以VM為主,Docker需要跑在OS上,所以需要一台實體或VM才可以執行Docker。
3. 用VM容易備份。

Q:要租多台VMs或一台VM with Dockers?
如果系統無特殊需求,當然是一台VM結合多個Dockers,系統資源較為有效利用,且省錢。

Q: Docker的好處是什麼?
1. 容易佈署,不會有環境問題,跑不起來。
2. 系統獨立,container之間環境獨立,不會因為多個應用系統,如apache, mongodb安裝不同版本函式庫,產生衝突。 可以各個封裝成不同版本的images, 有各自的相依套件,不會產生相依衝突。
3. Docker用aufs檔案系統,可共用系統層,節省資源。
4. Docker實際上是process,不用像VM需模擬系統底層,節省系統資源。
5. 開發者可以有統一的發展環境,不會因為不同電腦,不同作業系統版本,導致在A開發人員環境上可以執行,可是在B人員電腦上因環境問題(如少lib)不能執行。
6. 沒有雲端系統影像檔(VirtualBox, Vmware)相依性,可在不同雲端平台上快速轉移,不用轉換影像檔。
7. 共享docker file資源,可快速發展自己的image。



星期二, 2月 14, 2017

SHVC /SHM 編譯Windows 10, VS2015

Windows
1. Install TortoiseSVN
2. Go to https://hevc.hhi.fraunhofer.de/shvc
3. Use TortoiseSVN (Click on a folder with right mouse) to download https://hevc.hhi.fraunhofer.de/svn/svn_SHVCSoftware/tags/SHM-12.2/


4. Use visual studio 2015 community to compile.
5. Open the vc solution file.


6. build errors:



7. Install windows 8.1 sdk
8. Build Solution 


9. Watch Results


星期一, 12月 26, 2016

Mobile App Design Flow

1. Define the Problem and App Solution
2. Define Personas
3. Find the Use Case and User Story
4. Find the feature list
5. Prioritize the feature list (user story? scrum? kaban?)
6. MVP
7. Define main work flows  and others.
8. Prototype High Level Wireframe
9. Confirm the wireframe and prototype with users
10. Coding and Testing

references:
https://www.udacity.com/course/ux-design-for-mobile-developers--ud849

星期三, 11月 30, 2016

FFMPEG 降低frame數,但保留audio及高視訊品質

ffmpeg -y -i Chap01_06.mp4 -r 15 -c:v libx264 -crf 18 -strict -2 -movflags faststart -c:a copy nnChap01_06.mp4

星期六, 11月 05, 2016

Scrum and user story好投影片

http://www.slideshare.net/ertjona/workshop-paper-prototying-game

User Story Mapping Workshop (Design Skills 2016)
http://www.slideshare.net/mozyrko/user-story-mapping-design-skills-2016?qid=03fdb600-19a5-4610-9eb8-f9600f0bede2&v=&b=&from_search=5

Agile meetuphsinchu user story mapping workshop
http://www.slideshare.net/ssusere62027/agile-meetuphsinchu-user-story-mapping-workshop?qid=03fdb600-19a5-4610-9eb8-f9600f0bede2&v=&b=&from_search=23

Agile meetup - user story mapping workshop
http://www.slideshare.net/ssusere62027/agile-meetup-userstorymapping?qid=03fdb600-19a5-4610-9eb8-f9600f0bede2&v=&b=&from_search=8

User Story Mapping Workshop
http://www.slideshare.net/danapylayeva/user-story-mapping-workshop?qid=03fdb600-19a5-4610-9eb8-f9600f0bede2&v=&b=&from_search=15

comments:
product goals? ->personas-> user story mapping -> scrum sprint

Agile and user story workshop
http://www.slideshare.net/petersaddington/agile-and-user-story-workshop-peter-saddington?qid=754f9138-698f-4676-b8ee-7d546510d079&v=&b=&from_search=7

Scrum好投影片

http://www.slideshare.net/ertjona/workshop-paper-prototying-game

星期二, 10月 25, 2016

Word調整目錄及標號字型


  1. 目錄部份, 修改各層「目錄」相關樣式就可以了
  2. 標號部份,可於插入標號後,按ctrl+shift+s鍵叫出「目前」所在標號的樣式選單,再選「修改」樣式,去修改字型大小就好了。

星期六, 10月 15, 2016

psnr and ssim 好文章

1. Ji Life House: 圖片相似度----SSIM以及PSNR
http://jirongwu81.blogspot.tw/2016/09/ssimpsnr.html

2. 视频编码方案之间的比较(HEVC,H.264,MPEG2等)
http://www.cnblogs.com/xkfz007/p/4509746.html

3. 電機工程系碩士班碩士學位論文基於SSIM 之H.264 視訊傳輸服務品質

4. [參考] x264命令行參數解釋
https://www.ptt.cc/bbs/AVEncode/M.1305719689.A.615.html

5. Netflix 評估影片品質的方法
https://blog.gslin.org/archives/2016/06/08/6618/netflix-%E8%A9%95%E4%BC%B0%E5%BD%B1%E7%89%87%E5%93%81%E8%B3%AA%E7%9A%84%E6%96%B9%E6%B3%95/

6. H.264轉碼加速:NVENC大戰Quick Sync
http://www.gamez.com.tw/thread-568549-1-1.html

7. x264视频压制入门
http://blog.sorabbs.tk/archives/27

8. How to consider bitrate, -maxrate and -bufsize of a video for web
http://superuser.com/questions/945413/how-to-consider-bitrate-maxrate-and-bufsize-of-a-video-for-web

星期一, 10月 10, 2016

Node.js Job Queue

Reference:
Kue, https://github.com/Automattic/kue

Document/Example:
https://www.linkedin.com/pulse/job-queue-nodejs-adrien-desbiaux

1. Install Redis
2. Install Kue

Usage:
Producer
1. 建立queue instance
    var kue = require('kue'),
    var jobs = kue.createQueue();

2. 建立job
    job = jobs.create('bessel-filter-image', jobArgs).save();

3. 等待job 結束(callback)
     job
      .on('complete', function(result) { //whatever you want to do })
      .on('failed', function() { console.log(job.id); });
Consumer:
1. 建立queue instance?
2. 處理job
3. 處理完呼叫done

jobs.process('bessel-filter-image', function(job, done) {
   console.log(job.data.whatever); // stored in jobArgs
   var result = bessel(); // let's imagine applying the filter
   done(null, result); // forward the result of your job
});


更新Job Progress....
http://stackoverflow.com/questions/15375126/fetching-the-result-of-a-kue-job-and-pushing-this-to-the-client-over-open-connec

actually this is covered in the documentation - https://github.com/LearnBoost/kue
"Job Events
Job-specific events are fired on the Job instances via Redis pubsub. The following events are currently supported:
  • failed the job has failed
  • complete the job has completed
  • promotion the job (when delayed) is now queued
  • progress the job's progress ranging from 0-100 For example this may look something like the following:
    var job = jobs.create('video conversion', {
    
        title: 'converting loki\'s to avi'
      , user: 1
      , frames: 200
    
    });
    
    job.on('complete', function(){
        console.log("Job complete");
    }).on('failed', function(){
        console.log("Job failed");
    }).on('progress', function(progress){
        process.stdout.write('\r  job #' + job.id + ' ' + progress + '% complete');
    });
bare in mind that your job might not be processed immediatly (depends on your queue), so the client can wait some time for a result..
EDIT: as mentioned in the comments, a job doesn't return any results so you should store the result in the database along with the job id and query the database when the job is complete.
in order to keep the connection open, use res.write and res.end instead of res.json which ends the connection (You'll have to JSON.stringify the data yourself). also, remember that the browser can timeout if this takes too long..

Updating Progress

For a "real" example, let's say we need to compile a PDF from numerous slides with node-canvas. Our job may consist of the following data, note that in general you should not store large data in the job it-self, it's better to store references like ids, pulling them in while processing.
queue.create('slideshow pdf', {
    title: user.name + "'s slideshow"
  , slides: [...] // keys to data stored in redis, mongodb, or some other store
});
We can access this same arbitrary data within a separate process while processing, via the job.data property. In the example we render each slide one-by-one, updating the job's log and progress.
queue.process('slideshow pdf', 5, function(job, done){
  var slides = job.data.slides
    , len = slides.length;

  function next(i) {
    var slide = slides[i]; // pretend we did a query on this slide id ;)
    job.log('rendering %dx%d slide', slide.width, slide.height);
    renderSlide(slide, function(err){
      if (err) return done(err);
      job.progress(i, len, {nextSlide : i == len ? 'itsdone' : i + 1});
      if (i == len) done()
      else next(i + 1);
    });
  }

  next(0);
});

Node.js Job Queue

Reference:
Kue, https://github.com/Automattic/kue

Document/Example:
https://www.linkedin.com/pulse/job-queue-nodejs-adrien-desbiaux

1. Install Redis
2. Install Kue

Usage:
Producer
1. 建立queue instance
    var kue = require('kue'),
    var jobs = kue.createQueue();

2. 建立job
    job = jobs.create('bessel-filter-image', jobArgs).save();

3. 等待job 結束(callback)
     job
      .on('complete', function(result) { //whatever you want to do })
      .on('failed', function() { console.log(job.id); });
Consumer:
1. 建立queue instance?
2. 處理job
3. 處理完呼叫done

jobs.process('bessel-filter-image', function(job, done) {
   console.log(job.data.whatever); // stored in jobArgs
   var result = bessel(); // let's imagine applying the filter
   done(null, result); // forward the result of your job
});


更新Job Progress....
http://stackoverflow.com/questions/15375126/fetching-the-result-of-a-kue-job-and-pushing-this-to-the-client-over-open-connec

actually this is covered in the documentation - https://github.com/LearnBoost/kue
"Job Events
Job-specific events are fired on the Job instances via Redis pubsub. The following events are currently supported:
  • failed the job has failed
  • complete the job has completed
  • promotion the job (when delayed) is now queued
  • progress the job's progress ranging from 0-100 For example this may look something like the following:
    var job = jobs.create('video conversion', {
    
        title: 'converting loki\'s to avi'
      , user: 1
      , frames: 200
    
    });
    
    job.on('complete', function(){
        console.log("Job complete");
    }).on('failed', function(){
        console.log("Job failed");
    }).on('progress', function(progress){
        process.stdout.write('\r  job #' + job.id + ' ' + progress + '% complete');
    });
bare in mind that your job might not be processed immediatly (depends on your queue), so the client can wait some time for a result..
EDIT: as mentioned in the comments, a job doesn't return any results so you should store the result in the database along with the job id and query the database when the job is complete.


https://github.com/Automattic/kue#job-progress
Job progress is extremely useful for long-running jobs such as video conversion. To update the job's progress simply invokejob.progress(completed, total [, data]):
job.progress(frames, totalFrames);
data can be used to pass extra information about the job. For example a message or an object with some extra contextual data to the current status.

星期三, 9月 21, 2016

Android 的webview替代方案

在開發android中的web app時,會發現內建的webview或 browser效能不佳而且不支援比較新的html標準及功能,這時候可以選擇替代方案crosswalk. crosswalk是基於chrome browser的元件,可用在webview或 codorva中替代原生browser,提供更好的效能。

https://crosswalk-project.org/documentation/android/android_target_setup.html

星期五, 9月 16, 2016

Git Reset, Checkout, and Revert



REF:
https://www.atlassian.com/git/tutorials/resetting-checking-out-and-reverting/summary


* Git Checkout
Q: 寫程式常常會覺得某一個版本寫的code是比較好,想從某個commit再重寫新版本,要如何做?

1. 可以用git checkout把某個commit 的code調出來檢視,由於此時HEAD指向該commit,不屬於任何branch,如果從這版本有修改新的程式碼,會造成不屬於任何branch,這些修改就算有commit,之後切到其它branch,所有改的內容也會遺失。
2. 解決方式: 1. 可以用git checkout把某個commit 的code調出來檢視,接著建立新的branch,check out到這branch後,再開始修改 code,把新的code套用commit在這新的branch後,就可以解決這問題。

Moving `HEAD` to an arbitrary commit
ref: https://www.atlassian.com/git/images/tutorials/advanced/resetting-checking-out-and-reverting/05.svg


* Git Reset
1. 有時候改的程式碼不小心commit或加到staged,用這指令可以把staged及commit的檔案全部變成unstaged,還原原始狀態。git reset --hard會把所有的檔案還原到最近一次commit的狀態,使用者任何修改過的檔案及狀態都會被移除。
2. 可以用來把某commit的程式碼全部移除掉,會造成該commit之後的其它commit也會被移除救不回,要小心使用。


Resetting the hotfix branch to HEAD~2
REF:https://www.atlassian.com/git/images/tutorials/advanced/resetting-checking-out-and-reverting/02.svg

*Git Revert
1. 有時候過了很久才發現某改commit的程式碼改錯了,某個function不能用,但是之後的程式碼改很多,又不想重寫,可以用revert指令。
2. Git Revert指令有點像先刪除某個commit所作的動作,再套用該commit之後其它commits的變更,然後建立新commit。




Reverting the 2nd to last commit
REF: https://www.atlassian.com/git/images/tutorials/advanced/resetting-checking-out-and-reverting/06.svg









星期二, 8月 09, 2016

fat32在windows 10下格式化工具

http://macrorit.com/partition-magic-manager/free-edition.html

Permanently Free Expert-level Disk Partition Magic Software

免費,容易使用,可格式化超過32GB的記憶卡

星期五, 8月 05, 2016

在ubuntu中disable apache2的方法

1. 最簡單的方法,安裝rcconf

sudo apt-get install rcconf

執行rcconf後,直接設定即可

2. 記得停止目前在執行的apach2
sudo service apach2 stop

星期六, 7月 30, 2016

node js 心得

1. 非同步可用promise來想辦法讓程式比較容易撰寫

Good Reference:
JavaScript Promise迷你书
http://liubin.org/promises-book/


2. javascript 中的this,跟 C#, Java, C++的使用方法有很大的差異。傳統物件導向程式語言是先定義好類別才建立物件,而javascipt的特性則是可先建立好物件才延展該物件功能。在javascipt中的this是代表呼叫特定函式的左邊.物件。如
var book = {};
function setPrice(price) {
    this.price =price;
}
book.setPrice(100)時,
這時候this就代表為book物件,

setPrice(100);
可是如果直接呼叫setPrice(100)時,這時候this 就不存在

3. 如果function裡面有callback,由於callback中的this代表的會是呼叫該callback的物件,而不是外圍的instance物件,此時會導致 this 不存在。解法通常是在callback外面宣告一變數,利用變數域範圍的特性,來讓callback函式也可參考到同一物件。

function setPrice(price) {
     var self =this;
     onEvent('event', callback() {
        self.result =xxx;
     }
}

4. module心得,'json-socket'很好用,可快速處理訊息