powerflow display

PowerFlow-Display

旨在在較小的尺寸屏幕上顯示房屋電源流量，例如Raspberry Pi Hat，分辨率為480x320。

強烈啟發並根據此倉庫的家庭助理工作：https：//github.com/reptilex/tesla-style-solar-solar-power-card-card

與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公共目錄以獲取更多信息。

添加集成和部署

使用yarn qwik add命令添加其他集成。集成的一些示例包括：CloudFlare，NetLify或Express Server以及靜態站點生成器（SSG）。

yarn qwik add # or `yarn qwik add` 

發展

開發模式使用Vite的開發服務器。在開發過程中， dev命令將服務器端渲染（SSR）輸出。

npm start # or `yarn start`

注意：在開發模式期間，Vite可能會請求大量的.js文件。這並不代表QWIK的製作。

預覽

預覽命令將創建客戶端模塊的生產構建， src/entry.preview.tsx的生產構建，並運行本地服務器。預覽服務器僅是為了方便本地預覽生產構建，不應用作生產服務器。

yarn preview # or `yarn preview` 

生產

生產構建將通過運行客戶端和服務器構建命令來生成客戶端和服務器模塊。此外，構建命令將使用TypeScript在源代碼上運行類型檢查。

yarn build # or `yarn build` 

Express服務器

該應用具有最小的Express服務器實現。運行完整的構建後，您可以使用命令預覽構建：

 npm run serve

然後訪問http：// localhost：8080/