Macで始めるprocessing 入門

16 ControlP5 button の使い方

2021-08-01

p>ControlP5はGUIライブラリで、buttons, sliders, knobs, toggles, textfields, checkboxes, accordions, charts, timers, drop-downsなどのユーザーインターフェイスを processing に提供します。この記事では、buttonコントロールの使い方を整理しました。

基本スケッチ
ラベルの表示内容を変更する
ラベルを非表示にする
ラベルの位置を変更する
ラベルの色を変更する
ボタンの色を変更する
マウスボタンを押した時に処理を実行する
controlEvent( ) 関数で処理を実行する

1. 基本スケッチ

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

最も基本的なボタンが画面に表示され、ボタンをクリックすると、右の四角内の色が変化します。

import controlP5.*;

ControlP5 cp5;
int color1 = 255;

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

  cp5.addButton("button1")
     .setPosition(50,50)
     .setSize(50,20)
     ;
}

void draw() {
  background(100);
  fill(color1);
  rect(150,50,20,20);
}

public void button1(int theValue) {
  println("event button1: "+theValue);
  if(color1 == 255)color1 = 127;
  else             color1 = 255;
}

先頭行には ProcessingにControlP5を読み込むための行 'import controlP5.*'; が必要です。さらに、新しいControlP5インスタンスを、名前 cp5 の変数に割り当てます。これ以降、cp5.プレフィックスを付けてContolP5関数にアクセスできます。

トグルの名前 (name) と同一名の変数を定義します。この例では、ボタンをマウスでクリックするとコントロールの名前 "button1" と同一名の public void button1(int theValue) 関数にリンクしています。

setup関数内で、"button1"という名前の buttonを追加し。

.setPosition(50,50) で、設置位置　x/y

.setSize(50,20) で、コントロールの大きさ　長さ/高さ

を設定します。

ボタンをマウスでクリックすると、public void button1(int theValue) 関数にリンクされるので、関数内で color1 変数の現在の値を参照して 255 <=> 127 で切り替えます。 draw関数内で、四角を描きその内側をcolor1 変数で、灰色（127）か白（255）に変化させます。

なお、addButton関数には、オーバーロードがあり、上記スケッチはオーバーロード関数を使用すると、以下のようにカッコ内に全ての情報を書き込むことができます。

addButton("button1", 1, 50, 50, 50, 20);

カッコ内は順に、 name, value (float), x, y, width, height となっています。valueは、このスケッチでは使用していません。任意の値を設定してください。次の記事では、value値を使用したスケッチ例を掲載しています。

オーバーロード関数を使用すると、プログラム行数は少なくスッキリするのですが、数字の羅列で思い違いなどが発生しやすく使用には注意が必要です。

2. ラベルの表示内容を変更する

ボタンに表示される CaptionLabel は、デフォルト設定で、ボタンの名前と同一になっています。別の内容に変えたいときは、addButton("button1")で設定を行う最後の位置に、 .setCaptionLabel() を追加して別の文字を設定することができます。

...

void setup() {
  ...
  cp5.addButton("button1")
     ...
     .setCaptionLabel("My Lable")
     ;
}
...

初期設定のままだとラベルに小文字を使用しても大文字に変換され表示されます。小文字を使用したい場合には、以下を実施します。

cp5.getController("button1")でボタンを呼び出して、
CaptionLabelを指定し
そのtoUpperCaseプロパティを false に設定します。

import controlP5.*;

ControlP5 cp5;
int color1 = 255;

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

  cp5.addButton("button1")
     .setValue(0)
     .setPosition(50,50)
     .setSize(50,20)
     .setCaptionLabel("My Lable")
     ;
    cp5.getController("button1")
      .getCaptionLabel()
      .toUpperCase(false)
      ;
}

void draw() {
  background(100);
  fill(color1);
  rect(150,50,20,20);
}

public void button1(int theValue) {
  println("event button1: "+theValue);
  if(color1 == 255)color1 = 127;
  else             color1 = 255;
}

3. ラベルを非表示にする

ラベルを非表示にするには、cp5.getController("button1")でボタンを呼び出して、CaptionLabelを指定しそのVisibleプロパティを false に設定します。

import controlP5.*;

ControlP5 cp5;
int color1 = 255;

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

  cp5.addButton("button1")
     .setValue(0)
     .setPosition(50,50)
     .setSize(50,20)
     ;
    cp5.getController("button1")
      .getCaptionLabel()
      .setVisible(false)
      ;
}

void draw() {
  background(100);
  fill(color1);
  rect(150,50,20,20);
}

public void button1(int theValue) {
  println("event button1: "+theValue);
  if(color1 == 255)color1 = 127;
  else             color1 = 255;
}

Caption Label は、Visibleプロパティを false に設定しなくても、 .setCaptionLabel(" ") を使い空文字を設定する方法もあります。

4. ラベルの位置を変更する

ラベルを非表示にする例とほぼ同じようにして、ラベルの位置を変更することができます。cp5.getController("button1")でトグルを呼び出して、CaptionLabelを指定します。そして、そのalignプロパティを変更します。

基本スケッチのセットアップ関数を以下のように変更します。

...

void setup() {
  ...
 cp5.getController("button1")
    .getCaptionLabel()
    .align(ControlP5.CENTER, ControlP5.TOP_OUTSIDE)
    .setPaddingX(0)
    ;
}
...

"TOP_OUTSIDE" の代わりに、"BOTTOM_OUTSIDE" を指定することで、下部に表示位置を変更できます。

5. ラベルの色を変更する

ラベルの色を変更するには、cp5.addSlider("button1")で作成するとき、setColorCaptionLabel( ) で指定します。カッコ内にcolor変数を指定します。

import controlP5.*;

ControlP5 cp5;
int color1 = 255;

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

  cp5.addButton("button1")
     .setPosition(50,50)
     .setSize(50,20)
     .setColorCaptionLabel(#00FFFF)   // ラベル色
     ;
}

void draw() {
  background(100);
  fill(color1);
  rect(150,50,20,20);
}

public void button1(int theValue) {
  println("event button1: "+theValue);
  if(color1 == 255)color1 = 127;
  else             color1 = 255;
}

色は、color(R,G,B) で指定します。各色は、0 - 255 の整数値をあてはめます。

また、16進数を使い #FFFFFF で指定することも可能です。

6. ボタンの色を変更する

ボタンの色には、

マウスが離れている時の色
ボタンをクリックした時の色
ボタンの上にマウスがある時の色

の３種類がありそれぞれを変更します。

import controlP5.*;

ControlP5 cp5;
int color1 = 255;

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

  cp5.addButton("button1")
     .setValue(0)
     .setPosition(50,50)
     .setSize(50,20)
     .setColorActive(color(240,0,100))      // クリック色
     .setColorBackground(color(80))         // OFF色
     .setColorForeground(color(190,0,50))   // マウス選択色
     ;
}

void draw() {
  background(100);
  fill(color1);
  rect(150,50,20,20);
}

public void button1(int theValue) {
  println("event button1: "+theValue);
  if(color1 == 255)color1 = 127;
  else             color1 = 255;
}

色は、color(R,G,B) で指定します。各色は、0 - 255 の整数値をあてはめます。

また、16進数を使い #FFFFFF で指定することも可能です。

setColorActive(color(240,0,100)) を16進数を使い書き直すと

setColorActive(#F00064) になります。

7. マウスボタンを押した時に処理を実行する

基本スケッチでは、マウスボタンを離した時に、処理が実行されます。

プログラムの流れの都合で、どうしてもマウスボタンを押した時に処理を実行したい場合があります。

このような場合は、addButton("button1")で設定する最後の位置に、 .activateBy(ControlP5.PRESS) を追加設定することでマウスボタンを押した時に処理を実行でききるようになります。

...

void setup() {
  ...
  cp5.addButton("button1")
     ...
     .activateBy(ControlP5.PRESS)
     ;
}
...

8. controlEvent( ) 関数で処理を実行する

これまでの例では、ボタンをクリックした時に void button1(int theValue) ) 関数で処理されています。

これと異なり、void controlEvent(ControlEvent theEvent) 関数で処理することもできます。この方法の利点は、複数のコントロールを設置してもどのコントロールからのイベントかを識別できるため、一つの関数で複数のコントロールの処理をすることが可能になります。

import controlP5.*;

ControlP5 cp5;
int color1 = 255;

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

  cp5.addButton("button1")
     .setPosition(50,50)
     .setSize(50,20)
     ;
}

void draw() {
  background(100);
  fill(color1);
  rect(150,50,20,20);
}

public void controlEvent(ControlEvent theEvent) {
  String str = theEvent.getController().getName();
  println("event button1: "+str);
  if(color1 == 255)color1 = 127;
  else             color1 = 255;
}

次回は、背景に画像を使う画像ボタンコントロールの使い方を調べます。

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