Chart.js: 一個簡單的 JS Chart Library

Chart.js 是一個 Open Source 的 JavaScript Chart Library。它一共有 6 種 Chart，全都是 HTML5 based。

底下是 Chart.js 所提供的 6 種 Charts:

Line Chart	Bar Chart
Radar Chart	Pie Chart
Polar Area Chart	Doughnut Chart

快速上手

你可以到 github 下載 Chart.js: https://github.com/nnnick/Chart.js。Chart.js 只需要一個 .js 檔，你可以選擇一般版的 Chart.js，也可以選擇瘦身版的 Chart.min.js。

從 github 下載後，在 samples 資料夾就有 6 種 Chart 的範例。比如打開 samples/line.html 後，瀏覽器馬上就會畫出這樣一張 Line Chart:

line.html 的內容如下 (JavaScript 部份):

如何動態增加資料點？

Chart.js 沒有提供動態增加資料點的方法，這實在有點可惜。不過，我花了點時間研究了一下，發現還是有解。我的方法是這樣：在修改 datasets 的內容後，就再呼叫 new Chart() 重新產生 Chart。程式碼範例如下：

有一點要特別注意，因為 Chart.js 在畫圖時會有動畫，所以必須把 animation 設成 flase 把動畫關掉。

然後就可以動態增加資料點囉：

關閉 Arduino UNO 的 auto reset

在某些特殊情況下，你可能需要把 Arduino 的 auto reset 功能關掉。舉個例子，假設 Arduino 正在跑這段讓 LED 恆亮的 code:

假如這時用 echo 指令傳資料給 Arduino:

    $ echo "Hello" > /dev/ttyACM0

你會發現 Arduino 的 LED 會突然閃爍幾下，然後又恢復恆亮。這是因為在開啟 serial port 時會觸發 Arduino 的 auto reset，Arduino 重新開機了，所以 LED 才會閃爍幾下 (開機時 bootloader 叫它閃爍的)。

要關閉 Arduino 的 auto reset，方法很簡單。以 UNO 而言，只要在 RESET 跟 GND 針腳之間放個 10uF 的電容就好 (短腳要接 GND):

其它板子我沒試過。不過，如果接電容的方法無效，據網路上的資料，可以在 5V 跟 RESET 針腳間放個 120 ohm 的電阻 (120 ohm 電阻還真不好找，可能要組合一下才行)。

至於 Leonardo 的話就不需要了，因為 Leonardo 的硬體線路跟 UNO 不一樣，不會在 serial port 連線時 reset，所以應該沒這方面的困擾 (補充: 當以1200 鮑率開個 serial port 時，Leonardo 就會重置)。

參考資料

• DisablingAutoResetOnSerialConnection
• 葉難: Leonardo與Uno的差異比較

Facebook 「讚」電子顯示器」Again

我把昨天製作的 Facebook 「讚」電子顯示器 (簡稱 fblikes) 做了一些調整，現在 fblikes 比較好安裝，有一個 LuCI 設定介面，而且也可以安排到 OpenWRT 開機時自動執行了。fblikes 現在放在 github 上，repo 路徑是:

https://github.com/coopermaa/fblikes

安裝方法在 github 上可以找到。不過，底下還是稍微說明一下:

1. 所需器材: 可跑 OpenWrt 的無線路由器 (我用 TL-WR703N。FWR171-3G 也是可以的)、Arduino，以及 TM1638 LED Display。

2. 連接 Arduino 與 TM1638，上傳 arduino 資料夾裏的 fblikesDemo sketch 到 Arduino 板子上

3. 連接 Arduino 與 OpenWrt。

4. 上傳 install.sh 與 files 整個資料夾到 OpenWrt，輸入以下指令:

    $ chmod +x install.sh
    $ ./install.sh

這個動作會把 fblikes 相關檔案 (Init Script, configuration file, LuCI module, Lua Script 等) 裝到預設的目地的。

接著，先確定 OpenWrt 可以連上 Internet，然後輸入以下指令啟動 fblikes:

    $ /etc/init.d/fblikes start

如果你希望 fblikes 在 Linux 開機時便自動執行，那麼就輸入以下指令:

    $ /etc/init.d/fblikes enable

底下是一個範例。這是 Fablab Taipei 的粉絲頁 (https://www.facebook.com/FablabTPE):

這是 Fablab Taipei 的 Facebook 「讚」電子顯示器 (器材是 Arduino + TM1638 LED Display):

如果你想修改 fblikes 的參數，比如 Facebook 粉絲專頁的 URL (Facebook URL)，多久更新一次電子顯示器 (Refresh Interval) 等，只要瀏覽 http://<IP of OpenWrt>/cgi-bin/luci/fblikes 連入 LuCI 設定介面就可以進行操作: