Webコントロールをバージョンアップ

試作版のまま使用してきたコントロール用Webページですが、機能や表示すべき項目が決まってきましたので、この辺りできちんと(?)作りこんでみました。

webコントロール画面

webコントロール画面

2カラムの構成で、メインにカメラ画像と操作ボタン、サイドには情報表示と設定ボタンを配置しました。 情報表示にはアナログメーターのようなデザインを採用しています。 これは JustGage というJavaScript用ライブラリを使用しています。 複数のメーターを表示していますが、動作も軽快でカスタマイズの為のオプションも充実しています。

表示しているデータは、wifi電波強度、超音波距離測定値、CPU負荷、CPU温度、バッテリー電圧、バッテリー電流です。 また、稼働時間は数値で示しています。 情報の取得はjQueryプラグインのPeriodicalUpdaterを使い、2秒毎にリクエストを送信しjson形式で受けています。

カメラ画像の中心にある、照準のようなものは超音波距離計の測定エリアの目安となっており、測定値も表示しています。 この表示は、情報表示ボタンで非表示に出来ます。

今後は、コントロールボタンのキーボード割り当てや特殊コマンドを実行可能なインターフェースを盛り込んでいきたいと思います。

自分なりには納得の見栄えではあるのですが、webデザインの素質はありませんね。 やっぱり。

 

 

関連記事

  • Webカメラに超音波センサーを組み込むWebカメラに超音波センサーを組み込む webカメラへパン・チルト機構を設けますが、超音波センサーや照明用LEDも同じ方向を向くような構成にしたいと思います。 購入前には計画し […]
  • リアルタイムクロック RTC-8564NB で起動するリアルタイムクロック RTC-8564NB で起動する ESAの彗星探査機「フィラエ」が電力喪失、スリープモードに移行 探査機にとって電力は命です。 フィラエは太陽光パネルに光が当たれば、復活の […]
  • USB オーディオアダプタでサウンド機能をアップグレードUSB オーディオアダプタでサウンド機能をアップグレード サウンド機能を追加されたハウスローバーは、毎日のようにBGMとしてインターネットラジオ受信機になっています。 デスクトップPCで聞けばいい […]
  • pigpioでPWM制御するpigpioでPWM制御する PWMによる速度制御は「WiringPiでPWM制御する」で実験しましたが、致命的な問題により実用とはなりませんでした。 他に良い方法はな […]
  • ロボット探査車の製作ロボット探査車の製作 気ままに製作中のロボット探査車。 作業中は記録に残すことを忘れてしまうので、以前の実験結果などが残っていません。 ドキュメントは、必要です […]
  • Raspberry Piの初期設定 – Arch LinuxRaspberry Piの初期設定 – Arch Linux Raspberry PiのOSは、当初、Raspbianを使用していたのですが、少しでも軽快な動作を期待して、Arch […]

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です