powerflow display Download - powerflow display Quellcode herunterladen

powerflow display

PowerBuilder

1.0.0

Herunterladen

Powerflow-Display

Ziel, den Hausstromfluss auf einem Bildschirm mit reduzierter Größe wie Raspberry Pi Hat mit einer Auflösung von 480 x 320 anzuzeigen.

Stark inspiriert und basierend auf den Arbeiten für den Home Assistant in diesem Repo: https://github.com/reptilex/tesla-style-solar-power-card

Erstellen Sie mit QWIK, es ist mein erster Anspruch zu diesem Rahmen. Sie können sich gerne auf das Problem kümmern, wenn Sie irgendwelche Ratschläge haben

Wie es funktioniert

Dieses Projekt verbindet über WebSocket eine Verbindung zu einem MQTT -Broker (normalerweise standardmäßig deaktiviert). Die Broker -Konfiguration kann in src/routes/index.tsx geändert werden

Es erwartet die folgenden Nachrichten auf MQTT:

powerinfo/grid : Die Leistung, die dem Netz verbraucht oder injiziert wird (negativ, wenn er injiziert wird)
powerinfo/house : Die im Haus verbrauchte Kraft
powerinfo/solar : Die vom Solarpanel erzeugte Leistung
powerinfo/heat : Die durch Erwärmung verbrauchte Leistung

Projektstruktur

Dieses Projekt verwendet Qwik mit QwikCity. QwikCity ist nur eine zusätzliche Reihe von Tools auf QWIK, damit es einfacher ist, eine vollständige Website zu erstellen, einschließlich Verzeichnisbasis, Routing, Layouts und vielem mehr.

In Ihrem Projekt sehen Sie die folgende Verzeichnisstruktur:

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

src/routes : Bietet das Verzeichnisbasierte Routing, das eine Hierarchie von layout.tsx -Layout -Dateien sowie eine index.tsx -Datei als Seite enthalten kann. Zusätzlich sind index.ts -Dateien Endpunkte. Weitere Informationen finden Sie in den Routing -Dokumenten.
src/components : Empfohlenes Verzeichnis für Komponenten.
public : Alle statischen Vermögenswerte wie Bilder können in das öffentliche Verzeichnis platziert werden. Weitere Informationen finden Sie im Vite Public Directory.

Fügen Sie Integrationen und Bereitstellungen hinzu

Verwenden Sie den Befehl yarn qwik add um zusätzliche Integrationen hinzuzufügen. Einige Beispiele für Integrationen umfassen: CloudFlare, Netlify oder Express Server und der statische Site -Generator (SSG).

yarn qwik add # or `yarn qwik add`

Entwicklung

Der Entwicklungsmodus verwendet den Entwicklungsserver von Vite. Während der Entwicklung wird der dev die Ausgabe Server-Side-Render (SSR) rendern.

npm start # or `yarn start`

Hinweis: Während des Dev -Modus kann VITE eine erhebliche Anzahl von .js -Dateien anfordern. Dies repräsentiert keine QWIK -Produktion.

Vorschau

Der Befehl Vorschau erstellt einen Produktionsaufbau der Client -Module, einen Produktionsaufbau von src/entry.preview.tsx und führt einen lokalen Server aus. Der Vorschau -Server dient nur dazu, einen Produktionsbau vor Ort vorzuschauen, und es sollte nicht als Produktionsserver verwendet werden.

yarn preview # or `yarn preview`

Produktion

Der Produktionsaufbau generiert Client- und Servermodule, indem sowohl Client- als auch Server -Build -Befehle ausgeführt werden. Darüber hinaus verwendet der Befehl Build TypeScript, um einen Typ -Check für den Quellcode auszuführen.

yarn build # or `yarn build`

Express Server

Diese App verfügt über eine minimale Express -Server -Implementierung. Nachdem Sie einen vollständigen Build ausgeführt haben, können Sie den Build mit dem Befehl vorschauen: