GWの工作2014 その3 ～操作インターフェースのwebアプリ化～

androidのバージョンがどうたらみたいな問題に悩まされたり、
PC上でちょっとした動作テストを行うために専用コードを書いたり（PCでのテスト用にGUIのインタフェースを作ろうとも考えた）、
もしかしたらiphoneでも使いたくなるかもしれないとか考えたときの解としてhtml(とjavascript)を選択。これは今回のラジコン製作の中でも最も成果が大きかった。ブラウザがあれば大体何でも使えるインターフェースが作れるのは多分後で効いてくる。はず

～今回のお話～
pythonのwebフレームワークを使ってPCをサーバー化、websocketを使ってリアルタイム性の高い通信を行ったときのメモ

環境
・python2.7　（eclipse4.3）
・c,c++のコンパイラはmingw32
・webフレームワークとしてgevent、geventwebsocket.handlerを使用
・htmlとjavascriptはBracketsとかいうフリーソフトを使用。ライブプレビュー機能が便利。

参考資料：
geventの導入関連（筆者環境では非常に重要だった。visualstudioを普段から使っている人は素通りできるかも）
・ http://stackoverflow.com/questions/2817869/error-unable-to-find-vcvarsall-bat
（概要、上記参考URLより引用）　
C:\Python27\Lib\distutils\distutils.cfg（←ファイルが無かったら新規作成）の中身を↓

[build]
compiler=mingw32

とする（内容を追記、変更する）。そのあとプロンプトを立ち上げてgeventをインストール（↓の問題が無ければ）

・http://stackoverflow.com/questions/13592192/compiling-pygraphviz-unrecognized-command-line-option-mno-cygwin
 （概要、上記参考URLより引用）
C:\Python27\Lib\distutils\cygwinccompiler.py　 というファイル内の

    self.set_executables(compiler='gcc -mno-cygwin -O -Wall',
                         compiler_so='gcc -mno-cygwin -mdll -O -Wall',
                         compiler_cxx='g++ -mno-cygwin -O -Wall',
                         linker_exe='gcc -mno-cygwin',
                         linker_so='%s -mno-cygwin %s %s'
                                    % (self.linker_dll, shared_option,
                                       entry_point))

 を

 
    self.set_executables(compiler='gcc "" -O -Wall',
                         compiler_so='gcc "" -mdll -O -Wall',
                         compiler_cxx='g++ "" -O -Wall',
                         linker_exe='gcc ""',
                         linker_so='%s "" %s %s'
                                    % (self.linker_dll, shared_option,
                                       entry_point))

に変更する（-mno-～というオプションを消す）

これでgeventに限らずコンパイルが必要なpythonのツールが

スムーズにインストールできるようになるはず。

Websocketの参考資料： 

geventを使ったwebsocketの実施例

 へきょのーと　様　記事URL　http://d.hatena.ne.jp/hekyou/20120712/p1

上の記事を参考にしてwebsockサーバーを立て、↓のサイトで動作を確認

Echo Test  http://www.websocket.org/echo.html

htmlの参考資料：

stackoverflow http://stackoverflow.com/questions/5165579/onchange-event-for-html5-range

htmlのスライダーの値をリアルタイム変化させる為の質問。

Scott氏の回答が非常にスマート 

参考資料などを頼りになんとかインターフェースを構築 

メモ　：

・javascriptのファイルとhtmlのファイルは別にすること

（htmlに直接スクリプトを書き込まないこと） これをやらないとIDEのエラーチェックがちゃんと機能しない

・python側、html側ともにPC（サーバー）のアドレスを127.0.0.1にしないこと。

別の機器からアクセスするとき面倒なことになるので192.168～のようにIPアドレスを記入すること

・IPカメラの映像を写すには以下のようにする。大きさはお好みで

（AI-ball（インフラストラクチャモード）の場合） 

<img src="http://（カメラのIPアドレス）/?action=stream.mjpeg" width="320" height="240"> 

（「IPwebcam」を使ったスマホの場合）

 <img src="（スマホのIPとポート）/videofeed" width="320" height="240">

 それぞれ上のタグを入れるだけで（大抵の）ブラウザ上に一発で動画が出る。

アンドロイドアプリで動画を出そうと苦しんでいたのは何だったのか。googleの人（？）を

問い詰めたくなるレベル。あとhtmlの仕様を策定している人たちは神

 肝心のインターフェースのほうは一応動かすのに必要な要素はあるが（その1の動画参照）

まだぜんぜんなのでまた今度