Mục lục:

BluBerriSix - Màn hình cảm ứng TFT / Hướng dẫn Arduino: 12 bước (có hình ảnh)
BluBerriSix - Màn hình cảm ứng TFT / Hướng dẫn Arduino: 12 bước (có hình ảnh)

Video: BluBerriSix - Màn hình cảm ứng TFT / Hướng dẫn Arduino: 12 bước (có hình ảnh)

Video: BluBerriSix - Màn hình cảm ứng TFT / Hướng dẫn Arduino: 12 bước (có hình ảnh)
Video: Coding Games on an ILI9341 SPI LCD and Touchscreen - Arduino 2024, Tháng bảy
Anonim
BluBerriSix - Màn hình cảm ứng TFT / Hướng dẫn Arduino
BluBerriSix - Màn hình cảm ứng TFT / Hướng dẫn Arduino
BluBerriSix - Màn hình cảm ứng TFT / Hướng dẫn Arduino
BluBerriSix - Màn hình cảm ứng TFT / Hướng dẫn Arduino

Năm 2019 là kỷ niệm 20 năm của RIM Blackberry 850! Phát minh nhỏ bé này của Canada đã thay đổi cách thế giới giao tiếp. Nó đã biến mất từ lâu, nhưng di sản của nó vẫn tiếp tục!

Trong tài liệu hướng dẫn này, bạn sẽ học cách sử dụng tấm chắn màn hình TFT 2.4 MCUfriend.com cho Uno / Mega. Bạn sẽ học cách hiển thị các đối tượng đồ họa và văn bản cũng như cách nhận các lần chạm và hành động trên các sự kiện chạm. Điều này màn hình rất giống với Adafruit và các tấm chắn / màn hình TFT khác. Vì vậy, nếu bạn đang ở đây, hãy chú ý theo dõi chương trình.

Chúng tôi sẽ xây dựng một phiên bản ứng dụng đơn giản 2 của bản phác thảo bluBerriSIX của tôi.

Bắt đầu nào!

Bước 1: BluBerriSIX - Tổng quan

Image
Image
BluBerriSIX - Tổng quan
BluBerriSIX - Tổng quan
BluBerriSIX - Tổng quan
BluBerriSIX - Tổng quan

Ứng dụng bluBerriSIX là một dự án TFT sáu chức năng.

Nó bao gồm:

Đèn pin

Một ứng dụng Saucy '7' (giống như Magic '8' Ball)

Máy tính

Ứng dụng đo khoảng cách sử dụng cảm biến khoảng cách siêu âm SR-04

Một ứng dụng Nhiệt độ và Độ ẩm cũng thực hiện ghi dữ liệu thời gian thực lên đến 1,5 km với bộ thu phát HC-12

Một ứng dụng nhắn tin sử dụng HC-12.

Dự án này có 1100 dòng mã. Chúng tôi sẽ xây dựng một phiên bản đơn giản hơn đáng kể nhưng vẫn thể hiện các khái niệm cảm ứng và màn hình TFT.

Bước 2: Cần gì?

Những gì cần thiết?
Những gì cần thiết?
Những gì cần thiết?
Những gì cần thiết?

- Arduino Uno hoặc Mega 2560

- Một tấm chắn TFT MCUfriend 2.4"

Các thư viện sau:

- Thư viện Adafruit_GFX

- Thư viện màn hình cảm ứng Adafruit

- Thư viện MCUFRIEND_kbv

Các thư viện này có thể được cài đặt bằng Trình quản lý Thư viện bên trong Arduino IDE.

Để tải thư viện, hãy chuyển đến tùy chọn menu Sketch -> Bao gồm Thư viện -> Quản lý Thư viện….

Trong trường 'lọc tìm kiếm của bạn …', hãy nhập một vài ký tự đầu tiên của tên người viết thư, sau đó chọn và cài đặt thư viện thích hợp. Khi hoàn tất, chỉ cần lùi lại khỏi màn hình này.

Khi lắp tấm chắn TFT trên Uno / Mega, hãy RẤT CẨN THẬN để đảm bảo rằng bạn đang xếp các chốt một cách chính xác. Tôi đặt sai chiếc khiên đầu tiên của mình và chiên nó. Tôi đã dành hai tuần ngày càng thất vọng để cố gắng tìm đúng thư viện trước khi nhận ra rằng màn hình đã chết. HÃY CẨN THẬN

Bước 3: Dự án của chúng tôi

Dự án của chúng tôi
Dự án của chúng tôi
Dự án của chúng tôi
Dự án của chúng tôi
Dự án của chúng tôi
Dự án của chúng tôi
Dự án của chúng tôi
Dự án của chúng tôi

Chúng tôi sẽ xây dựng một phiên bản đơn giản hơn của bản phác thảo bluBerriSIX.

Nó sẽ có, - màn hình giật gân

- màn hình menu chính với hai nút

- một ứng dụng Saucy 7

- một ứng dụng nhập văn bản đơn giản

Bạn cũng sẽ có thể quay lại menu chính bằng cách nhấn vào biểu tượng 'Trang chủ' ở phía dưới bên trái của màn hình cụ thể này. Nếu bạn không có biểu tượng như vậy, bạn sẽ chỉ phải xác định vùng 'chính' trên màn hình của mình. Bạn sẽ học cách xác định vùng cảm ứng màn hình trong hướng dẫn này.

Mặc dù đây là một dự án đơn giản hóa, nhưng nó vẫn còn khá dài. Tôi sẽ cung cấp các phiên bản của bản phác thảo Arduino ở mỗi giai đoạn chính để bạn có thể tải chúng lên nếu muốn.

Bước 4: Mã tiêu đề, Biến toàn cục, Thiết lập màn hình

Mã tiêu đề, Biến toàn cục, Thiết lập màn hình
Mã tiêu đề, Biến toàn cục, Thiết lập màn hình
Mã tiêu đề, Biến toàn cục, Thiết lập màn hình
Mã tiêu đề, Biến toàn cục, Thiết lập màn hình

Toàn bộ dự án được ghi chép rất nhiều. Nhưng các chi tiết theo sau.

Bắt đầu một dự án Arduino mới và gọi nó là 'bản trình diễn tft' hoặc bất kỳ tên nào khác mà bạn muốn.

Bảng mã đầu tiên ở trên cho chúng ta thấy cách xác định các biến toàn cục. Chúng tôi cũng thêm vào các thư viện mà chúng tôi sẽ cần sử dụng cho cả chức năng hiển thị của màn hình và phát hiện cảm ứng của màn hình.

Chúng tôi cũng xác định các Ghim Analog có tham chiếu đến các mục đích dành riêng cho màn hình của chúng.

Chúng tôi xác định đối tượng tft (hiển thị) và đối tượng ts (cảm ứng) làm tham chiếu cho các chức năng tương ứng của chúng.

Chúng tôi xác định một số hằng số màu 16 bit để giúp dễ dàng hiển thị màu sắc cho màn hình và cho các đối tượng văn bản và đồ họa. Bạn sẽ nhận thấy có một URL dẫn đến một trang web có Bộ chọn màu và công cụ chuyển đổi để chuyển đổi các màu hiển thị thành các giá trị thập lục phân 16 bit của chúng. Đó là một công cụ rất hữu ích.

Trong bảng mã thứ hai, chúng tôi xác định các biến toàn cục cho các mục đích dành riêng cho ứng dụng của chúng tôi.

Chuỗi và mảng cString, letter và letterX và letterY được sử dụng để a) hiển thị các chữ cái trên các nút cho ứng dụng nhập văn bản và b) khớp tọa độ x và y của một lần chạm với tọa độ x và y của mỗi chữ cái tương ứng trên bàn phím. Thông tin thêm về điều này khi chúng ta đến phần đó của bản phác thảo.

funcX , funcY và func là các mảng hoạt động để xác định nút ứng dụng nào được nhấn trên màn hình menu chính và sau đó sử dụng thông tin đó để khởi chạy ứng dụng tương ứng.

lastTouch và tThresh được sử dụng trong các phương pháp chạm để đảm bảo chúng ta không bị chạm nhiều lần khi nhấn màn hình quá lâu. Thêm về điều đó sau.

Biến mode sẽ kiểm soát màn hình nào được hiển thị và biến tMode sẽ kiểm soát phương thức cảm ứng nào đang được sử dụng tại bất kỳ thời điểm nào.

Trong khối setup (), chúng ta mở một kênh Serial nếu chúng ta muốn sử dụng các lệnh Serial.println () để gỡ lỗi. Bạn không cần dòng này nếu bạn không muốn gỡ lỗi Serial Monitor.

Bốn dòng tiếp theo chỉ là mã thiết lập cho đối tượng tft.

Tiếp theo, chúng tôi đặt hướng của màn hình thành chế độ Chân dung.

Lệnh randomSeed () chỉ khởi động trình tạo số ngẫu nhiên để ứng dụng Saucy 7 sử dụng sau này.

Cuối cùng, chúng tôi gọi phương pháp màn hình giật gân.

Bước 5: Xây dựng Spash Screen và hiểu về ánh xạ màn hình so với cảm ứng

Xây dựng Spash Screen và hiểu về ánh xạ cảm ứng so với màn hình hiển thị
Xây dựng Spash Screen và hiểu về ánh xạ cảm ứng so với màn hình hiển thị
Xây dựng Spash Screen và hiểu về ánh xạ cảm ứng so với màn hình hiển thị
Xây dựng Spash Screen và hiểu về ánh xạ cảm ứng so với màn hình hiển thị

Bây giờ chúng ta sẽ bắt đầu xây dựng màn hình giật gân.

Nhưng trước tiên, hãy nhìn vào hình ảnh để biết ánh xạ màn hình và cảm ứng. Lưu ý rằng nguồn gốc ở các địa điểm khác nhau. Đối với hiển thị, điểm gốc (0, 0) nằm ở trên cùng bên trái của màn hình (khi nút ĐẶT LẠI ở trên cùng) và phát triển từ trái sang phải và từ trên xuống dưới.

Đối với tính năng phát hiện cảm ứng, điểm gốc nằm ở góc dưới bên trái của màn hình và phát triển từ trái sang phải và từ dưới lên trên.

Vì vậy, BẢN ĐỒ HIỂN THỊ VÀ CẢM ỨNG ĐƯỢC ĐỊNH NGHĨA RIÊNG RIÊNG và có độ phân giải khác nhau. Màn hình có độ phân giải 240 x 320 và cảm ứng có độ phân giải cao hơn nhiều như bạn sẽ thấy.

Đi tới một vùng trong bản phác thảo của bạn bên dưới phương thức loop () {} và chúng ta sẽ nhập mã phương thức splash ().

Chúng ta bắt đầu bằng cách thực hiện lệnh fillScreen () để lấp đầy màn hình bằng màu TRẮNG mà chúng ta đã xác định trong mã tiêu đề.

Sau đó, chúng tôi đặt kích thước văn bản thành '5'. Đây là một kích thước văn bản cơ bản tương đối lớn. Chúng tôi đặt vị trí x và y cho con trỏ văn bản và chúng tôi đặt màu văn bản. Cuối cùng, lệnh print ("TFT") thực sự vẽ văn bản màu xanh lam, kích thước '5' tại vị trí được chỉ định.

Khi bạn tăng kích thước văn bản, bạn sẽ thấy rằng các ký tự ngày càng nhiều hơn. Vì vậy, vượt lên trên 5 có lẽ là không hữu ích. Ở phần cuối của hướng dẫn này, tôi sẽ chỉ cho bạn cách sử dụng phông chữ bitmap để có được văn bản đẹp hơn trong ứng dụng của bạn. Điểm cân bằng là việc sử dụng bộ phông chữ bitmap chiếm rất nhiều bộ nhớ trong Arduino sẽ giới hạn kích thước bản phác thảo của bạn

Chúng tôi lặp lại các lệnh tương tự cho hai mục văn bản khác trên màn hình giật gân.

Cuối cùng, chúng tôi trì hoãn 2,5 giây để người dùng có cơ hội đọc nội dung trên màn hình trước khi ứng dụng chuyển sang màn hình menu chính.

Hãy tiếp tục và tải bản phác thảo này lên Arduino của bạn. Nó sẽ hiển thị màn hình giật gân.

Bước 6: Tạo công cụ chẩn đoán bản đồ cảm ứng

Tạo công cụ chẩn đoán bản đồ cảm ứng
Tạo công cụ chẩn đoán bản đồ cảm ứng
Tạo công cụ chẩn đoán bản đồ cảm ứng
Tạo công cụ chẩn đoán bản đồ cảm ứng

Phương thức showTouch () rất hữu ích để giúp bạn lấy tọa độ cảm ứng của các phần khác nhau của màn hình. Bạn sẽ cần thực hiện việc này để xác định vùng cảm ứng cho các nút của mình.

Hãy tiếp tục và nhập phương thức này bên dưới phương thức splash () của bạn đã thực hiện trước đó.

Đây là cách nó hoạt động.

Câu lệnh if xác định xem đã đủ thời gian trôi qua kể từ lần chạm cuối cùng hay chưa. Nó lấy thời gian hệ thống hiện tại mili () và trừ thời gian LastTouch. Nếu nó lớn hơn giá trị tThresh (200 mili giây), nó chấp nhận lần chạm. Nếu không, nó sẽ bỏ qua các sự kiện đa chạm ngẫu nhiên.

Tiếp theo, lệnh getpoint () lấy tọa độ x, y và z của lần chạm. Tọa độ z là số đo của áp suất cảm ứng.

Nếu áp suất nằm trong các hằng số tối đa và tối thiểu mà chúng tôi đã xác định trong tiêu đề phác thảo, phương pháp trước tiên sẽ thay đổi các chân YP và XM trở lại OUTPUT, đặt màn hình ở chế độ HIỂN THỊ.

Tiếp theo nó sẽ vẽ một hình chữ nhật màu trắng để xóa bất kỳ tọa độ nào có thể đã được hiển thị trước đó.

Sau đó, bản phác thảo đặt phông chữ thành kích thước 2, màu đen và hiển thị tọa độ x (p.x) và y (p.y) trên màn hình. Sau đó, bạn có thể ghi chú những vị trí này để giúp bạn lập trình vùng cảm ứng cho các bản phác thảo của riêng bạn.

Câu lệnh if ở cuối phương thức kiểm tra xem nút 'Trang chủ' trên màn hình đã được nhấn chưa. toán tử '<=' cho phép chiều rộng và chiều cao của nút Trang chủ. Các tọa độ được chỉ định là tọa độ tâm x và tâm y của nút Trang chủ. Nếu nó được nhấn, chế độ được đặt thành 0, điều này cuối cùng sẽ có nghĩa là 'Chuyển đến Màn hình Menu chính'. Thêm về điều đó sau.

Cuối cùng, chúng tôi cập nhật lastTouch thành milis thời gian hệ thống hiện tại () để sẵn sàng cho một sự kiện chạm sau.

Bây giờ hãy đi đến khối loop () và thêm dòng showTouch ();

Tại thời điểm này, hãy tải lên bản phác thảo của bạn và thử nó. Nó sẽ vẽ màn hình giật gân và nếu bạn bắt đầu chạm vào màn hình, tọa độ CHẠM x và y sẽ được hiển thị trên màn hình.

Trước khi tiếp tục, hãy xem lại hai dòng mã quan trọng:

pinMode (YP, OUTPUT); // khôi phục các chân điều khiển TFT

pinMode (XM, OUTPUT); // để hiển thị sau khi phát hiện chạm

Bất cứ lúc nào bạn muốn hiển thị một cái gì đó trên màn hình, bạn PHẢI thực hiện hai lệnh này để chuyển màn hình từ chế độ CẢM ỨNG sang chế độ HIỂN THỊ. Nếu không, các lệnh hiển thị của bạn sẽ không hoạt động.

Làm tốt cho đến nay! Nghỉ ngơi một lát!

Bước 7: Xây dựng màn hình menu chính

Xây dựng màn hình menu chính
Xây dựng màn hình menu chính
Xây dựng màn hình menu chính
Xây dựng màn hình menu chính
Xây dựng màn hình menu chính
Xây dựng màn hình menu chính

Bây giờ chúng tôi sẽ xây dựng màn hình Menu chính của chúng tôi với hai nút bạn có thể nhấn để kích hoạt từng ứng dụng. Phương thức được gọi là menuScreen ().

Chúng tôi bắt đầu bằng cách đặt màn hình ở chế độ HIỂN THỊ.

Sau đó, chúng tôi đặt kích thước phông chữ, màu sắc và vị trí và in văn bản 'Menu chính'.

Bây giờ chúng ta vẽ hai hình chữ nhật là các nút.

Tất cả các lệnh đồ họa có cấu trúc tương tự:

graphicShape (tọa độ x, tọa độ y, chiều rộng, chiều cao, MÀU SẮC)

- tọa độ x - trên cùng bên trái cho các đối tượng hình chữ nhật, tâm cho các hình tròn

- tọa độ y - trên cùng bên trái cho các đối tượng hình chữ nhật, tâm cho các hình tròn

- width - chiều rộng của đối tượng tính bằng pixel

- MÀU SẮC - hằng số màu mà chúng tôi đã xác định trong tiêu đề

Cuối cùng, chúng tôi gọi hai phương pháp để vẽ biểu tượng Saucy 7 và biểu tượng QWERTY Text Entry. Đó là những phương pháp riêng biệt.

Phương thức draw7icon (0) nhận một tham số nguyên là độ lệch y để vẽ quả bóng. Chúng tôi làm điều này để chúng tôi có thể sử dụng cùng một phương pháp để vẽ quả bóng trên màn hình menu VÀ trên màn hình ứng dụng Saucy 7. Độ lệch chỉ cho phép chúng tôi điều chỉnh theo chương trình tọa độ y của quả bóng lên hoặc xuống.

Phương thức draw7Ball (0) được gọi từ bên trong draw7Icon (0). Nó cũng có một tham số cho phép chúng ta điều chỉnh vị trí thẳng đứng của quả bóng tùy thuộc vào việc chúng ta vẽ nó trên màn hình menu hay trên màn hình ứng dụng.

Lệnh fillCircle () có 4 đối số.

- x tọa độ của tâm đường tròn

- tọa độ y của tâm đường tròn

- bán kính của hình tròn (tính bằng pixel)

- MÀU SẮC - hằng số màu mà chúng tôi đã xác định trong tiêu đề

Cuối cùng phương thức drawTextIcon () được gọi để vẽ biểu tượng cho ứng dụng Text Entry.

Bạn có thể thử chạy phương thức này bằng cách bình luận phương thức splash () trong setup () và thêm menuScreen ().

Tải bản phác thảo lên Arduino của bạn và dùng thử!

Bước 8: Ứng dụng Saucy 7 và các phương pháp menu chính

Ứng dụng Saucy 7 và các phương thức menu chính
Ứng dụng Saucy 7 và các phương thức menu chính
Ứng dụng Saucy 7 và các phương thức menu chính
Ứng dụng Saucy 7 và các phương thức menu chính
Ứng dụng Saucy 7 và các phương thức menu chính
Ứng dụng Saucy 7 và các phương thức menu chính
Ứng dụng Saucy 7 và các phương pháp menu chính
Ứng dụng Saucy 7 và các phương pháp menu chính

Phương thức SevenScreen () sẽ vẽ màn hình cho ứng dụng, bao gồm cả việc vẽ quả bóng và sau đó hiển thị các hướng dẫn.

Phương thức SevenInstr () hiển thị các hướng dẫn cũng như xóa màn hình khỏi các phản hồi trước đó. Nó cũng vẽ nút 'Phản hồi'.

Phương thức show7Response () xử lý việc xóa phương thức phản hồi trước đó khỏi màn hình, hiển thị thông báo động 'đang suy nghĩ…' và sau đó hiển thị thông báo phản hồi được chọn ngẫu nhiên.

read7Touch () là phương thức chờ một sự kiện chạm để tạo ra thông báo được tạo ngẫu nhiên. Mã cảm ứng rất giống với phương pháp chẩn đoán showTouch () được mô tả trước đó. Để đơn giản, phương pháp sẽ chấp nhận một lần chạm vào bất kỳ đâu trên màn hình khi chạm vào nút 'Phản hồi'.

Ở đầu phương thức, chúng tôi xác định một mảng chuỗi phản hồi là các thông báo có thể được tạo từ một sự kiện chạm.

Nếu nút Home được nhấn, nó sẽ kết thúc ứng dụng và quay lại màn hình menu chính. Nếu không, phương thức sẽ tạo ra một số ngẫu nhiên từ 0 đến 7 (loại trừ) và chuyển thông điệp văn bản tương ứng từ mảng response tới phương thức show7Response ().

Cuối cùng, phương thức backToMenu () theo dõi khi chạm vào nút Trang chủ và trả lại quyền điều khiển cho màn hình menu chính.

Phương thức readMenuTouch () theo dõi sự kiện chạm khi bạn đang ở trên màn hình menu chính. Khi một lần chạm được phát hiện, nó sẽ chuyển tọa độ x và y tới phương thức getFunc (x, y), phương thức này nằm trong mảng funcX và funcY để khớp với tọa độ x và y của lần chạm. Sau đó, nó trả về số từ mảng func cho ứng dụng đã được chọn. '1' là Saucy 7 và '2' là ứng dụng nhập văn bản. Sau đó, nó đặt chế độ thành giá trị của ứng dụng đó để ứng dụng sẽ được thực thi.

Bước 9: Khối Loop ()

Khối vòng lặp ()
Khối vòng lặp ()

Bây giờ chúng ta sẽ bắt đầu xây dựng mã khối loop () để xử lý việc hiển thị màn hình thích hợp và sau đó gọi các phương thức cảm ứng thích hợp dựa trên tùy chọn hiện được chọn.

Phương thức loop () bao gồm hai cấu trúc switch ().

Cấu trúc công tắc trên cùng xử lý hiển thị màn hình thích hợp tùy thuộc vào tùy chọn nào được chọn. Nó cũng đặt giá trị tMode cho phương thức cảm ứng thích hợp để chạy cho tùy chọn đã chọn hiện tại. Cuối cùng, nó đặt giá trị chế độ thành 9 để màn hình hiển thị không bị vẽ lại liên tục.

Cấu trúc công tắc phía dưới kiểm soát các phương thức cảm ứng đang được thực thi dựa trên tùy chọn ứng dụng do người dùng chọn như được biểu thị bằng giá trị của tMode.

Tải bản phác thảo vào Arduino của bạn và bạn sẽ có thể chọn và sử dụng ứng dụng Saucy 7.

Bạn đã làm rất nhiều việc! Nghỉ ngơi một lát:-)

Bước 10: Ứng dụng Nhập văn bản - Chúng tôi đang trong giai đoạn căng thẳng tại nhà

Ứng dụng Nhập văn bản - Chúng tôi đang trong giai đoạn Mở rộng Trang chủ!
Ứng dụng Nhập văn bản - Chúng tôi đang trong giai đoạn Mở rộng Trang chủ!
Ứng dụng Nhập văn bản - Chúng tôi đang trong giai đoạn Mở rộng Trang chủ!
Ứng dụng Nhập văn bản - Chúng tôi đang trong giai đoạn Mở rộng Trang chủ!
Ứng dụng Nhập văn bản - Chúng tôi đang trong giai đoạn Mở rộng Trang chủ!
Ứng dụng Nhập văn bản - Chúng tôi đang trong giai đoạn Mở rộng Trang chủ!
Ứng dụng Nhập văn bản - Chúng tôi đang trong giai đoạn Mở rộng Trang chủ!
Ứng dụng Nhập văn bản - Chúng tôi đang trong giai đoạn Mở rộng Trang chủ!

Bây giờ chúng tôi sẽ kết hợp các phương pháp của ứng dụng nhập văn bản.

makeKbd () vẽ bàn phím trên màn hình.

Nó vẽ sáu hình chữ nhật tròn đầy và sau đó phủ chữ cái thích hợp lên mỗi 'phím' bằng cách lấy chữ cái từ chuỗi cString mà nó in trên màn hình lên trên phím. Lưu ý rằng tham số cuối cùng thứ hai trong lệnh fillRoundsRect () là bán kính của mỗi góc tính bằng pixel. Giá trị này càng cao, các góc càng tròn.

Phương thức readKbdTouch () hoạt động tương tự như các phương thức phát hiện chạm khác.

Nếu phát hiện thấy một lần chạm KHÔNG có trên nút Trang chủ, nó sẽ chuyển tọa độ x và y tới phương thức curChar (x, y), phương thức này sẽ trả về ký tự tương ứng với vị trí x và y đó trên màn hình. Thông báo đã được 'nhập' sau đó sẽ được hiển thị trên màn hình bằng phương thức 'displayMsg (theChar).

Phương thức curChar (x, y) tìm kiếm qua mảng letterX và letterY để thử tìm một kết quả khớp gần với tọa độ x và y được truyền từ readKbdTouch (). Nếu nó tìm thấy một kết quả trùng khớp, nó sẽ trả về ký tự tương ứng cho phương thức readKbdTouch. Lưu ý rằng chúng tôi khởi tạo biến theChar thành 32, đây là mã ASCII cho một ký tự khoảng trắng, ''. Chúng tôi làm điều này để nếu người dùng chạm vào một khu vực cách xa bàn phím, nó sẽ không hiển thị các ký tự không có sẵn.

Phương thức displayMsg (theChar) lấy ký tự được trả về từ curChar (x, y) và gắn nó vào chuỗi tin nhắn. Sau đó, nó sẽ hiển thị thông báo trên màn hình.

Cuối cùng, chúng tôi sẽ cập nhật khối loop () để chấp nhận lựa chọn ứng dụng nhập văn bản.

Tải bản phác thảo tftDemo lên Arduino của bạn và bạn sẽ có thể sử dụng ứng dụng đã hoàn thành.

Xin chúc mừng! bạn đã xây dựng một ứng dụng màn hình cảm ứng TFT! Hãy dành phần còn lại của ngày nghỉ!

Bước 11: Gettin 'Slick! - Sử dụng Phông chữ Bitmap Adafruit trong Bản phác thảo của bạn

Bộ font tft chuẩn là được. Nhưng sẽ đẹp hơn nếu chúng ta có thể sử dụng các phông chữ được ánh xạ bit thích hợp trong các bản phác thảo TFT của mình.

Nhược điểm là tải các bộ phông chữ vào bộ nhớ Arduino sẽ chiếm không gian đáng kể. Trên thực tế, rất dễ dàng điền vào bản phác thảo của bạn với rất nhiều phông chữ mà nó sẽ không tải vào Arduino.

Các phông chữ có sẵn bên trong thư mục thư viện Adafruit_GFX mà bạn đã cài đặt cho dự án này. Một hướng dẫn tuyệt vời về cách sử dụng phông chữ có tại trang web này.

Trong vùng Tiêu đề của bản phác thảo của bạn, hãy thêm tham chiếu phông chữ cho phông chữ bạn muốn sử dụng. Chúng tôi sẽ sử dụng phông chữ FreeSerifBoldItalic18p7b cho ví dụ này.

#bao gồm

Trong phương thức splash () của bạn, hãy bình luận tft.setTextSize (); chỉ huy.

Thêm lệnh sau,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Bây giờ bất kỳ lệnh print () nào sẽ sử dụng phông chữ hiện được chỉ định. Để thay đổi sang một phông chữ khác, bạn sẽ sử dụng lệnh tft.setFont () khác với phông chữ tiếp theo mà bạn muốn sử dụng.

Để đặt phông chữ trở lại phông chữ tft tiêu chuẩn, chỉ cần sử dụng tft.setFont (); lệnh không có tham số.

Tải bản phác thảo lên Arduino của bạn và bạn sẽ thấy màn hình giật gân hiện sử dụng phông chữ bitmap để hiển thị văn bản trên màn hình. Bạn sẽ nhận thấy rằng kích thước của bản phác thảo lớn hơn đáng kể khi bạn đã bao gồm một phông chữ.

Bước 12: Kết luận

Có nhiều lệnh đối tượng đồ họa khác có sẵn cho bạn. Chúng bao gồm:

tft.drawRect (x, y, width, height, COLOR);

tft.drawLine (x1, y1, x2, y2, MÀU SẮC);

Các ví dụ sau sử dụng phương thức tft.color565 để cho phép bạn chỉ định màu dựa trên các giá trị đỏ, lục và lam. Đây là một cách thay thế để sử dụng các giá trị màu HEX được xác định không đổi mà chúng tôi đã sử dụng trong bản phác thảo của mình.

tft.drawRoundRect (x, y, width, height, radius, tft.color565 (255, 0, 0)); // cái này sẽ có màu đỏ

tft.drawCircle (x, y, radius, tft.color565 (0, 255, 0)); // cái này sẽ có màu xanh lục

tft.drawTriangle (vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565 (0, 0, 255)); // màu xanh dương

tft.fillTriangle (vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565 (255, 0, 0);

Chơi xung quanh các lệnh này và khám phá cách chúng có thể thêm vào các dự án TFT của bạn.

Học cách sử dụng màn hình TFT là một thử thách và bạn nên tự hào về bản thân vì đã dành thời gian tìm hiểu những bước đầu tiên này.

Màn hình TFT có thể thêm khía cạnh Giao diện người dùng đồ họa hấp dẫn và hữu ích vào các dự án Arduino của bạn.

Cảm ơn vì đã làm việc thông qua hướng dẫn này.

NGAY BÂY GIỜ ĐI RA NGOÀI VÀ KIÊN TRÌ NGAY LẬP TỨC!

Đề xuất: