Visuino를 사용한 실시간 시계 및 GC9A01 디스플레이

Visuino를 사용한 실시간 시계 및 GC9A01 디스플레이 

 

1단계: 필요한 준비물

1. 아두이노 UNO (또는 다른 아두이노 또는 ESP )
2. GC9A01 SPI 디스플레이
3. DS1307 RTC 모듈
4. 점퍼선
5. 브레드보드
6. Visuino 프로그램: Visuino 다운로드

 

참고 : 디스플레이에 많은 그래픽을 사용하거나 더 많은 센서/모듈을 사용할 계획이라면 Arduino UNO R4 WiFi와 같이 메모리 용량이 더 큰 보드가 필요할 수 있습니다.

 

 

 

 

2단계: 회로

 

 

 

 

GC9A01 디스플레이 핀 [VCC]을 아두이노 핀 [3.3V] 에 연결하세요 .

GC9A01 디스플레이 핀 [GND]를 아두이노 핀 [GND] 에 연결하세요 .

GC9A01 디스플레이 핀 [SCL]을 Arduino 핀 [13] 에 연결합니다 .

GC9A01 디스플레이 핀 [SDA]을 Arduino 핀 [11] 에 연결합니다 .

GC9A01 디스플레이 핀 [DC]를 아두이노 핀 [9] 에 연결합니다 .

GC9A01 디스플레이 핀 [CS]을 Arduino 핀 [10] 에 연결합니다 .

GC9A01 디스플레이 핀 [RST]을 아두이노 핀 [8] 에 연결합니다 .

엔코더 모듈 핀 [CLK]을 아두이노 디지털 핀 [2] 에 연결합니다 .

엔코더 모듈 핀 [DT]을 아두이노 디지털 핀 [3] 에 연결합니다 .

엔코더 모듈의 [+] 핀을 아두이노의 [5v] 핀 에 연결하세요 .

엔코더 모듈의 [-] 핀을 아두이노 핀 [GND] 에 연결하세요 .

RTC DS1307 모듈의 [VCC] 핀을 아두이노의 [5V] 핀 에 연결합니다 .

RTC DS1307 모듈의 [GND] 핀을 아두이노의 [GND] 핀 에 연결합니다 .

RTC DS1307 모듈의 [SDA] 핀을 아두이노의 [SDA] 핀 에 연결합니다 .

RTC DS1307 모듈의 [SCL] 핀을 아두이노의 [SCL] 핀 에 연결합니다 .

 

3단계: Visuino를 실행하고 Arduino UNO 보드 유형을 선택합니다.

 

Visuino를 실행하고 Arduino UNO 보드 유형을 선택하세요.

 

Visuino를 실행하고 Arduino UNO 보드 유형을 선택하세요.

 

첫 번째 그림과 같이 Visuino를 실행합니다. Visuino에서 Arduino 구성 요소의 " 도구 " 버튼을 클릭합니다(그림 1). 대화 상자가 나타나면 그림 2와 같이 " Arduino UNO "를 선택합니다.

 

4단계: Visuino에서 구성 요소를 추가하고 설정합니다.

 

Visuino에서 구성 요소 추가 및 설정

 

Visuino에서 구성 요소 추가 및 설정

 

Visuino에서 구성 요소 추가 및 설정

 

Visuino에서 구성 요소 추가 및 설정

 

Visuino에서 구성 요소 추가 및 설정

 

Visuino에서 구성 요소 추가 및 설정

 

Visuino에서 구성 요소 추가 및 설정

 

 

1. " 날짜/시간 값 " 구성요소를 추가합니다.
2. " DS1307 " 구성요소를 추가합니다.
3. " 날짜/시간 디코딩(분할) " 구성요소를 추가합니다.
4. " 아날로그 멀티 소스 " 구성 요소를 3개 추가하세요.
5. " 지도 범위 아날로그 " 구성 요소를 3개 추가합니다.
6. " GC9A01 SPI " 구성요소를 추가합니다.
7. " DateTimeValue1 "을 선택하고 속성 창에서 " 값 "에 현재 시간과 날짜를 설정하세요.
8. 속성 창에서 모든 아날로그 멀티 소스 구성 요소의 " 출력 핀 "을 5로 설정하십시오.

 

5단계: Visuino에서 디스플레이 설정

 

Visuino에서 디스플레이 설정하기

 

Visuino에서 디스플레이 설정하기

 

Visuino에서 디스플레이 설정하기

 

Visuino에서 디스플레이 설정하기

 

Visuino에서 디스플레이 설정하기

 

Visuino에서 디스플레이 설정하기

 

Visuino에서 디스플레이 설정하기

 

" Display1 "을 선택하고 속성 창에서 " 배경색 "을 clBisque로, " 방향 "을 goDown으로 설정하십시오.

 

1단계: 디스플레이 설정을 엽니다.

 

다이어그램에서 Display1 구성요소를 두 번 클릭합니다 .

이렇게 하면 디스플레이용 Elements 창이 열립니다 .

" 비스듬한 선 그리기 " 요소를 왼쪽으로 6번 드래그하세요.

" 장면 그리기 "를 왼쪽으로 드래그하세요.

" 타원 그리기 "를 왼쪽으로 드래그하세요.

 

2단계: 그래픽 요소 구성

 

사선 그리기1 :

 

요소 창 에서 Draw Angled Line1 요소를 찾습니다 .

속성 창 에서 다음을 구성하십시오.

시작 시간을 11로 설정하세요 .

종료 값을 90으로 설정합니다 .

X 값을 120으로 설정하세요 .

Y 값을 120으로 설정하세요 .

색상을 aclBlue로 설정

각도를 선택 하고 핀 아이콘을 클릭한 다음 플로트 싱크핀을 선택하세요.

 

사선 그리기2 :

 

요소 창 에서 Draw Angled Line2 요소를 찾습니다 .

속성 창 에서 다음을 구성하십시오.

시작 시간을 11로 설정하세요 .

종료 값을 90으로 설정합니다 .

X 값을 120으로 설정하세요 .

Y 값을 120으로 설정하세요 .

색상을 aclBisque로 설정

각도를 선택 하고 핀 아이콘을 클릭한 다음 플로트 싱크핀을 선택하세요.

 

사선 그리기3 :

 

요소 창 에서 Draw Angled Line3 요소를 찾습니다 .

속성 창 에서 다음을 구성하십시오.

시작 시간을 11로 설정하세요 .

종료 값을 80으로 설정합니다 .

X 값을 120으로 설정하세요 .

Y 값을 120으로 설정하세요 .

색상을 aclBlue로 설정

" 각도 "를 선택하고 핀 아이콘을 클릭한 다음 " 플로트 싱크핀 "을 선택하세요.

 

사선 그리기4 :

 

요소 창 에서 Draw Angled Line4 요소를 찾습니다 .

 

속성 창 에서 다음을 구성하십시오.

시작 시간을 11로 설정하세요 .

종료 값을 80으로 설정합니다 .

X 값을 120으로 설정하세요 .

Y 값을 120으로 설정하세요 .

색상을 aclBisque로 설정

" 각도 "를 선택하고 핀 아이콘을 클릭한 다음 " 플로트 싱크핀 "을 선택하세요.

 

사선 그리기5 :

 

요소 창 에서 각진 선 그리기5 요소를 찾습니다 .

속성 창 에서 다음을 구성하십시오.

시작 시간을 11로 설정하세요 .

종료 값을 100으로 설정합니다 .

X 값을 120으로 설정하세요 .

Y 값을 120으로 설정하세요 .

색상을 aclRed로 설정

" 각도 "를 선택하고 핀 아이콘을 클릭한 다음 " 플로트 싱크핀 "을 선택하세요.

 

사선 그리기6 :

 

요소 창 에서 각진 선 그리기6 요소를 찾습니다 .

속성 창 에서 다음을 구성하십시오.

시작 시간을 11로 설정하세요 .

종료 값을 100으로 설정합니다 .

X 값을 120으로 설정하세요 .

Y 값을 120으로 설정하세요 .

색상을 aclBisque로 설정

각도를 선택 하고 핀 아이콘을 클릭한 다음 플로트 싱크핀을 선택하세요.

 

장면 1 그리기 :

 

요소 창 에서 Draw Scene1 요소를 찾습니다 .

속성 창 에서 요소를 선택 하고 점 3개 버튼을 클릭합니다.

요소 창 에서 '각진 선 그리기' 요소를 12개 추가합니다 .

각 '각진 선 그리기 ' 요소에 대해 다음과 같이 속성을 설정합니다.

 

사선 그리기1 :

 

이름 : 사선 그리기1

속성 :

시작 : 100

각도 : 0

X : 120

색상 : aclBlack

끝 : 120

Y : 120

 

사선 그리기2 :

 

이름 : 사선 그리기2

속성 :

시작 : 100

각도 : 30도

X : 120

색상 : aclBlack

끝 : 120

Y : 120

 

사선 그리기3 :

 

이름 : 사선 그리기3

속성 :

시작 : 100

각도 : 60도

X : 120

색상 : aclBlack

끝 : 120

Y : 120

 

사선 그리기4 :

 

이름 : 사선 그리기4

속성 :

시작 : 100

각도 : 90도

X : 120

색상 : aclBlack

끝 : 120

Y : 120

 

사선 그리기5 :

 

이름 : 사선 그리기5

속성 :

시작 : 100

각도 : 120도

X : 120

색상 : aclBlack

끝 : 120

Y : 120

 

사선 그리기6 :

 

이름 : 사선 그리기6

속성 :

시작 : 100

각도 : 150도

X : 120

색상 : aclBlack

끝 : 120

Y : 120

 

사선 그리기7 :

 

이름 : 사선 그리기7

속성 :

시작 : 100

각도 : 180도

X : 120

색상 : aclBlack

끝 : 120

Y : 120

 

사선 그리기8 :

 

이름 : 사선 그리기8

속성 :

시작 : 100

각도 : 210도

X : 120

색상 : aclBlack

끝 : 120

Y : 120

 

사선 그리기9 :

 

이름 : 사선 그리기9

속성 :

시작 : 100

각도 : 240도

X : 120

색상 : aclBlack

끝 : 120

Y : 120

 

사선10을 그리세요 :

 

이름 : 사선 그리기10

속성 :

시작 : 100

각도 : 270도

X : 120

색상 : aclBlack

끝 : 120

Y : 120

 

사선 그리기11 :

 

이름 : 사선 그리기11

속성 :

시작 : 100

각도 : 300도

X : 120

색상 : aclBlack

끝 : 120

Y : 120

 

사선12를 그리세요 :

 

이름 : 사선 그리기12

속성 :

시작 : 100

각도 : 330도

X : 120

색상 : aclBlack

끝 : 120

Y : 120

Elements 창을 닫으세요 .

 

타원1 그리기 :

 

요소 창 에서 Draw Ellipse1 요소를 찾습니다 .

속성 창 에서 다음을 구성하십시오.

너비를 20으로 설정하세요 .

높이를 19로 설정하세요 .

X 값을 110으로 설정하세요 .

Y 값을 110으로 설정하세요 .

FillColor를 aclBlue로 설정합니다 .

색상을 aclBlue로 설정

 

3단계: 클럭 입력 연결

 

타원1 그리기 :

 

ClockInputPin 을 MultiSource2 핀[핀 0], MultiSource1 핀[핀 0], MultiSource3 핀[핀 0] 에 연결합니다 .

 

사선 그리기1 :

 

ClockInputPin 을 MultiSource2 핀[핀 4] 에 연결합니다 .

 

사선 그리기2 :

 

ClockInputPin 을 MultiSource2 핀[핀 1] 에 연결합니다 .

 

사선 그리기3 :

 

ClockInputPin 을 MultiSource1 핀[핀 4] 에 연결합니다 .

 

사선 그리기4 :

 

ClockInputPin 을 MultiSource1 핀[핀 1] 에 연결합니다 .

 

사선 그리기5 :

 

ClockInputPin 을 MultiSource3 핀[핀 4] 에 연결합니다 .

 

사선 그리기6 :

 

ClockInputPin 을 MultiSource3 핀[핀 1] 에 연결합니다 .

 

6단계: Visuino에서 구성 요소를 연결합니다.

 

 

 

 

" DateTimeValue1 " 핀의 [Out]을 " RealTimeClock1 " 핀의 [Set] 에 연결하십시오.

" RealTimeClock1 " 핀의 [I2C]를 " Arduino " 핀의 [I2C] 에 연결합니다.

" RealTimeClock1 " 핀 [Out]을 " DecodeDateTime1 " 핀 [In] 에 연결합니다.

" DecodeDateTime1 " 핀 [분]을 " MapRange1 " 핀 [입력] 에 연결합니다.

" DecodeDateTime1 " 핀 [Hour]을 " MapRange2 " 핀 [In] 에 연결합니다.

" DecodeDateTime1 " 핀 [초]을 " MapRange3 " 핀 [입력] 에 연결합니다.

" MapRange1 " 핀 [Out]을 " MultiSource2 " 핀 [In] 에 연결합니다.

" MapRange2 " 핀 [Out]을 " MultiSource1 " 핀 [In] 에 연결합니다.

" MapRange3 " 핀 [Out]을 " MultiSource3 " 핀 [In] 에 연결합니다.

" MultiSource2 " 핀[Pin[0]]을 " Display1 " 핀[Elements.Draw Ellipse1.Clock] 에 연결합니다.

" MultiSource2 " 핀[Pin[1]]을 " Display1 " 핀[Elements.Draw Angled Line2.Clock] 에 연결합니다.

" MultiSource2 " 핀[Pin[2]]을 " Display1 " 핀[Elements.Draw Angled Line1.Angle] 에 연결합니다.

" MultiSource2 " 핀[Pin[3]]을 " Display1 " 핀[Elements.Draw Angled Line2.Angle] 에 연결합니다.

" MultiSource2 " 핀[Pin[4]]을 " Display1 " 핀[Elements.Draw Angled Line1.Clock] 에 연결합니다.

" MultiSource1 " 핀[Pin[0]]을 " Display1 " 핀[Elements.Draw Ellipse1.Clock] 에 연결합니다.

" MultiSource1 " 핀[Pin[1]]을 " Display1 " 핀[Elements.Draw Angled Line4.Clock] 에 연결합니다.

" MultiSource1 " 핀[Pin[2]]을 " Display1 " 핀[Elements.Draw Angled Line3.Angle] 에 연결합니다.

" MultiSource1 " 핀[Pin[3]]을 " Display1 " 핀[Elements.Draw Angled Line4.Angle] 에 연결합니다.

" MultiSource1 " 핀[Pin[4]]을 " Display1 " 핀[Elements.Draw Angled Line3.Clock] 에 연결합니다.

" MultiSource3 " 핀[Pin[0]]을 " Display1 " 핀[Elements.Draw Ellipse1.Clock] 에 연결합니다.

" MultiSource3 " 핀[Pin[1]]을 " Display1 " 핀[Elements.Draw Angled Line6.Clock] 에 연결합니다.

" MultiSource3 " 핀[Pin[2]]을 " Display1 " 핀[Elements.Draw Angled Line5.Angle] 에 연결합니다.

" MultiSource3 " 핀[Pin[3]]을 " Display1 " 핀[Elements.Draw Angled Line6.Angle] 에 연결합니다.

" MultiSource3 " 핀[Pin[4]]을 " Display1 " 핀[Elements.Draw Angled Line5.Clock] 에 연결합니다.

" Display1 " 핀[칩 선택]을 Arduino 디지털 핀[10] 에 연결합니다.

" Display1 " 핀[데이터 명령]을 Arduino 디지털 핀[9] 에 연결합니다.

" Display1 " 핀 [Reset]을 Arduino 디지털 핀 [8] 에 연결합니다.

" Display1 " 제어 핀 [SPI]을 Arduino SPI 핀 [In] 에 연결합니다.

 

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

 

 

아두이노 코드 생성, 컴파일 및 업로드

 

Visuino 하단의 " 빌드 " 탭을 클릭하고 올바른 포트가 선택되었는지 확인한 다음 " 컴파일/빌드 및 업로드 " 버튼을 클릭합니다.

 

8단계: 플레이

 

축하합니다! Visuino 프로젝트를 성공적으로 완료하셨습니다. 제가 만든 Visuino 프로젝트 파일을 첨부했습니다. 여기에서 다운로드하여 Visuino에서 열어보실 수 있습니다: https://www.visuino.eu

 

Visuino 파일 다운로드 

 

이 튜토리얼의 원문은 이 링크를 따라가세요.