[Nextion HMI 강의] 5강 - Text 관련 컨트롤 사용하기

0. 들어가면서 않나!!!안녕하세요.합금입니다.다음은 NextionHMI디스플레이 모듈에서 문자나 숫자 등의 정보를 표시할 수 있도록 하는 Text, Scrollingtext, Number컨트롤의 사용법에 대해서 보고 싶습니다문자나 숫자 등의 정보를 표시하는 것은 거의 필수 HMI요소이므로, 이번의 포스팅을 집중적으로 읽고 모방하고 보세요.1. 문자나 숫자 정보를 나타내기 위한 글꼴 정보를 생성하는 Nextion HMI디스플레이를 이용하고 원하는 정보를 표시하기 위해서 우선 데이터를 표시하는 폰트를 작성할 필요가 있습니다.그럼 폰트 데이터를 생성하는 방법에 대해서 함께 살펴봅시다.Nextion Editor를 실행한 뒤 신규 프로젝트의 이름을 “02_Text_Control_Test”라고 입력하고 Character Encoding을 ks_c_5601-1987에 설정합니다.프로젝트의 작성에 관한 내용은 전 투고를 참조하십시오.

[Nextion HMI 강의] 4강 – 신규 HMI 프로젝트 작성 및 실행 0. 들어가… 안녕하세요. 한다 입니다. Nextion HMI강의 포스팅 4강의 이번 포스팅에서는 Nexti… blog.naver.com

그런 다음 새 글꼴을 생성하기 위해 아래 그림과 같이 Nextion Editor 프로그램 상단 메뉴바의 [Tools]-[Font Generator]를 클릭하여 “Font Generator”를 실행합니다.

인기글

Font Generator 메뉴를 클릭하면 아래 그림과 같이 “Font Creator” 창이 나타납니다. 여기서 아래 그림과 같이 각각의 설정 내용을 설정합니다. 한편, 본 포스팅에서는 자주 사용되는 구르체 글꼴을 이용하여 Nextion HMI 디스플레이 모듈에서 사용할 수 있는 글꼴을 만들고자 합니다. 모든 설정이 완료되면 창의 오른쪽 하단에 있는 “Generate font”를 클릭합니다.

여기서 Font Creator의 각 설정 사항에 대해서 설명하고 싶습니다.우선”Height”는 생성하는 폰트 크기를 의미합니다.문자나 숫자 데이터를 사용하고 싶은 장소에 맞는 사이즈를 적절하게 지정하고 사용하세요.”Code”는 변환하는 휴대 전화의 종류를 표합니다.한글을 표기하는 경우는 반드시”ks_c_5601-1987″를 선택해야 합니다.메일 Encoding에 관해서는 전의 투고를 참조하십시오.다음에 Preview Area그룹 박스에는 “double-byte characters”와 “single-byte characters”가 각각 표시되고 있습니다.double-byte characters는 한글이나 한자 등처럼 2-Byte크기의 문자를 나타내는 때의 Font의 모양과 크기의 예를 확인할 수 있고, single-byte characters의 경우 알파벳, 숫자 등처럼 1-Byte로 표시할 수 있는 문자를 나타내는 때의 Font의 형태와 크기를 확인할 수 있습니다.다음에 “Range”의 경우 해당 글꼴이 지원하는 문자 조합 중에서 어느 문자 조합까지 변환을 할지 선택함으로써 “ASCII Character(ASCII코드에 나타난 문자 또는 숫자만 변환)”,”All characters(Code에서 지정된 Character Encoding범위 내의 모든 문자 또는 숫자를 변환)”,”Specifed character(기호 등 특수 문자만 변환)”를 선택할 수 있습니다.”Font Name”은 Nextion Editor의 Fonts창에서 선택 하는 변환된 폰트의 이름을 지정하는 장소입니다.폰트 변환이 시작되면 자동으로 선택한 범위 내의 글꼴에 대해서, Nextion Editor에서 자동적으로 폰트 변환을 시작하기 전에 변환된 폰트가 보존되는 위치를 지정합니다.아래의 그림처럼 폰트를 먼저 입력한 Font Name과 같이 저장합니다.

폰트가 저장되는 장소 지정이 모두 완료되면 곧 폰트 변환이 이루어집니다.그 작업은 몇초 이내에 모두 완료하겠으니 잠시만 기다리세요.글꼴 작성이 완료되면 아래와 같이”Font generate finished, size:123,396″이라는 문구를 확인할 수 있습니다. 이 부분은 먼저 지정한 Font Creator의 Code와 Range의 설정에 의해서 다르기 때문에, 참고하세요.본 포스팅의 경우, 완성형 한글 폰트를 모두 변환하였으므로, 변환된 폰트의 용량이 다소 큰 것으로 나타납니다.

그런 다음 변환이 완료된 글꼴을 Nextion Editor에서 사용하기 위해 아래 그림과 같이 변환된 글꼴을 추가할 것인지 묻는 창이 나타납니다. “Yes” 버튼을 클릭하면 Nextion Editor의 Fonts 창에 먼저 지정한 Font Name과 동일한 변환된 글꼴이 등록됨을 확인할 수 있습니다.

2. Text컨트롤 사용 폰트 변환이 모두 완료했으므로, 본격적으로 Nextion Editor가 제공하는 Text컨트롤을 사용하고 봅시다.아래의 그림을 참고, Toolbox에서 “Text”컨트롤을 클릭합니다.클릭하면 동시에 Nextion Editor화면 중앙에 있는 “Display”창에 “newtxt”이라는 문구가 표시되고 있다”t0″이라는 태그가 달린 Text컨트롤이 추가된 것을 볼 수 있습니다.

2. Text 컨트롤 사용 글꼴 변환이 모두 완료되었으므로 본격적으로 Nextion Editor에서 제공하는 Text 컨트롤을 사용해 보겠습니다. 아래 그림을 참고하여 툴박스에서 “Text” 컨트롤을 클릭합니다. 클릭과 동시에 Nextion Editor 화면 중앙에 있는 “Display” 창에 “newtxt”라는 문구가 표시된 “t0″이라는 태그가 붙은 Text 컨트롤이 추가되었음을 확인할 수 있습니다.그럼 Text 컨트롤을 올바르게 사용하기 위해서 아까 추가한 t0 태그의 Text 컨트롤의 Atribute의 각 속성을 확인해 보도록 하겠습니다. 각각의 Atribute 속성명과 속성값의 내용을 아래와 같이 안내하오니 반드시 그 내용을 기준으로 사용하시기 바랍니다.그럼 Text 컨트롤을 올바르게 사용하기 위해서 아까 추가한 t0 태그의 Text 컨트롤의 Atribute의 각 속성을 확인해 보도록 하겠습니다. 각각의 Atribute 속성명과 속성값의 내용을 아래와 같이 안내하오니 반드시 그 내용을 기준으로 사용하시기 바랍니다.한가지 알아 둬야 할 점은 그 그림으로 page0의 Attribute속성 가운데 sta속성을 image로 변경하고 pic속성을 800X480사이즈의 화상을 배치했습니다.다음에 t3 Text컨트롤의 배경 화면을 지정하기 위해서, pic속성을 150X30사이즈의 화상을 배치했습니다.한편, 화상의 추가는 Nextion Editor의 우측 하단에 있는 “Picture”창에서 추가하고 그 창”+”버튼을 클릭하여 화상을 추가할 수 있습니다.그럼 추가한 각각의 Text컨트롤의 Attribute속성을 다음과 같이 나타내므로, 필요한 부분에 맞추어 사용하기 위해서 각각 찾고 확인하세요.Attribute속성 변화에 의해서 Text컨트롤의 표시 변화를 보려면 기본 값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 유심히 보세요.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.한 가지 알아야 할 점은 예시 그림에서 page0의 Attribute 속성 중 sta 속성을 image로 변경하고 pic 속성에 800X480 크기의 이미지를 배치했습니다. 그런 다음 t3 Text 컨트롤의 배경 이미지를 지정하기 위해 pic 속성에 150X30 크기의 이미지를 배치했습니다. 한편, 이미지 추가는 Nextion Editor 오른쪽 하단에 있는 “Picture” 창에서 추가하고 해당 창의 “+” 버튼을 클릭하여 이미지를 추가할 수 있습니다.그러면 추가한 각각의 Text 컨트롤의 Attribute 속성을 아래와 같이 보여드리오니 필요한 부분에 맞게 사용하기 위해서 각각 찾아서 확인해 주시기 바랍니다. Attribute 속성의 변화에 따라 Text 컨트롤의 표시 변화를 보기 위해 기본값을 그대로 사용한 상태에서 특정 속성만 변경한 경우의 차이를 주의 깊게 살펴보시기 바랍니다.그러면 해당 HMI 프로그램을 실행하여 어떻게 실제 보기가 나타나는지 확인해 보겠습니다. Nextion Editor 프로그램 상단 메뉴바에 있는 “Debug” 버튼을 클릭하여 Compile을 수행하고 PC 화면에서 보기를 확인한 후 실제 Nextion HMI 디스플레이 모듈에 해당하는 HMI 프로그램을 다운로드한 후의 모습을 관찰해 보세요.그러면 해당 HMI 프로그램을 실행하여 어떻게 실제 보기가 나타나는지 확인해 보겠습니다. Nextion Editor 프로그램 상단 메뉴바에 있는 “Debug” 버튼을 클릭하여 Compile을 수행하고 PC 화면에서 보기를 확인한 후 실제 Nextion HMI 디스플레이 모듈에 해당하는 HMI 프로그램을 다운로드한 후의 모습을 관찰해 보세요.그러면 해당 HMI 프로그램을 실행하여 어떻게 실제 보기가 나타나는지 확인해 보겠습니다. Nextion Editor 프로그램 상단 메뉴바에 있는 “Debug” 버튼을 클릭하여 Compile을 수행하고 PC 화면에서 보기를 확인한 후 실제 Nextion HMI 디스플레이 모듈에 해당하는 HMI 프로그램을 다운로드한 후의 모습을 관찰해 보세요.그러면 해당 HMI 프로그램을 실행하여 어떻게 실제 보기가 나타나는지 확인해 보겠습니다. Nextion Editor 프로그램 상단 메뉴바에 있는 “Debug” 버튼을 클릭하여 Compile을 수행하고 PC 화면에서 보기를 확인한 후 실제 Nextion HMI 디스플레이 모듈에 해당하는 HMI 프로그램을 다운로드한 후의 모습을 관찰해 보세요.그러면 해당 HMI 프로그램을 실행하여 어떻게 실제 보기가 나타나는지 확인해 보겠습니다. Nextion Editor 프로그램 상단 메뉴바에 있는 “Debug” 버튼을 클릭하여 Compile을 수행하고 PC 화면에서 보기를 확인한 후 실제 Nextion HMI 디스플레이 모듈에 해당하는 HMI 프로그램을 다운로드한 후의 모습을 관찰해 보세요.3. Scrolling text컨트롤을 사용한 반면 이번에는 Scrolling text컨트롤에 대해서 봅시다.새로운 Nextion HMI프로젝트를 작성하도록 하겠습니다.HMI프로젝트 파일 작성 시 Character Encoding은 향후 특히 언급이 없을 경우”ks_c_5601-1987″을 지정하도록 하겠습니다.다음에 먼저 생성한 “16_Gulim”폰트를 Fonts창에 추가합니다.다음에 Scrolling text컨트롤의 각 Atribute속성 변화에 의해서 어떻게 작동하는지를 확인하기 위해서 아래와 같이 Scrolling text컨트롤을 배치합니다.한편 Scrolling text컨트롤의 경우 Text컨트롤과 중복되는 Attribute속성에 대해선 언급하지 않은 차이가 있는 부분만 설명합니다.이 때문에 새 생성한 HMI프로젝트에 g0태그의 Scrolling text컨트롤을 배치했습니다.그럼 g0Scrollingtext의 Attribute속성을 아래에서 확인하고 봅시다.·dir-Right to Left:입력한 문자열을 이동하는 방향을 지정.Left to Right의 경우 왼쪽에서 오른쪽에 문자열이 흐름.Right to Left의 경우 오른쪽에서 왼쪽으로 문자열이 흐름.Up to Down의 경우 위에서 아래로 문자열이 흐름.Down to Up의 경우 아래에서 위에 문자열이 흐름.해당 값을 프로그래밍 때 또는 Nextion HMI동작시에 글 읽기 가능.·tim-150:문자열 스크롤이 진행 속도를 지정.값이 클수록 스크롤 인터벌이 늦게 발생.해당 값을 프로그래밍 때 또는 Nextion HMI동작시에 글 읽기 가능.·dis-4:스크롤을 진행 매 간격마다 문자열을 이동하는 픽셀을 지정.값이 클수록 스크롤 된다 문자열의 위치가 크게 바뀐다.해당 값을 프로그래밍 때 또는 Nextion HMI동작시에 쓸 수 읽기 가능.·en:스크롤 동작을 유효하게 할지를 지정.0의 경우는 스크롤 미분 동작, 1의 경우는 스크롤 동작.해당 값을 프로그래밍 때 또는 Nextion HMI동작시에 쓸 수 읽기 가능.한편 Scrolling text컨트롤을 사용할 때는 1쪽에 최대 6개 Scrolling text컨트롤을 배치할 수 있습니다.이는 Nextion HMI디스플레이 모듈에서 최대한 지원하는 Scrolling text타이머가 6개 있기 때문입니다.그럼 Scrolling text컨트롤을 배치한 화면을 다음과 같이 확인하세요.그래서는 배치된 Scrolling text컨트롤이 각각 어떤 상태의 값으로 Attribute속성이 지정됐는지를 주의 깊게 관찰하세요.스크롤 하는 다양한 방향과 함께 스크롤 인터벌 속성인 tim과 스크롤 때 문자열이 이동하는 픽셀 수에 의해서 변경되는 양상이 바뀌기 때문에, 이 부분에 초점을 맞추고 보세요.이제 배치된 Scrolling text 컨트롤이 각각 어떤 상태의 값으로 Attribute 속성이 지정되었는지 주의 깊게 관찰해 주시기 바랍니다. 스크롤되는 다양한 방향과 함께 스크롤 인터벌 속성인 tim과 스크롤 시 문자열이 이동하는 픽셀 수에 따라 스크롤되는 양상이 달라지므로 이 부분에 포커스를 맞추어 보시기 바랍니다.이제 배치된 Scrolling text 컨트롤이 각각 어떤 상태의 값으로 Attribute 속성이 지정되었는지 주의 깊게 관찰해 주시기 바랍니다. 스크롤되는 다양한 방향과 함께 스크롤 인터벌 속성인 tim과 스크롤 시 문자열이 이동하는 픽셀 수에 따라 스크롤되는 양상이 달라지므로 이 부분에 포커스를 맞추어 보시기 바랍니다.이제 Nextion Editor를 통해 PC 화면 상에서 Scrolling text 컨트롤이 동작하는지 확인하고, 이를 실제 Nextion HMI 디스플레이 모듈에 Scrolling text 컨트롤 HMI 프로그램을 다운로드하여 동작을 확인해 보겠습니다.이제 Nextion Editor를 통해 PC 화면 상에서 Scrolling text 컨트롤이 동작하는지 확인하고, 이를 실제 Nextion HMI 디스플레이 모듈에 Scrolling text 컨트롤 HMI 프로그램을 다운로드하여 동작을 확인해 보겠습니다.이제 Nextion Editor를 통해 PC 화면 상에서 Scrolling text 컨트롤이 동작하는지 확인하고, 이를 실제 Nextion HMI 디스플레이 모듈에 Scrolling text 컨트롤 HMI 프로그램을 다운로드하여 동작을 확인해 보겠습니다.이제 Nextion Editor를 통해 PC 화면 상에서 Scrolling text 컨트롤이 동작하는지 확인하고, 이를 실제 Nextion HMI 디스플레이 모듈에 Scrolling text 컨트롤 HMI 프로그램을 다운로드하여 동작을 확인해 보겠습니다.이제 Nextion Editor를 통해 PC 화면 상에서 Scrolling text 컨트롤이 동작하는지 확인하고, 이를 실제 Nextion HMI 디스플레이 모듈에 Scrolling text 컨트롤 HMI 프로그램을 다운로드하여 동작을 확인해 보겠습니다.4. Number컨트롤의 사용, 이번 글의 마지막 테마인 Number컨트롤에 대해서 봅시다.사람은 단어에서 되는 문자 또는 글과 숫자를 스스로 구분하여 읽습니다만, Nextion HMI등의 HMI에서는 문자열과 숫자는 따로 처리하는 것이 대부분입니다.그래서 숫자를 효과적으로 화면에 표시하기 위해서 Number컨트롤이 있습니다.그럼 Number컨트롤의 Attribute속성에 대해서 먼저 봅시다.아래의 그림은 기본적인 Number컨트롤의 Attribute속성입니다.아까 설명한 Text컨트롤, Scrollingtext컨트롤에서 중복되는 Attribute속성을 제외한 나머지 속성에 대해서만 봅시다.·val-0:해당 컨트롤이 있게 표현하는 값에서 화면에 나타내는 값.·lenth-0:숫자를 표현하는 길이.0의 경우, 숫자 길이에 맞추어 자동적으로 숫자열의 길이가 조절.1이상의 값으로 설정되는 경우·format-Decimal:val속성 값을 표시하는 방식.Decimal의 경우 10진수에서 val의 값을 표현.Currency의 경우 1000단위마다 “,”이 찍힌 상태에서 val의 값을 표현.Hex의 경우 16진수에서 val의 값을 표현. 그럼 Number컨트롤의 각 Atribute속성 값에 따라서, val값이 어떻게 표현되는지를 알아보기 위해서 아래와 같이 Nextion Editor에 Number컨트롤을 배치했습니다.배치한 각각의 Number컨트롤의 Attribute속성의 차이로 val값의 표현이 다르다는 점에 주목하세요.· val – 0 : 해당 컨트롤이 가지고 표현하는 값으로 화면상에 나타내는 값. · lenth – 0 : 숫자를 표현하는 길이. 0일 경우 숫자 길이에 맞춰 자동으로 숫자열 길이 조절. 하나 이상의 값으로 설정되는 경우 · format – Decimal : val 속성값을 표시하는 방식. Decimal의 경우 10진수로 val의 값을 표현. Currency의 경우 1000단위마다 “,”가 눌린 상태에서 val의 값을 표현. Hex의 경우 16진수로 val 값을 표현. 그러면 Number 컨트롤의 각 Atribute 속성 값에 따라 val 값이 어떻게 표현되는지 알아보기 위해 아래 그림과 같이 Nextion Editor에 Number 컨트롤을 배치했습니다. 배치한 각각의 Number 컨트롤의 Attribute 속성 차이에 따라 val 값 표현이 다르다는 점에 주목하십시오.· val – 0 : 해당 컨트롤이 가지고 표현하는 값으로 화면상에 나타내는 값. · lenth – 0 : 숫자를 표현하는 길이. 0일 경우 숫자 길이에 맞춰 자동으로 숫자열 길이 조절. 하나 이상의 값으로 설정되는 경우 · format – Decimal : val 속성값을 표시하는 방식. Decimal의 경우 10진수로 val의 값을 표현. Currency의 경우 1000단위마다 “,”가 눌린 상태에서 val의 값을 표현. Hex의 경우 16진수로 val 값을 표현. 그러면 Number 컨트롤의 각 Atribute 속성 값에 따라 val 값이 어떻게 표현되는지 알아보기 위해 아래 그림과 같이 Nextion Editor에 Number 컨트롤을 배치했습니다. 배치한 각각의 Number 컨트롤의 Attribute 속성 차이에 따라 val 값 표현이 다르다는 점에 주목하십시오.· val – 0 : 해당 컨트롤이 가지고 표현하는 값으로 화면상에 나타내는 값. · lenth – 0 : 숫자를 표현하는 길이. 0일 경우 숫자 길이에 맞춰 자동으로 숫자열 길이 조절. 하나 이상의 값으로 설정되는 경우 · format – Decimal : val 속성값을 표시하는 방식. Decimal의 경우 10진수로 val의 값을 표현. Currency의 경우 1000단위마다 “,”가 눌린 상태에서 val의 값을 표현. Hex의 경우 16진수로 val 값을 표현. 그러면 Number 컨트롤의 각 Atribute 속성 값에 따라 val 값이 어떻게 표현되는지 알아보기 위해 아래 그림과 같이 Nextion Editor에 Number 컨트롤을 배치했습니다. 배치한 각각의 Number 컨트롤의 Attribute 속성 차이에 따라 val 값 표현이 다르다는 점에 주목하십시오.· val – 0 : 해당 컨트롤이 가지고 표현하는 값으로 화면상에 나타내는 값. · lenth – 0 : 숫자를 표현하는 길이. 0일 경우 숫자 길이에 맞춰 자동으로 숫자열 길이 조절. 하나 이상의 값으로 설정되는 경우 · format – Decimal : val 속성값을 표시하는 방식. Decimal의 경우 10진수로 val의 값을 표현. Currency의 경우 1000단위마다 “,”가 눌린 상태에서 val의 값을 표현. Hex의 경우 16진수로 val 값을 표현. 그러면 Number 컨트롤의 각 Atribute 속성 값에 따라 val 값이 어떻게 표현되는지 알아보기 위해 아래 그림과 같이 Nextion Editor에 Number 컨트롤을 배치했습니다. 배치한 각각의 Number 컨트롤의 Attribute 속성 차이에 따라 val 값 표현이 다르다는 점에 주목하십시오.마지막으로 해당 HMI 프로그램을 실행하여 어떻게 실제 보기가 나타나는지 확인해 보겠습니다. Nextion Editor 프로그램 상단 메뉴바에 있는 “Debug” 버튼을 클릭하여 Compile을 수행하고 PC 화면에서 보기를 확인한 후 실제 Nextion HMI 디스플레이 모듈에 해당하는 HMI 프로그램을 다운로드한 후의 모습을 관찰해 보세요.마지막으로 해당 HMI 프로그램을 실행하여 어떻게 실제 보기가 나타나는지 확인해 보겠습니다. Nextion Editor 프로그램 상단 메뉴바에 있는 “Debug” 버튼을 클릭하여 Compile을 수행하고 PC 화면에서 보기를 확인한 후 실제 Nextion HMI 디스플레이 모듈에 해당하는 HMI 프로그램을 다운로드한 후의 모습을 관찰해 보세요.마지막으로 해당 HMI 프로그램을 실행하여 어떻게 실제 보기가 나타나는지 확인해 보겠습니다. Nextion Editor 프로그램 상단 메뉴바에 있는 “Debug” 버튼을 클릭하여 Compile을 수행하고 PC 화면에서 보기를 확인한 후 실제 Nextion HMI 디스플레이 모듈에 해당하는 HMI 프로그램을 다운로드한 후의 모습을 관찰해 보세요.5. 마치고…이래봬도 이번 글에서는 문자열과 숫자열을 나타내는 Nextion Editor가 지원하는 Text컨트롤, Scrolling text컨트롤, Number컨트롤에 대해서 배웠습니다.이번 강의의 포스팅을 통해서, 여러분은 NextionHMI디스플레이 모듈을 이용하고 원하는 문자열을 과거보다 깨끗하고 고급스런 표현이 가능하게 됩니다.이번의 포스팅을 제대로 모방하면서 Nextion Editor과 더 친해진 시간을 보냈으면 좋겠습니다.다음의 포스팅에서는 사용자 입력을 받는 버튼을 보고 싶습니다Button컨트롤, Dual-state button컨트롤, Checkbox, Radio컨트롤입니다.그럼 다음의 포스팅에서 또 뵙겟습니다!