powerflow display

Powerflow-Display

Visant à afficher le flux de puissance de la maison sur un écran de taille réduite, comme Raspberry Pi Hat, avec une résolution de 480x320.

Fortement inspiré et basé sur le travail effectué pour l'assistant à domicile sur ce dépôt: https://github.com/reptilex/tesla-tyle-solar-power-card

Construire avec Qwik, c'est ma première attaque avec ce cadre, n'hésitez pas à soulever des problèmes si vous avez des conseils

Comment ça marche

Ce projet se connecte à un courtier MQTT via WebSocket (généralement désactivé par défaut). La configuration du courtier peut être modifiée dans src/routes/index.tsx

Il attend les messages suivants sur MQTT:

• powerinfo/grid : la puissance consommée ou injectée au réseau (négatif si injecté)
• powerinfo/house : La puissance consommée sur la maison
• powerinfo/solar : la puissance produite par le panneau solaire
• powerinfo/heat : La puissance consommée par le chauffage

Structure du projet

Ce projet utilise Qwik avec QwikCity. QwikCity n'est qu'un ensemble supplémentaire d'outils au-dessus de QWIK pour faciliter la création d'un site complet, y compris le routage basé sur les répertoires, les mises en page, etc.

À l'intérieur de votre projet, vous verrez la structure du répertoire suivant:

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

• src/routes : fournit le routage basé sur le répertoire, qui peut inclure une hiérarchie des fichiers de mise en page layout.tsx et un fichier index.tsx comme page. De plus, les fichiers index.ts sont des points de terminaison. Veuillez consulter les documents de routage pour plus d'informations.

• src/components : Répertoire recommandé pour les composants.

• public : Tous les actifs statiques, comme les images, peuvent être placés dans le répertoire public. Veuillez consulter le répertoire public VITE pour plus d'informations.

Ajouter des intégrations et un déploiement

Utilisez la commande yarn qwik add pour ajouter des intégrations supplémentaires. Quelques exemples d'intégations incluent: CloudFlare, Netlify ou Express Server et le générateur de sites statique (SSG).

yarn qwik add # or `yarn qwik add` 

Développement

Le mode de développement utilise le serveur de développement de Vite. Pendant le développement, la dev devra server le serveur (SSR) la sortie.

npm start # or `yarn start`

Remarque: Pendant le mode Dev, Vite peut demander un nombre important de fichiers .js . Cela ne représente pas une construction de production QWIK.

Prévisualisation

La commande Aperçu créera une génération de production des modules clients, une version de production de src/entry.preview.tsx , et exécuter un serveur local. Le serveur d'aperçu est uniquement pour la commodité de prévisualiser localement une version de production, et il ne doit pas être utilisé comme serveur de production.

yarn preview # or `yarn preview` 

Production

La version de production générera des modules client et serveur en exécutant les commandes de build client et de serveur. De plus, la commande build utilisera TypeScript pour exécuter une vérification de type sur le code source.

yarn build # or `yarn build` 

Serveur express

Cette application a une implémentation minimale du serveur express. Après avoir exécuté une version complète, vous pouvez prévisualiser la version en utilisant la commande:

 npm run serve

Puis visitez http: // localhost: 8080 /