このオープンソース Web エディターは、25 ドルの AliExpress ディスプレイをホーム アシスタント ダッシュボードに変えます

専用のスマートホーム コントロール パネルにより、Home Assistant が使いやすくなります。スマートフォンに手を伸ばさずに、画面をタップして照明を制御したり、天気を確認したり、サーモスタットを調整したりできます。問題は、専用のスマート ディスプレイのコストが、その内部のハードウェアよりもかなり高くなる可能性があることです。

安価な ESP32 タッチスクリーン ディスプレイを使用すると、ホーム アシスタント ダッシュボードを構築するための手頃な方法が提供されますが、カスタム インターフェイスの作成にはプログラミングが必要になる場合があります。 vESP Cloud は、無料のオープンソース ビジュアル エディターを使用してプロセスを簡素化し、インターフェイス全体を手動で記述することなく、ブラウザーでダッシュボードを設計し、ファームウェアを生成できます。

ビジュアルエディターでダッシュボードをデザインする

座標を調整する代わりにウィジェットをドラッグします

このプロジェクトの背後にあるハードウェアは、480 × 480 RGB スクリーンを備えたタッチスクリーン ディスプレイ モジュール、ST7701S ディスプレイ ドライバー、および GT911 タッチ コントローラーである Guition ESP32-S3-4848S040 です。これは、AliExpress などのオンライン マーケットプレイスを通じて入手でき、同等のリストがあれば、小型のスマート ホーム コントロール パネルを安価なプロジェクトにできますが、vESP Cloud の主な機能はブラウザベースのエディタです。構成ファイルを使用してすべての要素の位置と外観を定義するのではなく、物理ディスプレイを表すキャンバスにウィジェットをドラッグし、ブラウザーでそのプロパティを調整できます。

各プロジェクトは、ホームページと 480 × 480 のキャンバスから始まります。ダッシュボード ページをさらに追加したり、再配置したり、常に表示しておく必要のないコントロールの詳細ビューを個別に作成したりできます。たとえば、メイン画面には部屋の温度と照明の状態が表示され、別のビューにはより詳細な気候制御が表示されます。

エディターは、テキスト、デジタル時計、ボタン、アイコン、四角形、ライト、HVAC コントロール、天気予報、カレンダー、画像、To-Do リストなど、いくつかのウィジェット タイプをサポートしています。ウィジェットは、レイアウトに合わせてサイズ変更および配置できます。タブや条件付きエリアを使用してコンテンツを整理することもできます。タブを使用すると、同じスペースに複数のウィジェット グループを配置できます。一方、条件付きエリアには、ホーム アシスタントの状態、時間、または設定された条件に応じて異なるコンテンツが表示されます。

これにより、家の周囲で起こっていることに反応するインターフェースを構築することが可能になります。たとえば、メディア コントロール領域には、プレーヤーがアクティブなときは再生ボタンを表示し、アイドル状態のときはプレイリストを開始するためのショートカットを表示できます。エディターにはレトロとモダンのテーマが含まれています。レトロでは黒の背景に明るいシアンとマゼンタのアクセントが使用され、モダンでは暗めのグレーの色調に青、紫、緑のアクセントが使用されます。細かいことですが、外観を選択できることは、ファームウェア開発者が出荷を決定したインターフェイスに固執するよりも優れています。

ダッシュボードをホームアシスタントに接続する

実際のスマートホーム デバイスを画面上に表示します

デバイスをエディタに入れるには、少しセットアップが必要です。このプロジェクトには、Home Assistant エンティティとその詳細を JSON ファイルにエクスポートする HA Metadata Exporter と呼ばれる別の統合が含まれています。そのファイルを vESP Cloud にインポートすると、エンティティ ID を探して手で入力する代わりに、デバイスを検索できるようになります。ただし、小さな迷惑な点が 1 つあります。エクスポートは自動的に更新されないため、エンティティが変更された場合は新しいファイルを生成する必要があります。

すべてが接続されたら、実際に自宅で行うことを中心としたダッシュボードを構築できます。ライトやサーモスタットをメイン画面に配置したり、天気情報を追加して一目でわかるようにしたり、カレンダーや To Do リストを目に見える場所に保管したりできます。ボタンを使用してホーム アシスタント サービスをトリガーすることもでき、誤ってアクティブにしたくないアクションの確認プロンプトが表示されます。重要なアラートに注意を引きたい場合は、オプションの通知オーバーレイを使用して、現在の画面上にメッセージを表示できます。 ​​

ファームウェアを生成してインストールする

ダッシュボードを物理ディスプレイに表示する

レイアウトの準備ができたら、ファームウェアを生成して、サポートされているディスプレイにインストールできます。初期インストールには、USB-C データ ケーブルと互換性のあるブラウザが必要です。ディスプレイがホーム ネットワーク用に構成されていない場合は、一時的な Wi-Fi ネットワーク設定が作成されることがあります。それに接続し、セットアップ ページを開いて、Wi-Fi 認証情報を入力します。 vESP Cloud は、このプロセスをエディターから分離します。 Wi-Fi パスワードは、vESP クラウド サーバーに送信されるのではなく、ブラウザとディスプレイの間に直接入力されます。

次に、ESPHome デバイスを Home Assistant と統合し、ウィジェットが機能するために必要な権限をデバイスに持っていることを確認する必要があります。今後のファームウェアのアップデートは、ホーム アシスタントを通じてインストールできます。ディスプレイをコンピューターに毎回再接続することなく、エディターで変更を加え、更新されたファームウェアをビルドし、ホーム アシスタントから更新をインストールできます。これは、レイアウトを調整しているときに非常に便利です。ダッシュボードの進化に合わせて、配置を調整したり、ウィジェット設定を変更したり、ファームウェアを更新したりできます。

エディターは無料ですが、クラウド構築には費用がかかります

自分でコンパイルするか、便利な料金を支払うかを選択します

vESP Cloud のビジュアル エディターを使用して、構成ファイルを無料で生成できます。 YAML および C++ ファイルを含む ESPHome 構成をエクスポートします。これらのファイルは、独自の ESPHome インストールを使用してコンパイルできます。すでに ESPHome に慣れていて、プロセス全体を自分の制御下に置きたい場合には、このオプションは意味があります。ホストされたコンパイルの料金を支払うことなく、生成された構成を検査し、さらに変更を加えることができます。

他の人にビルド プロセスを処理してもらいたい場合は、vESP Cloud がビルドごとの支払いクレジット システムを提供します。定期的なサブスクリプションを契約するのではなく、クレジットを購入し、クラウド サービスを通じてファームウェアをコンパイルするために使用します。有料オプションは主に利便性を重視しています。ファームウェアをローカルでコンパイルできるのであれば、エディターを使用するためだけに料金を支払う理由はほとんどありません。

vESP クラウドは試してみる価値がありますか?

vESP Cloud は、DIY ホーム アシスタント ダッシュボードを構築する際に最もイライラする部分の 1 つ、つまりインターフェイス全体を手作業でコーディングすることなく、安価なタッチスクリーンを便利なものに変えるという取り組みに取り組んでいます。ビジュアル エディター、ウィジェット ライブラリ、エンティティの統合、およびファームウェアの生成により、専用のコントロール パネルを構築するためのより親しみやすい方法が提供されます。

ハードウェアのサポートが Guition ESP32-S3-4848S040 に限定されていること、セットアップが変更されたときにエンティティのメタデータを更新する必要があることなど、いくつかの問題があります。ただし、すでに Home Assistant を実行していて、日常のコントロールにタッチスクリーンが必要な場合は、専用のスマート ディスプレイにお金をかける前に、vESP Cloud を検討する価値があります。