ma's note: 9月 2016

2016年9月29日星期四

[python] 下載python source到linux環境build

因為 debian7.8只有python3.2可以安裝，因此要python3.2的話，需要自己抓python3.4的source code來build，那~為何要用python3.4呢? 因為python-can只有在python3.3版以後才支援native的socket can，所以需要自行抓下來處理~

以下為操作的過程

wget https://www.python.org/ftp/python/3.4.5/Python-3.4.5.tgz
會有問題如下：
root@arm:/opt# wget https://www.python.org/ftp/python/3.4.3/Python-3.4.3.tgz
--2016-09-29 16:35:57-- https://www.python.org/ftp/python/3.4.3/Python-3.4.3.tgz
Resolving www.python.org (www.python.org)... 151.101.192.223, 151.101.128.223, 151.101.64.223, ...
Connecting to www.python.org (www.python.org)|151.101.192.223|:443... connected.
ERROR: The certificate of `www.python.org' is not trusted.
ERROR: The certificate of `www.python.org' hasn't got a known issuer.

查了一下是ssl的問題，安裝一下就ok了
apt-get install ca-certificates

root@arm:/tmp# wget https://www.python.org/ftp/python/3.4.5/Python-3.4.5.tgz
--2016-09-29 18:13:56-- https://www.python.org/ftp/python/3.4.5/Python-3.4.5.tgz
Resolving www.python.org (www.python.org)... 151.101.192.223, 151.101.128.223, 151.101.64.223, ...
Connecting to www.python.org (www.python.org)|151.101.192.223|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 19611207 (19M) [application/octet-stream]
Saving to: `Python-3.4.5.tgz'

100%[======================================>] 19,611,207 274K/s in 45s

2016-09-29 18:14:44 (427 KB/s) - `Python-3.4.5.tgz' saved [19611207/19611207]
這樣就搞定了

---- 接著是build python的事了 ----
cd Python-3.4.5
./configure
make
make install
就build完且安裝完成了，需要注意…以上動作都要很久，要小心服用，電腦會暫時關不了…

2016年9月27日星期二

[python] opencv 找出barcode

想到之前機器視覺做過的作業：讀barcode
於就想找找python+opencv關於這方面的code

第一步當然是先找出barcode囉
參考的是這一篇文章
其實他說明的已經很清楚了，但cv2的很多參數我仍是不清楚
且和之前學的影像處理連不太起來，還是memo一下的好

image = cv2.imread(args["image"])
讀圖進來，這沒問題

gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
轉灰階，查opencv的說明為「Converts an image from one color space to another.」
因此cvtColor是用來轉換不同color space的函式
在python中長這樣
Python: cv2.cvtColor(src, code[, dst[, dstCn]]) → dst
Python: cv.CvtColor(src, dst, code) → None -->若是有給dst就會回None
最原本長這樣
C: void cvCvtColor(const CvArr* src, CvArr* dst, int code)
--> code – color space conversion code (see the description below)
常用的有：「CV_RGB2GRAY」、「CV_BGR2HSV」

gradX = cv2.Sobel(gray, ddepth = cv2.cv.CV_32F, dx = 1, dy = 0, ksize = -1)
gradY = cv2.Sobel(gray, ddepth = cv2.cv.CV_32F, dx = 0, dy = 1, ksize = -1)

接著對圖做sobel運算，來找出x向和y向邊界 --> 這邊找了一下之前還有學到Prewitt operator，但在cv2中好像沒看到…

而以前學的sobel長這樣，不知道cv2中的是不是一樣的 (一篇論文人人實作不同丫，還是抱著懷疑的好)

由cv2.Sobel的說明來看，所謂的「kernel of size 3*3」應該是指之前學過的3x3的mask

預設的ksize=3

ddepth = cv2.cv.CV_32F --> 32=2^5，這邊的CV_32F即為5

dx = 1 --> x向的差值為1

且說明中也有提到「xorder = 0, yorder = 1, ksize = 3」、「xorder = 1, yorder = 0, ksize = 3」即為之前學的(上圖)中的y向和x向的mask

gradient = cv2.subtract(gradX, gradY)
把gradX和gradY的每一個元素相減

gradient = cv2.convertScaleAbs(gradient)
取abs，把負的變正數

blurred = cv2.blur(gradient, (9, 9))
說明文件提到「Blurs an image using the normalized box filter.」
因此是用9x9的matrix，其中每個元素都是1，讓影像模糊

(_, thresh) = cv2.threshold(blurred, 225, 255, cv2.THRESH_BINARY)
用threshold處理影像，225為threshold value，255為達到的輸出值，
而cv2.THRESH_BINARY為thresholdType，看說明文件會更清楚

kernel = cv2.getStructuringElement(cv2.MORPH_RECT, (21, 7))
取得型態學中膨脹與腐蝕的運算mask
這個function得到的如下：
array([[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]], dtype=uint8)
換個shape
>>> cv2.getStructuringElement(cv2.MORPH_CROSS, (21, 7))
array([[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]], dtype=uint8)

closed = cv2.morphologyEx(thresh, cv2.MORPH_CLOSE, kernel)
對剛剛thresh的結果進行 MORPH_CLOSE操作
一般基本操作為侵蝕、膨脹(erode、dilate) --> 進一步Close操作為先dilate再erode，這樣可以把斷掉的東西連起來，因此稱為close，反之為open
可參考這邊的說明

closed = cv2.erode(closed, None, iterations = 4)
closed = cv2.dilate(closed, None, iterations = 4)
先連續進行4次erode，再連續4次dilate運算

[未完…寫累了…晚點再寫]

2016年9月26日星期一

[python] opencv環境建立

參考這一篇
https://sourceforge.net/projects/numpy/files/NumPy/1.7.1/numpy-1.7.1-win32-superpack-python2.7.exe/download

使用的軟體版本：
1. python2.7
2. numpy
3. matplotlib
4. opencv
opencv要先到這邊下載新版本的opencv，我下載的是opencv2.4.13，下載下來的是一個.exe檔，其實它是一個7z的自解壓縮檔，執行、解壓即可
然後到.\opencv\build\python\2.7\x86 中把 cv2.pyd 複製到「C:\Python27\Lib\site-packages」中
然後以下列指令確認是否可以使用opencv
>>> import cv2
>>> print cv2.__version__
2.4.13
>>>
如上所示就ok了，但還有要讓cv2知道opencv的安裝資料夾
-->某個文章中寫的，但是我沒有設定path也能起，蠻怪的，還是有些重要的東西才沒有在cv2.pyd中呢?

把彩色圖轉為灰階
>>> import cv2
>>> image = cv2.imread('pic2.jpg')
>>> gray_image = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
>>> cv2.imwrite('gray_pic2.jpg', gray_image)
True

這樣就ok了

2016年9月21日星期三

[Javascript] 跨domain取存網頁資料的問題

本來想先在heroku上先佈署好app，有了web-api後就可以在local端寫web的code比較不用改一點就上傳，一直在等…

結果出現了錯誤如下：(後來為了求快，因此改在local端執行我的flask程式，因此會看到127.0.0.1)

XMLHttpRequest cannot load http://127.0.0.1:5000/get_meeting_room_data. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

1.先使用flask-crossdomain：

參考這邊

http://flask.pocoo.org/snippets/56/

先安裝這個

https://pypi.python.org/pypi/flask-crossdomain/0.1

在程式開頭加入

import flask_crossdomain

然後在需要被存取的web服務加入

@crossdomain(origin='*')

比如說：

@app.route('/get_meeting_room_data2')

#@crossdomain(origin='*')

def get_meeting_room_data2():

......

但是出現了以下的錯誤：

Traceback (most recent call last):

File "E:\workspace\python\flask\flask_step2_local\app.py", line 103, in <module>

@crossdomain(origin='*')

NameError: name 'crossdomain' is not defined

仍有問題 --> 還要再了解看看是哪兒出了錯

2. 後來改用「Flask-CORS」就正常了

https://flask-cors.readthedocs.io/en/latest/
先安裝
pip install -U flask-cors
在程式中加入以下即可：
from flask_cors import CORS, cross_origin

app = Flask(__name__) CORS(app)

三行就搞定收工了!

非常方便

在javascript的部份則如下
function getData3() { $.get( "http://127.0.0.1:5001/get_meeting_room_data", function( data ) { var json_obj = $.parseJSON(data); } }); }

2016年9月20日星期二

[html] memo一下html的標簽… 由樣板來學習

參考的頁面：
http://www.openwebdesign.org/viewdesign.phtml?id=6386&referer=%2F

先看 <head> 中的東西：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ZEN - A Free HTML5 Template With Perfect Balance</title>
<meta name="description" content="Zen is a free XHTML template released on a creative commons attribution license" />
<meta name="keywords" content="Zen Template" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link href='http://fonts.googleapis.com/css?family=Voces' rel='stylesheet' type='text/css' />
</head>

<title>包起來的東西是browser上標題，有多分頁時，會顯示在分頁上

<meta name="keywords" content="Zen Template" />
網站的keyword，給搜尋引擎用的
沒有給網站描述時，搜尋引擎通常會自動抓網頁的前25字做為網頁內容摘要

2016年9月9日星期五

[html] 解析html, javascript code的網頁

今天同事介紹這樣的網頁還不錯
https://jsfiddle.net/
可以線上解析網頁程式，並即時呈現
還可以存成一個網頁，分享給別人一同觀看，但不知道可以保留多久~

[html] div

最近在學python + Flask的網頁設計，發現沒有多了解html, javascript還真的不行…
有沒有只學python就能設計網頁的方法丫!! 就像以前學java時，用javalet就能把所有要顯示的東西，動畫都包起來做，沒有寫什麼html也行…

好啦~ 沒找到方法前，只能好好的學html + javascript...
最近看人家的code，很多都用div這東西，和我之前寫的很難看的網頁都用frame, table的方式很不一樣
查了一下，可以參考這一篇的說明 (如果不希望copy內容再請通知我拿掉…)

原來新一代的設計採用 CSS + DIV 的排板方式 --> 和我同事說的一樣，所以要好好學
DIV 可以解釋為區塊，用 DIV 標籤包起來的東西，瀏覽器會視為一個物件，大致長成這樣 <div>內容</div>，你可以用 div 將網頁內容的各區塊包起來，再去做 CSS 排板，目前所有的主流瀏覽器都支援 DIV 標籤

瀏覽器自動為每個 div 結尾後面加上換行的動作

要讓 DIV 由左至右排列，可以使用 float（浮動）語法來達成。
如：
<div style="float:left;width:50%;overflow:hidden;height:44px">

2016年9月8日星期四

[python] virtualenv 真方便

寫了很久的python，還直的沒使用過virtualenv
最近在使用heroku時，在一篇教學文中提到了這個東西
於是開始試著使用一下
先memo一些指令

以下指令是參考這一篇的，以後再來對自己使用的指令做memo

安裝

easy_install virtualenv

建環境

$ virtualenv pyhack

另外這篇提到不使用原環境的套件的方法，晚一點再來試試看是不是更好

$ virtualenv --no-site-packages [指定虛擬環境的名稱]

進入環境資料夾
cd pyhack
在linux下使用這個指令
source bin/activate
在windows下使用這個指令
Scripts\activate.bat
來開始virtualenv
我的是windows就會看到提示文字變成

(pyhack) E:\workspace\python\pyhack\pyhack>

這樣就可以開始使用了!!

2016年9月7日星期三

使用Flot畫圖

想要的愈多，結果就是要引入越來越多的套件…
本來只是想在Heroku上做的雲端應用，做IOT的資料庫
但資料不表現出來又覺得有所不足，就這樣越陷越深…

想把後台的資料顯非到網頁上，當然在前端的JS就需要進行畫圖的工作
這邊我找到的jquery進一步提供的套件flot
http://www.flotcharts.org/

一開始當然是看demo比較快囉
由\flot\examples\basic-usage 可以了解基本的線怎麼畫，怎麼看code就是個人造化了，有這樣的基本線索和jquery的基礎應該是不成問題的~

以下是我改的一個範例，當然要把相關js的位置配置好才行：
首先，「js/flot/jquery.min.js」、「js/flot/jquery.flot.min.js」，「css/examples.css」要先依路徑放上來才行
這樣開啟網頁就會出現隨機繪製的折線圖，大功造成!!
下一次就是把他變成動態的!! 雖然知道flot有範例，但這邊先不看，依對js的理解先寫寫看，試出來了，有時間再看看別人的是不是比較好!
當然!! 最後的最後，是要把他放到heroku上才行，並且要能和後台的python互動才行!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Basic Usage</title>

<link href="css/examples.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="js/flot/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.min.js"></script>


<script type="text/javascript">

$(function() {
// plot chart2
var data = [];
var now = new Date().getTime();
for (var i=0; i<50; i++)//while (data.length < totalPoints)
{
var yData = Math.random() * 100;
var temp = [i, yData];
//var temp = [now += 60, yData];
data.push(temp);
}
$.plot("#myplace1", [data]);

});

</script>
</head>
<body>

<div id="header">
<h2>Plot Demo</h2>
</div>

<div id="content">
<div class="demo-container">
<div id="myplace1" class="demo-placeholder"></div>
</div>

</div>

</body>
</html>

2016年9月6日星期二

[Flask] static file的存取

參考這邊：
http://docs.jinkan.org/docs/flask/quickstart.html#routing

在route規則中可以這樣寫

@app.route('/user/<username>')
def show_user_profile(username):
    # show the user profile for that user
    return 'User %s' % username

網頁url/user/username 這個username的字會被username變數接收
所以打入url/user/malo --> username就會是malo

另一種寫法，把post_id轉為int型態
<converter:variable_name>

@app.route('/post/<int:post_id>')
def show_post(post_id):
    # show the post with the given id, the id is an integer
    return 'Post %d' % post_id

中文的資料只有說3種converter
但在這邊，寫了好幾個converter
http://flask.pocoo.org/docs/0.11/quickstart/#variable-rules
string和path主要分別在於path可以包含slash

@app.route('/user/<username>')
def show_user_profile(username):
    # show the user profile for that user
    return 'User %s' % username

@app.route('/post/<int:post_id>')
def show_post(post_id):
    # show the post with the given id, the id is an integer
    return 'Post %d' % post_id

The following converters exist:

string	accepts any text without a slash (the default)
int	accepts integers
float	like int but for floating point values
path	like the default but also accepts slashes
any	matches one of the items provided
uuid	accepts UUID strings

[sublime] 初體驗，原來也可以直接run

之前一直習慣使用pyScripter開發python程式，一直覺得pyScripter最棒的地方是按著control鈕，用滑鼠點一下變數、函式，就會跳到他的定義處，超好用的

最近，看網友們常在推sublime，說這ide超好用，之前是聽寫arduino的人說好用的…
但一直都還不是很習慣，最主要應該是pyScripter有的功能在sublime一時都還找不到吧
不過覺得sublime不錯的地方是不管什麼語言都已經預設好黑底的配色，對眼睛蠻友善的

最需要的就是直接執行程式的功能了
tools/build -->就可以run程式了
要取消執行，一般要送出Ctrl^Z但是在，sublime的console中無法用鍵盤送出Ctrl^Z
因此要使用tools / cancel build 來停止

而sublime解析python code的功能，還有在程式中跳往定義，再回來的功能好像有點缺乏，用外掛也不是很強…

訂閱：文章 (Atom)

2016年9月29日 星期四

2016年9月27日 星期二

2016年9月26日 星期一

2016年9月21日 星期三

2016年9月20日 星期二

2016年9月9日 星期五

2016年9月8日 星期四

2016年9月7日 星期三

2016年9月6日 星期二