Đừng bỏ lỡ Top cách lập trình cho màn hình cảm ứng [Hot Nhất 2023]

Màn hình HMI của Nextion hỗ trợ cảm ứng. Tùy theo chủng loại mà có loại cảm ứng điện dung hoặc điện trở. Trong bài này chúng ta cùng làm quen với màn hình HMI và xem cách thức sử dụng đơn giản.

Nextion là một giải pháp Giao diện Người-Máy (HMI). Màn hình Nextion là màn hình cảm ứng giúp dễ dàng xây dựng Giao diện người dùng đồ họa (GUI). Đây là một giải pháp tuyệt vời để giám sát và kiểm soát các quy trình, được áp dụng chủ yếu cho các ứng dụng IoT. Có một số màn hình hiển thị Nextion với kích thước từ 2,4 ”đến 7”.

Nextion có bộ vi điều khiển ARM tích hợp để điều khiển màn hình, chẳng hạn như nó đảm nhiệm việc tạo các nút, tạo văn bản, lưu trữ hình ảnh hoặc thay đổi nền. Nextion giao tiếp với bất kỳ bộ vi điều khiển nào bằng cách sử dụng giao tiếp nối tiếp USART ở tốc độ 9600 baud. Vì vậy, nó có thể hoạt động với bất kỳ mạch nào có khả năng nối tiếp như Arduino, Raspberry Pi, ESP8266, ESP32, v.v.

Để thiết kế GUI, bạn sử dụng Nextion Editor, trong đó bạn có thể thêm các nút, đồng hồ đo, thanh tiến trình, nhãn văn bản, v.v. vào giao diện người dùng một cách dễ dàng. Mô hình cơ bản màn hình Nextion 2,8 ”, được hiển thị trong hình sau.

Bạn có thể mua Nextion cơ bản hoặc nâng cao. Nextion nâng cao có các tính năng mới khi so sánh với mô hình cơ bản:

• Có RTC tích hợp
• Hỗ trợ lưu Flash
• Hỗ trợ thêm GPIO
• Flash lớn và CPU xung nhịp cao

Màn hình tốt nhất cho bạn phụ thuộc vào nhu cầu của bạn. Nếu bạn mới bắt đầu với Nextion, nên sử dụng kích thước 3.2 ” hoặc nhỏ hơn. Ngoài ra, đây là kích thước được sử dụng nhiều nhất, có nghĩa là có nhiều ví dụ và tài nguyên nguồn mở hơn cho kích thước này.

Cài Đặt

Để bắt đầu, cần cài đặt Nextion Editor. Tại trang https://nextion.itead.cc/, chọn Resources , Download > Nextion Editor và cài đặt Nextion Editor.

• Khi muốn sử dụng cùng Arduino, chúng ta phải bổ sung thư viện ITEADLIB_Arduino_Nextion
• Trong Arduino IDE, bổ sung thư viện qua tập tin .zip
• Thư viện này hỗ trợ Arduino Mega, nếu muốn sử dụng cho mạch khác thì phải sửa đổi NexConfig.h

Kết nối

Kết nối màn hình Nextion với Arduino rất đơn giản. Bạn chỉ cần thực hiện bốn kết nối: GND, RX, TX và + 5V. Các chân này được gắn nhãn ở phía sau màn hình của bạn. Chân giao tiếp theo thư viện là Serial2 của Mega (16-TX/17-RX)

Bạn có thể cấp nguồn trực tiếp cho màn hình Nextion từ chân 5V của Arduino, nhưng không được khuyến khích. Làm việc với nguồn điện không đủ có thể làm hỏng màn hình. Vì vậy, bạn nên sử dụng nguồn điện bên ngoài. Bạn nên sử dụng bộ nguồn 5V / 1A với cáp micro USB. Đi kèm với màn hình Nextion là đầu nối USB sang 2 chân, hữu ích để kết nối bộ chuyển đổi nguồn với màn hình.

Nextion HMI Editor

Khi mở chương trình tạo dự án mới, New File, chúng ta phải lựa chọn loại thiết bị và hướng hiển thị. Chú ý rằng màn hình HMI có hướng 0 là đứng dọc, chúng ta thường để nằm ngang nên chọn 90′

Sau đó màn hình chính như sau

1. Main Menu
2. Canvas – thêm thành phần vào màn hình
3. Toolbox – lấy thành phần như hình ảnh, thanh tiến trình, nút nhấn…..
4. Picture/Fonts list – hiển thị hình ảnh và font chữ được sử dụng.
5. Page area – quản lý trang, thêm trang, xóa….
6. Attributes area – thể hiện thuộc tính của thành phần.
7. Compiler output window – hiển thị kết quả biên dịch, lỗi nếu có.
8. Event window – bổ sung lệnh dùng khi có sự kiện

Đầu tiên là tạo hình nền, chủ yếu để cho đẹp. Với màn hình 3,5″ thì cần hình có kích thước 320×480. Nhìn xuống góc trái, vị trí số (4) chúng ta có cửa sổ nhập Picture

Sau đó lên ô (3) để đưa hình vào giao diện. Kích chọn Picture

Hình được chọn sẽ hiển thị là thành phần p0 trên màn hình. Kích vào p0 thì tại ô số (6) sẽ hiển thị thuộc tính. Nhập số 0 tương ứng với hình đã chọn vào mục pic

Thêm Font

Để hiển thị chữ trên màn hình, chúng ta cần thêm font. Tools > Font Generator. Sau đó cửa sổ chọn font hiện ra, đặt tên rồi Generate font.

Đặt tên cho tập tin .zi và nhấn Ok khi có yêu cầu Add font. Lần sau sử dụng chúng ta có thể thêm font có sẵn tại ô số (4)

Thêm thành phần

Sau khi đã có hình nền và lựa chọn font chữ. Chúng ta có thêm các thành phần khác. Ví dụ trong bài này chúng ta sử dụng nút nhấn, ô chữ để điều khiển đèn LED. Tất cả các thành phần đều có tên (objname) và chỉ số (id) riêng cho từng trang.

Sự kiện khi tác động

Mỗi khi một thành phần được tác động, như người dùng nhấn vào thì sẽ sinh ra 1 sự kiện. Chúng ta phải cho phép màn hình gửi id của thành phần đó đến mạch điều khiển. Đánh dấu vào ô Send Component ID

Như vậy có thể thấy rằng việc điều khiển và quản lý HMI thông qua id của từng thành phần. Khi nó bị tác động, id sẽ được báo cho mạch điều khiển và ngược lại.

Tạo trang

Thêm trang mới cho GUI rất đơn giản. Tại ô (5) chỉ cần nhấn Add là trang mới được tạo ra.

Để có thể chuyển trang khác thì tại mỗi trang, chúng ta tạo một nút nhấn. Ví dụ tại trang page0 có nút nhấn với tên bNext. Để chuyển trang thì tại ô (8) ta thêm lệnh nhảy sang trang: page 1

Chúng ta có thể đến bất cứ trang nào, chỉ cần thay giá trị id của trang đó. Tại trang tiếp theo, nếu muốn trở về thì chúng ta lại tạo 1 nút nhấn và gán lệnh nhảy trang tương tự.

Kiểm tra thiết kế

Chúng ta có thể kiểm tra trước thiết kế bằng Debug

Tại cửa số mới hiện ra, mỗi khi tương tác với các thành phần chủ động như nút nhấn thì id của thành phần đó sẽ được gửi qua cổng USART.

Biên dịch và nạp chương trình

• Để màn hình HMI có thể hoạt động, trước hết cần biên dịch thiết kế. Trong chương trình Nextion Editor, nhấn Compile

• Vào File > TFT file output

• Nhấn Output, chương trình sẽ mở cửa sổ thư mục chứa tập tin đã biên dịch.

• Chép tập tin .tft vào thẻ nhớ MicroSD (cần format ở dạng FAT32)
• Sau đó, đưa thẻ vào màn hình, bật nguồn
• Chờ màn hình cập nhật, sau khi xong thì ngắt nguồn. Rút thẻ ra.
• Bật nguồn trở lại chúng ta sẽ thấy thiết kế được hiển thị trên màn hình.

Lập trình Arduino

Một chương trình đơn giản, sử dụng các nút nhấn trên màn hình để bật tắt đèn LED đồng thời hiển thị thông báo trạng thái. Những thành phần khác cũng có cách tác động tương tự.

/* Button ON/OFF */ #include “Nextion.h” // LED pins const int led1 = 9; // Declare your Nextion objects // Example (page id = 0, component id = 1, component name = “b0”) NexText tState = NexText(0, 5, “tState”); NexButton bOn = NexButton(0, 3, “bOn”); NexButton bOff = NexButton(0, 4, “bOff”); NexTouch *nexListenList[] = { &bOn, &bOff, NULL }; /** Button to return the response. @param ptr – the parameter was transmitted to pop event function pointer. */ void bOnPopCallback(void *ptr) { tState.setText(“State: ON”); digitalWrite(led1, HIGH); } void bOffPopCallback(void *ptr) { tState.setText(“State: OFF”); digitalWrite(led1, LOW); } void setup(void) { nexInit(); // Register the pop event callback function of the components bOn.attachPop(bOnPopCallback, &bOn); bOff.attachPop(bOffPopCallback, &bOff); dbSerial.println(“Setup HMI done”); // Set LEDs pinMode(led1, OUTPUT); } void loop(void) { nexLoop(nexListenList); }

Trong chương trình, đầu tiên chúng ta phải khai báo các thành phần (page, id và tên). Thứ hai là danh sách thành phần có tác động. Tiếp đến là các hàm được gọi khi thành phần tương ứng được kích hoạt.

Trong phần khởi tạo, hàm thư viện màn hình cần được gọi đầu tiên, sau đó là các hàm được gán giống như hàm ngắt. Trong vòng lặp chính, hàm hỏi vòng các thành phần tác động giúp chương trình có thể phản ứng với các tác động trên màn hình.

Nếu cần thực thi nhiệm vụ khác ngoài quản lý màn hình, chúng ta cần chú ý thời gian xử lý để tránh mất tín hiệu từ màn hình gửi về chương trình. Đặc biệt, không nên sử dụng hàm _delay_ trong trường hợp này.