リアルタイムヒートマップと Grafana データダッシュボードの統合
はじめに
このプロジェクトは、reCamera に内蔵された YOLO11n モデルを使用してターゲット検出を行います。人物ターゲットにファジー処理を実行し、ヒートマップ効果を表示します。これらはすべて reCamera 内でローカルに処理されます！そして reCamera は検出されたデータをローカルで実行されている Influxdb データベースに送信します。その後、Grafana が Influxdb データベースからデータを読み取り、リアルタイムデータダッシュボードを表示します。
このデモを完了した後の使用効果は以下の通りです。
ハードウェア準備
reCamera 1台 コンピュータ 1台
| reCamera 2002 シリーズ | reCamera Gimbal | reCamera HQ POE |
|---|---|---|
 |  |  |
1.InfluxDB 設定
1.1 InfluxDB2-2.1.1 をダウンロードして起動
ダウンロードリンクにアクセスし、ダウンロードして解凍します。Win + R を押してコマンドプロンプトを開き、ファイルが解凍されたディレクトリに移動し、最後に以下を入力します：
influxd
以下の図に示すように、起動が成功しました
お使いのデバイスが Raspberry Pi などの Linux システムを実行している ARM アーキテクチャデバイスの場合、ダウンロードリンクはこちらです。
お使いのデバイスが Linux システムを実行している AMD アーキテクチャデバイスの場合、こちらをクリックしてダウンロードしてください。
Linux デバイスでの InfluxDB 起動についても、同じ手順が適用されます。解凍後のディレクトリに移動して実行します：
./influxd
1.2 InfluxDB のローカルウェブページに入って設定
次に cmd ターミナルを開き、以下のコマンドを入力してコンピュータの IP を照会します
ipconfig
次に、照会した IP をブラウザに入力し、8086 ポートを追加して InfluxDB のメインインターフェースに入ります。
例えば、私の IP が 192.168.7.183 の場合、ブラウザに 192.168.7.183:8086 と入力します
次に "Get Started" をクリックして、自分の情報を入力します。このステップでは、設定したユーザー名とパスワードを必ず覚えておいてください！！
次に "Confgure Later" をクリックします
次に Data をクリックして、自分の情報を入力するステップで設定した "Initial Bucket Name" を確認します。私は reCamera と入力しました
次に Setting をクリックしてデータ保持時間を設定します
API Token をクリックしてデータベースの Token を表示します。これは後続の reCamera の設定とヒートマップウェブページの設定で使用されます。
2.reCamera 設定
2.1 reCamera を Linux デバイスに接続（Linux デバイスを使用していない場合は、次のステップに進み、ステップ 2.2 から開始してください）
reCamera を Linux デバイスに接続する予定の場合、まず Windows または Mac コンピュータを使用して reCamera に接続し、いくつかの設定変更を行うことをお勧めします。そうしないと、reCamera が Linux デバイスに直接接続できません。
Windows を例に取ります。ブラウザに 192.168.42.1 と入力し、"setting" をクリックします
次に "Terminal" をクリックし、アカウント名 "recamera" とパスワードを入力します。
次に recamera ターミナルで実行します（このステップではパスワードを再度入力する必要があります）：
sudo rootfs_rw on
次に実行します：
sudo vi /mnt/system/usb-ncm.sh
次にこの行をコメントアウトします（まずキーボードの "I" キーを押して書き込みモードに入り、方向キーを使ってこの行に移動し、先頭に "#" を追加します）。/etc/run_usb.sh probe acm >> /tmp/ncm.log 2>&1
次に保存して終了します（キーボードの ESC キーを押して書き込みモードを終了し、":wq" と入力して保存して終了します）。
複数回再起動すると無効になる可能性があり、リセットが必要です。
2.2 SenseCraft プラットフォームから reCamera にプログラムをインストール
sensecraft プラットフォーム-Workspace-reCamera に入り、"Real-time heat map local blur processing Grafa" という名前のデモを見つけて、あなたの reCamera にデプロイします
2.3 ネットワークに接続して不足しているノードをインストール
ワークスペースに入ると、この警告がポップアップします。これは正常です。まず Close をクリックします。後で reCamera にノードをインストールする必要があります。
reCamera をネットワークに接続します（コンピュータと同じネットワークに接続されていることを確認してください！！これは後で非常に重要です）
次に node-red-contrib-influxdb ノードを reCamera にインストールします。
次に検索ボックスに node-red-contrib-influxdb と入力すると、最初のバージョン 0.7.0 が必要なノードです。Install をクリックします
インストールには時間がかかりますので、しばらくお待ちください。インストールが成功すると、以下のように表示されます
2.4 InfluxDB ノードの設定
この時点で、Write Person Count という名前のノードにいくつかの設定情報を追加する必要があります。このノードを見つけてください。
ダブルクリックして設定パネルを開き、サーバーの後ろにある小さな鉛筆アイコンをクリックします
小さな鉛筆をクリックした後、URL と Token を入力する必要があります
ここでの URL は、最初のステップで入力した InfluxDB ウェブページのリンクを入力します。例えば、あなたのウェブページが 192.168.7.183:8086 の場合、URL に http://192.168.7.183:8086 と入力できます。
次に、最初に説明したInfluxDBウェブページのAPI TokensであるTokenを入力します。
Copy to Cilpboardをクリックして、コピーしたTokenを設定に入力します。
入力後、右上のUpdateをクリックします。他の設定は変更しないでください。
次に、右上のdeploymentをクリックして、先ほどの変更を有効にします。警告ポップアップウィンドウが表示されますが、閉じることができます。
2.5 InfluxDBデータの表示
この時点でInfluxDBインターフェースに入り、データが表示されるかどうかを確認できます。成功した場合、Submitをクリックすると、データの線グラフが表示されます。ここではデータ数をクエリします。
3.Grafana設定
3.1 Grafanaのインストール
3.1.1 Windowsシステム
Grafanaの公式ウェブサイトGrafana get started | Cloud, Self-managed, Enterpriseにアクセスして、インストールパッケージをローカルにダウンロードします。ここでダウンロードしたバージョンは12.3.0です。
ダウンロードしてインストール後、Grafanaは自動的にバックグラウンドで実行されるはずです。コンピュータの「サービス」を開いて実行されているかどうかを確認できます。
3.1.2 Linuxシステム
デバイスがRaspberry PiなどのLinuxを実行するARMベースのデバイスの場合、ダウンロードリンクはこちらです。
デバイスがLinuxシステムを実行するAMDベースのデバイスの場合、ダウンロードリンクはこちらです。
次に、ダウンロードしたtar.gzファイルを解凍します。
3.2 defaults.iniを変更してGrafanaでHTMLの埋め込みを有効にする
3.2.1 Windowsシステム
「grafana/conf」ディレクトリに移動し、「defaults.ini」ファイルを見つけて、右クリックしてメモ帳で開きます。
Ctrl + Fを押して「disable_sanitize_html」を検索し、元の「disable_sanitize_html = false」を「disable_sanitize_html = true」に変更してGrafanaでhtmlの埋め込みを有効にします。変更後、保存して終了します。
3.2.2 Linuxシステム
Linuxシステムの場合、defaults.iniもconfディレクトリにあります。
右クリックして、メモ帳に似たアプリケーションで開くことを選択します。次に、画像内のこの文を見つけて、元の「false」を「true」に変更します。
3.3 Grafanaの開始
Windowsシステムの場合、Grafanaをインストールしている場合は、ステップ3.1.1で説明したように「サービス」セクションでGrafanaが実行されているかどうかを確認するだけです。一般的に、Grafanaはインストール後に自動的に開始されます。
Linuxシステムの場合、Grafanaは手動で開始する必要があります。解凍したgrafanaファイルのディレクトリに入った後、次のコマンドを実行します：
./bin/grafana-server
3.4 データソースの設定
Grafanaが実行されていることを確認した後、この時点で、ブラウザでhttp://localhost:3000にアクセスして設定用のローカルGrafanaインターフェースにアクセスできます。まず、ログインする必要があります。初期のユーザー名とパスワードは両方ともadminです。ログイン後、システムは新しいパスワードの変更を促します。パスワードを覚えておいてください。アカウントは引き続きadminで変更されません。
ログイン後、左側の "Data sources" をクリックし、次に "Add new data source" を選択します。
次に "InfluxDB" を選択します。
次に、以下の6つの修正を行う必要があります：
(1) "Query language" を "Flux" として選択
(2) データベースウェブページのURLを入力します。これは最初のステップでアクセスしたInfluxDBウェブページへのリンクです。例えば、ウェブページアドレスが192.168.7.183:8086の場合、入力すべきURLはhttp://192.168.7.183:8086です。
(3) "Basic auth" オプションを無効にする
(4) "Organization" にはデータベース登録時に使用したユーザー名を入力する
(5) Tokenには、ステップ2.3で説明したInfluxDBウェブページで言及されたAPI Tokensを入力する
(6) "Default Bucket" には作成したデータベースの名前を入力する
すべての準備ができたら、"Save & Test" をクリックします。テストが成功すると、"datasource is working" と表示されます。この時点で、次のステップに直接進むことができます。これらの設定は自動的に保存されます。
3.5 ダッシュボードのインポート
Dashboardsをクリックします
次にNew dashboardをクリックします
Import dashboardを選択します
GitHubにアップロードしたプロジェクトをダウンロードしてください。ダウンロードして解凍した後、「Grafana Json File」内の「reCamera Heatmap-1766213863140.json」を見つけてください。このファイルがGrafanaにインポートする必要があるファイルです。
インポート後、以下の効果を確認できるはずです（以下の画面が表示されない場合は、記事の最後のFAQセクションに移動してください。解決策があります）
4. Pythonキャリブレーションソフトウェアの使用
まずGitHubで私のプロジェクトをダウンロードすることを忘れないでください。解凍して開いた後、「Heatmap area calibration」という名前のフォルダを見つけてください。これには3つのファイルが含まれています：calibration_tool.pyはキャリブレーションプログラム、R1.jpgはreCameraで撮影した元の画像、R2.pngは私が描いた部屋の平面図です。
4.1 reCameraから現在のネイティブ解像度画像を取得する
元の解像度画像を取得することは重要です！！手順はより面倒になりますが、ヒートマップの位置精度に直接影響します！操作を辛抱強く行ってください！
4.1.1 reCameraを使用して写真を撮る
reCameraワークスペースインターフェースに戻り、まずプログラムを停止します
次に、左側のcaptureノードを見つけて、cameraノードの後ろにドラッグし、線で接続します
次に、ダブルクリックしてcaptureノードを開き、以下の2つのオプションを変更します（このノードの機能は2秒ごとに写真を撮ってreCameraにローカル保存することです）。その後、Finishをクリックして再デプロイし、Runをクリックします。3〜4秒間実行した後、Stop Runningをクリックします（常時実行する必要はありません。そうしないと常に写真を撮り続けます）。次に、撮影した写真をローカルコンピュータに移動します。
4.1.2 reCameraで撮影した写真をコンピュータに移植する
先ほど撮った写真が成功したかどうかを確認しましょう。
Settingをクリックします
Terminalをクリックして、reCameraアカウントのパスワードを入力してログインします。
次に、以下の2つのコマンドを順番に入力します：
Images フォルダに入る
cd / && cd userdata/Images/
ファイル一覧
ls
すると、システムがいくつかの画像ファイル名を一覧表示するのが確認できます。これらは capture ノードで撮影したばかりの写真です。
先ほどの設定画面に戻り、ssh 接続を開きます。
次に、キーボードで Win R を押し、cmd と入力し、ターミナルで以下を入力します
scp -r recamera@<reCamera IP>:/userdata/Images "The folder path of the 'Heatmap area calibration' file that you downloaded from GitHub after decompression"
これらの IP の reCamera はネットワーク設定で確認できます
GitHub からダウンロードして解凍した「Heatmap area calibration」ファイルのフォルダパスです。まず Heatmap area calibration に入り、フォルダ上部のパスボックスをクリックして、パスをコピーします。
例：
scp -r [email protected]:/userdata/Images "C:\Users\seeed\Desktop\热力图\正式版\reCamera with Heatmap\Heatmap area calibration"
次に reCamera のパスワードを入力して、選択したパスにダウンロードします
先ほどダウンロードしたフォルダに戻ると、ダウンロードしたばかりの Images フォルダが表示されます。
今度は私のプロジェクトから元の R1.jpg を削除します。
最新の写真、通常は最後の写真を選択し、それを R1 にリネームします
次に、この写真を上位ディレクトリに配置します。
4.2 部屋の平面図を準備
Windows 標準の描画ツールを使用して描画し、画像として保存して Heatmap area calibration パスに保存するか、既存の部屋の平面図を直接 Heatmap area calibration パスに保存できます。この手順では、私の以前のプロジェクトから R2.png を削除し、あなたの画像を R2 にリネームしてこのパスに保存することも忘れないでください。
4.3 キャリブレーション手順の使用
キャリブレーションプログラムは、Heatmap area calibration パス下の calibration_tool.py プログラムです。
ここではデフォルトで Pycharm を使用します。使用前に、Python の OpenCV ライブラリをインストールする必要があります。
pip install opencv-python
注意すべき点が2つあります：まず、2つの画像は同じパス、つまり Heatmap area calibration パス下にある必要があります。次に、画像ファイル名が正しいかどうかを確認してください
プログラムが実行されると、カメラのスクリーンショットを表示するウィンドウがポップアップします。この時、マウスで有効エリアをクリックする必要があります。クリック順序は非常に重要です：選択したいエリアの四隅を「左上→右上→右下→左下」の時計回りの順序でクリックしてください。例えば、テーブルの表面のみを表示したい場合は、テーブルの四隅をクリックします。4点をクリックした後、キーボードの任意のキー（スペースなど）を押して次のステップに進みます。
次に、俯瞰図 R2.png を表示する2番目のウィンドウがポップアップします。クリック順序は最初のステップに対応している必要があります：先ほどの4点の対応する位置を地図上でクリックします。例えば、先ほどテーブルの左上角を最初にクリックした場合、今度は地図上でテーブルの左上角をクリックします。4点をクリックした後、任意のキーを押して終了します。
次に、コマンドラインウィンドウ（CMD）に戻ると、スクリプトが自動的に JS コードを生成しているのが確認できます。そのコードを直接コピーして、index.html の const CALIBRATION = { ... }; を置き換えてください。（次のステップの「5.5 キャリブレートされた座標データ」まで使用されませんので、今は気にしないでください）
5. ヒートマップページの設定
ヒートマップのウェブ設定も私の GitHub プロジェクトで利用可能です。具体的には heatmap-demo フォルダの index.html ファイルにあります。このファイルのいくつかのセクションも修正する必要があります。そうしないと、正常に動作せず、ヒートマップ座標データを受信できません。
5.1 ヒートマップのウェブページパラメータ設定
5.1.1 ヒートマップ画像
実際の画像のファイル名に置き換えてください
5.1.2 データベース部分の設定
パラメータ説明
URL は、開いた InfluxDB のウェブアドレスです。
ORG は、InfluxDB を設定する際のユーザー名です。
BUCKET は、作成した InfluxDB データベースの名前です。
TOKEN は、あなたの InfluxDB API Tokens です。HTML 内の元の 12345678 を実際の Token に置き換えてください
5.1.3 熱データの更新間隔とクエリ期間
パラメータ説明
REFRESH_INTERVAL は更新するミリ秒数を指し、DATA_RANGE は過去のデータのクエリ時間を指します。コード内のデフォルトの「3000」と「-3s」では、「3000」は3000ミリ秒、つまり3秒ごとに更新されることを意味し、「-3s」は過去3秒間の熱座標データをクエリすることを意味します。
モード選択
設定可能な2つのモードがあります：
（1）「リアルタイムモード」：熱座標はリアルタイムで更新され、累積重ね合わせなしで以前の座標をクリアします。リアルタイムモードを実現するには、DATA_RANGE を短時間に設定する必要があります。例えば、私のデフォルトの「-3s」は過去3秒間の熱座標データをクエリすることを意味します。例えば、プログラムが現在10秒間実行されている場合、DATA_RANGE を -3s に設定すると、熱図に表示される座標データは8-10秒目のデータであり、以前の1-7秒の座標データは表示されません。
（2）「累積モード」：熱座標はリアルタイムで更新されますが、以前の座標が重ね合わされます。累積モードを実現するには、DATA_RANGE をより長い時間に設定する必要があります。例えば、DATA_RANGE を「-1h」に設定すると、熱図は過去1時間のデータを累積的に表示します。プログラムが2時間実行された後、現在2時間目のデータが表示され、1時間目のデータは表示されません。
5.1.4 カメラ解像度
パラメータ説明
CAM_WIDTH / CAM_HEIGHT：カメラの実際のストリーミング解像度（例：1920x1080 または 1280x720）をここに入力する必要があります。そうしないと、透視変換が間違ってしまいます。
このパラメータは「4.1.1 reCamera を使用した写真撮影」のステップでも示されています。カメラノードを capture ノードと接続する際、カメラノードの Resolution パラメータを確認できます。これが修正する必要がある解像度パラメータです。ここで 1920×1080 が選択されている場合、コード内で CAM_WIDTH を 1920 に、CAM_HEIGHT を 1080 に修正する必要があります
5.1.5 キャリブレーションの座標データ
これは、前のステップ「4.3 キャリブレーションプログラムの使用」で Python プログラムが実行された後にコンソールで生成されたコードです。このコードを置き換えてください
5.1.6 熱閾値
パラメータの説明
感度（最大値）：リアルタイムモード（数点のみ）の場合、最大値は約2に設定します。そうでないと色が薄すぎて見えません。
1時間の蓄積（数千点）の場合、最大値は150以上に設定する必要があります。そうでないとマップが瞬時に赤くなります（露出オーバー）。
5.2 ヒートマップの有効化
Win + Rを押し、「cmd」と入力し、パス「heatmap-demo」に入り、次のように入力します
python -m http.server 8080
その後、ブラウザで「InfluxDB Heatmap (Grafana Fix + 1h Accumulation)」のウェブページを開くと、マップが読み込まれているのが確認できます。
この手順はLinuxにも適用されます。
6. Grafanaパネルに戻り、最終結果を確認
この時点で、Grafanaパネルで以下の表示が確認できるはずです。問題が発生した場合は、記事の最後にある「よくある質問」セクションを参照してください。
よくある質問
Grafanaウェブページが開けない
「Services」に入った後、「Grafana」を見つけて右クリックし、「Restart」を選択します。その後、単純にhttp://localhost:3000を再度開きます。
Grafanaパネルが正しく読み込まれない
Grafanaでリアルタイム熱マップやreCamera リアルタイム画面が読み込まれない、または正しく表示されないことが判明した場合、問題のあるパネルをクリックして更新する必要があります。熱マップパネルを例にします：
次にRefreshをクリックします
熱マップの読み込みに問題がある
熱マップの読み込みに問題が発生した場合は、まずこの手順のすべての設定項目が正しいかどうかを確認してください。すべての設定項目が正しく、それでも熱マップの読み込みに問題がある場合は、InfluxDB Heatmap (Grafana Fix 1h Accumulation)インターフェースでF12キーを押してウェブコンソールの出力を確認し、トラブルシューティングを行ってください。
reCamera のリアルタイム画像にカクつきが現れる
reCamera のリアルタイム画像がしばらく実行した後にスタックし、「WebSocket:Disconnected」が表示される場合、これは正常な現象です。reCamera のリソースは限られており、メモリが満杯になります。表示が再開されるまで待ってください。
Grafanaパネルの「現在の人数」と「今日の人数」が正しく表示されない
これは正常な現象です。ノイズ干渉があるためで、しばらくすると値は正常に戻ります。
Grafanaパネルの「連続稼働時間」とは何を意味するか
ここでの「連続稼働時間」とは、初日から現在まで、データベースがどのくらい稼働しているかを指します。InfluxDBでreCamera データベースのデータ保持時間を7日に設定しているため、7日後に自動的にクリアされて再計時されます。ここでは、InfluxDBの各データベースのデータ保存時間を自由に設定できます。
データをエクスポートできるか
はい、InfluxDB Exploreインターフェースで必要なデータを選択し、Submitをクリックしてから、Download CSVをクリックする必要があります
IPアドレスが変更された場合、例えば異なるネットワークに切り替えた場合、これらのセクションを適宜修正する必要があります。
（1）Node-REDの「InfluxDB Out」ノードのIPアドレスと認証トークン
（2）InfluxDBデータベースのログインIP、例：http://10.241.1.98:8086/
（3）GrafanaのデータソースのIP
（4）ヒートマップのHTMLコード内のIP
技術サポート & 製品ディスカッション
弊社製品をお選びいただき、ありがとうございます！弊社製品での体験が可能な限りスムーズになるよう、さまざまなサポートを提供しています。異なる好みやニーズに対応するため、複数のコミュニケーションチャンネルを提供しています。