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

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

webコントロール画面

webコントロール画面

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

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

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

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

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

 

 

関連記事

  • DC-DCコンバータの超高効率を実感!DC-DCコンバータの超高効率を実感! 電子工作で使用する、定電圧回路にはリニアレギュレータが定番です。 できるだけ効率のよいものを選定するようにはしますが、この手のパーツはスト […]
  • 2015年のロードマップ2015年のロードマップ 迎春。 ハウスローバーの製作は、「きままに」 […]
  • サウンド機能の追加とインターネットラジオの受信サウンド機能の追加とインターネットラジオの受信 アラートを発報するために赤色LEDを4ヶ所に配置し、回転発光、フラシュ発光ができるようになりました。 これにあわせ、サイレン音を発生させる […]
  • View Direction Rotation Control SystemView Direction Rotation Control System ハウスローバーを無線LAN経由でコントロールする場合、webカメラの映像や命令には遅延が生じます。直進の場合は距離センサーのデータを参考に […]
  • 2016年の製作計画2016年の製作計画 謹賀新年。 昨年の年頭にも開発計画を立て、8割位は実行できたと思います。 年末には駆け込みで新型シャーシの製作も行いました。 総括とし […]
  • フォトインタラプタで距離を測定するフォトインタラプタで距離を測定する 加速度センサーによる距離の推定結果が思わしくなかったため、オーソドックスなフォトインタラプタ(フォトリフレクタ)を使用し、距離を測定するこ […]

コメントを残す

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