ブラウザで使えるUIとは

obniz.jsをブラウザで動かすことでブラウザの様々な機能とハードウェアを連携させることができます。それによって以下のような連携が1つのProgramで作成できます。

  • 温度センサーの値を数字で出し、グラフで描画
  • 画面上のボタンを押したりマウスの位置に合わせてモーターを動かす
  • フォームに入れたデータをUARTで送信
  • カメラで撮影した画像を画面に表示

といったリッチで双方向操作可能な画面と電子回路の連携をJavaScriptのみで実現できます。

どのようなUIがあるのか

フォーム

HTMLに標準で備わっているものとしてフォームがあります。

参考: フォームとは

フォームを使うことで電子回路を操作するためのものを画面に出すことができます。チェックボタンやスライダー、入力フォームでの文字入力などです。

グラフ

Chart.jsなどを利用すれば簡単に棒グラフ・円グラフなど様々なグラフを描画できます。温度変化をグラフ化したり、A/Dの変化やエラーの発生時期を表現することができます。

3Dグラフィック

Three.jsなどを利用することで3Dの描画を容易に行うことができます。加速度センサーを使って傾きをグラフィカルに表現するなどセンサーを使って集めた現実の状況を画面内に表すことができます。

音声合成・音声認識

Chromeなど一部のブラウザではJavaScriptから音声を合成したり、音声を認識することができます。これにより音声で指示できるリモコンや、話すロボットなどを作成できます。