PLKIT-FE.dashboard

Enact 기반의 스마트팜 대시보드로, Sandstone UI와 Node-RED를 활용하여 직관적인 UI와 실시간 데이터 모니터링 기능을 제공합니다. 각종 센서 데이터를 수집하여 스마트팜 시스템의 효율적인 관리를 돕는 한편, 사용자의 접근성을 고려하여 간편한 모듈화를 지원합니다.

---

목차

1. 개요
2. 주요 기능
3. 구성 및 UI
4. Node-RED 데이터 흐름
5. 통신 방식
6. 기술 스택
7. webOS 활용 장점
8. 프로젝트 파일 구조

---

개요

이 프로젝트는 스마트팜 관리의 편리성을 제공하기 위해 WebSocket 네트워크 연결을 지원하는 모듈화된 시스템을 구축합니다. 사용자는 Enact UI를 통해 직관적으로 대시보드를 사용할 수 있으며, Node-RED를 통해 데이터 흐름을 시각화하여 실시간으로 시스템 상태를 모니터링하고 관리할 수 있습니다.

---

주요 기능

• Overview
  스마트팜 데이터를 차트 및 그래프 형태로 시각화하여 관리할 수 있습니다. AI 기반 생장 예측 기능을 통해 작물의 생장 주기를 미리 파악하고, 스마트팜 환경을 최적화하는 데 도움을 줍니다.

• Control
  원격으로 스마트팜을 제어할 수 있는 기능을 제공합니다. WebSocket 통신을 통해 팬, 히터, LED와 같은 장치를 실시간으로 조작하여 스마트팜 환경을 조정할 수 있습니다.

• Video Streaming
  원격에서 실시간으로 스마트팜의 상태를 비디오로 확인할 수 있습니다. ESP32 카메라를 활용하여 스마트팜 환경을 모니터링합니다.

• Flow Editor
  Node-RED를 통해 데이터 흐름을 사용자가 직접 제어하고 확인할 수 있습니다. 드래그 앤 드롭 방식으로 인터페이스를 구성하여 스마트팜 데이터 흐름을 유연하게 관리할 수 있습니다.

• Community
  사용자가 재배한 스마트팜 데이터를 공유하고 판매할 수 있는 커뮤니티 기능을 제공합니다. 스마트팜 관련 지식을 교류하고 데이터를 거래하여 스마트팜 생태계를 활성화할 수 있습니다.

• AI Chat
  AI 챗봇을 통해 사용자에게 스마트팜 관리에 필요한 도움을 제공합니다. 사용자는 질문을 통해 자동화된 도움을 받을 수 있습니다.

---

구성 및 UI

1. Overview

   • 설명: 센서 데이터를 실시간으로 모니터링하고, 그래프 및 차트를 통해 시각적으로 표현합니다. 스마트팜의 상태를 한눈에 파악하고, 필요한 조치를 신속하게 취할 수 있습니다.
   • 구성 요소:
     • Farm Air Temperature and Humidity: 온도 및 습도를 모니터링하여 작물 생육 상태를 체크합니다.
     • Water Level: 물, 영양분, 재활용수 등 스마트팜의 수위 상태를 확인합니다.
     • Illumination: 조도를 측정하여 빛의 양을 조절할 수 있습니다.
     • AI 예측 데이터: Water vs Nutrient 차트를 통해 AI 예측값을 반영하여 자원의 적절한 사용 시기를 파악할 수 있습니다.

2. Control

   • 설명: 각 모듈을 원격으로 제어할 수 있는 기능을 제공합니다. MQTT 프로토콜을 통해 센서로부터 실시간 데이터를 수신하여 UI에 즉각 반영됩니다.
   • 구성 요소:
     • Fan/Heater/LED Light: 스위치를 통해 각 장치를 온오프 할 수 있습니다.
     • Pump: 슬라이드와 버튼을 통해 물의 레벨을 조절하고, 각 탱크를 관리할 수 있습니다.

3. Community

   • 설명: 스마트팜 데이터를 공유하고 판매할 수 있는 커뮤니티 기능을 제공합니다. 스마트팜 관련 지식과 데이터를 교류하며 스마트팜 생태계를 구축합니다.
   • 주요 기능:
     • 데이터 거래: 스마트팜에서 모은 데이터를 거래하여 사용자 간의 생태계 활성화.
     • 지식 교류: 스마트팜 운영에 필요한 정보 공유.

4. AI Chat
   

   • 설명: AI 챗봇을 통해 스마트팜 관리와 관련된 도움을 사용자에게 제공합니다.
   • 주요 기능:
     • 상담 자동화: 사용자가 질문을 하면 자동으로 답변을 제공, 스마트팜 운영에 필요한 정보를 빠르게 습득.
     • 데이터 기반 상담: 각종 데이터를 기반으로 작물 관리에 필요한 실질적인 조언을 제공합니다.

5. Video Streaming

   • 설명: ESP32 카메라를 활용하여 스마트팜을 실시간으로 원격 모니터링합니다.
   • 주요 기능:
     • 실시간 영상 스트리밍: 사용자가 언제 어디서나 스마트팜의 상태를 확인할 수 있도록 비디오 스트리밍을 지원합니다.

6. Node-RED 데이터 흐름

   • 설명: Node-RED를 활용하여 데이터 흐름을 시각적으로 표현하고 관리합니다. 센서 데이터 수집부터 클라우드 저장, 그리고 AI 분석까지 모든 과정을 직관적으로 확인할 수 있습니다.
   • 주요 기능:
     • 드래그 앤 드롭 인터페이스: 간편한 인터페이스를 통해 데이터 흐름을 자유롭게 구성 및 수정 가능.
     • 실시간 데이터 모니터링: 데이터 흐름 모니터링을 통해 시스템 오류 발생 시 신속하게 문제 해결 가능.

---

통신 방식

• 데이터 통신: 스마트팜의 데이터를 백엔드 서버와 HTTP 통신을 통해 주고받습니다. 이를 통해 시스템 상태와 AI 예측 데이터를 주기적으로 갱신하며, 효율적인 데이터 관리와 안정성을 제공합니다.

• 제어 통신: WebSocket 통신을 활용하여 스마트팜의 원격 제어를 실시간으로 처리합니다. 이를 통해 팬, 히터, LED 등의 장치를 신속하게 제어할 수 있으며, 사용자는 웹 인터페이스를 통해 직관적인 조작이 가능합니다.

---

기술 스택

• 프레임워크: Enact (Sandstone UI)
• 데이터 흐름 관리: Node-RED
• 모니터링 및 제어: 온습도 센서 (DHT22), 조도 센서 (CDS), 수온 센서, TDS 센서
• 통신 프로토콜: WebSocket, HTTP

---

webOS 활용 장점

Important

IPK 파일 패키징을 통한 손쉬운 배포
PLKIT 프로젝트는 webOS 환경에 맞춰 IPK 파일로 패키징하여 배포할 수 있습니다. 이로 인해 webOS 기기에서 스마트팜 관리 앱을 손쉽게 설치하고 유지 관리할 수 있습니다. 이를 통해 다양한 webOS 디바이스에서도 간편하게 작동하여 접근성을 높입니다.

Tip

멀티미디어 성능 최적화
PLKIT는 webOS의 멀티미디어 성능을 최대로 활용하여 실시간 고화질 비디오 스트리밍을 원활하게 제공합니다. 사용자는 스마트팜의 상태를 실시간으로 모니터링할 수 있으며, webOS의 화면 크기에 맞춰 최적의 품질을 유지합니다.

Tip

다양한 디바이스 지원
webOS는 스마트 TV, 스마트폰, IoT 기기 등 다양한 디바이스에서 활용될 수 있으며, PLKIT 프로젝트는 이러한 다양한 플랫폼에서 호환됩니다. 이를 통해 사용자는 원하는 기기에서 스마트팜을 관리할 수 있습니다.

Note

일관된 사용자 경험 제공
webOS의 강력한 UX 프레임워크를 활용하여 일관되고 직관적인 사용자 경험을 제공합니다. Enact 프레임워크와 결합된 UI는 webOS와 자연스럽게 통합되며, 사용자에게 친숙한 인터페이스를 제공합니다.

---

프로젝트 파일 구조

PLKIT-FE.dashboard
├── .env                  # 환경 변수 설정 파일
├── .gitignore            # Git에서 제외할 파일 목록
├── package-lock.json     # npm 패키지 종속성 관리 파일
├── package.json          # 프로젝트 설정 파일
├── README.md             # 프로젝트 설명 파일
├── src
│   ├── App
│   │   ├── App.js                  # 애플리케이션 메인 컴포넌트
│   │   └── App.module.less         # 메인 스타일 파일
│   ├── assets                      # 프로젝트에 필요한 이미지 및 아이콘
│   ├── components                  # UI 컴포넌트 폴더
│   │   ├── ChatGPTComponent.js     # AI 챗봇 컴포넌트
│   │   ├── Community.js            # 커뮤니티 기능 컴포넌트
│   │   ├── Control.js              # 원격 제어 컴포넌트
│   │   ├── Overview.js             # 데이터 시각화 대시보드
│   │   ├── VideoStream.js          # 실시간 비디오 스트리밍 컴포넌트
│   │   └── (기타 컴포넌트들)
│   ├── hooks                       # 커스텀 훅 폴더
│   │   ├── usePredictionData.js    # AI 예측 데이터 훅
│   │   └── useSmartFarmData.js     # 스마트팜 데이터 관리 훅
│   ├── utils
│   │   └── exportChart.js          # 차트 내보내기 유틸리티
│   └── views
│       └── MainPanel.js            # 대시보드 메인 화면
├── public
│   ├── index.html                  # HTML 템플릿 파일
│   └── imgs                        # 이미지 파일 폴더
└── node_modules                    # 프로젝트 의존성 모듈