智慧家庭:顯示字幕的技術

智慧家庭的核心就是人,而人的視覺是最主要的辨識重點,所以如何讓資訊轉變成人類可以見到的資訊是一件核心的要素,也是系統最重要的開發重點。如果我們可以用創客神器來 Arduino 顯示出人類可以了解的資訊,並揭露出控制核心技術,那該有多好。

本文就是讓我們能夠瞭解 LED 點陣式顯示螢幕,從最底層的驅動方式到使用 MAX7219 驅動 IC 來控制 LED 點陣式顯示螢幕,讀者可以了解如何驅動 LED 點陣式顯示螢幕。

字幕機

坊間與市面上常常可以見到許多字幕機,以下圖所示之字幕機,相信各位讀者對於字幕機應該不陌生,大街小巷、主要幹道、高速公路、公共展館、火車站、大型看板、商家招牌等等,漸漸由傳統的畫板轉變成多彩多姿的 LED 字幕機,從單色、雙色到 RGB 全彩,應有盡有。

未命名

(圖 1)字幕機

顯示 8×8 LED 點陣顯示器

LED 點陣顯示器是 Arduino 開發板最常使用來顯示圖形、英文字、甚至中文字的顯示器,本實驗仍只需要一塊 Arduino 開發板、USB 下載線、四位數七段顯示器。如下圖所示,這個實驗我們需要用到的實驗硬體如下:

未命名1

(a)Arduino Mega 2560

未命名2

(b)USB 下載線

未命名3

(c)8×8 LED 點陣顯示器

如下圖所示,我們可以知道 LED 點陣 8×8 顯示器背面有接腳,可以見到『LED 點陣 8×8 顯示器』下方有印字的為開始的腳位,由左到右共有 PIN1~PIN8,上面由右到左共有 PIN9~PIN16,讀者要仔細觀看,切勿弄混淆了。

未命名4

(圖 3)LED 點陣 8×8 顯示器接腳圖

如上圖所示,我們可以知道接腳的腳位,但是那一個腳位是代表那一個 LED 燈,我們可以由下圖得知規納成為下列下表之 8×8 LED 點陣顯示器腳位、行列對照表,讀者可以透過此表得知如何驅動 8×8 LED 點陣顯示器。

未命名5

(圖 4)8×8 LED 點陣顯示器接腳說明

(表 1)8×8 LED 點陣顯示器腳位、行列對照表:

8×8 LED點陣顯示器
8×8 LED點陣顯示器腳位驅動列行意義
8×8 LED點陣顯示器 Pin18×8 LED點陣顯示器R5
8×8 LED點陣顯示器 Pin28×8 LED點陣顯示器R7
8×8 LED點陣顯示器 Pin38×8 LED點陣顯示器C2
8×8 LED點陣顯示器 Pin48×8 LED點陣顯示器C3
8×8 LED點陣顯示器 Pin58×8 LED點陣顯示器R8
8×8 LED點陣顯示器 Pin68×8 LED點陣顯示器C5
8×8 LED點陣顯示器 Pin78×8 LED點陣顯示器R6
8×8 LED點陣顯示器 Pin88×8 LED點陣顯示器R3
8×8 LED點陣顯示器 Pin98×8 LED點陣顯示器R1
8×8 LED點陣顯示器 Pin108×8 LED點陣顯示器C4
8×8 LED點陣顯示器 Pin118×8 LED點陣顯示器C6
8×8 LED點陣顯示器 Pin128×8 LED點陣顯示器R4
8×8 LED點陣顯示器 Pin138×8 LED點陣顯示器C1
8×8 LED點陣顯示器 Pin148×8 LED點陣顯示器R2
8×8 LED點陣顯示器 Pin158×8 LED點陣顯示器C7
8×8 LED點陣顯示器 Pin168×8 LED點陣顯示器C8
未命名5

我們遵照前面所述,將 Arduino 開發板的驅動程式安裝好之後,作者參考上表與上圖了解之後,轉成下表之 8×8 LED 點陣顯示器接腳表,本實驗使用共型 8×8 LED 點陣顯示器接腳表,所以作者參考下表完成電路的連接,完成後如下圖所示之 8×8 LED 點陣顯示器實際組裝圖。

(表 2)8×8 LED 點陣顯示器接腳表:

8×8 Led點陣顯示器Arduino 開發板接腳解說
8×8 Led點陣顯示器 Pin1Arduino Pin 228×8 Led點陣顯示器R5
8×8 Led點陣顯示器 Pin2Arduino Pin 248×8 Led點陣顯示器R7
8×8 Led點陣顯示器 Pin3Arduino Pin 268×8 Led點陣顯示器C2
8×8 Led點陣顯示器 Pin4Arduino Pin 288×8 Led點陣顯示器C3
8×8 Led點陣顯示器 Pin5Arduino Pin 308×8 Led點陣顯示器R8
8×8 Led點陣顯示器 Pin6Arduino Pin 328×8 Led點陣顯示器C5
8×8 Led點陣顯示器 Pin7Arduino Pin 348×8 Led點陣顯示器R6
8×8 Led點陣顯示器 Pin8Arduino Pin 368×8 Led點陣顯示器R3
8×8 Led點陣顯示器 Pin9Arduino Pin 388×8 Led點陣顯示器R1
8×8 Led點陣顯示器 Pin10Arduino Pin 408×8 Led點陣顯示器C4
8×8 Led點陣顯示器 Pin11Arduino Pin 428×8 Led點陣顯示器C6
8×8 Led點陣顯示器 Pin12Arduino Pin 448×8 Led點陣顯示器R4
8×8 Led點陣顯示器 Pin13Arduino Pin 468×8 Led點陣顯示器C1
8×8 Led點陣顯示器 Pin14Arduino Pin 488×8 Led點陣顯示器R2
8×8 Led點陣顯示器 Pin15Arduino Pin 508×8 Led點陣顯示器C7
8×8 Led點陣顯示器 Pin16Arduino Pin 528×8 Led點陣顯示器C8
未命名5

未命名6

(圖 5)8×8 LED 點陣顯示器實際組裝圖

我們遵照前幾章所述,將 Arduino 開發板的驅動程式安裝好之後,我們打開 Arduino 開發板的開發工具:Sketch IDE 整合開發軟體,攥寫一段程式,如下表所示之 8×8 LED 點陣顯示器測試程式一,可以看到 8×8 LED 點陣顯示器一列一列亮起來。

(表 3)8×8 LED 點陣顯示器測試程式一:

Led點陣顯示器測試程式一(ledmatrix_LineUp)
 

 

#define turnon HIGH

#define turnoff LOW

 

 

byte rows[8] = {9, 14, 8, 12, 1, 7, 2, 5};

byte cols[8] = {13, 3, 4, 10, 6, 11, 15, 16};

//byte Pins[16] = {5, 4, 3, 2, 14, 15, 16, 17, 13, 12, 11, 10, 9, 8, 7, 6};

byte Pins[16] ={22,24, 26, 28, 30, 32,34,36,38,40,42,44,46,48,50,52};

byte screen[8] = {0, 0, 0, 0, 0, 0, 0, 0};

 

void setup() {

for (int i = 0; i <= 15; i++)

{

PinMode(Pins[i], OUTPUT);

digitalWrite(Pins[i],turnoff);

}

delay(1000);

 

for (int i = 0; i <= 7; i++)

{

digitalWrite(Pins[rows[i]-1],turnon);

delay(1000);

}

 

 

//for (i=1;i<=8, i++)

}

 

 

void loop() {

// digitalWrite(4,HIGH);

}

原始碼下載:https://github.com/brucetsao/makerdiwo/tree/master/201601

讀者也可以在作者 YouTube 頻道中,看到本次實驗 LED 點陣顯示器測試程式一結果畫面,如圖 6 所示,以看到 8×8 LED 點陣顯示器一列一列亮起來。

未命名7

(圖 6)LED 點陣顯示器測試程式一結果畫面

滑動顯示 8×8 LED 點陣顯示器

我們遵照前面所述,已將 8×8 LED 點陣顯示器顯示出來,但是只是點亮 8×8 LED 點陣顯示器,如果我們要顯示圖形或文字,由於『8×8 LED 點陣顯示器』需要許多時間顯示,在顯示 8×8 LED 點陣顯示器期間又不可以中斷,這樣會讓圖形不見或停窒,這是因為『8×8 LED 點陣顯示器』的內容是透過每一點點亮,熄滅,掃描每一點之後換列,在往下一列開始,如下圖所示,所以必須一點一點的點亮,由於人類視覺暫留的原理,人類的眼睛與頭腦會自動將之合成一幅完整的畫面。

未命名8

(圖 7)LED 點陣顯示掃描方式。資料來源:亞洲大學資工系 陳瑞奇(Rikki Chen, CSIE, Asia Univ.)( http://dns2.asia.edu.tw/~rikki/mps103/mcs-ch12.pdf)

由圖 9 之 LED 點陣顯示器掃描電路,由於 8 x 8 點的 LED 點陣顯示器,共有 8*8 點,必須將之分成八列八行,將 8 個行接點(C1~C8)與 8 個列接點(R1~R8),規劃成 8 條資料線與 8 條掃描線。每次資料線送出 1 行編碼資料(1 Bytes),使用掃描線,選擇其中一行輸出,經短暫時間,送出下一行編碼資料,8 行輪流顯示,利用眼睛視覺暫留效應,看到整個編碼圖形的顯示。

如果我們要顯示一個『u』字元在 LED 點陣顯示器上,如表 4 所示,我們必須先將『u』字元的外形進行編碼,用 8 bit *8 列來進行編碼。

(表 4)顯示 u 編碼表:

未命名9

然後再將表 4 所示之 8 bits *8,如圖 8 所示,一列一點的顯示出來。

未命名10

(圖 8)顯示 u 之掃描方法

如此一來,Arduino 開發板就必須不中斷的顯示這些 LED 點陣顯示器的所有點,這樣 Arduino 開發板跟本就無力去做別的事,所以我們引入了 Timer 的方法,來重新改寫這個程式。

未命名11

(圖 9)LED 點陣顯示掃描電路。資料來源:亞洲大學資工系 陳瑞奇(Rikki Chen, CSIE, Asia Univ.)( http://dns2.asia.edu.tw/~rikki/mps103/mcs-ch12.pdf)

在 Arduino 開發板的驅動程式安裝好之後,我們打開 Arduino 開發板的開發工具:Sketch IDE 整合開發軟體,攥寫一段程式,如下表所示之滑動顯示 8×8 LED 點陣顯示器測試程式,可以看到 8×8 LED 點陣顯示器滑動顯示『HELLO』。

(表 5)滑動顯示 8×8 LED 點陣顯示器測試程式:

滑動顯示8×8 Led點陣顯示器測試程式(ledmatrix_HELLO)
#include <FrequencyTimer2.h>

 

#define turnon HIGH

#define turnoff LOW

 

 

#define SPACE {

{0, 0, 0, 0, 0, 0, 0, 0},

{0, 0, 0, 0, 0, 0, 0, 0},

{0, 0, 0, 0, 0, 0, 0, 0},

{0, 0, 0, 0, 0, 0, 0, 0},

{0, 0, 0, 0, 0, 0, 0, 0},

{0, 0, 0, 0, 0, 0, 0, 0},

{0, 0, 0, 0, 0, 0, 0, 0},

{0, 0, 0, 0, 0, 0, 0, 0}

}

 

#define H {

{0, 1, 0, 0, 0, 0, 1, 0},

{0, 1, 0, 0, 0, 0, 1, 0},

{0, 1, 0, 0, 0, 0, 1, 0},

{0, 1, 1, 1, 1, 1, 1, 0},

{0, 1, 0, 0, 0, 0, 1, 0},

{0, 1, 0, 0, 0, 0, 1, 0},

{0, 1, 0, 0, 0, 0, 1, 0},

{0, 1, 0, 0, 0, 0, 1, 0}

}

 

#define E  {

{0, 1, 1, 1, 1, 1, 1, 0},

{0, 1, 0, 0, 0, 0, 0, 0},

{0, 1, 0, 0, 0, 0, 0, 0},

{0, 1, 1, 1, 1, 1, 1, 0},

{0, 1, 0, 0, 0, 0, 0, 0},

{0, 1, 0, 0, 0, 0, 0, 0},

{0, 1, 0, 0, 0, 0, 0, 0},

{0, 1, 1, 1, 1, 1, 1, 0}

}

 

#define L {

{0, 1, 0, 0, 0, 0, 0, 0},

{0, 1, 0, 0, 0, 0, 0, 0},

{0, 1, 0, 0, 0, 0, 0, 0},

{0, 1, 0, 0, 0, 0, 0, 0},

{0, 1, 0, 0, 0, 0, 0, 0},

{0, 1, 0, 0, 0, 0, 0, 0},

{0, 1, 0, 0, 0, 0, 0, 0},

{0, 1, 1, 1, 1, 1, 1, 0}

}

 

#define O {

{0, 0, 0, 1, 1, 0, 0, 0},

{0, 0, 1, 0, 0, 1, 0, 0},

{0, 1, 0, 0, 0, 0, 1, 0},

{0, 1, 0, 0, 0, 0, 1, 0},

{0, 1, 0, 0, 0, 0, 1, 0},

{0, 1, 0, 0, 0, 0, 1, 0},

{0, 0, 1, 0, 0, 1, 0, 0},

{0, 0, 0, 1, 1, 0, 0, 0}

}

 

byte col = 0;

byte leds[8][8];

 

// Pin[xx] on led matrix connected to nn on Arduino (-1 is dummy to make array start at pos 1)

int Pins[17]= {-1,22,24, 26, 28, 30, 32,34,36,38,40,42,44,46,48,50,52};

 

// col[xx] of leds = Pin yy on led matrix

int cols[8] = {Pins[13], Pins[3], Pins[4], Pins[10], Pins[06], Pins[11], Pins[15], Pins[16]};

 

// row[xx] of leds = Pin yy on led matrix

int rows[8] = {Pins[9], Pins[14], Pins[8], Pins[12], Pins[1], Pins[7], Pins[2], Pins[5]};

 

const int numPatterns = 6;

byte patterns[numPatterns][8][8] = {

H,E,L,L,O,SPACE

};

 

int pattern = 0;

 

void setup() {

// sets the Pins as output

for (int i = 1; i <= 16; i++) {

PinMode(Pins[i], OUTPUT);

}

 

// set up cols and rows

for (int i = 1; i <= 8; i++) {

digitalWrite(cols[i – 1], turnoff);

}

 

for (int i = 1; i <= 8; i++) {

digitalWrite(rows[i – 1], turnoff);

}

 

clearLeds();

 

// Turn off toggling of Pin 11

FrequencyTimer2::disable();

// Set refresh rate (interrupt timeout period)

FrequencyTimer2::setPeriod(2000);

// Set interrupt routine to be called

FrequencyTimer2::setOnOverflow(display);

 

setPattern(pattern);

}

 

void loop() {

pattern = ++pattern % numPatterns;

slidePattern(pattern, 60);

}

 

void clearLeds() {

// Clear display array

for (int i = 0; i < 8; i++) {

for (int j = 0; j < 8; j++) {

leds[i][j] = 0;

}

}

}

 

void setPattern(int pattern) {

for (int i = 0; i < 8; i++) {

for (int j = 0; j < 8; j++) {

leds[i][j] = patterns[pattern][i][j];

}

}

}

 

void slidePattern(int pattern, int del) {

for (int l = 0; l < 8; l++) {

for (int i = 0; i < 7; i++) {

for (int j = 0; j < 8; j++) {

leds[j][i] = leds[j][i+1];

}

}

for (int j = 0; j < 8; j++) {

leds[j][7] = patterns[pattern][j][0 + l];

}

delay(del);

}

}

 

// Interrupt routine

void display() {

digitalWrite(cols[col], HIGH);  // Turn whole previous column off

col++;

if (col == 8) {

col = 0;

}

for (int row = 0; row < 8; row++) {

if (leds[col][7 – row] == 1) {

digitalWrite(rows[row], turnon);  // Turn on this led

}

else {

digitalWrite(rows[row], turnoff); // Turn off this led

}

}

digitalWrite(cols[col], turnoff); // Turn whole column on at once (for equal lighting times)

}

原始碼下載:https://github.com/brucetsao/makerdiwo/tree/master/201601

讀者也可以在作者 YouTube 頻道,看到本次實驗滑動顯示 8×8 LED 點陣顯示器測試程式結果畫面,如圖 6 所示,可以看到 8×8 LED 點陣顯示器滑動顯示『HELLO』。

未命名12

(圖 10)滑動顯示 8×8 LED 點陣顯示器結果畫面

本文主要介紹之 Arduino 開發板使用 8×8 LED 點陣顯示器,來實現顯示圖形與文字,透過本文的解說,相信讀者會對連接、使用 8×8 LED 點陣顯示器有更深入的了解與體認,後續筆者還會繼續發表智慧家庭相關的文章,讓我們在未來可以創造出更優質、智慧化的家庭。

參考文獻:

  • 曹永忠, 许智诚, & 蔡英德. (2014). Arduino 互动字幕机设计: Using Arduino to Control a Color Led Display with An Android Apps. 台湾、彰化: 渥瑪數位有限公司.
  • 曹永忠, 許智誠, & 蔡英德. (2014). Arduino 互動字幕機設計: The Interaction Design of a Led Display by Arduino Technology (初版 ed.). 台灣、彰化: 渥瑪數位有限公司.
  • 曹永忠, 許碩芳, 許智誠, & 蔡英德. (2015a). Arduino程式教學(RFID模組篇):Arduino Programming (RFID Sensors Kit) (初版 ed.). 台湾、彰化: 渥瑪數位有限公司.
  • 曹永忠, 許碩芳, 許智誠, & 蔡英德. (2015b). Arduino編程教学(RFID模块篇):Arduino Programming (RFID Sensors Kit) (初版 ed.). 台湾、彰化: 渥瑪數位有限公司.

分享到社群

曹永忠

曹永忠 (Yung-Chung Tsao) ,目前為自由作家暨專業Maker,專研於軟體工程、軟體開發與設計、物件導向程式設計,商品攝影及人像攝影。長期投入創客運動、資訊系統設計與開發、企業應用系統開發、軟體工程、新產品開發管理、商品及人像攝影等領域,並持續發表作品及相關專業著作。 Email:prgbruce@gmail.com Line ID:dr.brucetsao 作者網站:https://www.cs.pu.edu.tw/~yctsao/ 臉書社群(Arduino.Taiwan):https://www.facebook.com/groups/Arduino.Taiwan/ Github網站:https://github.com/brucetsao/ Youtube:https://www.youtube.com/channel/UCcYG2yY_u0m1aotcA4hrRgQ