GUIライブラリ ControlP5 を使ったプログラム

ボタン・テキストエリア・テキストフィールド・ドロップダウンリスト

GUIライブラリ ControlP5 とは Processing

GUI（Graphical User Interface）は、画面上のボタンやテキストボックスを、マウスやキーボードで操作するしくみです。
ライブラリは「よく使う機能をまとめた部品」。ControlP5 は Processing で GUI 部品を扱うためのライブラリで、標準環境に追加インストールして使います（CL環境ではインストール済み）。

この授業で扱う代表的な4つの部品です。

Buttonボタン

Textarea文字の出力

Textfield文字の入力

DropdownList項目の選択

import controlP5.*;  // ライブラリのインポート

ControlP5 cp5;        // グローバル変数で宣言

void setup() {
  size(500, 500);
  cp5 = new ControlP5(this); // オブジェクトを生成
  // ここで GUI 部品を定義する
}

void draw() {
  // 何もしなくても空の記述は必要
}

4つの部品を動かしてみるクリック / 入力 / 選択

sketch_gui — 500 × 500

テキストフィールド（入力）

リスト

コンソール（println の出力）

テキストフィールドに入力して「ボタン」を押すと、テキストエリアに追記され、コンソールにも表示されます。ドロップダウンで果物を選んでからボタンを押すと、選択項目がコンソールに出ます。

どの部品でも共通する骨組み import → 宣言 → setup → draw → 関数

import import controlP5.*; で ControlP5 を使うことを宣言します。

グローバル変数 ControlP5 オブジェクトの変数（cp5）と、各部品の変数（Button bt0; など）をプログラムの先頭で宣言します。

setup() cp5 = new ControlP5(this); で本体を生成し、cp5.addButton(...) などで部品を生成・設定します。

draw() 何もしなくても空の void draw(){} は必要。ドロップダウンを使う時は background() で再描画します。

自分で定義する関数ボタンがクリックされた時の処理を、addButton で付けた名前と同じ名前の関数（void bt0(){ ... }）として書きます。

4つの部品の生成と主なメソッド addXxx / set... / get...

Button（ボタン）cp5.addButton("bt0")

setPosition(x, y) / setSize(w, h) 位置・大きさ
setLabel("ボタン") ボタン上の文字
setColorBackground(#dddddd) ボタンの色
クリック時は void bt0(){ ... } が呼ばれる

Textarea（出力）cp5.addTextarea("ta0")

append(str) 文字を追記（改行は "\n" を末尾に）
clear() 表示中の文字を消去
setColor / setColorBackground 文字色・背景色

Textfield（入力）cp5.addTextfield("tf0")

getText() 入力された文字列（String）を取得
clear() 入力欄を空にする
setLabel(str) 欄の下に表示する文字

DropdownList（選択）cp5.addDropdownList("dl0")

addItems(items) String配列を項目に設定
getValue() 選択値（float: 0.0, 1.0, …）を取得
items[int(dl0.getValue())] で項目名に変換
close() 閉じる / setValue(-1) 初期値

4部品をまとめたプログラム例上のデモと同じ動き

import controlP5.*;
ControlP5 cp5;
Button bt0;
Textfield tf0;
Textarea ta0;
DropdownList dl0;
String[] items = {"りんご", "みかん", "バナナ", "メロン"};

void setup() {
  size(500, 500);
  cp5 = new ControlP5(this);

  bt0 = cp5.addButton("bt0");        // ボタン
  bt0.setPosition(350, 10).setSize(100, 30).setLabel("ボタン");

  tf0 = cp5.addTextfield("tf0");     // 入力欄
  tf0.setPosition(10, 10).setSize(300, 30);

  ta0 = cp5.addTextarea("ta0");      // 出力欄
  ta0.setPosition(10, 80).setSize(300, 300);

  dl0 = cp5.addDropdownList("dl0");  // 選択リスト
  dl0.setPosition(350, 80).setSize(100, 200);
  dl0.addItems(items);
  dl0.setValue(-1);
  dl0.close();
}

void draw() {
  background(#AAAAAA); // 項目が残らないよう再描画
}

void bt0() {            // ボタンが押された時
  String str = tf0.getText();        // 入力を取得
  ta0.append(str + "\n");          // 出力欄に追記
  tf0.clear();                       // 入力欄を消去

  int value = int(dl0.getValue());  // 選択値を整数に
  if ((value >= 0) && (value < items.length)) {
    println("「" + items[value] + "」が選択されています");
  }
}

Javaの学習用の教材ページです。