====== AI를 이용한 HMI(UI)개발 (Copilot AI + Qt Designer) ======

본 장에서는 **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가 생성한 코드를 검증/수정하는 직관적 개발 방식 적용

{{ :modularpi:python:aipyhmi:example_sceenshot.png?nolink |}}

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

===== 1. Copilot 설치 =====

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

  * [[https://code.visualstudio.com/docs/copilot/overview|VS Code의 GitHub Copilot 사용법 가이드(필독)]]
  * **주요 기능**: 코드 작성 도움, 기존 코드 설명, 리팩토링, 버그 수정 등

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

{{ :modularpi:python:aipyhmi:setup_copilot.png?nolink |}}

===== 2. main.py에 .ui 등록 =====

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

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

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

{{ :modularpi:python:aipyhmi:project_folder.png?nolink |}}

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

{{ :modularpi:python:aipyhmi:init_vibe.png?nolink |}}

**- 에러 처리 (Resource Error):** 실행 시 리소스 파일(qrc) 미변환 오류가 발생할 경우 다음과 같이 요청합니다.
<code python>
# === Vibe Coding (Ai) ===
# [에러 내용 복사] 후, 발생 원인과 수정 사항을 확인하여 코드를 수정해 주세요.
</code>

{{ :modularpi:python:aipyhmi:errorscreen1.png?nolink |}}

**- 결과 확인:**
{{ :modularpi:python:aipyhmi:formscreen1.png?nolink |}}

:::tip
**한글 깨짐 해결 방법** (터미널 입력):
  * ''sudo apt update''
  * ''sudo apt install fonts-nanum fonts-nanum-coding fonts-nanum-extra''
  * ''sudo fc-cache -fv''
:::

===== 3. HMI 동작 로직 구현 =====

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

{{ :modularpi:python:aipyhmi:31screen.png?nolink |}}

<code python>
# === 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"로 변경.
</code>

{{ :modularpi:python:aipyhmi:3_1_ai_manual.mp4?950x550|}}

==== ✔ CFDI 입력 상태 표시 및 알람 조건 ====
  * 0.3초 주기로 CFDI 입력 상태 램프 업데이트
  * 입력 포트 16개 중 **4개 이상 ON** 시 INPUT 알람 발생

{{ :modularpi:python:aipyhmi:32screen.png?nolink |}}

<code python>
# === 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"로 변경.
</code>

{{url>https://www.youtube.com/embed/KLxUh3C6uu4?si=wCkifxr8p-zqblyi 840,480}}

==== ✔ CFDA 출력 제어 및 상태 조건 ====
  * 삼각 버튼 클릭 시 409 단위(약 1V) 증감
  * **6V 이상 (데이터 2,457 이상)** 시 DA 알람 발생

{{ :modularpi:python:aipyhmi:33screen.png?nolink |}}

<code python>
# === 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'로 변경.
</code>

{{url>https://www.youtube.com/embed/bWKsWJZ7tq8?si=vw90-FJH00X4lkm0 840,480}}

==== ✔ CFAD 상태 및 조건 ====
  * CFAD ch3 채널 입력값 화면 표시 및 게이지 구현
  * 입력 전압 **5V 이상** 시 AD 알람 발생

{{ :modularpi:python:aipyhmi:34screen.png?nolink |}}

<code python>
# === 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"로 변경.
</code>

{{url>https://www.youtube.com/embed/CBUrnekwXK0?si=bZwj7CxNbPshqsBe 840,480}}

---
[[..:index|Python을 이용한 CFNET I/O 개발]]