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

18 ControlP5 画像button の使い方

ControlPの buttonコントロールの背景に画像を使用したボタンの作成方法を整理しました。

  1. 基本スケッチ
  2. 画像の登録
  3. controlEvent( ) 関数で処理を実行する

 

1. 基本スケッチ

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

画面には二つのボタンが表示され、上のボタンをクリックすると、右の四角内の色が明るく、下のボタンをクリックすると、暗く変化します。

ただし、次のステップ「2. 画像の登録」を実施し、スケッチに画像を取り込まないと完全なスケッチとして実施することはできません。

 

import controlP5.*;

ControlP5 cp5;
int myColor = 0;

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

  PImage[] imgUp = {loadImage("buttonUp_a.png"),
                    loadImage("buttonUp_b.png"),
                    loadImage("buttonUp_c.png")};
  PImage[] imgDn = {loadImage("buttonDown_a.png"),
                    loadImage("buttonDown_b.png"),
                    loadImage("buttonDown_c.png")};
  cp5.addButton("btnUp")
     .setValue(255)
     .setPosition(30,20)
     .setImages(imgUp)
     .updateSize()
     ;

  cp5.addButton("btnDown")
     .setValue(128)
     .setPosition(30,80)
     .setImages(imgDn)
     .updateSize()
     ;
}

void draw() {
  background(50);
  fill(myColor);
  rect(120,20,50,50);
}

public void btnUp(int theValue) {
  println("an event from btnUp: "+theValue);
  myColor = theValue;
}

public void btnDown(int theValue) {
  println("an event from btnDown: "+theValue);
  myColor = theValue;
}

 

ボタンの背景となる画像は３枚で1組で、

になります。

imgUp　　　　　　　　　imgDn

   

 

これらを 

  1. PImage配列に読み込み 
  2. setImages(imgUp)でボタンに組み込み
  3.  updateSize()で更新します。

 

通常時　　　　　　マウスと重なる　　　　　クリック

 

ボタンをマウスでクリックすると、void btnUp( )関数,または void btnDown( )関数にリンクされるので、関数内でボタンに登録されている Value値を取り出し、右四角の塗り潰し色 myColorとします。

draw関数内で、四角を描きその内側をmyColor 変数で、灰色（127）か 白（255）で塗り潰します。

 

2. 画像を登録する

このスケッチでは、６枚の画像が必要です。これらは、スケッチのフォルダーに「data」フォルダを作成してその中に保存します。画像自体は、GIMPなどの作画ソフトで作り、以下のいずれかの方法で、スケッチに登録します。

画像の登録を終えたらスケッチを実行してください。上向きの矢印ボタンをクリックすると右の四角が明るく、下向きの矢印ボタンをクリックすると右の四角が暗くなります。

 

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

サンプルのスケッチでは、ボタンごとの関数でボタンクリックの処理を行いました。controlEvent( ) 関数を利用することで、複数コントロールの処理を一つの関数で行うことができます。

 

import controlP5.*;

ControlP5 cp5;
int myColor = 0;

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

  PImage[] imgUp = {loadImage("buttonUp_a.png"),
                    loadImage("buttonUp_b.png"),
                    loadImage("buttonUp_c.png")};
  PImage[] imgDn = {loadImage("buttonDown_a.png"),
                    loadImage("buttonDown_b.png"),
                    loadImage("buttonDown_c.png")};
  cp5.addButton("btnUp")
     .setValue(255)
     .setPosition(30,20)
     .setImages(imgUp)
     .updateSize()
     ;

  cp5.addButton("btnDown")
     .setValue(128)
     .setPosition(30,80)
     .setImages(imgDn)
     .updateSize()
     ;
}

void draw() {
  background(50);
  fill(myColor);
  rect(120,20,50,50);
}

public void controlEvent(ControlEvent theEvent) {
  println(theEvent.getController().getName());
  myColor = (int)theEvent.getController().getValue();
}

 

 

次回は、スライダーを使いシリアルポートを選択する実用的なスケッチを掲載します。

 

目次