吉言軍'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;

訂閱：文章 (Atom)

2018年7月6日 星期五