HID Graph

使い方と仕様

1. スケッチでの数値の書き方

hid.Print() / hid.Println() で出した 1 行（改行まで）を、ページが次の 3 つの書き方のどれかとして自動で見分けます。 スケッチ側の設定は要りません。

書き方	届く行の例	グラフ
1 行に数値 1 つ	123	段が 1 つ。名前は「値1」
1 行に数値を複数	12,34,56　12 34 56	数値の数だけ段ができる。名前は左から「値1」「値2」「値3」
名前つき	temp:23 hum:45　temp:23,hum:45	名前がそのまま段の見出しになる
名前と単位	temp[℃]:23	見出しが「temp [℃]」になる

• 区切りは、カンマ・空白・タブです。: の前後には空白を入れられます。
• 数値は、整数・小数・指数の形（-12　3.14　1e-3）で書きます。
• 名前には、空白・カンマ・:・[・] を使えません。数値だけの名前も使えません。
• 文字は UTF-8 として読みます。スケッチに ℃ や日本語の名前を書いても化けません。
• 名前のない値は「何番目の数値か」で同じ値とみなします。名前と単位は、段の見出しの欄で書き換えられます。
• 途中から値が増えたら、その時点で段がいちばん下に足されます。値が来なくなったら、来ていない間だけ線が途切れます。

2. 印（数値として読めない行）

上の書き方にきっちり合わない行（start　sensor error　count = 5 など）は、 グラフの上の「印」になります。その行が届いた時刻に、全部の段を貫く縦線が出て、いちばん上の段の上の端に文字が出ます。 縦線にマウスを乗せると、全文が出ます。数値としてグラフにしたい時は、count:5 のように書いてください。 空の行は、何もしません。

3. 時刻

グラフの横軸と CSV の時刻は、ページがその行の改行を受け取った時刻（記録を始めてからの時間）です。基板の millis() ではありません。

• スケッチの hid.Print() は、6 文字送るごとに 12 ms 待ちます。hid.Println(v) は値と改行で 2 回送るので、1 行に約 24 ms かかります（1 秒に 40 行くらいまで）。
• 受け取った時刻は、値を測った時刻より「送った回数 × 約 12 ms」遅れます。同じ形の行なら、遅れはほぼ同じです。

4. グラフの見方と操作

したいこと	操作
見る幅を変える	「幅」の 5 秒・10 秒・30 秒・60 秒を選ぶ。直近のその幅が流れ続けます
過去を見る	「一時停止」を押す（グラフをドラッグしても止まります）。ドラッグで過去へ動き、ホイールで幅が変わります。止めている間もデータは受け取り続けます。「再開」で最新に戻ります
値を読む	グラフにマウスを乗せる。縦線が全部の段に出て、その時刻にいちばん近い点の値が段ごとに出ます。時刻は下の軸に出ます
縦軸を固定する	段の見出しの「自動」を押して「固定」にし、下と上の値を入れる。「自動」の間は、見えている範囲の最小〜最大に合わせ続けます
段を入れ替える	段の左の ⋮⋮ をつかんで上下に動かす。測定中でもできます。CSV の列も同じ並びになります
2 つの値の関係を見る	「XY」に切り替えて、X と Y の値を選ぶ。同じ行で届いた値どうしを点にします。描くのは「時間」と同じ幅の点で、古い点ほど薄くなります

段が多くて 1 段が 80 px より低くなる時だけ、グラフの中を縦にスクロールします。

5. 式の段（速度・加速度など）

段の見出しの「＋変化」を押すと、その値の変化の速さ（時間で微分したもの）の段が、すぐ下にできます。 距離の段で押せば速度、できた速度の段でもう一度押せば加速度です。単位は cm → cm/s → cm/s² と自動で付きます。 「＋ 式の段」を押すと、自分で式を書く段ができます。

使えるもの	書き方	例
四則演算・括弧・べき乗	+ - * / ( ) ^	temp - 25　(a + b) / 2
数学の関数	abs sqrt sin cos atan2 log min max	sqrt(ax^2 + ay^2 + az^2)
微分	d(名前, N)	d(h, 5)　d(h, 5) * 3.6
移動平均	avg(名前, N)	avg(h, 9)

• 式の中では、段の名前で値を指します。記号や空白が入った名前は "d距離/dt" のように " で囲みます。名前を書き換えると、その名前を使っている式も書き換わります。
• d(名前, N) は、続いた N 個の点に直線を当てはめて、その傾き（1 秒あたりの変化）を求めます。N は 3 以上の奇数です。N を大きくすると線がなめらかになり、急な変化にはなまって反応します。
• d() と avg() の結果は、N 個の点の真ん中の点の時刻に描きます。このため線の先は、今より少し手前で止まります（50 ms 間隔・N = 5 で約 100 ms、もう一度 d() をかけた加速度で約 200 ms）。
• d() と avg() は、線が途切れているところをまたいでは計算しません。
• 2 つ以上の値を使う式（temp - hum など）は、その値が同じ行でそろって届いた時だけ計算します。別々の行で出している値どうしは計算しません。
• sin と cos の角度、atan2 の結果はラジアンです。log は自然対数です。
• 0 で割った時など、結果が数にならない点は描きません。

6. 警報（上限・下限）

段の見出しの「警報」を押すと、上限と下限を決める小さな窓が開きます。どちらか片方だけでも決められます（空欄は使いません）。 決めた値は、グラフに赤い点線で出ます。縦軸の「固定」の上・下とは別のものです。

いつ	すること
範囲の中から外へ出た時（上限を超えた・下限を下回った）	グラフに赤い印を付ける（CSV では、その値の行の「印」の列に入る）。「警報の知らせ方」で選んでいれば、音を鳴らす・スマホに知らせる
外にいる間	段の見出しと、グラフの枠・今の値を赤くする。値が届くたびに知らせることはしない
範囲の中へ戻った時	印だけ付ける

• 「超えた」は上限より大きい時、「下回った」は下限より小さい時です。上限・下限と同じ値は、範囲の中です。
• 音とスマホへの知らせは、同じ段では 1 分に 1 回までです。しきい値の近くで値が揺れて、出たり戻ったりを繰り返す時のためです。印はそのたびに付きます。
• 上限・下限を決めた時に、もう範囲の外にいる場合は、知らせずに赤くするだけです（外へ「出た」わけではないので）。
• 式の段（速度・加速度など）にも使えます。d() と avg() の値は N 個の点の真ん中の時刻に置かれるので、知らせは超えた時刻より少し後に届きます（50 ms 間隔・N = 5 で約 100 ms）。
• スマホに知らせるには、ntfy を使います。スマホに ntfy のアプリを入れてトピック名を登録し、同じ名前を「警報の知らせ方」に入れます。トピック名を知っている人は誰でも知らせを読めるので、推測されにくい名前にしてください。iPhone で、アプリには届くのに通知に出ない時は、アプリでそのトピックの購読を消して、同じ名前で購読し直してください。
• 知らせを送るのはこのページです。ページを閉じたり、PC がスリープしたりすると送れません。超えた時に自動で CSV を保存することはできません（保存のダイアログは、人がボタンを押した時にしか出せないため）。

7. 記録を消す

記録を消して 0 からやり直すきっかけは、次の 2 つだけです。基板をつなぎ直しただけでは消えません。

• ページの「クリア」ボタンを押した時
• スケッチが hid.Clear() を送った時（setup() に書いておくと、基板が動き出すたびに 0 から始まります）

消す直前の記録は、1 回分だけ取ってあります。「消す前の記録を保存」で CSV にできます。 段の名前・単位・式・並び・縦軸の設定・上限と下限は、消しても残ります。

8. CSV

項目	内容
保存する範囲	「全部を保存」＝記録した全部。「表示中の範囲を保存」＝いまグラフに見えている時刻の範囲
行	届いた 1 行が、CSV の 1 行
列	時刻 [ms]、値（段の並び順。見出しは temp [℃] の形）、印
受け取った値	届いた文字のまま（23.50 は 23.50）
式の段の値	有効数字 6 桁。d() と avg() の値は、N 個の点の真ん中の点の行に入る
その行に無い値	空欄
印	印の行の 印 の列に文字が入る（数値の列は空欄）
文字コード	UTF-8（BOM 付き）。Excel でそのまま開けます。Python で読む時は encoding='utf-8-sig' を指定してください
ファイル名	graph-年月日-時分秒.csv（記録を始めた日時）。保存のダイアログで変えられます
閉じる前の確認	「全部を保存」で書き出していない行が 1 行でもあると、ページを閉じる・再読み込みする・別のページへ移る前に、ブラウザが「このサイトを離れますか？」と聞きます。測定中は、保存したあとに届いた行も数えます。「表示中の範囲を保存」は一部だけなので数えません。「消す前の記録」が書き出されないまま残っている時も聞きます。聞く文はブラウザが決めるので、ブラウザによって違います。ブラウザそのものが落ちた時や、PC の電源が切れた時は、聞くことができません
Excel でグラフにする時	印の行や、別の行で届いた値の行は空欄になるので、そこで線が切れます。グラフを右クリック →「データの選択」→ 左下の「非表示および空白のセル」→「データ要素を線で結ぶ」で、空欄を飛ばして線がつながります

9. 通信

HID Console と同じ Print プロトコルです。Input Report 8 バイトの先頭が 0x50、2 バイト目がフラグ（0x04＝クリア）、 残り 6 バイトが文字で、改行は 0x0A です。接続した時に、ブラウザから接続通知（0x01 の Feature Report）を送り、 スケッチの hid.WaitAvailable() を先へ進めます。

接続した直後は、最初の改行までに届いた文字を読まずに捨てます。基板がすでに動いていると、行の途中から届くためです （h[mm]:523 の 23 だけが届くと、数値と読み違えて「値1」の段ができてしまいます）。 捨てた文字は、HID コンソールに灰色で出ます。スケッチが hid.Clear() を送った時は、次の文字が行の始まりなので、そこから読みます。 ちょうど行の始まりで接続した時は、正しい 1 行を捨てることになります。