인피니언 7월21일부터
STM32 퀘스트: GFX 챌린지
콘테스트 프로젝트완료

TouchGFX를 사용한 FM Radio

STM32 퀘스트: GFX 챌린지
r
2023.06.13에 시작
4
좋아요
964
조회
3
댓글
TouchGFX를 사용한 FM Radio
STM32 퀘스트: GFX 챌린지완료
콘테스트 프로젝트 진행 상황

각 Quest를 단계적으로 완성하는 프로젝트입니다.

Quest 1
Quest 2
Quest 3
3 / 2 완료
Quest 1: TouchGFX Designer 환경 활용하기
2023.07.03
완료

퀘스트1을 수행한 결과 파일을 압축하여 첨부하였습니다.

 

Quest 2: STM32H750-DK로 UI 개발하기
2023.07.25
완료

STM32H750B-DK보드와 상호작용 테스트를 하기 위한 디바이스로 조이스틱을 선택하였습니다.

 

아래와 같은식으로 연결합니다.

 

 

후면의 아두이노 아날로그 포트인 A0, A1, A2 포트를 사용하여 조이스틱의 상하좌우 및 클릭 이벤트를 처리하였습니다.

 

 

보드에 전원을 넣으면 아래와 같이 상하/좌우 위치의 ADC 값을 보여주기 위한 Guage와 TextArea가 있으며 화면 중앙에 조이스틱의 현재 위치를 알려 주는 포인터가 있습니다. 조이스틱을 상하좌우로 이동시키면 포인터가 해당 위치로 이동되며 조이스틱을 클릭하면 포인터의 색상이 변경되어 클릭 이벤트를 처리합니다.

 

 

아래는 테스트된 영상입니다.

 

 

Quest 3: TouchGFX를 사용한 FM Radio
2023.08.31
완료

STM32 퀘스트: GFX 챌린지

 

Quest3 : TouchGFX를 사용하여 본인만의 HMI 만들기

 

STM32H750B-DK 보드에 TouchGFX를 사용하여 FM Radio 어플리케이션을 구현해 보았습니다.

 

#하드웨어

FM Radio를 만들기 위해 아래 3가지의 하드웨어를 사용하였습니다.

1. STM32H750B-DK

2. SI4702 FM Radio module

3. PAM8403 Audio amp module

 

최종 결과물이 FM Radio이기 때문에 소리를 출력할 스피커가 필요합니다.

보드에 고정시킬 수 있는 브라켓을 만든 후 스피커를 연결하였습니다.

 

아래 이미지와 같이 STM32H750B-DK보드의 오른쪽에 나사를 사용하여 고정시켰습니다.

 

후면은 서포터를 달아 높이를 조절하였습니다.

 

가지고 있던 라디오 모듈, 오디오 앰프, 스피커를 재활용하여 아래 회로와 같이 연결하였습니다.

 

라디오 모듈이 i2c 통신을 사용하기 때문에 보드 뒷면 아두이노 포트의 3.3V, GND, SCL, SDA 4개의 포트를 사용하였습니다.

 

아래는 위 회로도를 참고하여 와이어 납땜으로 연결한 자작 라디오 모듈입니다.

 

자작한 라디오 모듈을 아두이노 커넥터에 꽂아 쉽게 사용할 수 있도록 하였습니다.

 

# 소프트웨어

ST에서 제공되는 아래 3가지의 프로그램을 사용하여 제작하였습니다.

1. TouchGFX 4.22.0

2. STM32CubeMX 6.8.1

3. STM32CubeIDE 1.12.0

 

먼저 STM32CubeIDE에서 HAL i2c 드라이버를 사용하여 i2c 디바이스를 검색하는 프로그램을 작성 후 라디오 모듈이 제대로 통신이 되는지 확인해 보았습니다.

 

실행해 보니 아래 이미지와 같이 정상적으로 i2c 통신이 되어 SI4702의 slave address인 0x10이 검색되었습니다.

 

이로써 자작한 라디오 모듈과 STM32H750B-DK보드 간의 기본적인 i2c 통신이 정상적으로 동작됨을 확인하였습니다.

 

다음은 라디오 모듈의 세부적인 실제 기능들을 사용하기 위해 몇 가지 API를 작성하였습니다.

 

기본적인 인터페이스 관련 함수를 작성하였으니 사용자가 보다 쉽게 FM Radio를 사용하기 위한 GUI를 작성해 봅니다. TouchGFX Designer를 사용하여 총 4개(Intro/Main/Preset/Volume)의 스크린을 작성하였습니다.

 

- Intro Screen

보드에 전원이 공급되면 아래 4개의 위젯이 상/하/좌/우에서 화면 안쪽으로 이동되는 애니메이션이 보여지고 4초 후에 Main Screen으로 자동 전환됩니다.

 

- Main Screen

Intro 화면 종료 후 보여지는 Main 화면입니다.

아래 이미지는 아직 Power ON이 되지 않은 화면입니다.

 

왼쪽 아래의 전원 버튼을 켜면 Main 화면의 모든 위젯들이 Fade-In 되며 아래 이미지와 같이 활성화 상태로 변경됩니다.

 

반대로 전원 버튼을 끄면 Main 화면의 모든 위젯이 Fade-Out되면서 비활성화 상태로 변경됩니다.

 

 

아래는 메인 화면의 세부적인 기능 설명입니다.

1. 현재 선택한 FM 주파수를 표시합니다.

2. 좌/우 스크롤을 하여 원하는 주파수로 변경할 수 있습니다.

3. 선택된 주파수가 Preset에 있는 주파수일 경우 해당 송출 방송국명이 표시됩니다.

4. FM Radio를 켜고 끌 수 있는 전원 버튼입니다.

5. Preset으로 설정된 방송국 리스트를 보여줍니다.

6. 볼륨 조절 및 Mute 아이콘입니다.

7. 선택된 방송이 Stereo 또는 Mono로 송출되는지 표시됩니다.

8. 선택된 방송의 수신 레벨 및 값이 표시됩니다.

 

- Preset Screen

미리 알려진 방송국 리스트가 표시됩니다.

상하로 스크롤하여 원하는 방송을 선택 후 오른쪽 아래의 Tune 버튼을 클릭하면 선택된 방송으로 재생 전환됩니다.

 

- Volume Screen

메인 화면에서 볼륨 값을 선택하면 아래 화면으로 전환되는데 휠 모양의 컬러바를 drag하여 볼륨 값을 조절할 수 있습니다.

 

#동작영상

유튜브 링크 : https://youtu.be/y_En7Qhbbbg

 

 

프로젝트 자료실

프로젝트를 재현하거나 학습하는데 필요한 모든 자료를 제공합니다.

등록된 자료가 없습니다.

프로젝트 소개

아직 등록된 프로젝트 소개가 없습니다.

코드 & 회로도

등록된 코드/회로 자료가 없습니다.

댓글 3

r
rudals2023.07.17

다음 퀘스트2도 재미있게 준비 할 수 있을것 같습니다. 감사합니다.

z
zenix2023.09.02

역시 잘 만드셨네요 ^^ 수고하셨어요.

r
rudals2023.09.03

감사합니다.