想學會寫程式嗎? 請參考 "如何成為程式設計師？"
這篇是寫給從事或學習電子科技的人參考用的.
裡面主要介紹如何在螢幕模组上印字/改變字體/改變顏色/畫點/畫線...等.
較為學術類的內容.可能會有些枯燥乏味,有興趣的在往下看吧.^_^|||
本篇所採用的螢幕,與我的另二兩篇章
裡面用的螢幕皆為同一個.
讓各位在學習完螢幕的用法後,可以順便看看應用的方式.
這篇算是第一篇專門寫給從事或學習電子科技的人看的,所以我會盡量地寫的比較底層.
就從...硬體開始吧!
硬體
準備材料
1. Arduino Mega2560
2. FTF螢幕 (在 Arduino 程式庫 (Library) 這篇文章裡面有較詳細關於此螢幕的資訊)
arduino的螢幕眾多,注意不要買錯.若真的買錯了,也別生氣,因為螢幕的用法大同小異,參考我的寫的內容.
控制起其他不同種類的螢幕也可以比較容易上手.
硬體就這樣,然後將他們插在一起.結束.
就這麼簡單嗎?對,就這麼簡單!
這也是我喜歡用Arduino模組的關係,盡量去簡單化硬體,這樣學習起軟體,也比較事半功倍.
軟體
好.接下來就要玩硬的了.哈!
對了!不會寫程式的不用怕,你不用太去理解我裡面的程式是怎麼寫出來的,
你只要會用我的程式碼,去做出你想要的畫面就好,不用急著一步到位,用久了,
再去學習軟體,也可以更快進入狀況.
1. 首先先開啟Arduino IDE, 不知道的可以參考我的另一篇章 Arduino IDE
2. 安裝螢幕的Library, 不知道的可以參考我的另一篇章 Arduino 程式庫 (Library)
這邊使用的是 Adafruit的程式庫(Library), Adafruit Industries是一家位於紐約市的開源硬件公司 .
3. Arduino IDE 的程式架構, 剛學習的可以參考我的另一篇章 Arduino Blink
執行畫面如下
TFT畫面的使用.
C語言的部分用"淺藍底黑色字"處理
Setp1,載入LIB的前置處理
#include <Adafruit_TFTLCD.h> // Hardware-specific library
Step2,先宣告一個TFT
#define LCD_CS A3 // TFT 使用的接腳定義
#define LCD_CD A2 // TFT 使用的接腳定義
#define LCD_WR A1 // TFT 使用的接腳定義
#define LCD_RD A0 // TFT 使用的接腳定義
#define LCD_RESET A4 // TFT 使用的接腳定義
Adafruit_TFTLCD Touchtft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET); // 這邊使用的是Adafruit的程式庫(Library)
以上.為硬體設定,所以將其放在最上方的前置處理,或全域變數中.
Step3,初始化螢幕.
Touchtft.reset();
Touchtft.begin(0x7575); // 0x7575, TFT螢幕的控制器ID
Touchtft.setRotation(1); // 設定旋轉角度
Touchtft.fillScreen(BLACK); // 螢幕全部變黑
在開始Step4之前先解釋一下,螢幕像素,及Touchtft的函式.
螢幕像素.
這片螢幕為320x240像素的螢幕.
何謂像素? 簡單說為影像顯示的基本單位.
以上圖為例,就是一個22x20像素的圖,你可以改變每個小格子(像素)的顏色,來構成一附圖,或一個字.
每個小格子(像素),可以顯示三種原色,就是紅/綠/藍.這片螢幕解析度是16位元的.
前5個Bit是藍0x0000~0x001F
中5個Bit是綠0x0020~0x03E0
第11個Bit無作用
最後5個Bit是紅0x0800~0xF800
0x0000不顯色,就是黑.
0xFFFF藍綠紅全亮,就是白.
所以上面有一行
Touchtft.fillScreen(BLACK); // 螢幕全部變黑
裡面的BLACK,就可以用
#define BLACK 0x0000
來表示.
下面是RGB顯示的範例
|
#include <Adafruit_TFTLCD.h> // Hardware-specific library #define YP A1 #define LCD_CS A3 #define BLACK 0x0000 #define RED 0xF800 Adafruit_TFTLCD Touchtft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET); void setup(void) int iTempR = 0; iTempG = i << 5; // 綠色範圍 0x001F~0x03E0 iTempR = i << 11; // 綠色範圍 0x07FF~0xF800 Touchtft.fillRect(10, 80, 50, 20, BLACK); // 清除數字i的顯示範圍 void loop() } |
範例影片如下
由上述範例,可以得知幾個常用關於顯示的函式.
1. Touchtft.fillRect(x1, y1, x2, y2, RGB); // 區塊填色
// 在x1,y1的位置到x2,y2間,填入顏色
2. Touchtft.setTextSize(int); // 設定字體大小
3. Touchtft.setCursor(x, y); // 設定游標位置
4. Touchtft.print(str); // 印出字串
備註: x / y / x1 / y1 / x2 /y2 都是座標,範圍是320x240
就是螢幕的解析度,畫素.
好!接下來,就用這些函式來顯示螢幕畫面.
Step4,顯示字串
顯示日期
Touchtft.fillRect(0, 0, 120, 16, BLACK);
Touchtft.setTextSize(2);
Touchtft.setTextColor(WHITE);
Touchtft.setCursor(0, 0);
sprintf(cBuf80, "%04d-%02d-%02d", 2017, 11, 9); // 將字串2017-11-09放入cBuf80.
// 日期是隨意設的, 之後會抓GPS日期來顯示
Touchtft.println(cBuf80); // 印出cBuf80
顯示時間
Touchtft.fillRect(220, 0, 90, 22, BLACK);
Touchtft.setTextSize(3);
Touchtft.setTextColor(WHITE);
Touchtft.setCursor(220, 0);
sprintf(cBuf80, "%02d:%02d", 21, 10); // 將字串21:10放入cBuf80
// 時間是隨意設的, 之後會抓GPS時間來顯示
Touchtft.println(cBuf80); // 印出cBuf80
顯示衛星數量
Touchtft.fillRect(132, 20, 48, 16, BLUE);
Touchtft.setTextSize(2);
Touchtft.setTextColor(WHITE);
Touchtft.setCursor(0, 20);
sprintf(cBuf80, "satellites: %d", 6); // 將satellites: 6放入cBuf80
// 衛星數量是隨意設的, 之後會抓GPS接收衛星數量來顯示
Touchtft.println(cBuf80); // 印出cBuf80
顯示km/h單位
Touchtft.fillRect(269, 180, 50, 20, BLACK);
Touchtft.setTextColor(WHITE);
Touchtft.setTextSize(2);
Touchtft.setCursor(269, 180);
Touchtft.println("km/h");
時速顯示
Touchtft.fillRect(213, 60, 90, 120, BLACK);
Touchtft.setTextSize(17);
Touchtft.setCursor(213, 60);
Touchtft.println("0"); // 直接印出0
顯示30sec studio, 哈!這是不要臉的置入,就不多做解釋啦.
Touchtft.fillRect(165, 215, 155, 25, RED);
Touchtft.setCursor(170, 220);
Touchtft.setTextColor(WHITE);
Touchtft.setTextSize(2);
sprintf(cBuf80, "30sec studio");
Touchtft.println(cBuf80);
以上.皆為一次性的設定,所以將其放在Setup()的式裡就可以.
loop()裡面放空就好.
好,靜態顯示的部分結束啦,下次再聊聊動態部分.
Arduino GPS時速表-螢幕分析 - 靜態顯示由Peng Yi Hsing製作，以創用CC 姓名標示-非商業性-禁止改作 3.0 台灣 授權條款釋出。
留言列表
