環境センサーダッシュボード

ESP32から送信されるセンサーデータ（温度・湿度・CO2）を可視化するWebダッシュボードです。

システム構成

本システムは以下のコンポーネントで構成されています。

1. センサーデバイス (ESP32): 環境データを取得し、MQTTまたはHTTP経由でNode-REDへ送信します。
2. Node-RED: データの受信処理、InfluxDBへの保存、およびフロントエンド向けのAPI提供を行います。
3. InfluxDB 2.0: 時系列データとしてセンサー値を保存します。
4. Webフロントエンド: HTML/CSS/JavaScript（Chart.jsを使用）で構成され、Node-RED APIからデータを取得して描画します。

主な機能

• リアルタイム表示: 30秒ごとに最新のセンサー値（温度、湿度、CO2）を自動更新します。
• 履歴グラフ: 1時間、6時間、24時間、7日間の範囲で時系列データを表示します。
• エラーハンドリング: API接続エラーやデータ欠損時に、ステータス欄へ具体的な原因を表示します。
• キャッシュ管理: スクリプトの読み込みにバージョンパラメータを付加し、ブラウザキャッシュによる不具合を防止しています。

技術スタック

• Frontend: HTML5, CSS3 (Vanilla), JavaScript, Chart.js
• Backend API: Node-RED
• Database: InfluxDB 2.0
• Deployment: Docker Compose, Nginx

ファイル構成

• index.html: ダッシュボードの構造定義。
• style.css: UIのデザイン定義。
• script.js: データ取得、グラフ描画、タイマー処理のロジック。
• compose.yaml: Nginxコンテナのデプロイ設定。

ブラウザ表示の注意点

本システムは script.js にバージョンパラメータ（?v=X）を付加して配信しています。コードを大規模に変更した際は、index.html 内の読み込みパスを更新してキャッシュを回避してください。

データ集約

履歴データの集約間隔は、指定された時間範囲に応じて自動的に最適化されます（最小1分〜最大1時間）。

---

作成者: Aosy