初心者だけど、一歩ずつ IOT 電子工作: Processing ボタンをクリック　2

前回に引き続き、Processingでボタンをクリックするロジックを進めます。

前回、Processingでクリックに反応するところまで作成しました。
今回は、On だけでなく　Off　も作ります。

On　と　Off　のボタンを状態に応じて表示を切り替えるためには、状態を記録する必要があります。

実際のスケッチを見てみましょう。

PImage Onimg;
PImage Offimg;

int StatusFlag;

void setup() {
size(200, 100);
Onimg = loadImage("On.png");
Offimg = loadImage("Off.png");
image(Onimg,50, 20);
StatusFlag=0;
}

void draw() {

}
void mouseClicked(){
if(mouseX>=50 && mouseX<=130 && mouseY>=20 && mouseY<=60){
    if(StatusFlag==0){
      //Onの処理を実行
      println ("Mouse Click On!!");
      image(Offimg,50, 20);
      StatusFlag=1;
      }else{
      //Offの処理を実行
      println ("Mouse Click Off!!");
      image(Onimg,50, 20);
      StatusFlag=0;
      }
}
}

スケッチの解説です。

PImage Onimg; ・・・　Onのイメージファイル情報を格納するための変数を定義しています。
PImage Offimg; ・・・　Offのイメージファイル情報を格納するための変数を定義しています。

int StatusFlag;　・・・　状態を記録しておくための変数です。
　　　　　　　　　　　　　1 : Onの状態
　　　　　　　　　　　　　2 : Offの状態

void setup() {
size(200, 100);
Onimg = loadImage("On.png");
Offimg = loadImage("Off.png");
image(Onimg,50, 20);
StatusFlag=0;
}

void setup() の中では、イメージファイルをそれぞれの変数へ読み込んでいます。
そして、初期状態のイメージとして、Onのイメージを表示しています。状態は Offの状態なので、StatusFlag変数へは、0を代入しています。あとは、クリツクを待ちます。

void mouseClicked(){
if(mouseX>=50 && mouseX<=130 && mouseY>=20 && mouseY<=60){
    if(StatusFlag==0){
      //Onの処理を実行
      println ("Mouse Click On!!");
      image(Offimg,50, 20);
      StatusFlag=1;
      }else{
      //Offの処理を実行
      println ("Mouse Click Off!!");
      image(Onimg,50, 20);
      StatusFlag=0;
      }
}
}

マウスがクリックされた時に呼び出される、void mouseCliked()の中では、まず、ボタンがクリックされたことを判定しています。

そして、押された時に、状態がOnなのか、Offなのかにより、処理を分岐します。
Onの表示されている時に、クリックされれば、Onの処理を実行します。
つづいて、ボタンの表示をOffに切り替えます。さらに、状態にはOnを示す 1へ切り替えています。

次は、Offの表示がされている時にクリツクされた時の処理です。
まずは、Offの処理を実行します。
そして、ボタンの表示をOnに切り替えます。さらに、状態にはOffを示す0へ切り替えています。

ポイントは、ボタンをクリックした時のStatusFlagの状態と、クリックされたあとのStatusFlagの変更を行うことで、状態の記録と状態に応じた挙動を行うところです。