ILI9341 2.4인치 TFT 터치스크린 실드에서 비트맵 애니메이션 구현하기 (Visuino 활용)

부품 및 소모품

아두이노 우노 (Arduino UNO)	1개
ILI9341 2.4" TFT 터치스크린 실드 (아두이노용)	1개

앱 및 온라인 서비스

• Visuino - 아두이노용 그래픽 개발 환경
• 아두이노 IDE (버전 1.6.7 이상 필수)

프로젝트 소개

ILI9341 기반 TFT 터치스크린 실드는 아두이노용으로 널리 쓰이는 저비용 디스플레이 실드입니다. Visuino는 오래전부터 이를 지원했지만, 최근 디스플레이 사용 문의가 늘어 튜토리얼을 작성하게 되었습니다.

이 튜토리얼에서는 실드를 아두이노에 연결하고, Visuino로 프로그래밍해 비트맵이 화면 위를 움직이는 애니메이션을 만드는 방법을 단계별로 설명합니다.

1단계: 부품 준비

• 아두이노 우노 호환 보드 (메가도 가능할 수 있으나 미테스트)
• ILI9341 2.4" TFT 터치스크린 실드

2단계: TFT 실드 장착

사진과 같이 TFT 실드를 아두이노 우노 위에 꽂기만 하면 됩니다.

3단계: Visuino 실행 및 TFT 디스플레이 실드 추가

1. 아두이노 IDE(버전 1.6.7 이상)와 Visuino를 설치하세요.
2. Visuino를 실행하고 아두이노 컴포넌트의 '화살표 아래' 버튼을 클릭해 드롭다운 메뉴를 여세요.
3. '실드 추가...'를 선택하세요.
4. '디스플레이' 카테고리에서 'TFT 컬러 터치스크린 디스플레이 ILI9341 실드'를 선택하고 '+' 버튼으로 추가하세요.

4단계: 텍스트 그림자용 Draw Text 요소 추가

1. Object Inspector에서 'TFT Display' 요소의 'Elements' 속성 옆 '...' 버튼을 클릭하세요.
2. Elements 편집기에서 'Draw Text'를 선택하고 '+' 버튼으로 추가하세요.
3. 속성 설정:
   • Color: aclSilver (그림자 색)
   • Size: 4
   • Text: Visuino
   • X: 43, Y: 278 (약간 오프셋)

5단계: 텍스트 전경용 Draw Text 요소 추가

1. 다시 'Draw Text'를 추가하세요.
2. 속성 설정:
   • Size: 4
   • Text: Visuino
   • X: 40, Y: 275 (그림자보다 약간 위쪽)

6단계: 애니메이션용 Draw Bitmap 요소 추가

1. Elements 편집기에서 'Draw Bitmap'을 선택하고 추가하세요.
2. Object Inspector에서 'Bitmap' 속성 옆 '...' 버튼을 클릭해 '비트맵 에디터'를 여세요.
3. 'Load...' 버튼으로 비트맵 파일을 선택하세요. (파일이 너무 크면 아두이노 메모리 부족 오류 발생 가능)
4. 'OK'로 닫으세요.

7단계: Draw Bitmap의 X, Y 속성에 핀 추가

1. 'Draw Bitmap1' 요소의 X 속성 앞 'Pin' 버튼을 클릭하고 'Integer SinkPin'을 선택하세요.
2. Y 속성에도 동일하게 'Integer SinkPin'을 추가하세요.

8단계: 정수 사인파 생성기 2개 추가 및 첫 번째 설정

1. Component Toolbox 필터에 'sine' 입력 후 'Sine Integer Generator'를 설계 영역에 2개 배치하세요.
2. SineIntegerGenerator1 설정:
   • Amplitude: 96
   • Offset: 96
   • Frequency: 0.2

9단계: 두 번째 사인파 생성기 설정 및 비트맵 X, Y 핀 연결

1. SineIntegerGenerator2 설정:
   • Amplitude: 120
   • Offset: 120
   • Frequency: 0.03
2. 연결:
   • SineIntegerGenerator1 Out → Draw Bitmap1 X 핀
   • SineIntegerGenerator2 Out → Draw Bitmap1 Y 핀

10단계: Start 및 Clock Multi Source 컴포넌트 추가 및 연결

비트맵을 X, Y 위치 업데이트마다 렌더링하려면 클록 신호가 필요합니다. 위치 변경 후 그리기 명령이 순차적으로 실행되도록 동기화합니다.

1. 'Repeat' 컴포넌트 추가 (지속적 이벤트 생성)
2. 'Clock Multi Source' 컴포넌트 추가 (순차적 이벤트 2개 생성)
3. 연결:
   • Repeat1 Out → ClockMultiSource1 In
   • ClockMultiSource1 Pin[0] Out → SineIntegerGenerator1 In
   • ClockMultiSource1 Pin[1] Out → SineIntegerGenerator2 In
   • ClockMultiSource1 Pin[2] Out → Draw Bitmap1 Clock 핀

11단계: 아두이노 코드 생성, 컴파일, 업로드

1. Visuino에서 F9 또는 툴바 버튼을 눌러 코드 생성 후 아두이노 IDE 열기
2. 아두이노 IDE에서 '업로드' 버튼 클릭

12단계: 실행 및 감상

축하합니다! 프로젝트가 완료되었습니다. 비트맵이 ILI9341 TFT 화면 위를 움직이는 것을 볼 수 있습니다.

완성된 Visuino 프로젝트 파일과 비트맵(Visuino 로고)은 여기서 다운로드 가능합니다.