最近我在開發新的 webStick v4 firmware。WebStick v4 本質上跟 v3 在硬體上沒甚麼差別，最大的差別大概就是在 firmware 上加入了一個比較正規的 Post 及 Page 管理系統。 WebStick v3 與 Blog Post 在 WebStick v3 的設計下，Blog 系統是一個非常簡單的頁面，甚至沒有它自己的編輯器，當要編輯部落格文章時，那個「編輯」按鈕只會打開內置的 Markdown Editor 讓使用者自己編輯然後儲存到檔案而已。 這樣的做法好處大概就是開發時間很短而且不用佔用額外的儲存空間，但是問題是使用者體驗實在太差了。所以在 v4 的時候我就來把這個 blog 系統改良了一下。 WebStick v4 WebStick v4 沿用了不少 v3 的部分，但是在對外 UI 大改的情況下，給人的感覺確實有點不同。我們先從 homepage 開始看起 WebStick v4 Homepage homepage 的部分改用了 Tocas UI 風格設計，而且所有 icon 與 title 都是動態載入。這個在 PostEngine Pro 的部分會講到，但是大概就是現在如果要更改 homepage 上的聯系資料的話，使用者不再需要編輯 html，而是改一下設定檔就可以了。 WebStick 的關於頁面也有改良。這個頁面大概算是一個 static html template 的範例吧？使用者可以自行更改並加入其他內容，而在出廠時這個頁面就是用來介紹 WebStick 本身的技術資料。 當然，v4 也有 v3 的部落格系統。新版本的部落格系統支援放置 Video / Audio element 以外，也提供直接從 /site/img/ 載入截圖。這個也是 WebStick PostEngine Pro 帶來的新功能：支援直接 Ctrl + V 貼上截圖並置入到文章中。 最後就是 QR Code generator。一個滿好用的小東西 （特別是需要從 電腦分享資料到手機的時候） WebStick v4 管理員介面 WebStick v4 的登入介面也使用 Tocas UI 重寫，加入了 Minimalist 的設計。 而 WebStick v4 的 admin panel 變代實際上並沒有很多，最多的變化大概就是加入了非同步載入：在你打開頁面的時候 iframe 內容才會動態載入。這樣對於 ESP8266 的 async TCP server 來說負擔比較低，體感上載入速度提升了不少。 WebStick PostEngine Pro WebStick PostEngine Pro v4 最多的功能變動大概就是把 blog engine 砍掉換成了 PostEngine Pro。這個 PostEngine 具有很多帖文和頁面的建立、編輯和刪除功能。 PostEngine Pro 編輯帖文功能 由於 PostEngine Pro 加入了 Ctrl + V 時自動在前端壓縮、上傳和插入照片 URL 到帖文的關系，所以在 v4 的 PostEngine 也加入了 Library 功能以管理在寫文章時上傳的照片。 另一個我很喜歡 PostEngine Pro 的原因是，它現在可以直接選擇 WebStick 上的檔案進行嵌入。只要選一下功能表單上的資料夾按鈕，一個 File selector 便會彈出來。 WebStick PostEngine Pro 檔案選擇器 這個選擇器除了照片以外，連音訊跟影片檔案也可以選擇，不過只限於 web safe 的格式就是了。 檔案選擇器，可以選擇嵌入 WeBStick 上的影片到帖文 嵌入的影片（webm） Image Library 當然，這個功能也不只是能在編輯器內使用。如果你想在編輯器外上傳照片到 WebStick 上，也可以透過…