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/