このサイトはMacを使って processing の動作や活用法を学びます。

20 シリアルポートを drop-downで選ぶ

ControlP5はGUIライブラリを使い、processing のシリアル通信設定時にシリアルポートを ScrollableList(drop-down)コントロールに表示させ、リストの中から希望するポートを選ぶと設定が完了するスケッチを作成しました。

 

 

Processingに新規スケッチを作成し、次のコードを追加します。

ScrollableListが画面に現われ、リストに接続可能のポートが表示されます。

希望項目を選択するとそのポートが接続され、ポートからデータが送られてくると IDE コンソール部にその内容が表示されます。

（このスケッチはデータ送信プログラムを省略してあります）

 

なお、通信速度は 115200 baudでプログラムされています。他の速度にするには、　    int sSpeed = 115200; 

の値を書き直してください。 

 

// シリアルポートを選ぶ

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

int sSpeed = 115200;    // シリアル通信速度
ControlP5 cp5;
ScrollableList d1;
Serial myPort = null;   // シリアルポート
List<:string> portList;
//int portIndex;

void setup() {
  size(300, 200);
  cp5 = new ControlP5(this);
  PFont myFont = createFont("Verdana",12);
  ControlFont cf1 = new ControlFont(myFont);
  textFont(myFont);
  cp5.setFont(cf1);
  portList = Arrays.asList(Serial.list());
  //int portIndex = portList.size()-1;

  // ScrollableListの設定：( name, x, y, width, height )
  d1 = cp5.addScrollableList("dropdown",20,25,220,160)
     .setBarHeight(20)
     .setItemHeight(20)
     .addItems(portList)
     //.setValue(portIndex)
     ;
  d1.getCaptionLabel()
     .toUpperCase(false)
     .getStyle().marginTop = 4;
  d1.getValueLabel()
     .toUpperCase(false)
     .getStyle().marginTop = 4;
}

void draw() {
  background(100);
}

void dropdown(int n) {
  // 既に接続されていれば、切断して
  // 新しい選択項目は、index n で接続する
 if ( myPort != null ) myPort.stop();
 myPort = new Serial(this, portList.get(n), sSpeed);
}

void serialEvent(Serial port) {
  // 受信データがあれば、IDE コンソールに出力
  if ( port.available() > 0 ) {
    String str = port.readStringUntil('\n');
    if ( str != null ) print(str);
  }
}

 

 

上記スケッチの初期設定は、ポートが非選択の状態です。私の場合最後にコンピュータに接続されたデバイスを利用する場合が多いので、ポートリストの最後の行が初期設定で選択されるようにしています。そのためには、スケッチ内の以下の２行のコメントを外してください。

また、表示を見やすくするために、フォントも変更しています。

 

 

次回は、ControlP5の主要コントロールを使った実用的スケッチのモールス信号解析アプリを紹介します。

 

目次