使用線上免費網頁樣式CSS風格(以JSP為例)

在撰寫網頁時，我們通常會為html另外寫CSS來設定其樣式，讓網頁各頁面的版面可以有一個統一的樣式風格，也比較好管理。

除了自己撰寫CSS外，還可以從網路上找到許多免費的樣式資源，可以免費的下載下來使用，有的是就是一個單統的CSS檔，而有的稍微用了其他的方法來匯入CSS檔(例如JQuery)，而CSS的路徑的也要設正確。總之根據不同的免費CSS資源，需要稍微的修改一下才能使用。

Templated是一個提供各種網頁樣式的網站，有許多的免費樣式可以下載使用。因為在之前的使用上花了一點時間搞定，特在此紀錄一下以Templated網站中的一個樣式Transit為例的使用方法。

進入Transit頁面後(如下圖)，可以在上面橫幅的右邊下載其樣式，在Elements的連結中可以點進去看到此樣式的各個html元件的樣子，可以看看自己喜不喜歡在下載使用。

下載下來解壓縮後，可以看到如下的檔案結構，其中根目錄的三個html是網頁範例，css、fonts、images、js各是CSS、字型、圖片和JQuery資料夾。

用Java與Arduino的序列阜溝通(使用RXTX)

最近在玩Arduino，研究如何使用Java利用序列阜跟Arduino溝通，找到了幾篇蠻不錯實用的資料:

1. Java 與 Arduino uno 使用 RXTX串口通信
2. Two way communcation with the serial port
3. [ Java 文章收集 ] Java 對 RS232 的操作

基本上有兩種常用的方法:

1. 使用Java Communications，它原本是Sun公司維護的，不過似乎現在已經沒有人再做了，在Oracle網站上只能找到API的說明書但卻沒有下載點。
2. 使用RXTX，語法跟Java Communications很像但寫法有一點不一樣，使用RXTX可以讓Java使用Serial port(序列阜)，達到經由Serial port來傳送資料給Arduino或從Arduino接收資料。
3. 2016/11/27 更新，第三種方法，使用Ardulink，請參考Ardulink - Arduino的Java控制方案。

在這裡，我使用第二種方法，也就是RXTX，RXTX可以在這裡下載，也可從它的RXTX Wiki上進去找，其中也有很多有用的資料，下載完以後，裡面會有兩個dll檔及jar檔，jar的使用方式就跟其它jar使用方式一樣，在編譯器中Add JAR就好，而兩個dll檔，需將它們放到兩處地方：

1. 為了開發，要放在Java JDK安裝目錄下的bin資料夾下面，參考自
2. 放在C:\Windows\System32下(當然，是指在Windows平台下)。

上面的提到的資料中，第二個資料是RXTX官方的例子，使用了兩個thread分別執行Serial port的輸入及輸出，使用者可以即時看到接收到的資料和即是的打上資料送出去，需要注意的是，其中這行

serialPort.setSerialPortParams(57600,SerialPort.DATABITS_8,SerialPort.STOPBITS_1,SerialPort.PARITY_NONE);

中的57600是Serial port的通訊速率( baud rate)，需要自行修改成與Arduino板子中程式所定的通訊速率一樣，例如Arduino程式的

Serial.begin(9600)

中的9600，不然在接收和傳送訊息時會有問題。

因為覺得官方的例子優雅又實用，為了怕以後忘記，特轉載在最底下(57600已改成9600)，可配合我寫的Arduino程式(SerialLightLevelControl)用Serial port的方式用電腦打數字進Console中控制LED燈的亮暗程度。

LaTeXx多個子圖排列，使用subfigure和minipage

在LaTeX中可以使用subfigure和minipage達成多個子圖的排列，跟只使用subfigure不同，如果只使用subfigure的話，只能做到垂直的直向排列。配合minipage的話就可以實現2x2或上2下1等的圖形排列，以下的例子為三張子圖，排列成上2張下1張的情形(在使用subfigure指令時不要忘了使用subfigure的package，例如加上:\usepackage{subfigure})

\begin{figure}[htb]

     \centering

     \subfigure[]{

          \begin{minipage}[b]{0.2\textwidth}

               \includegraphics[width=1\textwidth]{FirstFigure.eps}

          \end{minipage}

          \label{FirstFigure}

     }

     \subfigure[]{

          \begin{minipage}[b]{0.2\textwidth}

          \includegraphics[width=1\textwidth]{SecondFigure.eps}

          \end{minipage}

          \label{SecondFigure}

     }

     \subfigure[]{

          \begin{minipage}[b]{0.2\textwidth}

               \includegraphics[width=1\textwidth]{ThirdFigure.eps}

          \end{minipage}

          \label{ThirdFigure}

     }

     \caption{Optical spectrum of (a)BS1, (b)BS2 and (c) Amplified Signal wave.}

\end{figure}

使用LaTeX撰寫期刊論文(MikTeX2.9+TexMaker4.4.1+JabRef2.10+GSview5.0+GPL Ghostscript 9.01)

這裡紀錄了使用LaTeX撰寫期刊論文時的一些注意事項，使用的組合為:

編譯器:MikTeX2.9
編輯器:TexMaker4.4.1
文獻管理工具:JabRef2.10
圖案轉檔工具:GSview5.0+GPL Ghostscript 9.01

1. 如果在編譯PDF檔時有引入package不存在的問題，通常是沒有下載對應的package，解決方法是下載需要的package，以MikTeX2.9為例，依照程式集-->MikTeX2.9-->Maintenance (Admin)-->Package Manager (Admin)的路徑開啟Package Manager (Admin)，在Name的方框中打上需要的package名稱，指到要下載的package按右鍵選擇Install就可以了。
2. 如果使用MikTeX發現提供package下載的伺服器站點掛掉了，可以在Package Manager (Admin)的Repository--> -->Change Package Repository-->下一步 的路徑中選擇其他的伺服器站點。
3. 在使用編輯器打好程式碼，要輸出成PDF檔時，可能會出現錯誤無法編譯過(例如有使用到eps的圖時)，可以選擇其它的編譯方法試試看，例如XeLaTex。
4. 使用JabRef2.10可以很好的管理及將文獻引入LaTeX中，通常在各大期刊的各文章頁面中，都會有提供各式的文獻輸出格式，連結通常為Download Citations或Export Citation等字樣，如下圖所示，LaTex使用的文獻為副檔名為bib的BibTex格式:
   
OpticalInfoBase的BibTeX輸出

Ieeexplore的BibTex輸出


5. 使用JabRef2.10做好文獻存成副檔為bib的文獻檔之後，就可以開始在LaTex論文中引

JQuery的小日曆

在撰寫html的日期選擇時，常會要求使用者使鍵入正確的日期格式，這樣才會方便後續的處理，例如進行MySQL的查詢，這時如果只是使用html中單純的text是難以規範使用者的輸入內容的，所以通常我們都會採取不讓使用者直接輸入而是用選擇的方式輸入日期資料，通常有下例幾種方式:

1. 直接把年、月、日拆開來，分別用不同的下拉式選單讓使用者選取正確的數字，不過這種方式使用者能選擇的值是有限的，你沒有提供的數字就無法選擇。
2. 以直觀的方式使用日曆來讓使用者選擇日期，使用者會看到日曆並直接在上面選擇。

因為JQuery十分方便，只要引用進JSP中就可以直接使用，而且日曆外觀也不錯，所以在這裡就以JQuery的小日曆為例子，來說明如實現第2種的日曆方式：

1. 首先要在html的head中把要使用的CSS樣式、JQuery和JQuery UI引用進來，如以下的前三行程式碼，第四行程式碼是中文化的功能，不加入這行時日曆是呈現英文的界面，加入後就能顯示中文介面的日曆：

<!-- 使用 jQuery -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<!-- 使用 jQuery Datepicker的中文化-->
<script type="text/javascript" src="../jquery/jquery.ui.datepicker-zh-TW.js"></script>

&#32與&nbsp，換行空格與不換行空格

在html中常會遇到空白字符的編碼問題，而空白的常用編碼有兩個，一個是&#32，另一個是&nbsp，這兩個空白看起來一樣，卻有著不一樣的特性。

&#32是換行空格，也就是我們平常用的最普通的空白，它的特性是，如果空白後面接的字太長且超出邊界的話，後面接的文字就會強制被移動到下一行。

&nbsp是不換行空格，一般我們很少用到，或著是用到時也沒有意識到，其實它可以很簡單的一個例子來理解，例如:一公里我們會用"1 km"來表示，其中"1"和"km"有一個空格，如果我們希望不要"1"寫在一行、"km"寫在下一行，也就是希望"1 km"是一體的，一起在同一行，這時我們就會使用不換行格而不是換行空格，就像這樣:"1&nbspkm"

關於限制存取根目錄URL與welcome-file的問題記錄

這裡記錄了一個我曾經發生但不太懂的開發情況:
以下是JSP的安全權限設定:

<security-constraint>
        <display-name>ManagerConstraint</display-name>
        <web-resource-collection>
            <web-resource-name>iBeaconServerPages</web-resource-name>
            <description>Pages of iBeacon Project Server</description>
            <url-pattern>/*</url-pattern>
        </web-resource-collection>
        <auth-constraint>
            <description/>
            <role-name>Manager</role-name>
        </auth-constraint>
    </security-constraint>
    <security-constraint>
        <display-name>TicketCheckerConstarint</display-name>
        <web-resource-collection>
           <web-resource-name>PagesAboutTicketChecker</web-resource-name>
            <description>Pages about Ticket Checker</description>
            <url-pattern>/welcomePage.jsp</url-pattern>
            <url-pattern>/ticketCheckUsers/*</url-pattern>
            <url-pattern>/guestFlowMonitor/*</url-pattern>
            <url-pattern>/logoutPage.jsp</url-pattern>
        </web-resource-collection>
        <auth-constraint>
            <description/>
            <role-name>TicketChecker</role-name>
            <role-name>Manager</role-name>
        </auth-constraint>
    </security-constraint>

可以看到，在根目錄下的所有頁面將限制由Manager存取，而/welcomePage.jsp、/ticketCheckUsers/*、/guestFlowMonitor/*和logoutPage.jsp限制由Manager和TicketChecker存取，以上四個頁面在url匹配時會先在TicketCheckerConstarint的權限設定中被匹配到，所以如果不設Manager的話，Manager將無法存取。