powerflow display

Powerflow-Display

Com o objetivo de exibir o fluxo de energia da casa em uma tela de tamanho reduzido, como o Raspberry Pi Hat, com uma resolução de 480x320.

Fortemente inspirado e com base no trabalho realizado para o assistente doméstico neste repositório: https://github.com/reptilex/tesla-style-solar-power-card

Construa com Qwik, é minha primeira tentativa com essa estrutura, fique à vontade para levantar problemas se tiver algum conselho

Como funciona

Este projeto se conecta a um corretor MQTT através do WebSocket (geralmente desativado por padrão). A configuração do corretor pode ser modificada em src/routes/index.tsx

Ele espera as seguintes mensagens no MQTT:

• powerinfo/grid : a energia consumida ou injetada na grade (negativa se injetada)
• powerinfo/house : a energia consumida na casa
• powerinfo/solar : a energia produzida pelo painel solar
• powerinfo/heat : a energia consumida pelo aquecimento

Estrutura do projeto

Este projeto está usando o QWIK com QWIKCITY. O QWIKCITY é apenas um conjunto extra de ferramentas no topo do QWIK para facilitar a criação de um site completo, incluindo roteamento, layouts e muito mais.

Dentro do seu projeto, você verá a seguinte estrutura de diretório:

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

• src/routes : fornece o roteamento baseado no diretório, que pode incluir uma hierarquia de arquivos de layout layout.tsx e um arquivo index.tsx como a página. Além disso, os arquivos index.ts são pontos de extremidade. Consulte os documentos de roteamento para obter mais informações.

• src/components : Diretório recomendado para componentes.

• public : Qualquer ativo estático, como imagens, pode ser colocado no diretório público. Consulte o Diretório Público Vite para obter mais informações.

Adicionar integrações e implantação

Use o comando yarn qwik add para adicionar integrações adicionais. Alguns exemplos de integrações incluem: Cloudflare, Netlify ou Express Server e o Gerador de Site estático (SSG).

yarn qwik add # or `yarn qwik add` 

Desenvolvimento

O modo de desenvolvimento usa o servidor de desenvolvimento da Vite. Durante o desenvolvimento, o comando dev renderizará o servidor (SSR) a saída.

npm start # or `yarn start`

Nota: Durante o modo dev, o Vite pode solicitar um número significativo de arquivos .js . Isso não representa uma construção de produção QWIK.

Visualização

O comando de visualização criará uma criação de produção dos módulos do cliente, uma construção de produção de src/entry.preview.tsx e executará um servidor local. O servidor de visualização é apenas por conveniência para visualizar localmente uma construção de produção e não deve ser usada como um servidor de produção.

yarn preview # or `yarn preview` 

Produção

A construção da produção gerará módulos de clientes e servidores executando comandos de construção de clientes e servidores. Além disso, o comando Build usará o TypeScript para executar uma verificação de tipo no código -fonte.

yarn build # or `yarn build` 

Servidor expresso

Este aplicativo possui uma implementação mínima do servidor expresso. Depois de executar uma compilação completa, você pode visualizar a construção usando o comando:

 npm run serve

Em seguida, visite http: // localhost: 8080/