index
ヘルプの作成、WWWブラウザ、データ処理、グラフ表示

前節で作成した通信機能は、スマートフォンとMCU基板の間でバイト配列の内容を送受信するだけでした。ここでは、ヘルプの作成、webページ表示、データの取り扱い、グラフ表示について説明します。

*ヘルプとwebの表示

ヘルプファイルをHTMLで用意することにします。また、最新情報や更新情報をユーザに提供するため、httpサーバへもアクセスできるようにします。

ヘルプファイルを表示するために、ここでは、メインアクティビティの空き面積を利用します。もっと格好良くしたければ、新しいアクティビティを作成してください。
URLへのアクセスは、スマートフォンにインストールされているブラウザを利用します。アプリケーションから、他のアクティビティを利用することができる、インテントというクラスについてBluetooth接続の項でも説明しましたが、この機能を使えば他のアプリケーションのアクティビティも利用することができます。ただし、利用環境において、どんなアプリケーションがインストールされているのか、予め知ることはできないので、アクティビティではなく、アクションの指定により利用可能なアクティビティを表示する暗黙的インテントを使用します。この方法は、既に、Bluetoothデバイスの呼び出し時に、ユーザの許可を受け取るところなどで使用しています。ここでは、ヘルプと最新情報をメニューから呼び出せるようにしてみます。

  1. Project 欄から、app/src/main/res/menu/option_menu.xml を開く
  2. 下記の Item を追加
        <item android:id="@+id/help"
              android:title="help"
              android:icon="@android:drawable/ic_menu_help">
        </item>
        <item android:id="@+id/info"
              android:title="information"
              android:icon="@android:drawable/ic_menu_info_details">
        </item>
    
ヘルプ用のHTMLファイルを作成して、プロジェクトに登録します。HTMLのヘルプファイル例は下記に置きますので、参考にしてください。日本語文字コードはEUC、改行コードはLFです。

  1. Project欄の app/src/main を右クリックし、ポップアップメニューから、New - Directory を選択
  2. assets という名前でディレクトリを作成
  3. help.html ファイルを assets にドラッグ&ドロップ
HTMLファイルを表示するためのWebViewを作成します。

  1. Project欄から、app/src/main/res/layout/activity_main.xmlを開いて、Design タブをクリック
  2. Palette欄から、Containers - WebView を選んで空いたところに配置
  3. WebViewのプロパティ欄で、ID = webView1, Width = match_parent, Height = match_parentに設定
  4. app/src/main/java/jp.merl.tobacco/MainActivity.javaを開き、public boolean onOptionsItemSelected(MenuItem item) メソッドの switch - case 文に下記の2つの case を追加

        case R.id.help:
    	// set File location
            final String URI = "file:///android_asset/help.html";
    	// get instance id of webView object
    	WebView webView = (WebView)findViewById(R.id.webView1);
    	// show HTML file
    	webView.loadUrl(URI);
    	return true;
    
        case R.id.info:
    	// access by http
    	Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("http://jaco.ec.t.kanazawa-u.ac.jp/edu/android2/"));
    	startActivity(intent);
    	return true;
    
    最初のcase文が、Helpファイルへのアクセスです。WebViewクラスを使用してアクティビティ上に配置したオブジェクトに表示させています。file:///android_asset/ になっているところに注意してください(assetsではなくasset, file://ではなくfile:///)。後のcaseが、URIによるインターネットへのアクセスです。こちらは、ACTION_VIEWにより暗黙的インテントを指定しています。
インターネットの使用を許可を与えます。ただし、Bluetooth利用のパーミッションを設定するときに、一緒にインターネットのパーミッションを記述したので、ここでは、再度追加する必要はありません。

  1. app/src/main/res/AndroidManifest.xml を開く
  2. 下記の uses-permission を追加する。
    <uses-permission android:name="android.permission.INTERNET"/> 
    
*通信ポートからの数値と文字列の取得

PSoCのUARTには、指定したデリミタで受信を検知するAPI関数が用意されています。この機能を利用して、コマンド単位で受信バッファからコマンドとパラメータを読み出しています。一方、Androidの場合は、デリミタやデータ長で、受信イベントが発生しません。このため、読み出すタイミングでデータが切れているので、受信データを1Byte単位で調べて、コマンドやデータを取り出す必要があります。また、受信バッファのデータは、コマンドやデータブロックの途中で切れている可能性もあるため、前回受信したデータの最後と今回受信したデータの最初をつなぎ合わせるようにします。

アプリケーションが、Bluetoothデバイスから、Byte配列で受け取ったデータは、そのままByte単位の処理を行ってもよいのですが、Javaには、高機能なStringクラスが用意されているので、これを利用して、データやメッセージを取り出してみます。まず、Byte配列 readBuf から、StringクラスのインスタンスreadMessageを生成します。前回、尻切れになっていたデータstrStrを先頭につなぎ合わせて、新たにString strDataを作ります。PSoCから送信する際に、デリミタ(CR+LF = "\r\n" = 0x0a0d)を付けておいたので、Stringのsplitメソッドで、デリミタでStringオブジェクト配列に分割しています。この後、データの後尾がデリミタのない尻切れ状態に成っていないか判定を行います。例題の該当部分を下記に示します。ところで、CR(キャリッジリターン)、LF(ラインフィード)と呼ばれる、表示制御コードは、16進数表示では、それぞれ、0x0aと0x0dに相当します。文字としては表示および入力ができないため、エスケープシーケンスという定数の表記法が用意されています。Javaの場合も、C言語と同様、\rと\nが与えられています。

handleMessage(Message msg)のcase: MESSAGE_READのブロック(1)
                // construct a string from the valid bytes in the buffer
                String readMessage = new String(readBuf, 0, msg.arg1);
                
                // concatenation of last off-cut string 
                String strData = strStr.toString() + readMessage;

                String delm = "\r\n";
                // Split by delimiter
                String strSP[] = strData.split(delm);

[注意] 上記のStringを使用した処理は、バイナリデータには使用できません。例えば、整数の0は、null文字列と扱われます。バイナリデータを含む場合は、byte配列のまま処理してください。配列の結合は、System.arraycopy()メソッドで簡便に実行できます。

*Stringと文字表示の取り扱い注意

*グラフの作成

グラフ作成ライブラリを使用すると、面倒な座標計算などなしに簡単に綺麗なグラフが作成できます。代表的なものに、AFreeChartなどがあります。。

  1. Project欄の app/libs ディレクトリに、ダウンロードしたjarファイルをドラッグ&ドロップ
  2. app/libs/afreechart-***.jar を右奥リックして、Add As Library... を選択

このライブラリの使用法は簡単ですが、こちらのWebページが参考になります。


index

お問い合わせはこちらまで: kitagawa@is.t.kanazawa-u.ac.jp

© Kanazawa Univ., 2013