LED 點矩陣

LED 點矩陣顧名思義,就是用許多 LED 燈所組成的元件,最常見到的就是在火車、公車...等大眾運輸裡常見的文字跑馬燈,在這個單位裡頭將會使用 8 × 8 的 LED 點矩陣,型號為 MAX7219,因此可以做出 8 × 8 的圖形或是文字。

範例影片展示

接線與實作

MAX7219 LED 點矩陣有五支接腳,分別是 VCC、GND、D in ( Dout )、CS ( 晶片選擇 ) 和 CLK ( 時脈 ),在這裡把 D in 接 7、CS 接 8,CLK 接 9,VCC 接 VCC ( 因電壓不夠所以不接 3.3v ),然後 GND 接 GND 的位置。

由於 Webduino 支援開發板種類只會越來越多,接線圖先使用馬克一號與 Fly 示範,對於其他開發板來說,只要 Din、CS、CLK 接數位腳 ( 數字 ),仍會一樣的效果

馬克一號接線示意圖:

馬克一號接線 LED 點矩陣

Fly 接線示意圖:

FLY 接線 LED 點矩陣

基本操作

打開 Webduino Blockly 編輯工具 ( https://blockly.webduino.io ),在畫面中放入開發板積木,填入 Device ID,在開發板內放入 LED 點矩陣的積木,din 設定 7,cs 設定 8,clk 設定 9,變數名稱設定為 matrix。

開發板的積木在「開發板控制」目錄下,LED 點矩陣積木在「發光元件 > LED 點矩陣」的目錄下。

點矩陣 Blockly

放入 matrix 顯示圖形的積木,後方連結的是點矩陣的圖案代碼,透過 16 個 16 進位代碼組成。

點矩陣顯示圖形代碼

當然這些代碼沒有人看得懂,所以我們可以透過其他的 LED 點矩陣來輔助顯示,目前總共有四種顯示圖案的積木,分別可以顯示:英文、數字、圖案與繪製圖樣

LED 點矩陣 blockly

如果要輸入英文字母 ( 有區分大小寫 ),只要把 matrix 顯示圖形後方接上英文字的積木即可。

注意,這裡容易會忘記放入咖啡色的轉換文字為代碼的積木。

LED 點矩陣積木

使用數字的積木就能顯示文字。

LED 點矩陣數字積木

使用圖案的積木就能顯示預設的圖案。

LED 點矩陣圖案積木

最後更可以透過 8x8 的點矩陣積木,自行透過勾選方式,繪製各種富含創意的圖案。

LED 點矩繪圖積木

填入裝置 Device ID,確認開發板上線,點選右上方紅色按鈕執行,就可以看到 LED 點矩陣顯示對應的文字、數字或圖案。

範例解答 ( 雲端平台 ):https://blocklypro.webduino.io/#X33WyzxPKJ

範例解答 ( 體驗版 ):https://goo.gl/6iHB4f

讓圖案動起來

能夠顯示圖案之後,接下來就要讓這些圖案動起來,動起來的方式有兩種:動畫和跑馬燈,動畫可針對不同的圖案組合顯示,跑馬燈則是針對同一組圖案產生左右移動的效果。

先看到跑馬燈的效果,將 matrix 跑馬燈的積木放到畫面中,指定移動的速度 ( 100 毫秒等於 0.1 秒 ),在「代碼」的部分,放入顯示的文字,選擇向左還是向右,填入裝置 Device ID,確認開發板上線,點選右上方紅色按鈕執行,就可以看到 LED 點矩陣將輸入的文字,以跑馬燈的方式顯示出來。

LED 點矩陣跑馬燈

而透過「顯示動畫」的表現方法,是利用「建立列表」來完成,建立列表可以指定每一格要播放的內容,切換時間則是每一格之間的切換時間 ( 100 毫秒等於 0.1 秒 ),在列表後方放入對應的英文、數字或圖案,就會按照順序依序顯現,不斷重複直到觸發停止的事件為止。

LED 點矩陣動畫

點選列表積木的「藍色小齒輪」,可以新增或刪除列表的格子。

建立列表在「基本功能 > 列表」的目錄下

變數積木

填入裝置 Device ID,確認開發板上線,點選右上方紅色按鈕執行,就可以看到 LED 點矩陣顯示跑馬燈或是動畫了。

範例解答:https://goo.gl/4z9bTh

網頁按鈕操控 LED 點矩陣

了解 LED 點矩陣的相關用法之後,就要來使用網頁的按鈕來操控點矩陣了,打開 Webduino Blockly 的網頁互動測試區,下拉選單選擇「按鈕行為」,畫面裡會出現好幾個網頁按鈕,此時在右下角也會出現對應的積木功能可以選擇。

網頁互動按鈕

將點擊各個按鈕內放入對應的 LED 點矩陣功能,例如點擊按鈕 1 就會顯示向上的箭頭,點擊按鈕 2 就會是跑馬燈,點擊按鈕 3 是動畫,點擊按鈕 4 會停止動畫,點擊按鈕 5 則會關閉 LED 點矩陣。

LED 點矩陣與網頁按鈕互動

填入裝置 Device ID,確認開發板上線,點選右上方紅色按鈕執行,透過點擊網頁上按鈕,控制 LED 點矩陣了。

範例解答 ( 雲端平台 ):https://blocklypro.webduino.io/?demo=demo-area-05#RM5jax9J83

範例解答 ( 體驗版 ):https://goo.gl/4eeOvF

相關參考