M5StickCサーバー & リアルタイム可視化システム

概要

このシステムは、M5StickCデバイスから加速度データをリアルタイムで収集し、可視化するためのソフトウェアです。

システム構成

システムは以下の2つの主要コンポーネントで構成されています：

1. サーバーサイド (myfirst.js)

• TCP通信サーバー
  • ポート: 3002
  • M5StickCデバイスからの加速度データを受信
  • 複数デバイスからの同時データ受信に対応
• WebSocketサーバー
  • ポート: 3001
  • クライアントアプリケーションとリアルタイムデータ通信
  • データの記録制御機能
• データ記録機能
  • CSVファイル形式でデータを保存
  • デバイスIDごとに個別のファイルを作成
  • 記録データ：時刻、M5StickC時間、加速度（X,Y,Z軸）、加速度ノルム

2. クライアントサイド (App.js)

• リアルタイムグラフ表示
  • 各デバイスの加速度データをリアルタイムでグラフ化
  • X, Y, Z軸の加速度を個別に表示
  • 最新100データポイントを表示
• 制御機能
  • データ記録の開始/停止ボタン
  • 記録状態の永続化（ローカルストレージ使用）

主な機能

• 複数デバイスからのデータ同時受信
• リアルタイムデータ可視化
• データの自動保存（CSV形式）
• 日付ごとのデータ管理
• デバイスごとの個別データ管理

データ形式

記録データ項目

• 時刻（サーバー時間）
• M5StickCデバイス時間
• 加速度ノルム
• X軸加速度
• Y軸加速度
• Z軸加速度

技術スタック

• フロントエンド
  • React.js
  • Recharts（グラフ表示）
  • Socket.IO-client
• バックエンド
  • Node.js
  • Express
  • Socket.IO
  • TCP/IPソケット通信