본 장에서는 AI를 활용하여 Qt Designer로 설계한 HMI UI(.ui 파일)를 기반으로 HMI 프로그램을 개발하는 방법을 설명합니다.

UI 화면은 .ui 파일을 통해 프로그램에 적용되며, 동작 로직은 VS Code 환경에서 Copilot AI 채팅 에이전트 기능을 활용하여 효율적으로 작성합니다.

• Qt Designer: HMI 구성 화면 설계 (.ui 파일 생성)
• VS Code Copilot: .ui 파일과 main.py를 기반으로 프로그램 로직 구현
• Vibe Coding: 개발자의 의도를 자연어로 전달하고 AI가 생성한 코드를 검증/수정하는 직관적 개발 방식 적용

프로젝트 개요
본 예제는 산업 현장 실무에서 사용되는 HMI 구성을 기준으로 제작되었으며, AI를 활용한 단계별 개발 방법과 Vibe Coding 절차를 안내합니다.

Copilot Chat은 VS Code 내부에서 프로젝트 문맥을 이해한 상태로 대화형 AI 지원을 제공합니다.

• VS Code의 GitHub Copilot 사용법 가이드(필독)
• 주요 기능: 코드 작성 도움, 기존 코드 설명, 리팩토링, 버그 수정 등

1. GitHub Copilot 및 GitHub Copilot Chat 확장 프로그램 검색 및 설치
2. GitHub 계정 로그인 및 사용 권한 승인
3. VS Code 우측 하단 상태바에서 Copilot 아이콘 활성화 확인

프로젝트 폴더에 .ui, main.py, 리소스 파일을 배치한 후 AI를 통해 기본 코드를 생성합니다.

• 프로젝트 구성: main.py, .ui, 이미지 파일, Resource.qrc
• 방법: Copilot Agent 기능을 사용하여 실행 가능한 코드 생성

# === Vibe Coding (Ai) 프롬프트 예시 ===
# Qt Designer로 제작한 CFNET_AI.ui 파일을 사용하여 UI를 실행할 수 있는 main.py 기본 프로그램을 작성해 주세요. 
# 실행 환경: Raspberry Pi 5 (Debian Bookworm), Python + PyQt5
# .ui 파일을 로드하여 메인 윈도우를 실행하는 최소한의 기본 구조 코드로 작성 바랍니다.

- 코드 적용: Copilot이 생성한 코드는 [Keep(유지)] 옵션을 선택하여 즉시 적용할 수 있습니다.

- 에러 처리 (Resource Error): 실행 시 리소스 파일(qrc) 미변환 오류가 발생할 경우 다음과 같이 요청합니다.

# === Vibe Coding (Ai) ===
# [에러 내용 복사] 후, 발생 원인과 수정 사항을 확인하여 코드를 수정해 주세요.

- 결과 확인:

:::tip 한글 깨짐 해결 방법 (터미널 입력):

• sudo apt update
• sudo apt install fonts-nanum fonts-nanum-coding fonts-nanum-extra
• sudo fc-cache -fv

:::

• 상단에 실시간 날짜 및 시간 표시
• 운전/정지 버튼에 따른 CFDO 출력 포트(P0, P1) 토글 제어
• 두 버튼 모두 ON일 때 Alarm 출력 점등

# === Vibe Coding (Ai) 프롬프트 ===
# 1. date_time 객체에 현재 날짜와 시간을 표시하는 시계 기능 구현.
# 2. CFRASP.py 모듈의 CFNET 클래스를 통해 cfnet 객체 생성.
# 3. run_btn, step_btn을 토글(setCheckable) 방식으로 설정.
# 4. run_btn은 cf_out 변수의 bit 0, step_btn은 bit 1에 매핑.
# 5. 상태 변경 시 cfnet.digitalWrite(0, cf_out) 호출.
# 6. 두 버튼 모두 ON일 때만 alram_out 이미지를 "Alram_on.png"로 변경.

• 0.3초 주기로 CFDI 입력 상태 램프 업데이트
• 입력 포트 16개 중 4개 이상 ON 시 INPUT 알람 발생

# === Vibe Coding (Ai) ===
# 1. 0.3초 주기로 cfnet.digitalRead(0)를 호출하여 cf_in 정수 변수에 저장.
# 2. cf_in 값을 16진수로 CFDI_0_Value 객체에 표시.
# 3. 16비트 각 비트 상태에 따라 lamp_IN_[i] 이미지를 ON/OFF.png로 업데이트.
# 4. ON 상태 비트가 4개 이상이면 alram_in을 "Alram_on.png"로 변경.

• 삼각 버튼 클릭 시 409 단위(약 1V) 증감
• 6V 이상 (데이터 2,457 이상) 시 DA 알람 발생

# === Vibe Coding (Ai) ===
# 1. cfda_ch0, ch1 변수 초기화 (범위 0~4095 Clamping 처리).
# 2. da[i]_up/down 버튼 클릭 시 409씩 증감 후 cfnet.analogWrite 실행.
# 3. da[i]_value 라벨에 정수 표시, da[i]_v_value에 전압(값/409) 표시.
# 4. 어느 하나라도 2,457 이상이면 alram_da를 'Alram_on.png'로 변경.

• CFAD ch3 채널 입력값 화면 표시 및 게이지 구현
• 입력 전압 5V 이상 시 AD 알람 발생

# === Vibe Coding (Ai) ===
# 1. 100ms마다 cfnet.analogRead(0, 3)로 cfad_ch3 업데이트.
# 2. QLCDNumber(adc_value)와 QProgressBar(adc_bar)에 값 대입.
# 3. cfad_ch3 값이 13,333 이상이면 alram_ad를 "Alram_on.png"로 변경.

— Python을 이용한 CFNET I/O 개발