Processing > ControlP5 > ScrollableList > リストから選択できた / Serial.list()の表示と選択

動作環境

Processing 3.1.1 on Windows 8.1 pro(64bit)
Library: ControlP5 v2.2.6

http://qiita.com/7of9/items/778a2c3bc763d1d9401b
にてListBoxを使ってリスト項目の選択を試みたがうまく行かなかった。
ScrollableListではどうかという記載が見つかっていたので使ってみた。

リスト表示と選択

code v0.1

以下に実装した。

import controlP5.*;
import java.util.*;

ControlP5 cp5;
int myCurrentIndex = 0;
String[] tokens;

void setup() {
  size(400, 400);
  cp5 = new ControlP5(this);
  
  tokens = new String[10];
  tokens[0] = "Hello";
  tokens[1] = "Hi";
  tokens[2] = "Ca va bien?";
  
  List l = Arrays.asList(tokens[0], tokens[1], tokens[2]);

  cp5.addScrollableList("dropdown")
     .setPosition(100, 100)
     .setSize(200, 100)
     .setBarHeight(20)
     .setItemHeight(20)
     .addItems(l)
     // .setType(ScrollableList.LIST) // currently supported DROPDOWN and LIST
     ;
}

void draw() {
  background(0);
  
  fill(255);
  if (myCurrentIndex >= 0) {
     text(tokens[myCurrentIndex], 200, 40); 
  }
}

void dropdown(int n) {
  println(n);  
  myCurrentIndex = n;  
}

実行例

選択した項目がウィンドウ上面に表示されるようになった。
項目選択時には0, 1, 2など項目番号(n)がコンソール出力される。

シリアルリストの表示と選択

Serial.list()により使用できるシリアルポートのリストが取得できる。
それをScrollableListと組合せてみた。

code

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

Serial myPort;

ControlP5 cp5;
int myCurrentIndex = 0;
String[] tokens;

void setup() {
  size(400, 400);
  cp5 = new ControlP5(this);
  
  tokens = new String[10];
  tokens = Serial.list();
  
  List l = Arrays.asList(Serial.list());

  cp5.addScrollableList("dropdown")
     .setPosition(100, 100)
     .setSize(200, 100)
     .setBarHeight(20)
     .setItemHeight(20)
     .addItems(l)

     // .setType(ScrollableList.LIST) // currently supported DROPDOWN and LIST
     ;
}

void draw() {
  background(0);
  
  fill(255);
  if (myCurrentIndex >= 0) {
     text(tokens[myCurrentIndex], 200, 40); 
  }
}

void dropdown(int n) {
  println(n);  
  myCurrentIndex = n;  
}

slidebarでのCOMポート選択よりもこちらの方がまともなUIになりそうだ。