GitHub Pages / Chrome & Edge only

UIAPduino WebHID Lab

UIAPduino(HID ProMicro CH32V003)と Chrome の WebHID API を使った 双方向通信のデモ・練習ページ集です。 ブラウザとマイコンがドライバなしで直接やり取りできる WebHID の仕組みを さまざまなサンプルで体験できます。

⚠️ このサイトは Chrome または Edge でのみ動作します。
WebHID API は Firefox・Safari では利用できません。Chrome / Edge で開き直してください。
このサイトについて

🔌 WebHID とは

WebHID API は Chrome / Edge で使える Web 標準 API です。 USB HID デバイスをブラウザから直接制御でき、 ドライバのインストールは不要です。

  • HTTPS(または localhost)環境が必要
  • Feature Report でデバイスへデータ送信
  • Input Report でデバイスからデータ受信
  • USB Low Speed: 1パケット最大 8 バイト

⚡ UIAPduino について

UIAPduino は CH32V003 を使った HID 対応マイコンボードです。 Arduino IDE で開発でき、キーボード・マウス・WebHID 通信を同時に使えます。

  • VID: 0x1209 / PID: 0xD004
  • EP1: マウス(4 バイト、10ms)
  • EP2: キーボード(8 バイト、10ms)
  • EP3: WebHID TX(8 バイト、10ms)
  • EP0: WebHID RX(Feature Report 最大 16 バイト)
デバッグ / ユーティリティ
📜
HID Console
公開中
Arduino の hid.Print() / hid.Println() 出力をブラウザでリアルタイムモニタ。 DEC / HEX / ASCII で任意データを送信して hid.Recv() で受け取れます。 スケッチ開発中のデバッグ・動作確認に幅広く使えます。
Sketch: HidPrint.ino
デモページ一覧
🔁
Echo Test
公開中
16 バイトを UIAPduino に送信してそのままエコーバックを受け取る 基本動作確認ページ。Feature Report / Input Report の 双方向通信と 1 秒ごとのカウンターを確認できます。
Sketch: WebHIDTest.ino
Keyboard Practice
公開中
UIAPduino をキーボード HID として使い、文字入力・カーソル移動・ Backspace・Enter・Home キーを段階的に練習できるチュートリアル。 5 ステップで基本操作をマスターできます。
Sketch: KeyboardPractice.ino
🔀
Keyboard Practice 2
公開中
Practice 1 と同じ 5 ステップを switch 文で書き直す練習。 1 回書き込めばブラウザからステップを自由に切り替えて何度でも実行できます。
Sketch: KeyboardSwitch.ino
🖱
Mouse Practice
公開中
HID マウスの基本操作を固定座標で練習するページ。 クリック・四角形頂点クリック・ドラッグ・円ドラッグを、 .ino に座標を埋め込む形で段階的に確認できます。
Sketch: MousePractice.ino
🎲
Mouse Practice 2
公開中
ブラウザからマウス位置を受け取る発展版。 C++ のクラスの学習もできます。 HID コンソールにも対応しました。
Sketch: MousePractice2.ino
🏹
Maze Solver
Coming Soon
ブラウザ上の迷路を UIAPduino が WebHID 経由で解く デモ。センサーや LED との連携も予定。
🍮
Snake Game
Coming Soon
UIAPduino をコントローラーにしてブラウザ上のスネーク ゲームを操作。WebHID でリアルタイム入力を受け取ります。
🚀
Rock Dodge
Coming Soon
落下してくる岩を避けるアクションゲーム。 UIAPduino のセンサー入力と WebHID を組み合わせた インタラクティブなデモ。
💡
LED Controller
Coming Soon
ブラウザの UI から UIAPduino の LED を色・点滅パターンで リアルタイム制御。Feature Report の使い方を学べます。
📈
Mini Oscilloscope
Coming Soon
UIAPduino の ADC 値をリアルタイムでブラウザに ストリーミング表示する簡易オシロスコープ。 Input Report の高速受信を体験できます。
WebHID 通信の流れ

UIAPduino は USB HID デバイスとして動作し、ドライバなしで Chrome/Edge と通信します。
送信方向によって使う USB エンドポイントが異なります。

Web → UIAPduino(送信)
JavaScript
sendFeatureReport()
EP0 Control Transfer
最大 16 bytes
Firmware
usb_handle_user_data()
関数呼び出し
Arduino Sketch
WebHID.recv()
UIAPduino → Web(受信)
Arduino Sketch
WebHID.send()
EP3 Interrupt IN
8 bytes / 10ms
Firmware ISR
usb_handle_user_in_request()
イベント発火
JavaScript
inputreport イベント
使い方
  • Arduino IDE に UIAPduino ボードをインストール(Board Manager URL を追加)
  • 「HID ProMicro CH32V003 KBD+Mouse」ボードを選択し、Board Version を V1.4 以降に設定
  • 各デモページの Sketch 名のサンプルスケッチを書き込む
  • Chrome または Edge でこのページを開き、デモを選択してデバイスに接続
  • USB ケーブルを接続したまま、ページ内のボタンで通信を試す