powerflow display

PowerFlow-Display

Raspberry Pi Hatのような縮小サイズ画面に、480x320の解像度でハウスパワーフローを表示することを目的としています。

このレポでホームアシスタントのために行われた作業に強くインスピレーションを受け、https：//github.com/reptilex/tesla---solar-power-card

QWIKでビルド、これはこのフレームワークの私の最初のAttempです。アドバイスがある場合は、お気軽に問題を提起してください

それがどのように機能するか

このプロジェクトは、WebSocket（通常はデフォルトで無効になっている）を介してMQTTブローカーに接続します。ブローカーの構成はsrc/routes/index.tsxで変更できます

MQTTで次のメッセージが期待されます。

• powerinfo/grid ：消費される電力またはグリッドに注入されます（注入された場合は負）
• powerinfo/house ：家で消費された電力
• powerinfo/solar ：ソーラーパネルによって生成される電力
• powerinfo/heat ：加熱によって消費される電力

プロジェクト構造

このプロジェクトは、QWikCityでQWIKを使用しています。 QWikCityは、QWIKの上にあるツールの追加セットであり、ディレクトリベースのルーティング、レイアウトなどを含む完全なサイトの構築を容易にします。

プロジェクト内には、次のディレクトリ構造が表示されます。

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

• src/routes ： layout.tsxの階層を含めることができるディレクトリベースのルーティングを提供し、ページとしてindex.tsxファイルを含めることができます。さらに、 index.tsファイルはエンドポイントです。詳細については、ルーティングドキュメントをご覧ください。

• src/components ：コンポーネントの推奨ディレクトリ。

• public ：画像などの静的資産は、パブリックディレクトリに配置できます。詳細については、Vite Public Directoryをご覧ください。

統合と展開を追加します

yarn qwik addコマンドを使用して、追加の統合を追加します。統合の例には、CloudFlare、NetlifyまたはExpress Server、および静的サイトジェネレーター（SSG）が含まれます。

yarn qwik add # or `yarn qwik add` 

発達

開発モードでは、Viteの開発サーバーを使用します。開発中、 devコマンドはサーバー側のレンダリング（SSR）を出力します。

npm start # or `yarn start`

注：DEVモード中、Viteはかなりの数の.jsファイルを要求する場合があります。これは、QWIKプロダクションビルドを表していません。

プレビュー

プレビューコマンドは、クライアントモジュールの生産ビルド、 src/entry.preview.tsxの生産ビルドを作成し、ローカルサーバーを実行します。プレビューサーバーは、実稼働ビルドをローカルでプレビューするための利便性のためだけであり、生産サーバーとして使用するべきではありません。

yarn preview # or `yarn preview` 

生産

生産ビルドは、クライアントとサーバービルドコマンドの両方を実行することにより、クライアントモジュールとサーバーモジュールを生成します。さらに、BuildコマンドはTypeScriptを使用して、ソースコードのタイプチェックを実行します。

yarn build # or `yarn build` 

エクスプレスサーバー

このアプリには、Expressサーバーの実装が最小限に抑えられています。フルビルドを実行した後、コマンドを使用してビルドをプレビューできます。

 npm run serve

次に、http：// localhost：8080/