ILI9341 TFT 터치스크린 디스플레이 실드의 비트맵 애니메이션

구성품 및 소모품

Arduino UNO

ILI9341 2.4" Arduino용 TFT 터치스크린 실드

앱 및 온라인 서비스

Visuino - Arduino용 그래픽 개발 환경

Arduino IDE

이 프로젝트 정보

ILI9341 기반 TFT 터치스크린 디스플레이 실드 매우 인기 있는 저렴한 디스플레이 쉴드 Arduino용 . 비수이노 은(는) 꽤 오랫동안 지원해 왔지만 사용 방법에 대한 자습서를 작성할 기회가 없었습니다. 그러나 최근에 Visuino와 함께 디스플레이 사용에 대해 질문하는 사람이 거의 없었습니다. , 그래서 튜토리얼을 만들기로 했습니다.

이 튜토리얼에서는 Shield를 Arduino에 연결하는 것이 얼마나 쉬운지 보여줄 것입니다. , Visuino로 프로그래밍 디스플레이에서 이동할 비트맵을 애니메이션합니다.

1단계:구성요소

<울>

하나의 Arduino Uno 호환 가능한 보드(Mega에서도 작동할 수 있지만 아직 쉴드를 테스트하지 않았습니다)

<울>

하나의 ILI9341 2.4" Arduino용 TFT 터치스크린 실드

2단계:ILI9341 TFT 터치스크린 디스플레이 실드를 Arduino에 연결

TFT 실드 연결 Arduino Uno 위에 그림과 같이.

3단계:Visuino를 시작하고 TFT 디스플레이 실드 추가

Arduino 프로그래밍을 시작하려면 Arduino IDE가 있어야 합니다. 여기에서 설치:http://www.arduino.cc/.

1.6.7 이상을 설치해야 합니다. 그렇지 않으면 이 튜토리얼이 작동하지 않습니다!

비수이노 :https://www.visuino.com도 설치해야 합니다.

<울>

Visuino 시작 첫 번째 사진과 같이

<울>

'아래쪽 화살표를 클릭합니다. " 드롭다운 메뉴를 여는 Arduino 구성 요소의 " 버튼(그림 1 )

<울>

메뉴에서 "방패 추가...를 선택합니다. " (그림 1 )

<울>

"방패 " 대화상자 확장 "디스플레이 " 카테고리에서 "TFT 컬러 터치 스크린 디스플레이 ILI9341 Shield를 선택합니다. "를 클릭한 다음 "+ " 버튼을 눌러 추가(그림 2 )

4단계:Visuino에서:텍스트 그림자에 대한 그리기 텍스트 요소 추가

다음으로 텍스트와 비트맵을 렌더링하기 위해 Graphics 요소를 추가해야 합니다. 먼저 텍스트의 그림자를 그리는 그래픽 요소를 추가합니다.

<울>

Object Inspector에서 "... "요소 값 옆에 있는 " 버튼 "TFT 디스플레이 속성 " 요소(그림 1 )

<울>

요소 편집기에서 "텍스트 그리기를 선택합니다. "를 클릭한 다음 "+ " 버튼(그림 2 ) 하나 추가(그림 3 )

<울>

Object Inspector에서 "Color "텍스트 그리기1의 " 속성 " 요소를 "aclSilver로 " (그림 3 )

<울>

Object Inspector에서 "크기 "텍스트 그리기1의 " 속성 " 요소를 "4로 " (그림 4 ). 이렇게 하면 텍스트가 커집니다

<울>

Object Inspector에서 "텍스트 "텍스트 그리기1의 " 속성 " 요소를 "Visuino로 " (그림 5 )

<울>

Object Inspector에서 "X "텍스트 그리기1의 " 속성 " 요소를 "43으로 " (그림 6 )

<울>

Object Inspector에서 "Y "텍스트 그리기1의 " 속성 " 요소를 "278로 " (그림 6 )

5단계:Visuino에서:텍스트 전경에 그리기 텍스트 요소 추가

이제 텍스트를 그리기 위해 그래픽 요소를 추가합니다.

<울>

요소 편집기에서 "텍스트 그리기를 선택합니다. "를 클릭한 다음 "" 버튼(그림 1 ) 두 번째 항목 추가(그림 2 )

<울>

Object Inspector에서 "크기 "텍스트 그리기1의 " 속성 " 요소를 "4로 " (그림 2 )

<울>

Object Inspector에서 "텍스트 "텍스트 그리기1의 " 속성 " 요소를 "Visuino로 " (그림 3 )

<울>

Object Inspector에서 "X "텍스트 그리기1의 " 속성 " 요소를 "40으로 " (그림 4 )

<울>

Object Inspector에서 "Y "텍스트 그리기1의 " 속성 " 요소를 "275로 " (그림 4 )

6단계:Visuino에서:애니메이션에 대해 그리기 비트맵 요소 추가

다음으로 비트맵을 그리기 위해 그래픽 요소를 추가합니다.

<울>

요소 편집기에서 "비트맵 그리기를 선택합니다. "를 클릭한 다음 "" 버튼(그림 1 ) 하나 추가(그림 2 )

<울>

Object Inspector에서 "... "비트맵 값 옆에 있는 " 버튼 "Draw Bitmap1 속성 " 요소(그림 2 ) "비트맵 편집기를 엽니다. " (그림 3 )

<울>

"비트맵 편집기 " "로드...를 클릭합니다. " 버튼(그림 3 ) 파일 열기 대화 상자를 엽니다(그림 4 )

<울>

파일 열기 대화 상자에서 그릴 비트맵을 선택하고 "열기 " 버튼(그림 4 ). 파일이 너무 크면 Arduino 메모리에 맞지 않을 수 있습니다. 컴파일하는 동안 메모리 부족 오류가 발생하면 더 작은 비트맵을 선택해야 할 수 있습니다.

<울>

"비트맵 편집기 " "확인을 클릭합니다. .' 버튼(그림 5 ) 대화 상자를 닫습니다.

7단계:Visuino에서:비트맵 요소 그리기의 X 및 Y 속성에 대한 핀 추가

Bitmap에 애니메이션을 적용하려면 X 및 Y 위치를 제어해야 합니다. 이를 위해 X 및 Y 속성에 대한 핀을 추가합니다.

<울>

Object Inspector에서 "핀 "X 앞의 " 버튼 "Draw Bitmap1 속성 " 요소(그림 1 ), "정수 SinkPin을 선택합니다. " (그림 2 )

<울>

Object Inspector에서 "핀 "Y 앞의 " 버튼 "Draw Bitmap1 속성 " 요소(그림 3 ), "정수 SinkPin을 선택합니다. " (그림 4 )

8단계:Visuino에서:2개의 정수 사인 생성기를 추가하고 첫 번째 생성기를 구성합니다.

2개의 정수 사인 생성기를 사용하여 비트맵 이동에 애니메이션을 적용합니다.

<울>

"사인 입력 Component Toolbox의 Filter 상자에서 "를 선택한 다음 "Sine Integer Generator " 구성요소(그림 1 ) 및 두 개를 삭제합니다. 디자인 영역에서

<울>

Object Inspector에서 "Amplitude SineIntegerGenerator1의 " 속성 구성요소를 "96으로 " (그림 2 )

<울>

Object Inspector에서 "Offset SineIntegerGenerator1의 " 속성 구성요소를 "96으로 " (그림 3 )

<울>

Object Inspector에서 "Frequency SineIntegerGenerator1의 " 속성 구성요소를 "0.2로 " (그림 4 )

9단계:Visuino에서:두 번째 사인 생성기를 구성하고 사인 생성기를 Bitmap의 X 및 Y 좌표 핀에 연결합니다.

<울>

Object Inspector에서 "Amplitude SineIntegerGenerator2의 " 속성 구성요소를 "120으로 " (그림 1 )

<울>

Object Inspector에서 "Offset SineIntegerGenerator2의 " 속성 구성요소를 "120으로 " (그림 2 )

<울>

Object Inspector에서 "Frequency SineIntegerGenerator2의 " 속성 구성요소를 "0.03으로 " (그림 3 )

<울>

연결 "출력 " SineIntegerGenerator1 의 출력 핀 "X에 대한 구성요소 "Shields.TFT Sisplay.Elements.Draw Bitmap1의 " 입력 핀 Arduino의 " 요소 구성요소(그림 4 )

<울>

연결 "출력 " SineIntegerGenerator2 출력 핀 "Y 구성요소 "Shields.TFT Display.Elements.Draw Bitmap1의 " 입력 핀 Arduino의 " 요소 구성요소(그림 5 )

10단계:Visuino에서:시작 및 클록 다중 소스 구성 요소 추가 및 연결

X 및 Y 위치가 업데이트될 때마다 비트맵을 렌더링하려면 "Draw Bitmap1" 요소에 클럭 신호를 보내야 합니다. 위치가 변경된 후 명령을 보내려면 이벤트를 동기화하는 방법이 필요합니다. 이를 위해 반복 구성 요소를 사용하여 이벤트를 지속적으로 생성하고 클럭 다중 소스를 사용하여 2개의 이벤트를 순차적으로 생성합니다. 첫 번째 이벤트는 사인 생성기를 클럭하여 X 및 Y 위치를 업데이트하고 두 번째 이벤트는 "Draw Bitmap1"을 클럭합니다.

<울>

"반복 입력 Component Toolbox의 Filter 상자에서 "를 선택한 다음 "반복 " 구성요소(그림 1 ), 디자인 영역에 드롭합니다(그림 2 )

<울>

"멀티 입력 Component Toolbox의 Filter 상자에서 "를 선택한 다음 "Clock Multi Source " 구성요소(그림 2 ), 디자인 영역에 드롭합니다(그림 3 )

<울>

연결 "출력 Repeat1 의 " 출력 핀 "In에 대한 구성요소 ClockMultiSource1의 " 입력 핀 구성요소(그림 3 )

<울>

"핀[ 0 ] 연결 "Out의 " 출력 핀 ClockMultiSource1의 " 핀 "In에 대한 구성요소 SineIntegerGenerator1의 " 입력 핀 구성요소(그림 4 )

<울>

"핀[ 0 ] 연결 "Out의 " 출력 핀 ClockMultiSource2의 " 핀 "In에 대한 구성요소 SineIntegerGenerator1의 " 입력 핀 구성요소(그림 5 )

<울>

"핀[ 1 ] 연결 "시계의 " 출력 핀 "Shields.TFT Display.Elements.Draw Bitmap1의 " 입력 핀 Arduino의 " 요소 구성요소(그림 6 )

11단계:Arduino 코드 생성, 컴파일 및 업로드

<울>

Visuino에서 , F9 키를 누릅니다. 또는 그림 1에 표시된 버튼을 클릭하세요. Arduino 코드를 생성하고 Arduino IDE를 엽니다.

<울>

Arduino IDE에서 , 업로드를 클릭합니다. 버튼을 사용하여 코드를 컴파일하고 업로드합니다(그림 2 )

12단계:그리고 재생...

축하합니다! 프로젝트를 완료했습니다.

사진 2, 3, 4, 5 및 동영상 연결되고 전원이 켜진 프로젝트를 보여줍니다. ILI9341 기반 TFT 터치스크린 디스플레이 실드 주변에서 움직이는 Bitmap을 볼 수 있습니다. 동영상에서 볼 수 있듯이 .

그림 1에서 완전한 Visuino를 볼 수 있습니다. 도표입니다. Visuino도 첨부되어 있습니다. 이 튜토리얼을 위해 만든 프로젝트와 Visuino가 있는 비트맵 심벌 마크. Visuino에서 다운로드하여 열 수 있습니다. :https://www.visuino.com

FPHWHL0IV0AHJLX.zip

Arduino만 사용하는 DTMF 디코더 아날로그 센서가 있는 기압 측정 장치

제조공정

3D 프린팅

자동화 제어 시스템

산업기술