[강좌]ESP32 4.3" TFT-LCD HMI - 9. SquareLine_Studio + PlatformIO

[2023/05/04] First Start.

소나무 기운 ,  전자제품 개발/생산

[강좌]ESP32 4.3" TFT-LCD HMI - 9.SquareLine_Studio + PlatformIO

오랜만입니다. SquareLine Studio를 사용하여 UI를 작성해 보겠습니다.

우선 SquareLine Studio의 기본 예제와 LCD 기본 예제를 혼합하여 동작 시켜보도록 하겠습니다.

1) SquareLine Studio 설치

2) PlatformIO 프로젝트 생성

3) LCD 예제 소스 합성

4) SquareLine Studio 소스 합성

5) upload

 

순서로 진행하겠습니다.

 

최종 동작 화면입니다.

 

 

SquareLine_Studio 설치

홈페이지에서 다운로드 받아 설치하시면 됩니다.

https://squareline.io/

https://squareline.io/

홈페이지의 다운로드 페이지에서 운영체제에 맞는 파일을 다운로드 받으세요.

유료 프로그램입니다.  30일간 사용이 가능합니다. 이후에는 3가지 옵션이 있습니다.

1) Free : 페이지가 많이 않은 간단한 것은 사용가능합니다.2) Small Business : 저렴한 버전3) Business : 비싼 버전

임베디드용 화면 몇개는 큰 무리 없이 사용이 가능합니다.

회원가입하시고 PERSONAL 버전으로 사용하시면 됩니다.

자세한 설치과정은 따로 설명 드리지 않겠습니다.

 

 

 

 

 

PlatformIO 프로젝트 생성

소VSCode를 이용하여 PlatformIO 프로젝트를 생성합니다.

한글 경로를 지원하는지 의문입니다. 영어 경로를 이용하여 만들도록 하세요.

좌측 확장프로그램에서 PlatformIO를 선택합니다.

QUICK ACCESS 메뉴의 Project & Configuration 메뉴를 더블클릭합니다.

PIO Home sheet가 표시 됩니다.

Home Tab을 선택하고 New Project를 선택해 주면 됩니다.

1) Project Name : TestUI

2) Board : Espressif ESP32-S3-DevKitC-1-N16R8V

3) Framework : Arduino

4) Location : default or other

Click Finish button

 

생성된 프로젝트를 컴파일 해 봅니다.

Build 혹은 아이콘을 눌러 컴파일 해 봅니다.

이상없이 컴파일 되어야 맞습니다.

 

 

 

LCD 예제 소스 합성

지난번 강의에서 사용한 예제 코드를 사용하여 작업합니다.

우선 라이브러리를 프로젝트 폴더 내 lib폴더에 복사합니다.

Arduino_GFX-master

lvgl

XPT2046_Thochscreen-master

세가지 라이브러리를 복사합니다.

 

다음 소스코드를 touch.h를 src\폴더에 복사합니다.

LVGL configuration replacement file\lv_conf.h파일을 lib\lvgl폴더에 복사합니다.

 

컴파일 후 upload해 봅니다. 정상 적으로 동작하는지 컴파일에는 문제가 없는지 확인합니다.

 

 

 

 

SquareLine_Studio 예제 소스 합성

SquareLine_Studio의 예제 소스를 엽니다.

File>New를 선택합니다.

Futuristic_Ebike.epj를 사용하겠습니다.

해상도 480 * 272도 잘 맞습니다. 

기본 화면에서는 기본적인 사용방법은 다른 개발 툴들과 다르지 않습니다.

여러가지 효과와 에니메이션 디자인등을 즉시 적용하고 확인할 수 있습니다.

 

제품에 업로드 하지 않고 동작을 확인해 볼 수 있습니다. 우측 상단의 삼각현 Play버튼을 누르면 실제 동작을 시험해 볼 수 있습니다.

 

파일 추출하기

Export>Export UI Files 선택합니다.

출력할 위치는 PlatformIO 프로젝트의 src폴더에 저장합니다.

 

이렇게 많은 파일이 추가됩니다.

기본적으로 합치는 방법은

setup()함수에서 ui_init();를 호출해 주고

 

loop()함수에서 lv_timer_handler();를 후출해 주면 됩니다.

 

소스코드는 github에 넣어 두었습니다.

https://github.com/pineenergy/TestUI.git

GitHub - pineenergy/TestUI

 

 

 

 

Arduino Upload

빌드, 업로드는 이 아이콘을 사용하셔도 됩니다.

또 화면 하단 스테이터스바의 아이콘을 이용하셔도 됩니다.

 

이제 잘 동작하는지 볼까요?

 

 

 

 

 

문제점 및 남은 과제

동영상을 보시면 화면의 백라이트가 미세하게 떨리는 현상이 있습니다.

PlatformIO에 포함된 arduino 플랫폼의 버전이 낮아서 생기는 문제로 보여집니다. 하지만 아직은 업데이트되지 않아 처리할 방법을 찾아야 했습니다.main.c파일을 ino파일로 바꾸고 사용하는 라이브러리를 arduino라이브리 폴더로 보내고 arduino ide에서 컴파일하였더니 증상이 사라졌습니다.

 

PC에서는 버튼을 누를때 버튼 아래쪽에서 조명이 들어오듯 주황색 표시가 되는 실 제품에서는 보이지 않습니다.원인을 찾아봐야 겠습니다. 아시는 분 있으시면 댓글 부탁드립니다.

 

 

 

마무리

시리얼 통신을 적용하여 반응하도록 정의하면 기본적으로 마무리 되겠습니다.SquareLine Studio 사용법을 추가해야 할지 SD card 제어 혹은 I2S 오디오제어를 추가하는 방법을 해 볼수도 있겠습니다.

 

이후의 작업들은 HMI에 한정된 이야기가 아니니 별도로 두룰수도 있습니다.수고하셨습니다.

 

 

참고문헌

 

 

 

 

 

 

 

틀린 부분이나 질문은 댓글 달아주세요.

즐거운 하루 보내세요. 감사합니다.