|
▼
<特報3> IoT解決方案DIY (2) - 使用者介面設計要訣
上一期，筆者寫了關於深入物聯網(IoT)世界，以及如何針對本人基於Photon IoT裝置的車庫大門監管系統(Garage Door Minder)來構建硬體與韌體的文章（如圖1）。本期，筆者將進一步解說如何組建一個能運行在智慧型手機上，而不再需要另行開發一套整智慧型手機應用程式的終端使用者介面。本文最終的結果能讓筆者擁有能從智慧型手機上完成所有車庫大門監控與互動作業的能力。
端點使用者應用程式
想要建立一個完整Android應用程式的想法往往會令人生畏卻步，所以在此認為或許一個簡單的網頁就足夠了。回到Particle.io官網上，其上參考頁面中列出了許多能存取Particle Cloud雲端服務的軟體開發套件(SDK)。Particle支援所有各類典型的作業系統（例如Windows、iOS及Android）。另外，筆者也注意到其中還包括Java API。或許透過獨立的Java-based網頁能輕鬆達成本文目標。透過Java，筆者可以建立一個能直接在智慧型手機上被儲存與開啟的純用戶端網頁。雖然本人並不是Java專家，但這似乎會是一個能打造出管理本人車庫大門監控系統之應急式智慧型手機App的快速捷徑。
在此將整個工作劃分為兩個部分：一為能顯示目前車庫大門監控系統狀況的「狀態」(Status)頁面；一為可用來修改配置項目的「設置」(Setting)頁面。為了啟動「狀態」頁面，我需要藉助一個HTML文件來管理整個頁面格式和一個相關Java檔案，以便與Particle Cloud API進行互動。本人計畫是在HTML程式碼中使用命名SPAN，以便之後Java程式碼能找到並更新。為了讓事情簡化，我會賦與SPAN一個能與其所顯示Particle Cloud變數相匹配的ID。該Java程式碼隨後需被定期呼叫，以便透過當前Particle Cloud變數值來進行該SPAN內容的更新。
HTML文件中需要兩個包含在內的Java。第一個Java是從JSDelivr.Net上被拉進Particle Java API函式庫中。第二個則被拉至我的JS檔案中。筆者還需要一個可連結至「設定」頁面與HTML按鍵，以便能呼叫Particle Cloud函數來「按下」車庫大門上開/關按鈕的HTML連結。請參閱程式列表1中所產生的HTML程式碼。
<可程式邏輯實作> FPGA開發板設計訣竅
在此就假設讀者有一個（幾乎）完成的原理圖，並且想知道如何最終搞定它。接下來就讓我們開始根據板子需求來制定鎖定目標吧！
PCB規格
假設這種設計不是展開原型就可能是小量量產的話，考慮到具體需求來設計PCB以確保合理的成本是有意義的。相信使用者最常被告知的兩個PCB規格就是最小「線寬/線距」(Trace/Space)（亦指銅皮之間的最小線寬與最小間距）和最小孔徑(Drill Size)。
正如筆者之前文章中提到的，我最常使用的是某海外PCB廠(3pcb.com)，儘管仍有許多值得嘗試的其他選擇。它們提供了各種線寬/線距與孔徑尺寸選項，而筆者最後選定5毫吋(mil)線寬/線距、0.2毫米(mm)孔徑。這是一個相當「標準」的技術選擇，所以在進行小量量產（即數量為100到200單位）時應當不致出問題才對。
為了讓讀者能更了解我們正在做的工作，讀者可以先將目光放到圖1上，該圖展現本人所設計與組裝之最終PCB電路板的一個範例。該板子採用賽靈思(Xilinx )Spartan-6 LX45 FPGA，並搭配支援高速USB通訊的Atmel SAM3U微控制器。
「千層派」式PCB電路板
在本範例中，筆者特別鎖定6層的PCB。雖然在某些情況下使用者可以採用4層PCB板就能應付了事，但這往往會導致我寧可避免的權衡折衷問題出現。如果使用者鎖定的是搭配DDR記憶體的更進階設計的話，那麼在此建議至少可以考慮6層板，當然8層PCB會是最可行的選擇。
筆者每層所採疊層(Stack-up)如圖2所示。這個疊層是每當進入量產階段時筆者就會採用來自加拿大安大略省當地晶圓廠(Laser-Tech Ltd.)的預設選項。雖然筆者未曾驗證這家海外晶圓廠是否真的會遵照這樣的疊層，但由於並沒有所需的可控阻抗(Controlled Impedance)，所以不太可能會對筆者「alpha」版原型造成影響。筆者根據量產中的板子來建立了第二個驗證單元，以確認實際疊層具有所需的效能。
|