[아두이노중급.002]터치스크린으로 아두이노 LED/센서 제어하기

 

[아두이노중급.002]터치스크린으로 아두이노 LED/센서 제어하기

 

Nextion 터치스크린의 소프트웨어를 설치했다면, 이제 터치스크린과 아두이노를 연결합니다.

그리고 터치스크린 소프트웨어에서 간단한 버튼 UI를 만든 뒤 아두이노의 LED를 ON, OFF 하는 동작/ 센서값을 확인하는 프로그램을 만들어 보도록 하겠습니다.

 

[1] Nextion 터치스크린에 전원 연결하기

(1) 이 예제에서 사용한 Nextion 터치스크린 모델은 아래와 같습니다.

 

모델명: NX4832T035(구매링크 클릭)

Nextion HMI LCD, 감압식 터치, 3.5인치 NX4832T035 , 기본형 : 터치스크린 > 디스플레이 LED/LCD

 

 

(2) Nextion 터치스크린을 구매하면 아래와 같은 구성품을 확인할 수 있습니다.

 

(3) 먼저 Nextion 터치스크린의 전원을 아래 그림과 같이 연결해 줍니다. 안드로이드 스마트폰 5핀 충전기로 연결하면 됩니다. 전원만 연결해도 터치스크린에서 어떤 화면이 뜨게 될 겁니다.

Nextion 전원 연결

 

[2] Nextion 터치스크린에 버튼UI 하나 만들기

 

(0) 먼저 Nextion LCD를 컴퓨터에 USB로 연결합니다.

 

(1) 이전에 설치했던 Nextion Editor 소프트웨어를 실행합니다.

 

(2) 새로운 프로젝트를 만들기 위해 상단 메뉴에서 File > New를 클릭합니다.

 

(3) 사용할 Nextion LCD의 모델명을 선택해줍니다.(정확한 모델명은 Nextion LCD의 뒷면을 확인하세요.)

 

 

(4) 디스플레이 방향(Display direction)을 선택하라고 뜹니다. 0도~270도로 화면의 출력 방향을 정할 수 있는데, 저는 가로 화면으로 하기 위해 90도(Horizontal)를 선택하겠습니다.

 

(5) Charactger Encoding 설정에서, 한글을 사용할 경우에는 ks_c_5601_1987을 선택해야 합니다.

마지막으로 OK를 누르면 됩니다.

 

 

(6) 이제 Nextion 프로젝트 설정이 모두 끝났고, 아래 그림과 같이 프로젝트가 생성되었습니다.

 

 

(7) 프로젝트를 테스트 하기 전에 글자 폰트 설정을 먼저 해야합니다.

그래서 Editor 상단 메뉴중, Tools > Font Generator를 클릭합니다.

 

 

(8) Font Name을 입력하여 Generate font를 클릭합니다.

 

 

(9) 파일이름을 Font Name과 동일하게 하여 저장합니다.

 

 

(10) 폰트 설정 완료.

 

 

 

 

(11) Editor 왼쪽 하단의 Font탭을 클릭하면 추가한 폰트가 나타나는 것을 확인할 수 있습니다.

 

 

(12) 이제 빈 프로젝트의 테스트를 위해서, 버튼 하나를 클릭하여 화면 가운데로 버튼을 옮겨 보세요.

 

 

 

(13) 버튼을 추가한 프로젝트를 Nextion LCD에 업로드 하기 위해 , Editor의 상단 메뉴중 "Upload"를 클릭합니다.

 

 

 

(16) Com Port를 선택하고, Go를 눌러줍니다.

(Baud Rate는 통신 속도로서 숫자가 클수록 업로드 속도가 빠르지만, 너무 큰 값은 에러가 날 수도 있습니다.)

 

 

(17) 아래 그림과 같이 Nextion LCD에 프로젝트가 업로드 되고, 완료된 모습을 확인 할 수 있습니다.

버튼이 잘 보이네요.

업로드 되는중

업로드 완료

 

 

[3] 아두이노용 Nextion 라이브러리 설치

(1) 아래의 링크에서 Nextion 라이브러리를 다운받습니다.(절대 압축을 풀지 마세요)

-라이브러리 다운로드 링크: https://github.com/itead/ITEADLIB_Arduino_Nextion/archive/refs/heads/master.zip

 

(2) 라이브러리를 다운 받은 뒤, 아두이노 IDE의 스케치 >> 라이브러리 포함하기 >> .ZIP라이브러리 추가...를 클릭합니다.

 

(3) 방금 다운 받았던 Nextion 라이브러리 zip파일을 선택하여 "열기"버튼을 누르면 라이브러리 설치가 완료된 것입니다.

 

[4] 라이브러리 코드 수정

(1) 아두이노 라이브러리 폴더(문서 >> Arduino >> libraries)에 가서 ITEADLIB_Arduino_Nextion-master 폴더를 찾아서, NexConfig.h파일을 엽니다.

 

 

(2) 다음과 같이 코드를 수정해 주세요.

-27 행을 주석 처리하여 다음과 같이 유지하십시오: //#define DEBUG_SERIAL_ENABLE -코멘트 라인 32 : //#define dbSerial Serial -37 행을 다음과 같이 변경하십시오: #define nexSerial Serial

 

 

 

[4]  Nextion 과 아두이노 연동하기 

 

 

 

 

 

(1) Nextion Editor에서 다음과 같이 디자인을 해줍니다.

 

(2) Nextion LED에 프로젝트를 업로드 합니다.

 

 

(3) 다음과 같이 아두이노 코딩을 하고 업로드를 해줍니다.

#include "Nextion.h"
#include <MsTimer2.h>
 
static int cnt = 0;
NexButton b0 = NexButton(0,1,"b0"); // (pageNo. , Object ID, Object Name)
NexText ledText = NexText(0,2,"t0");
 
NexTouch *nex_listen_list[] = { &b0, NULL }; // 버튼,슬라이더 등의 입력장치 이벤트 리스트
 
void setup() {
  Serial.begin(9600);
  delay(500);
  nexInit();
  b0.attachPush(b0PushCallback, &b0);
  pinMode(13, OUTPUT);
 
  MsTimer2::set(1000, send_sensor);
  MsTimer2::start();
}
 
void loop() {
  delay(30);
  nexLoop(nex_listen_list);
}
 
 
void send_sensor() {
  int s1 = analogRead(A0);
  Serial.print("n0.val=");
  Serial.print(s1);
  Serial.write(0xff);
  Serial.write(0xff);
  Serial.write(0xff);
}
 
void b0PushCallback(void *ptr) { // button push
  delay(10);
 
  if( digitalRead(13) == LOW) {
    digitalWrite(13, HIGH);
    ledText.setText("ON");
  }
  else {
    digitalWrite(13, LOW);
    ledText.setText("OFF");
  }
  
//  Serial.print("t0.val=");
//  Serial.print(cnt);
//  Serial.write(0xff);
//  Serial.write(0xff);
//  Serial.write(0xff);
}