powerflow display

Powerflow-Display

Dirigido a mostrar el flujo de potencia de la casa en una pantalla de tamaño reducido, como el sombrero de Raspberry Pi, con una resolución de 480x320.

Inspirado fuertemente y basado en el trabajo realizado para el asistente doméstico en este repositorio: https://github.com/reptilex/tesla-style-solar-power-card

Construye con Qwik, es mi primera intención con este marco, no dude en plantear un problema si tiene algún consejo

Cómo funciona

Este proyecto se conecta a un corredor MQTT a través de WebSocket (generalmente deshabilitado de forma predeterminada). La configuración del corredor se puede modificar en src/routes/index.tsx

Espera los siguientes mensajes en MQTT:

• powerinfo/grid : la potencia consumida o inyectada a la cuadrícula (negativa si se inyecta)
• powerinfo/house : el poder consumido en la casa
• powerinfo/solar : la potencia producida por el panel solar
• powerinfo/heat : la potencia consumida por calefacción

Estructura de proyectos

Este proyecto está utilizando QWIK con Qwikcity. Qwikcity es solo un conjunto adicional de herramientas además de Qwik para facilitar la construcción de un sitio completo, que incluye enrutamiento basado en directorio, diseños y más.

Dentro de su proyecto, verá la siguiente estructura del directorio:

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

• src/routes : Proporciona el enrutamiento basado en directorio, que puede incluir una jerarquía de archivos de diseño layout.tsx y un archivo index.tsx como página. Además, los archivos index.ts son puntos finales. Consulte los documentos de enrutamiento para obtener más información.

• src/components : directorio recomendado para componentes.

• public : cualquier activo estático, como imágenes, se puede colocar en el directorio público. Consulte el directorio público VITE para obtener más información.

Agregar integraciones e implementación

Use el comando yarn qwik add para agregar integraciones adicionales. Algunos ejemplos de integraciones incluyen: CloudFlare, NetLify o Express Server, y el Generador de sitios estático (SSG).

yarn qwik add # or `yarn qwik add` 

Desarrollo

El modo de desarrollo utiliza el servidor de desarrollo de Vite. Durante el desarrollo, el comando dev será el renderizado del lado del servidor (SSR) la salida.

npm start # or `yarn start`

Nota: Durante el modo DEV, VITE puede solicitar un número significativo de archivos .js . Esto no representa una construcción de producción QWIK.

Avance

El comando de vista previa creará una compilación de producción de los módulos del cliente, una compilación de producción de src/entry.preview.tsx y ejecutar un servidor local. El servidor de vista previa es solo por conveniencia de obtener una vista previa localmente de una compilación de producción, y no debe usarse como servidor de producción.

yarn preview # or `yarn preview` 

Producción

La compilación de producción generará módulos de clientes y servidores ejecutando comandos de compilación de clientes y servidores. Además, el comando de compilación usará TypeScript para ejecutar un tipo de verificación de tipo en el código fuente.

yarn build # or `yarn build` 

Servidor expreso

Esta aplicación tiene una implementación mínima del servidor Express. Después de ejecutar una compilación completa, puede obtener una vista previa de la compilación utilizando el comando:

 npm run serve

Luego visite http: // localhost: 8080/