Seeeduino XIAOによるCO2モニター(5) フロントエンドProcessing編

Arduinoのみのスタンドアロンではなくフロントエンド側を準備するので、シンプルな範囲でも最低限これくらいはということで、以下の機能を実装しました。

• CO2濃度、温度、湿度の現在値の数値表示
• CO2濃度、温度、湿度のグラフ表示
• CO2濃度、温度、湿度のデータのCSVダンプ及びCSVロードからのグラフ表示
• 設定メニュー（COMポート関連含む）

Processingの環境設定

ControlP5

ControlP5はコントロール系のGUIを簡単に扱うためのライブラリです。Processingのスケッチ → ライブラリをインポート → ライブラリを追加 から ConrolP5で検索してインポートします。

ControlP5にはグラブ描画を扱うChartクラスがあるのですが、これがなかなか思い通りに使えなかったため、グラフ描画専用のgraficaをインポートして使いました。同様にProcessingのスケッチ → ライブラリをインポート → ライブラリを追加 から graficaで検索してインポートします。

なおライブラリをインポートすると、Processingの ヘルプ → ライブラリ・リファレンスから、ローカルにインストールされたリファレンスマニュアルを参照することができるのが非常に便利でした。

フロントエンドアプリの機能要件的に、Processingを使ったというよりは、ControlP5とgraficaのライブラリでアプリを構築したという感じですので、Processingの真価を知るにはやはりコンピューターアート系の用途で使うべきなのかも知れません。

Processingスケッチ

Processingスケッチも同様にエレホビカのGitHubのprocessing_CO2monitorディレクトリにありますのでgit cloneで取得してください。

import java.util.*;
import java.text.*;
import processing.serial.*;

void setup() {
  String comPorts[] = Serial.list();
  // COM PortとSpeedは実際は設定メニューから選択する
  // ただしSeeeduino XIAOの場合はUSB CDCなのでSpeed値は何でも良い
  String comPort = comPorts[0]; 
  Port = new Serial(this, comPort, 115200);
  Port.bufferUntil(10);
}

public void serialEvent(Serial Port) {
  String comText = Port.readStringUntil(10);
  print(comText);
}

COMポート名とSpeedでSerialクラスを初期化すれば、あとは受信するたびにserialEvent(Serial Port)がコールバックされるので、コールバック内に処理を書けばよいです。このあたりのシンプルさは、例えばNational Instruments社のLabWindows / CVIのシリアル通信環境と同様の感覚で良いです。
なお、Serial.list()にて有効なシリアルポートのリストが取得できます。

ControlP5によるGUIパーツ配置

import java.util.*;
import java.text.*;
import processing.serial.*;
import controlP5.*;

ControlP5 cp5;
String comPorts[];

void setup() {
  size(640, 620);
  surface.setTitle("CO2 Monitor");

  cp5 = new ControlP5(this);
  ControlFont cf0 = new ControlFont(createFont("Arial", 12));

  cp5.addScrollableList("comPort")
      .setFont(cf0)
      .setPosition(10, 30)
      .setSize(100, 60)
      .setBarHeight(20)
      .setItemHeight(20)
      .addItems(comPorts)
      .setOpen(false)
      .addCallback(
        new CallbackListener() {
          public void controlEvent(CallbackEvent theEvent) {
            if (theEvent.getAction() == ControlP5.ACTION_PRESS) {
              ScrollableList comPort = (ScrollableList) theEvent.getController();
              comPorts = Serial.list();
              comPort.setItems(comPorts);
            }
          }
        }
      )
      // Label
      .getCaptionLabel()
      .setText("select Port")
      .toUpperCase(false)
      ;
  
  cp5.addScrollableList("comSpeed")
      .setFont(cf0)
      .setPosition(10, 100)
      .setSize(100, 60)
      .setBarHeight(20)
      .setItemHeight(20)
      .addItems(comSpeeds)
      .setOpen(false)
      // Label
      .getCaptionLabel()
      .setText("select Speed")
      .toUpperCase(false)
      ;
  // === Load Properties ===
  cp5.loadProperties("sensor.properties");

}

public void comPort(int theValue) {
  // ScrollableList("comPort")の値が変更された場合のコールバック処理
}

public void comSpeed(int theValue) {
  // ScrollableList("comSpeed")の値が変更された場合のコールバック処理
    // === Save Properties ===
    cp5.saveProperties("sensor.properties");
}
public void mouseReleased() {
  // グローバルなマウスボタンを離したときのコールバック
}

コールバックはGUIパーツの値変更イベントに関しては、特にメソッドの登録なしに定義した名前と同名のコールバックメソッドを記述するだけで良いです。それ以外のマウスオーバーやマウスクリックなど、よりプリミティブなイベントをキャッチしたい場合は、addCallback()にてそれぞれのパーツにCallbackListener()を登録しておく形になります。ただし、GUIパーツのクラスによってはaddCallback()メソッドがない種類のものもあったりして若干戸惑いました。必要に応じてProcessing自体からのイベントのコールバックと組み合わせて挙動をコーディングしていきます。
ControlP5のGUIパーツの振る舞いについてですが、コントロール系アプリケーションのGUIパーツが通常こうあってほしいという振る舞いにデフォルトでなっていなかったり、あるいは一般的な振る舞いをするように設定しようにもなかなか簡単にはできなかったりということが時々ありました。例えば設定メニューをマウスで開いたのち、マウスを別の位置に移動したら自動でメニューは閉じて欲しいのですが、おそらくやり方はきっとあるはずですが、力不足でできませんでした。
ControlP5の良い点としては、すべてのパーツではありませんが、状態保持系のパーツについては、json形式での値の保存(saveProperties)、復元(loadProperties)が簡単にできる点が挙げられます。この機能はあって本当に楽ができました。

graficaによるグラフ描画