powerflow display

PowerFlow-Display

Raspberry Pi Hat과 같은 감소 된 크기 화면에 480x320의 해상도에 주택 전력 흐름을 표시하는 것을 목표로했습니다.

이 저장소에서 홈 어시스턴트를 위해 수행 한 작업을 강력하게 영감하고 기반

Qwik을 사용 하여이 프레임 워크에 대한 첫 번째 시도입니다. 조언이 있으면 문제를 제기하십시오.

작동 방식

이 프로젝트는 WebSocket을 통해 MQTT 브로커에 연결합니다 (일반적으로 기본적으로 비활성화). 브로커 구성은 src/routes/index.tsx 에서 수정할 수 있습니다

MQTT에서 다음 메시지를 기대합니다.

• powerinfo/grid : 그리드에 소비되거나 주입 된 전력 (주입 된 경우 음수)
• powerinfo/house : 집에서 소비 된 힘
• powerinfo/solar : 태양 전지판이 생산하는 전력
• powerinfo/heat : 가열로 소비되는 전력

프로젝트 구조

이 프로젝트는 QWIK와 QWIKCITY를 사용하고 있습니다. QWIKCITY는 QWIK 위에 추가 도구 세트 일뿐 아니라 디렉토리 기반 라우팅, 레이아웃 등을 포함하여 전체 사이트를보다 쉽게 구축 할 수 있습니다.

프로젝트 내부에는 다음 디렉토리 구조가 표시됩니다.

 ├── public/
│   └── ...
└── src/
    ├── components/
    │   └── ...
    └── routes/
        └── ...

• src/routes : 디렉토리 기반 라우팅을 제공하며, 레이아웃의 계층 구조를 포함 할 수 있습니다 layout.tsx 레이아웃 파일 및 index.tsx 파일은 페이지로 표시됩니다. 또한 index.ts 파일은 엔드 포인트입니다. 자세한 내용은 라우팅 문서를 참조하십시오.

• src/components : 구성 요소 권장 디렉토리.

• public : 이미지와 같은 정적 자산은 공개 디렉토리에 배치 할 수 있습니다. 자세한 내용은 Vite Public Directory를 참조하십시오.

통합 및 배포를 추가하십시오

yarn qwik add 명령을 사용하여 추가 통합을 추가하십시오. 통합의 일부 예로는 CloudFlare, NetLify 또는 Express Server 및 STAT (STATIC Site Generator)가 있습니다.

yarn qwik add # or `yarn qwik add` 

개발

개발 모드는 Vite의 개발 서버를 사용합니다. 개발 중에 dev 명령은 SSR (Server-Side Render)에서 출력을 제공합니다.

npm start # or `yarn start`

참고 : DEV 모드에서 VITE는 상당수의 .js 파일을 요청할 수 있습니다. 이것은 QWIK 생산 빌드를 나타내지 않습니다.

시사

미리보기 명령은 클라이언트 모듈의 생산 빌드, src/entry.preview.tsx 의 생산 빌드 및 로컬 서버를 실행합니다. 미리보기 서버는 프로덕션 빌드를 로컬 미리보기를 편리하게하기 위해서만 제작 서버로 사용해서는 안됩니다.

yarn preview # or `yarn preview` 

생산

프로덕션 빌드는 클라이언트 및 서버 빌드 명령을 모두 실행하여 클라이언트 및 서버 모듈을 생성합니다. 또한 빌드 명령은 TypeScript를 사용하여 소스 코드에서 유형 확인을 실행합니다.

yarn build # or `yarn build` 

익스프레스 서버

이 앱에는 최소한의 Express Server 구현이 있습니다. 전체 빌드를 실행하면 명령을 사용하여 빌드를 미리 볼 수 있습니다.

 npm run serve

그런 다음 http : // localhost : 8080/을 방문하십시오.