2015年12月15日星期二

OpenFrameworks 學習筆記

針對一些 OpenFrameworks 的紀錄與個人認知

ofGraphics

ofTranslate(x, y, z)

=> 先行將座標移至該位置，對於後續的座標做為基準
ex:
ofTranslate(100, 100, 0); // 先移動至 (100,100)
ofDrawRectangle(10, 10, 10, 10); //實際為 (110,110)劃出一個方形

ofPushMatrix() 與 ofPopMatrix()

=> 在ofPushMatrix 下的環境變更等會在 ofPopMatrix 恢復為 ofPushMatrix 前的狀態

ex:

ofPushMatrix(); //儲存當下的環境狀態

ofTranslate(100,100); // 座標 (100,100)

ofRect(0, 0, 20, 50); // (100,100) 畫出方形

ofPopMatrix(); //還原ofPushMatrix 儲存的環境狀態

ofCircle(0, 0, 10); // (0,0) 畫出圓形

ofImage and ofPixels and ofTexture -> allocate(w, h, ofImageType);

=>分配所屬的空間數量

type分類為 OF_IMAGE_GRAYSCALE, OF_IMAGE_COLOR, OF_IMAGE_COLOR_ALPHA

2015年11月23日星期一

Windows Visual Studio 2015 Kinect開發環境設置步驟

設定Kinect 環境:

下載kinect for window 安裝完成

建立專案 → Visual C++ → Win32 主控台應用程式 → 空專案

開啟專案屬性 :

組態選擇 "所有組態"

"組態屬性" → "C/C++" → "一般" → "其他 Include 目錄" → 編輯新增 "$(KINECTSDK20_DIR)inc"

"組態屬性" → "連結器" → "一般" → "其他程式庫目錄" → 編輯新增 "$(KINECTSDK20_DIR)Lib\x86"

"組態屬性" → "連結器" → "輸入" → "其他相依性" → 編輯新增 "kinect20.lib"

設定Open CV 環境:

下載OPENCV 3 解壓縮至C槽

設定環境參數:

控制台 → 系統及安全性 → 系統 → 顯示電腦的基本資訊 → 進階系統設定 → 環境變數 → Path → 新增 ";C:\opencv\build; C:\opencv\build\x64\vc12\bin; C:\opencv\build\x86\vc12\bin;"

開發環境設定組態選擇 "所有組態":

"組態屬性" → "VC++ 目錄" →"Include 目錄" → 編輯新增 →

"
C:\opencv\build\include
C:\opencv\build\include\opencv
C:\opencv\build\include\opencv2
"

"組態屬性" → "連結器" → "輸入" → "其他相依性輸入" →

"
C:\opencv\build\x86\vc12\lib\opencv_ts300.lib
C:\opencv\build\x86\vc12\lib\opencv_world300.lib
C:\opencv\build\x64\vc12\lib\opencv_ts300.lib
C:\opencv\build\x64\vc12\lib\opencv_world300.lib"
"

2015年11月17日星期二

html slim 學習筆記

slim 主要遵循ruby開發規則, 若執行ruby語法需在前面需用" - "來告知

ex:

- $a = "abc";

- if $a =="abc"

h1 =($a)

- else

Windows Ruby 編碼原生非 UTF-8，所以需要更改

使用指令＂ruby -e "puts Encoding.default_external" ＂檢查 ,正常因該為 CPXXX

使用指令＂set RUBYOPT=-EUTF-8＂變更完成後請重新開啟cmd檢查

若為UTF-8表示完成

各類標籤定義

| : 文字延伸,後面內容表示文字

/ : slim上的註解,並不會compiler至HTML

/! : html 上的註解,會compiler 為

/[if IE] :

< : 前端自動增加空白

> : 後段自動增加空白

：: inline tag 後段文字表示為html 的tag 而非字串

Doctype tag

XML VERSION

doctype xml
  <?xml version="1.0" encoding="utf-8" ?>

doctype xml ISO-8859-1
  <?xml version="1.0" encoding="iso-8859-1" ?>

XHTML DOCTYPES

doctype html
  <!DOCTYPE html>

doctype 5
  <!DOCTYPE html>

doctype 1.1
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

doctype strict
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

doctype frameset
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

doctype mobile
  <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
    "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

doctype basic
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

doctype transitional
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 4 DOCTYPES

doctype strict
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

doctype frameset
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">

doctype transitional
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

2015年9月22日星期二

Sublime text 3 套件紀錄

Alignment 對齊工具
Bracket Highlighter 標籤標示
color Highlighter 顏色標示
emmet 編譯工具
liveRload 自動重整搭配瀏覽器 plugin
HTML / CSS / JS Prettify 美化工具
Seti_UI ST UI介面
minifier 壓縮工具
scss 就scss

setting User 文件內容:

{
"Seti_SB_med": true,
"Seti_blue_tab_label": true,
"Seti_orange_button": true,
"Seti_orange_label": true,
"Seti_pad_5": true,
"Seti_sb_big_padding": true,
"Seti_sb_tree_med": true,
"font_size": 14,
"ignored_packages":
[
"CSS3",
"Vintage",
"ImageMagick"
],
"margin": 4,
"tab_size": 4,
"theme": "Seti.sublime-theme"
}

key bindings - user :

[

{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": {"single_line": false}}

]

2013年12月11日星期三

MYSQL Code 紀錄

SUBSTRING_INDEX () 字串處理

SUBSTRING_INDEX(str,delim,count)
str 傳入的字串
delim 傳入的分界符號
count 傳入的取樣次數

delim 不用說，就是類似使用 split 時的切割符號，比較不一樣的是 count (取樣次數)
當 count > 0 時會由左至右取樣，count < 0 時會由右至左取樣

SELECT SUBSTRING_INDEX('dotblogs.com.tw', '.', 1);
return: dotblogs

SELECT SUBSTRING_INDEX('dotblogs.com.tw', '.', 2);
return: dotblogs.com

SELECT SUBSTRING_INDEX('dotblogs.com.tw', '.', -2);
return: com.tw

SELECT SUBSTRING_INDEX(SUBSTRING_INDEX('dotblogs.com.tw', '.', 2), '.', -1);
return: com

FIELD()

FIELD(str,str1,str2,str3,...)
傳回 str 在清單 str1, str2, str3, ... 中的索引。如果 str 沒有發現，傳回 0。FIELD() 是 ELT() 的反運算：

mysql> SELECT FIELD('ej', 'Hej', 'ej', 'Heja', 'hej', 'foo');
-> 2
mysql> SELECT FIELD('fo', 'Hej', 'ej', 'Heja', 'hej', 'foo');
-> 0

2013年8月5日星期一

結束toggle()事件，依然有BUG

雖然function中有更改id但是還是會執行$(#ooo).toggle();

且ID會變成nufined;

<html>
<head>
<style type='text/css'>
div { background-color: #dddddd; width: 60px; margin: 5px; }
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js'></script>
<script type='text/javascript'>
$(function() {
$("#xxx").live("click", function () { alert("YA!"); });
$("input:button").attr("id", "ooo");
$("#ooo").toggle(
function () {
alert($("input#ooo").attr("id"));
$("body").append("<div id=\"xxx\">XXX</span>");
},
function () {
alert($("input#ooo").attr("id"));
$("body").append("<div id=\"xxx\">XXX2</span>");
},
function () {
alert($("input#ooo").attr("id"));
$("#ooo").unbind(); //終止toggle()事件
$(this).attr("id", "xxxx"); //更改id內容
alert($("input").attr("id"));
$("body").append("<div id=\"xxx\">XXX3</span>");
}
);
});
</script>
</head><body>
<input type="button" value="TEST" />
</body>
</html>

$("input").attr("disabled", true); //停用按鈕參數設定

2013年8月1日星期四

瀏覽器版本判斷

HTML

<!--[if IE 6]> 僅IE6可識別 <![endif]–>
<!--[if lte IE 6]> IE6及其以下版本可識別<![endif]–>
<!--[if lt IE 6]> IE6以下版本可識別<![endif]–>
<!--[if gte IE 6]> IE6及其以上版本可識別<![endif]–>
<!--[if gt IE 6]> IE6以上版本可識別<![endif]–>
<!--[if IE]> 所有的IE可識別 <![endif]–>

ps.

lte：Less than or equal to，小於或等於的意思。
lt ：Less than的簡寫，小於的意思。
gte：Greater than or equal to的簡寫，大於或等於的意思。
gt ：Greater than的簡寫，大於的意思。
! ：不等於的意思

CSS





1

2

3

4

5

6

7

8


.classname{

 

background:blue; /*Firefox等非IE瀏覽器背景變藍色*/

background:red \9; /*IE8 背景變紅色*/

*background:black; /*IE7 背景變黑色*/

_background:orange; /*IE6 背景變橘色*/

 

}

PHP





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20


//偵測瀏覽器

$agent = $_SERVER['HTTP_USER_AGENT'];

if(strpos($agent,"MSIE 8.0"))

  echo "Internet Explorer 8.0";

else if(strpos($agent,"MSIE 7.0"))

  echo "Internet Explorer 7.0";

else if(strpos($agent,"MSIE 6.0"))

  echo "Internet Explorer 6.0";

else if(strpos($agent,"Firefox/3"))

  echo "Firefox 3";

else if(strpos($agent,"Firefox/2"))

  echo "Firefox 2";

else if(strpos($agent,"Chrome"))

  echo "Google Chrome";

else if(strpos($agent,"Safari"))

  echo "Safari";

else if(strpos($agent,"Opera"))

  echo "Opera";

else

  echo $agent;

JavaScript





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22


<script type="text/javascript">

    var isIE = navigator.userAgent.search("MSIE") > -1;

    var isIE7 = navigator.userAgent.search("MSIE 7") > -1;

    var isFirefox = navigator.userAgent.search("Firefox") > -1;

    var isOpera = navigator.userAgent.search("Opera") > -1;

    var isSafari = navigator.userAgent.search("Safari") > -1;//Google瀏覽器是用這核心

    if (isIE7) {

        alert('isIE7');

    }

    if (isIE) {

        alert('isIE');

    }

    if (isFirefox) {

        alert('isFirefox');

    }

    if (isOpera) {

        alert('isOpera');

    }

    if (isSafari) {

        alert('isSafari or Chrome');

    }

</script>

JSP





1

2

3

4

5

6

7

8

9


<%@ page language="java"%>

<%

String userAgent = request.getHeader("user-agent");

%>

<html>

<body>

<%out.print ("USER AGENT IS " +userAgent);%>

</body>

</html>

Note. 以下補充 JSP 可以取得之瀏覽器訊息





1

2

3

4

5

6

7

8

9

10

11

12


request.getHeader(“User-agent”) ; /*取得客戶端瀏覽器的版本號、類型*/

getHeader(String name); /*取得http協議定義的傳送文件頭信息 */

request. getMethod(); /*取得客戶端向服務器端傳送數據的方法有GET、POST、PUT等類型 */

request. getRequestURI(); /*取得發出請求字符串的客戶端地址 */

request. getServletPath(); /*取得客戶端所請求的腳本文件的文件路徑 */

request. getServerName(); /*取得服務器的名字 */

request.getServerPort(); /*取得服務器的端口號 */

request.getRemoteAddr(); /*取得客戶端的IP地址 */

request.getRemoteHost(); /*取得客戶端電腦的名字，若失敗，則返回客戶端電腦的IP地址*/

request.getProtocol(); /* 取得客戶端電腦的 Protocal */

request.getHeaderNames(); /*取得所有request header的名字，結果集是一個Enumeration（枚舉）類的實例 */

request.getHeaders(String name); /*取得指定名字的request */

訂閱：文章 (Atom)

學習筆記

2015年12月15日星期二

OpenFrameworks 學習筆記

ofGraphics

ofTranslate(x, y, z)

ofPushMatrix() 與 ofPopMatrix()

ofImage and ofPixels and ofTexture -> allocate(w, h, ofImageType);

2015年11月23日星期一

Windows Visual Studio 2015 Kinect開發環境設置步驟

2015年11月17日星期二

html slim 學習筆記

slim 主要遵循ruby開發規則, 若執行ruby語法需在前面需用" - "來告知

Windows Ruby 編碼原生非 UTF-8，所以需要更改

各類標籤定義

Doctype tag

2015年9月22日星期二

Sublime text 3 套件紀錄

2013年12月11日星期三

MYSQL Code 紀錄

2013年8月5日星期一

結束toggle()事件，依然有BUG

2013年8月1日星期四

瀏覽器版本判斷

HTML

CSS

1

2

3

4

5

6

7

8

`.classname{`

`background:blue;` `/Firefox等非IE瀏覽器背景變藍色/`

`background:red` `\9;` `/IE8 背景變紅色/`

`background:black;` `/IE7 背景變黑色/`

`_background:orange;` `/IE6 背景變橘色*/`

`}`

PHP

JavaScript

JSP

標籤

熱門文章

網誌存檔

2015年12月15日 星期二

OpenFrameworks 學習筆記

ofGraphics

ofTranslate(x, y, z)

ofPushMatrix() 與 ofPopMatrix()

ofImage and ofPixels and ofTexture -> allocate(w, h, ofImageType);

2015年11月23日 星期一

Windows Visual Studio 2015 Kinect開發 環境設置步驟

2015年11月17日 星期二

html slim 學習筆記

slim 主要遵循ruby開發規則, 若執行ruby語法需在前面需用" - "來告知

Windows Ruby 編碼原生非 UTF-8，所以需要更改

各類標籤定義

Doctype tag

2015年9月22日 星期二

Sublime text 3 套件紀錄

2013年12月11日 星期三

MYSQL Code 紀錄

2013年8月5日 星期一

結束toggle()事件，依然有BUG

2013年8月1日 星期四

瀏覽器版本判斷

HTML

CSS

1 2 3 4 5 6 7 8 .classname{ background:blue; /*Firefox等非IE瀏覽器背景變藍色*/ background:red \9; /*IE8 背景變紅色*/ *background:black; /*IE7 背景變黑色*/ _background:orange; /*IE6 背景變橘色*/ }

PHP

JavaScript

JSP

2015年12月15日星期二

2015年11月23日星期一

Windows Visual Studio 2015 Kinect開發環境設置步驟

2015年11月17日星期二

2015年9月22日星期二

2013年12月11日星期三

2013年8月5日星期一

2013年8月1日星期四

1

2

3

4

5

6

7

8

`.classname{`

`background:blue;` `/Firefox等非IE瀏覽器背景變藍色/`

`background:red` `\9;` `/IE8 背景變紅色/`

`background:black;` `/IE7 背景變黑色/`

`_background:orange;` `/IE6 背景變橘色*/`

`}`