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 設定介面就可以進行操作:

寫個 OpenWrt Init Scripts

在看過 OpenWrt: Init Scripts 這篇後，我發現 OpenWrt Init Scripts 很簡單。舉個例子，寫個 /etc/init.d/fblikes 如下:

註：fblikes 是我昨天貼的 Facebook 「讚」電子顯示器，我事先已經把 fblikes 存到 /usr/bin/fblikes

建立 /etc/init.d/fblikes 後，執行 "/etc/init.d/fblikes enable"，就會在 /etc/rc.d 裏產生一個 symbolic link。START=10 代表會建立 /etc/rc.d/S10fblikes，10 是指 S10fblikes 的執行順序，在系統開機時數字愈小的 script 會優先執行，OS 會呼叫 script 的 start()。 而 STOP=15 是 optional 的，它會建立 /etc/rc.d/K15fblikes，一樣，15 是指 K15fblikes 的執行順序，在系統關機時數字愈小的 script 會優先執行，OS 會呼叫 script 的 stop()。

OpenWrt 每支 Init Script 都有下列指令可以使用：

/etc/init.d/example
/etc/init.d/example enable
/etc/init.d/example boot
/etc/init.d/example start
/etc/init.d/example restart
/etc/init.d/example stop
/etc/init.d/example disable

簡單地說，如果你想啟動 fblikes，只管輸入以下指令:

    $ /etc/init.d/fblikes start

如果你要停止 fblikes，只管輸入以下指令:

    $ /etc/init.d/fblikes stop

如果要想讓 fblikes 在開機時自動執行，就輸入以下指令：

    $ /etc/init.d/fblikes enable

反之，不想讓 fblikes 在開機時自動執行，那就用 disable 指令把它取消：

    $ /etc/init.d/fblikes disable

disable 指令會把 /etc/rc.d/S10fblikes 和 /etc/rc.d/K15fblikes 兩個 symbolic links 移除掉。

參考資料:

• OpenWRT: Init Scripts

Facebook 「讚」電子顯示器

有自己的粉絲專頁還不夠酷，Facebook 粉絲專頁上都有個「讚」計數器，如果可以把它搬到實體的電子顯示器上，那才叫酷！

江湖一點訣，說穿不值一文錢。要取得 Facebook 頁面「讚」次數，其實很簡單，只要在網址列上輸入：http://api.facebook.com/restserver.php?method=links.getStats&urls=，然後加上想要看的 Facebook 頁面，就會得到一個像底下這樣的 XML 格式的回應，比如 https://www.facebook.com/cutespring 這個粉絲專頁：

其中 total_count 就是「讚」的次數了。(PS: 按 Facebook 這裏的說明，totaol_count 是 like_count + comment_count + share_count 的總合，按道理來說，「讚」次數應該是 like_count 才對，不過咱們不是 Facebook 工程師，沒必要那麼深入)。

知道怎麼取得 Facebook 「讚」的數目後，接下來是把它搬電子顯示器上。

其實在 Maker Faire Taipei 2013 的工作坊上，Ben6 就用 OpenWrt + Arduino + TM1638 LED Display 搭配 Bash Shell Script 示範過了。因為想練習 Lua，所以底下我便用 Lua 重新改寫了程式。簡單說明一下步驟：

1. 首先，連接 Arduino 與 TM1638 (本例將 DIO, CLKC, STB1 分別接到 Arduino 的 8, 7, 6 接腳)

2. 到 https://code.google.com/p/tm1638-library/ 下載並安裝 tm1638 library

3. 上傳底下的程式到 Arduino:

程式說明：

• 使用 TM1638 module(8, 7, 6) 定義 TM1638 物件，DIO 接在 pin 8, CLK 接在 pin 7, STB1 接在 pin 6
• 使用 module.setDisplayToDecNumber(1, 0, false) 讓 LED Display 一開始顯示數字 1，第二和第三個參數的意思是不要顯示小數點也不要 Leading Zero。
• 在 Loop() 函式中，不斷讀取輸入的數值，小數點 '.' 字元代表封包結束，所以遇到小數點時便把收到的「讚」數目搬到 TM1638 顯示器上

4. 把底下的 Lua script 存檔為 fblikes.lua，傳到 OpenWrt 上並改為可執行:

完成後，啟動 fblikes.lua 程式。過幾秒鐘後...

耶！大功告成！

參考資料

• OSSLab: 利用 OpenWRT, Arduino 和 TM1638 製作 Facebook 按讚次數的顯示器
• 英倍達國際: 本篇能有多少個讚?
• TM1638 LED Display

TM1638 LED Display

TM1638 是一款 8 位數的 7 段顯示器，板子上有 8 顆雙色 LED (紅和綠)，以及 8 顆按鈕。依 7 段顯示器的顏色來區別，TM1638 分成紅色和綠色兩種款式。TM1638 還可以串聯 (daisy-chained)，最多可以串 6 組。TM1638 是大陸深圳天微這家公司做的。

這是 TM1638 的正面照:

如果有需要，可以用 cable 把 TM1638 串聯起來，最多可同時串 6 組 (賣家通常會提供 cable):

TM1638 的腳位圖印在板子背面:

TM1638 的接線很簡單。如果只有一組 TM1638，只需要 5 根跳線就可以跟 Arduino 連接起來，分別是 VCC 與 GND 兩支電源接線，另外再用 Arduino 三支 GPIO 接腳接到 DIO, CLK 和 STB1 就可以了。

實測

1. 首先，連接 Arduino 與 TM1638 (本例將 DIO, CLKC, STB1 分別接到 Arduino 的 8, 7, 6 接腳)

2. 到 https://code.google.com/p/tm1638-library/ 下載並安裝 tm1638 library

3. 點按 Sketchbook > libraries > TM1638 > tm1638_one_module_example 打開 TM1638 library 提供的範例程式。完整程式碼如下:

程式說明:

• 使用 TM1638 module(8, 7, 6) 定義 TM1638 物件，DIO 接在 pin 8, CLK 接在 pin 7, STB1 接在 pin 6
• 使用 module.setDisplayToHexNumber() 顯示16 進位數字，第二個參數可設定打開七段顯示器的小數點
• 要顯示 10 進位數字的話，把 module.setDisplayToHexNumber() 這行換掉，改成呼叫 module.setDisplayToDecNumber() 就行了

上傳程式到 Arduino 後…

耶，成功囉！

參考資料

• OSSLab: 利用 OpenWRT, Arduino 和 TM1638 製作 Facebook 按讚次數的顯示器

Arduino Ethernet Shield 簡介

Arduino Ethernet Shield 可以讓 Arduino 控制板連到 LAN 或 Internet。

這塊板子用的 Ethernet 晶片是 WIZnet 5100:

▲ Ethernet Shield 正面照

▲ Ethernet Shield 背面照 (標籤上印的是 Ethernet MAC Address)

WIZnet 5100 主要特色:

- Support Hardwired TCP/IP Protocols TCP, UDP, ICMP, IPv4 ARP, IGMP, PPPoE, Ethernet
- 10BaseT/100BaseTX Ethernet PHY embedded
- Support Auto Negotiation (Full-duplex and half duplex)
- Support Auto MDI/MDIX
- Support ADSL connection (with support PPPoE Protocol with PAP/CHAP Authentication mode)
- Supports 4 independent sockets simultaneously
- Not support IP Fragmentation
- Internal 16Kbytes Memory for Tx/Rx Buffers
- 0.18 µm CMOS technology
- 3.3V operation with 5V I/O signal tolerance
- Small 80 Pin LQFP Package
- Lead-Free Package
- Support Serial Peripheral Interface(SPI MODE 0, 3)
- Multi-function LED outputs (TX, RX, Full/Half duplex, Collision, Link, Speed)

(資料來源: WIZnet W5100 Product page)

下圖是 W5100 的 Block Diagram:

W5100 主要特色是把 TCP/IP Protocols (TCP, UDP, ICMP, IPv4 ARP, IGMP, PPPoE, Ethernet) 做在硬體電路上，減輕了 MCU 的負擔 (也就是 Arduino 的負擔)。不過 W5100 也不是沒有缺點，因為它有一個限制，就是最多只允許同時 4 個 socket 連線。Arduino 程式只要使用 Ethernet Library 便可以輕易完成連至 internet 的動作。

Arduino Ethernet Shield 使用加長型的 Pin header (如下圖一)，可以直接插到 Arduino 控制板上 (如下圖二)，而且原封不動地保留了 Arduino 控制板的 Pin Layout，讓使用者可以在它上面疊其它的擴充板。

比較新的 Ethernet Shield 增加了 micro-SD card 插槽，可以用來儲存檔案，你可以用 Arduino 內建的 SD library 來存取板子上的 SD card。(註:雖然 microSD 一張只要幾百塊台幣，不過現在全球經濟不景氣，而且當紅的雲端服務喊得震天價聲，網路上有一堆免費的 Cloud Storage 可用，我懷疑有多少人會願意再花錢去買 microSD :D )。

Ethernet Shield 相容於 UNO 和 Mega 2560 控制板。

Arduino 控制板跟 W5100 以及 SD card 之間的通訊都是透過 SPI bus (通過 ICSP header)。以 UNO 而言，SPI bus 腳位位於 pins 11, 12 和 13，而 Mega 2560 則是 pins 50, 51 和 52。UNO 和 Mega 2560 都一樣，pin 10 是用來選擇 W5100，而 pin 4 則是用來選擇 SD card。這邊提到的這幾支腳位都不能拿來當 GPIO 使用。

另外，在 Mega 2560 上，pin 53 是 hardware SS pin，這支腳位也必須保持為 output，不然 SPI bus 就不能動作。

在使用的時候要注意一件事，因為 W5100 和 SD card 共享 SPI bus，所以在同一個時間只能使用其中一個設備。如果你程式裏會用到 W5100 和 SD card 兩種設備，那在使用對應的 library 時就要特別留意，要避免搶 SPI bus 資源的情形。

假如你確定不會用到其中一個設備的話，你可以在程式裏明白地指示 Arduino，方法是: 如果不會用到 SD card，那就把 pin 4 設置成 output 並把狀態改為 high，如果不會用到 W5100，那麼便把 pin 10 設置成 output 並把狀態改為 high。

Ethernet Shield 上有幾顆狀態指示燈 (LEDs):

• PWR: 表示 Arduino 控制板和 Ethernet Shield 已經上電
• LINK: 網路指示燈，當燈號閃爍時代表正在傳送或接收資料
• FULLD: 代表網路連線是全雙工
• 100M: 表示網路是 100 MB/s (相對於 10 Mb/s)
• RX: 接收資料時閃爍
• TX: 傳送資料時閃爍
• COLL: 閃爍時代表網路上發生封包碰撞的情形 (network collisions are detected)

參考資料

• Arduino Ethernet Shield
• Arduino Ehternet Shield Getting Started
• Ethernet Library
• WIZnet W5100 Product page
• 藝科 Arduino Ethernet Shield R3

TL-WR703N 刷機成 OpenWrt

TL-WR703N 刷 OpenWrt 的步驟如下：

1. 用 Ethernet cable 直接把 TL-WR703N 接到 PC，PC 端要設定 192.168.1.x 網段的固定 IP (不能用 192.168.1.1，不然會跟 TL-WR703N 衝到)，例如 192.168.1.2，subnet mask: 255.255.255.0

2. 連到 http://192.168.1.1/ 登入 TL-WR703N 的管理介面，以使用者名稱 admin 和密碼 admin 登入

3. 在左手邊的選單找出軟件升級頁面，或是直接連到 http://192.168.1.1/userRpm/SoftwareUpgradeRpm.htm，升級介面如下:

4. 下載最新版 OpenWrt snapshot 並上傳到 TL-WR703N

5. 等大概 3 到 4 分鐘，直到藍色 LED 不再閃爍時，升級程序便完成了

刷機後，可以 telnet 192.168.1.1 登入 TL-WR703N (不用輸入密碼)，應該會看到 OpenWrt prompt:

下個 cat /proc/cpuinfo 指令看看 TL-WR703N 的 CPU 資訊:

啟動 SSH / 關閉 telnet

telnet 到 TL-WR703N 後下 passwd 指令設定密碼，設定完成後，便可以與 TL-WR703N 建立 SSH 連線，OpenWrt 會自動關閉 telnet 功能。

參考資料

• TP-LINK TL-WR703N
• OpenWrt Wiki: TP-LINK TL-WR703N
• http://wiki.openwrt.org/doc/howto/luci.essentials