2013年9月7日 星期六

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

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

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

Line Chart

image
Bar Chart
image
Radar Chart
image
Pie Chart
image
Polar Area Chart
image
Doughnut Chart
image
快速上手

你可以到 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:

image

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

如何動態增加資料點?

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

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

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

image

關閉 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):

image

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

image

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

參考資料

2013年9月3日 星期二

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):

2013-09-03_16h28_42

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

2013-09-03 16.28.36

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

2013-09-03_16h39_22

寫個 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 移除掉。

參考資料:

2013年9月2日 星期一

Facebook 「讚」電子顯示器

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

image

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

image

其中 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 程式。過幾秒鐘後...

image

耶!大功告成!

參考資料

TM1638 LED Display

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

這是 TM1638 的正面照:

image

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

image

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

image

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 後…

image

耶,成功囉!

參考資料

Arduino Ethernet Shield 簡介

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

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

2012-07-12_22h03_59
▲ Ethernet Shield 正面照

2012-07-12_22h04_30
▲ 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:

image

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,讓使用者可以在它上面疊其它的擴充板。

2012-07-12_22h03_25

2012-07-12_23h33_21

比較新的 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 就不能動作。

image

image

在使用的時候要注意一件事,因為 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)

ArduinoEthernetShield

參考資料

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,升級介面如下:

image

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

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

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

image

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

2012-06-28_21h52_19

啟動 SSH / 關閉 telnet

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

參考資料