Processing ON OFF 버튼 클라스 코딩

______________________________________________________________________________________________________________________________

Processing에서 Button 클라스 선언에 의해 ON 버튼을 그래픽 화면에 출력하였다. 아울러 mouseX 의 값이 이 ON 버튼 상에 위치하게 되면 MouseIsOver 루틴에 의해 버튼 하단에 같은 색상의 납작한 사각형 버튼을 출력하고 mouseX 의 값이 이 ON 버튼의 범위를 벗어나면 출력을 지워버렸다. 아울러 버튼을 클릭하게 되면 지금가지의 클릭 횟수를 체크하여 콘솔 창에 출력하였다.

 

사물인터넷 코딩에서 버튼 사용법을 보면 ON과 OFF 두 개의 버튼을 사용한다. 따라서 하나의 버튼을 생성하는 코드를 확장하여 한 번에 두 개의 버튼을 생성하기로 하자.

두 개의 버튼 각각의 명칭을 “ON” 과 “OFF”로 설정하고 색상을 r_color 와 g_color 로 두자. 두 버튼의 크기는 그대로 유지하되 두 번째 버튼의 위치는 첫 번째 버튼 위치 xpos에 대해 상대적으로 오른쪽으로 이동 시킬 필요가 있다.

 

class Button 코딩 헤더 영역에서 해당 변수를 선언하고 Button constructor 영역에서 메인 프로그램으로부터 파라메터들을 넘겨받아 class Button의 변수에 입력한다.

 

Button class 내부의 Draw() 루틴은 하나의 버튼에서는 “ON” 만 출력하였으나 “OFF” 문자열 출력을 위한 위치 정보 추가와 함께 “OFF”도 출력한다.

 

MouseIsOver() 루틴도 “ON” 과 “OFF”를 식별할 수 있도록 2개의 루틴 즉 MouseIsOverOn() 과 MouseIsOverOff()로 확장한다. MouseIsOverOn() 루틴에서는 변수 x를 사용하고 MouseIsOverOff() 투틴에서는 변수 xx를 사용하도록 한다.

 

메인 코드의 계속 반복 실행되는 draw() 루틴에서 그래픽 화면 Mouse 위치가 버튼 상에 위치하게 되면 해당 버튼에 해당하는 색상으로 납작한 형태의 버튼을 그 하단에 출력 시키고 아울러 버튼 위치를 벗어나면 추력물을 지우도록 한다. 이어서 타이틀에 해당하는 “Button Coding”을 매번 출력하도록 하자. 이 순서가 바뀌면 “Button Coding”이 출력되었다가 사라지게 되므로 주의하자.

 

마지막으로 MousePress()루틴에 의해서 버튼 클릭이 이루어지면 버튼 종류를 따져서 클릭 횟수를 콘솔 창에 출력하게 된다.

 

동영상을 시청을 통해 버튼 사용법을 알아보자.

 

https://youtu.be/kpDsr7-xhek

 

첨부된 코드를 실행해 보자.

//onoff_bitton_01

Button onoff_button; // the button

int on_clk = 1; // number of times the button is clicked
int off_clk = 1;
int r_color = 256;
int g_color = 256;

void setup() {
size (430, 330);
smooth();
// xpos ypos xxpos widthB heightB
onoff_button = new Button(on","OFF",r_color,g_color, 50, 150, 230, 150, 80);
}

void draw() {

// draw a square if the mouse curser is over the button
if (onoff_button.MouseIsOverOn()) {
fill(color(256,0,0));
rect(50, 250, 150, 30);
}
else if (onoff_button.MouseIsOverOff()) {
fill(color(0,256,0));
rect(230, 250, 150, 30);
}
else {
// hide the square if the mouse cursor is not over the button
background(0);
}

// draw the button in the window
onoff_button.Draw();
textAlign(CENTER, CENTER);
fill(256,256,256);
textSize(32);
text(on OFF Button Coding", width/2, 50);
}

// mouse button clicked
void mousePressed() {
if (onoff_button.MouseIsOverOn()) {
// print some text to the console pane if the button is clicked
print("LED on clicked: ");
println(on_clk++);
}

if (onoff_button.MouseIsOverOff()) {
// print some text to the console pane if the button is clicked
print("LED Off clicked: ");
println(off_clk++);

}
}

// the Button class
class Button {
String onlabel; // on button label
String offlabel; // on button label
int xcolor; // onbutton color
int ycolor; // offbutton color
float x; // top left corner x position
float y; // top left corner y position
float xx;
float w; // width of button
float h; // height of button

// constructor
Button(String onlabelB, String offlabelB, int x_color, int y_color, float xpos, float ypos, float xxpos, float widthB, float heightB) {
onlabel = onlabelB;
offlabel = offlabelB;
xcolor = x_color;
ycolor = y_color;
x = xpos;
y = ypos;
xx = xxpos;
w = widthB;
h = heightB;
}

void Draw() {
fill(xcolor,0,0);
stroke(141);
rect(x, y, w, h, 10);
textAlign(CENTER, CENTER);
fill(256,256,256);
textSize(40);
text(onlabel, x + (w / 2), y + (h / 2));

fill(0,ycolor,0);
stroke(141);
rect(xx, y, w, h, 10);

// textAlign(CENTER, CENTER);
fill(256,256,256);
// textSize(40);
text(offlabel, xx + (w / 2), y + (h / 2));
}

boolean MouseIsOverOn() {
if (mouseX > x && mouseX < (x + w) && mouseY > y && mouseY < (y + h)) {
return true;
}
return false;
}

boolean MouseIsOverOff() {
if (mouseX > xx && mouseX < (xx + w) && mouseY > y && mouseY < (y + h)) {
return true;
}
return false;
}

}//End