吉言軍's Note

2018年7月6日星期五

[Android] Object Detect

參考

https://medium.com/@akash29/real-time-object-detection-for-a-specific-objects-on-tensorflow-apps-7a60fd39e1e

2015年5月17日星期日

w3school-CSS

CSS Syntax : Syntax p {property : value ; property : value}

CSS Selector

element div{}
id #id{}
class .class{} / div.class{}
Grouping Selector h1, h2, p{}

CSS three way to insert CSS

External Style Sheet : <link rel="stylesheet" type="text/css href="mystyle.css">
Internal Style Sheet : p{color : red}
Inline Styles : <h1 style="color : red">

CSS Background
Background Color body{background-color : #b0c4de;}
Background Image body{background-image : url("bkImage.png");}
Background Image Repeat background-repeat : repeat-x;
Background Image no repeat background-repeat : no-repeat
Background Image Position background-position : right top ;
Background ShortHand Property : background : #ffffff url("pic.jpg") repeat-x;
Background fixed : background-attachment : fixed;

CSS Text

color

color : red
color : #ffffff
color : rgb(122,255,255);

Alignment

text-align : left;
text-align : center;
text-align : justify; (each line have same width)

decoration (線)

text-decoration : overline;
text-decoration : none; (通常用來移除超連結的線)
text-decoration : line-through;
text-decoration : underline;

Transformation

text-transformation : uppercase;
text-transformation : lowercase;
text-transformation : capitalize;

Identation (第一行的留白寬度)

text-ident : 50px;

space between characters : letter-spacing : -3px;
space between lines : line-height : 70%;
direction :

direction : rtl; (從右邊長出來)
uinicode-bidi : bidi-override; (方向相反)

increase the white space between the words : word-spacing : 30px;
disable wrapping : white-space : nowrap; (不自動換行)
text shadow : text-shadow : 2px 2px #FF0000 (水平，垂直，顏色)

CSS Font

Font-family
style

font-style : normal;
font-style : italic;
font-style : oblique;

Size font-size : 40px;
boldness : font-weight : 600;
variant : font-variant : small-caps;

CSS Links

color : #FF0000;
state :

link : a:link{color:#FF0000;}
visited : a:visited{#00FF00;}
hover : a:hover{#000000}
active : a:active{#0000FF;}

create link box

CSS Lists

Markers

list-style-type : circle;
list-style-type : square;
list-style-type : upper-roman;
list-style-type : lower-alpha;
list-style-image : url("marker.jpg");

CSS Box Model

width
padding
border
margin

CSS border

border-style : solid;
border-top-style : dotted;
border-color : red;
border-width : 10px;

CSS Margin

margin-top : 10px;
margin-bottom : 10px;
margin-left : 10px;
margin-right : 10px;
shorthand : margin : 10px 15px; (上下10px, 左右15px)

CSS Display and Visibility

Hidding a Element

visibility : hidden; //Element 不見，但layout 位置還在
display : none; //Element不見，連layout 位置都不在

inline : display : inline;
block : display : block;

CSS Positioning
Fixed : position : fixed; (不管卷軸怎麼動，都會在那裏)
Relatived : position : relative; (相對原本位置移動)
Absolute : position : absolute;
Overlapping Element : z-index : -1;
Set the shape of element : clip : rect(10px,90px,10px,10px);
overflow : scroll / hidden / auto ;
change the cursor : cursor : pointer;
clear : clear : both; //利用<h1> 把float 關掉，達到換行

CSS Align
Center Aligning Using the margin Property margin-left : auto; / margin-right : auto;
Left and Right Aligning Using the position Property : position:absolute; / right:0px;

2015年5月14日星期四

w3school-Bootstrap

Bootstrap 3

CDN

1、add the HTML doctype :

<!Doctype html>
<meta charset="UTF-8">

2、Bootstrap is mobile first

<meta name="viewport" content = width="device-width",initial-scale=1 >

3、containers

Bootstrap Grid System 12columns
1、class="row"
2、class="col-sm-4" (最大12)

xs (for phones)
sm (for tablets)
md(for desktop)
lg(for larger desktop)

Bootstrap dropdown-toggle
class="btn btn-primary dropdown-toggle"
data-toggle="dropdown"
Menu<span class="caret"></span>
<ul class="dropdown-menu role="menu"" >

Bootstrap Table

Basic : < table class="table";>
zebra-stripe : <table class="table table-stripes";>
Border table : <table class="table table-bordered";>
Hover Rows : <table class="table table-hover";>

Bootstrap Image

Rounded Corners : class = "img-rounded"
Circle : class="img-circle"
Thumbnail : class="img-thumbnail"
Responsive Image : class="img-responsive"
Image Gallery : <a class="thumbnail">
Responsive Eebeds :

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item">

2015年5月12日星期二

W3school-HTML

Title Attribution
href Atrribution
Size Atrribution
HTML Heading
HTML Horizontal Line
<pre> poem
background-color:lightgray
Text Color color:blue
HTML font font-family:courier
Text Size font-size:200%
Text Align text-align:center
Blod<b> Strong<strong>
Marked <mark>
deleted line <del>
underLine <ins>
Bi-Directional Override <bdo dir="rtl">

CSS border
CSS padding
CSS margin
CSS id
CSS class

HTML Link : colors and Icons
HTML Link : Target Atrribution
HTML Link : Image as links
HTML LinK : id as link

HTML Image : Width Height or Style?
HTML Image : Image on Another Server
HTML Image : Image Maps
HTML Image : Image Floating

HTML Table : Defining <table> <tr> <td>
HTML Table : CSS Border border : 1px solid black
HTML Table : CSS collapse border border-collapse : collapse
HTML Table : padding   padding : 20px
HTML Table : Table headings  <th>
HTML Table : Align text-align: left
HTML Table : Border space border-spacing : 2px
HTML Table : span colunms colspan="2"
HTML Table : span rows  rowspan="2"
HTML Table : caption <caption>
HTML Table : id CSS table#id{ }
HTML Table : odd even style table#t01 tr:nth-child(odd)

HTML Lists : unordered Lists <ul> <li>
HTML Lists : unordered Lists Style Attribution list-style-type : circle
HTML Lists : ordered Lists <ol> <li> type= "1"
HTML Lists : description Lists <dl> <dt> <dd>
HTML Lists : nested Lists
HTML Lists : Horizontal Lists  ul#id li {display:inline }
HTML Lists : Horizontal Lists style Attribution

background-color : black
padding : 10px 20px
text-decoration : none (無超連結底線)
border-radius : 10px 10px 30px 30px

HTML Lists : hover ul#id li a :hover {background-color : orange }

HTML Blocks : <div>
HTML Blocks : <span>

HTML Class : Class .classname{}
HTML Class : Classing inline Elements span.classname { }

HTML Layouts : layout using <div>

HTML Responsive : using float float : left
HTML Responsize : using Bootstrap

HTML iframe : display web in web <iframe src="URL"></iframe>
HTML iframe : set Height and Width
HTML iframe : remove the border style="border : none"
HTML iframe : change the border style="border : 5px dotted red"
HTML iframe : Target for a link

<iframe src="www.google.com" name="iframe_a"></iframe>
<p><a href="www.yahoo.com.tw" target="iframe_a" >yahoo</a></p>

HTML ColorName : 140

HTML ColorValues

style="background-color : #FFFF00"
style="background-color : rgb(255,255,0)"
style="background-color : yellow"

HTML Scripts : change content document.getElementById("Id").innerHTML = "OK";

HTML Scripts : change style document.getElementById("Id").style.fontsize = "25px";

HTML symbol <p>I will display &x20AC</p>

HTML form : input

text
radio
submit <form action="url"> <input type="submit"> </form>

HTML form : action

method="GET" 傳送資料會出現在網址
method="POST" 傳送資料不會出現在網址

HTML form : name Attribution input 要有 name 才會傳

HTML form : grouping data <fieldset>

HTML form : <select> <option>

HTML form : <textarea>

HTML form : <button>

HTML form : dataList

HTML form : <output>

HTML Input:

text
password
submit
radio
checkbox
button
number 限制輸入數字範圍
date
color
range
email
search
tel
url
file

2015年3月25日星期三

[Processing]Opencv動態臉部追蹤

win7安裝Opencv for Processing(64bit)

1、安裝 runtime components for Microsoft Visual C++ 2010

http://www.microsoft.com/en-us/download/details.aspx?id=5555(x86)
http://www.microsoft.com/en-us/download/details.aspx?id=14632(x64)

2、下載Opencv，解壓縮 ex: C:\Opencv\

http://sourceforge.net/projects/opencvlibrary/files/opencv-win/2.3.1/OpenCV-2.3.1-win-superpack.exe/download

3、把dll的路徑加入到window7之中

可以使用RapidEE，在PATH路徑下加入:

C:\opencv\build\x64\vc10\bin\

C:\opencv\build\x64\vc10\lib\

C:\opencv\build\common\tbb\intel64\vc10\

P.S.如果你的系統是win7 32bit的版本的話,路徑x64的部分要改成x86,例如上面的第一條路徑就要改成

C:\opencv\build\x86\vc10\bin\ 這樣

而且要新增加一條路徑是

C:\opencv\build\common\tbb\ia32\vc10\

4、下載JavacvPro的library，解壓縮至/Mode/java/libraries

http://www.mon-club-elec.fr/mes_downloads/javacvPro-0.3.zip

http://sourceforge.net/projects/gsvideo/files/opencv/javacvPro-0.5-macosx64.zip/download

5、下載最新版本的JavaCV library，解壓縮到 {path-to-Processing}/Mode/java/libraries

新增一個資料夾叫做library在javacv-bin這個資料夾裡面,並且把剛剛資料夾裡所有的檔案都放進去把javacv-bin這個資料夾的名字改成javacv

http://javacv.googlecode.com/files/javacv-bin-20120329.zip

6、下載最新的Javacpp library ，解壓縮到:{path-to-Processing}/Mode/java/libraries

新增一個資料夾叫做library在javacpp-bin這個資料夾裡面,並且把剛剛資料夾裡所有的檔案都放進去把javacpp-bin這個資料夾的名字改成javacpp

Reference:

http://shengpo.logdown.com/posts/69934-processing-opencv-2-on-windows

FaceDetect

https://drive.google.com/file/d/0B3iLa8F71LQwWTljT3UxejlYZ1k/view?usp=sharing

2014年9月13日星期六

[kinect]安裝Kinect for Processing 大絕招

1、安裝包:ZigSOpenNI2、SimpleOpenNI丟Processing3、安裝Kinect SDK 1.7

2、以Processing 2.1.2版本測試

Download

2014年8月27日星期三

[Web]JS表單篇

圖片送出按鈕

<a href="javascript:form1.submit();"> <img src="img.jpg"</a>

重設按鈕

<a href="javascript:form1.reset();"> <img src="img.jpg"</a>

允許/禁止訪問表單

document.form1.disabled = true / false;

讀取表單所有名稱

form1.elements.lengthform1.elements[i].name

驗證是否輸入是否為數字

var num = "0123456789"var str = form.id.value;for(i=0;i<str.length;i++){ if(num.indexOf(str.charAt(i))== -1)}

使用鍵盤快速選取欄位

<form> <label for="Namebox" accessKey="N"><u>N</u>ame:</label> <input type="text" id="Namebox"></form>

文字欄位取得focus

<input type="text" id="txID">form.txID.focus();

選取文字欄位中的文字

form.ID.focus();form.ID.select();

改變文字欄位中的顏色

<input type="text" value="HERE" onMouseOver = "this.style.color = 'red' ">

改變文字欄位中的背景顏色

<input type="text" value="HERE" onMouseOver = "this.style.background= 'red' ">

改變文字欄位中的1邊框顏色

<input type="text" value="HERE" onMouseOver = "this.style.borderColor= 'red' ">

文字欄位自動調整大小

onKeyPress = "autoWidth()"str = form.ID.value;if(str.length !=0){ form.ID.size = str.length;}

改變文字欄位中的對齊方式

form.Id.style.textAlign = left/center/right;

製作Google搜尋表單

<form id="fm1_Id" action="http://www.google.com/search"> <input name="q" id="searchWord" > <br> <input type="submit" value="搜尋"></form>

檢驗一組按鈕的選擇狀態

<form id="form1"><input name="sex" type="radio" checked>男<input name="sex" type="radio" >女</form>
form1.sex[0].checked form1.sex[1].checked

核取方塊狀態

form1.id[i].checked

帶標籤的核取方塊

<input type="checkbox" id="ch1"><label for="ch1" > 標籤 </label>

取得下拉選單中選取的值

<form id="form1"><select id="sel1" onChange="get()"><option value="第一項">第一項</option><option value="第二項">第二項</option><option value="第三項">第三項</option></form>
form1.sel1.value

取得下拉選單的索引值

form1.sel1.selectedIndex

取得選單中的多個值

<select id="sel1" multiple>form.id[i].selected // 看看有沒有被選到form.id[i].value

在新視窗中開啓網頁

open（）取代window.loction（）open(http://www.google.com);

取得檔案位置(含路徑)

<form id="form2" enctype="multipart/form-data" ><input type="file" id="file"> <input type="button" onClick="get()" value="FileName"></form>
form2.id.value

取得檔案名稱（不含路徑）

取得檔案路徑後，用split()將路徑以“\”切割，再存入陣列中，最後取出陣列的最後一項在JavaScript中插入一個反斜線必須用雙斜線表示。var fName = form2.id.value;var fileName = new Array();fileName = fName.split("\\");fileName[fileName.length-1]

取得選取檔案的副檔名

取得檔案路徑後，用split()將路徑以“.”切割，再存入陣列中，最後取出陣列的最後一項
fileName = fName.split(".");

將選取的檔案圖片顯示出來

先判斷是不是圖檔
extname.toUpperCase() =="JPG"pic.src = fileName; //完整路徑

取得選取圖片的檔案大小

先建立圖片物件，並為圖片物件指定來源，再使用物件屬性取得size
img = new Image();
img.src = fileName;
size = img.fileSize / 1024 ; //將圖片大小轉成KB

取得選取圖片的寬高

img.widthimg.height

選取圖片作為網頁背景

document.body.backgronund = imgURL;

2014年8月24日星期日

[Web]JS網頁事件篇

進入、離開網頁顯示訊息

<body onLoad="alert('歡贏')" onUnload="alert('謝謝')">

單擊、雙擊滑鼠事件

<input type="button" onClick="alert('單擊')"><input type="button" onDbClick="alert('雙擊')">

取得滑鼠的按鍵

function getButton(){ switch(event.button) { case 0 : alert("左鍵");break; case 1 : alert("右鍵");break; case 2 : alert("中鍵");break; }}document.onmousedown = getButton; //監聽器

滑鼠按下事件

<body onmousedown="alert('點擊')">

絕對禁止按滑鼠右鍵

<body onContextMenu="alert('NO') ; return false" >

滑鼠控制文字滾動

<marquee direction="up" onMouseOver="this.stop()"onMosueOut="this.start()">

取得滑鼠座標

function getMouse(){ event.x; event.y;}document.onmousemove = getMouse;

交換式圖片按鈕

<img src="img1" onMouseOver = " this.src = ' img2 ' " onMouseOut = " this.src = ' img1 ' " >

顯示或隱藏圖片

picID.style.visibility = 'visible'picID.style.visibility = 'hidden'

取得按鍵ASCII編碼

function getkeyCode(){ asc = event.keyCode; key = String.fromCharCode(asc);}document.onkeydown = getkeyCode; // 可以取得所有按鍵，但無法分辨大小寫document.onkeypress = getkeyCode; //可分辨大小寫

前往某網頁

window.loaction.href = "www.google.com";

將按下的按鍵顯示在網頁上

asc = event.keyCode;key = String.fromCharCode(asc);str += key;txt.innerHTML = str;document.onkeypress = showkey;

顯示不同滑鼠樣式

<div onMouseOver = "this.style.cursor='hand'">手形指標</div>

使用外部滑鼠樣式

靜態指標:this.style.cursor='url(img.cur)'動態指標:this.style.cursor='url(img.ani)'

登入密碼驗證

看網頁原始碼就破解

var password = prompt("請輸入密碼","");

取得頁面所有超連結地址

陣列 = document.all.tags("A");

[Web]JS實用範例辭典-視窗篇

視窗篇

警告對話方塊

alert("HI你好");

確認對話方塊

ret = confirm("可以加你朋友嗎"); //ret回傳值(true/false)

顯示網頁對話方塊

可以顯示一個對話方塊，此對話方塊是另一個網頁的內容

features = "dialogWidth:300px;dialogHeight:200px;status=no"; // 設定對話方塊CSS

showModalDialog("dialog.html",window,features);

以頂層模式顯示網頁對話方塊

不同於showModalDialog的地方是，顯示對話方塊後還可以同時操作原本後面的網頁視窗

features = "dialogWidth:300px;dialogHeight:300px;status-no";

showModelessDialog(dialog.html,window,features);

取得瀏覽器視窗大小

var width = document.body.clientWidth;
var height = document.body.clientHeight + 125; //瀏覽器網址，工具列...

取得螢幕大小

var width = screen.width;
var height = screen.height;

不能改變大小的視窗

一但改變視窗大小就觸發<body> onResize事件
<body onResize="window.resize(400,300)">

指定瀏覽器視窗位置

window.moveTo(200,100); //(距離螢幕左邊的距離，距離螢幕頂部的距離)

震動的視窗

window.top.moveBy(0,i); //相對移動

視窗縮小效果(IE)

resizeTo(width,height);
moveTo( (screen.height-height)/2 , (screen.width-width)/2 );

視窗自動捲動

window.scrollBy(1,0); // 0 , 正 , 負值的六種組合方向
<body onLoad="setInterval('window.scrollBy(0,1)',50)">

去掉視窗捲軸

定義body的CSS
body{overflow:scroll;overflow-x:hidden;overflow-y:hidden;}

讓捲軸從左邊出現

<body dir="rtl">

改變捲軸的樣式CSS

body
{
scrollbar-face-color : # ffd0d0 //捲軸表單顏色
scrollbar-highlight-color : ffffff //高光顏色
}

視窗失焦事件

body
{onBlur="alert('out of focus')"}

彈出新網頁視窗

window.open("newPage.html");

彈出無屬性列網頁視窗

window.open("newPage.html","","top=100,left=300,width=300,height=200");

彈出視窗狀態

window.open("newPage.html',"","HERE");
fullscreen=yes //全螢幕
menubar=yes //功能表
toolbar=yes //標準按鈕列，下一頁
location=yes //網址
status=yes //底下狀態列
scrollbar = yes //有捲軸
resize=yes //允許調整視窗

關閉視窗

self.close()
window.close()

在主視窗關閉彈出視窗

p = window.open('newPage.html');
p.close();

在彈出視窗關閉主視窗

opener.close();

將主視窗的資料輸出到彈出視窗

var p = window.open("receive.html","","width=300,height=200,top=300,left=800");
var msg = textID.value;
p.document.write("<p>" + msg + "</p>");

自動關閉視窗

setTimeout(self.close(),5000);

setTimeout(myfunction,5000); //不可myfunction()

Reference

JavaScript實用範例辭典-孫俊平

2014年8月5日星期二

[unity]tag Detect

大綱

現在有一場景，上面有很多遊戲物件，當滑鼠點擊畫面時，我們可以得到以下資訊:1、點擊位置的座標(screenspace、worldspace)2、是否點擊到物件3、點擊到哪個物件

說明

場景中有很多物件，要做當滑鼠點擊物件時，知道是點到哪個物件。先將遊戲物件標籤，以供程式判斷；gameobject.tag

使用到Input.GetMouseButtonDown來觸發，接下來是將點擊到的位置由Screenspace轉成遊戲世界的World space

var ray = Camera.main.ScreenPointToRay(Input.mousePosition);

將由攝影機投射出光線，包含著位置與方向資訊。

Physics.Raycast(ray,hit);

如果攝影機射出的光線，有碰擊到遊戲物件(collider)，回返回true，然後hit會得到光線與collider在哪個位置被碰到的物件資訊。

point = hit.point; (哪個位置)

object = hit.transform.gameObject;(哪個物件)

Code :

#pragma strict

var Ball : GameObject;

var object: GameObject;

var point: Vector3;

function Start () {

}

function Update () {

if(Input.GetMouseButtonDown(0))

{

//Instantiate(Ball,Input.mousePosition,transform.rotation);

//print(Input.mousePosition);

var hit: RaycastHit;

var ray = Camera.main.ScreenPointToRay(Input.mousePosition);

if (Physics.Raycast(ray, hit))

{

point = hit.point;

object = hit.transform.gameObject;

//print(object.tag);

print(point);

Instantiate(Ball,point,transform.rotation);

}

else

{

print("SHIT");

}

Reference

Unity Document

2014年8月2日星期六

[unity]Input

在Unity 中使用input 物件來偵測滑鼠，鍵盤事件。
偵測情況基本上有三種:1、GetKey : 當按下時會持續作用2、GetKeyDown : 當按下那一刻才會作用3，GetKeyUp : 當按下後放開那一刻才會作用

Example:

偵測滑鼠左中右鍵

if(Input.GetMouseButton(0))
Debug.Log("Pressed left click.");
if(Input.GetMouseButton(1))
Debug.Log("Pressed right click.");
if(Input.GetMouseButton(2))
Debug.Log("Pressed middle click.");

三種不同的方式偵測是否按下"A"

if(Input.GetKey(KeyCode.A)) // print continue when press key

{

print("A");

}

if(Input.GetKeyDown(KeyCode.A)) // print once when press key

{

print("press A");

}

if(Input.GetKeyUp(KeyCode.A)) // print once when release key

{

print("press A");

}

按下任意鍵

if(Input.anyKeyDown)

{

print("anyKey");

}

Refernce:

Unity KeyCode API

CG 學習網

2014年8月1日星期五

[unity]onMouseDown

利用onMouseDowm 呈現當滑鼠按到遊戲物件時，開關燈光。
有兩種方式，

1、先製造一個cube GameObject然後在cube GameObject上附加燈光元件，所以程式是將onMouseDown依附在cube上，然後在程式碼中指定燈的強弱，因為是附加在cube的關係，在程式碼中，以gameObject.light.intensity即可存取。

#pragma strict

var lightSW = true;
function Start () {
print("Hello World");
}
function Update () {
gameObject.transform.Rotate(0,30*Time.deltaTime,0);
}
function OnMouseDown()
{
if(lightSW)
{
gameObject.light.intensity = 5;
lightSW = false;
}
else{
gameObject.light.intensity = 0;
lightSW = true;
}
}

2、製造一個cube GameObject 與一個spotlight GameObject ，將onMouseDowm附加在cube上，
因為兩個gameObject相互獨立，所以cube的程式要控制spotlight的話，必須將spotlight 以 gameObject(var GB_light:GameObject;)的方式讀進程式，然後再加以控制。

#pragma strict
var GB_light:GameObject;
var lightSW = true;
function Start () {
print("Hello World");
}
function Update () {
gameObject.transform.Rotate(0,30*Time.deltaTime,0);
}
function OnMouseDown()
{
if(lightSW)
{
GB_light.light.intensity = 5;
lightSW = false;
}
else{
GB_light.light.intensity = 0;
lightSW = true;
}
}

Reference

CG學習網

[unity]JavaScrpt遊戲物件基本操作

移動GmaeObject到指定位置

gameObject.transform.position = Vector3(x,y,z);

使GameObject向指定方向移動

gameObject.transform.Translate(x,y,z);

一秒轉30度

gameObject.transform.Rotate(0,30*Time.deltaTime,0);

旋轉到指定角度

gameObject.transform.rotation = Quaternion.Euler(0,30,0);

透過滑鼠指定啟動不同Camera

public var Camera3 : GameObject;Camera1.active = true;

Input.GetMouseButtonDown(1)

動態生成物件(Instantiate) : 先製造prefab，經過某個事件後才生成物件

var prefabObj : GameObject;Instantiate(prefabObj,transform.position,transform.rotation);

切換場景:可以場景檔名或引數呼叫(需在Sences In Build建立順序)

Application.LoadLevel("Sence2")

Application.LoadLevel(0);

Refence

超連結

Application.OpenURL("www.google.com");

AudioSource

建立空元件，並加上audiosource component，將mp3拉進audiosource

var audio_A : AduioSource;

aduio.play();

more

screen shot(png)

Application.CaptureScreenShot("filename.png");

Reference

CG數位學習網

彥霖實驗筆記

[unity]基本效果-看圖說故事

particle system
terrain
prefab
fog (Edit->Render Settings)
ambient Light (Edit->Render Settings)
skyBox (Edit->Render Settings)