Need help with buttons or rollovers

Programming Questions

a_e_s_b

Need help with buttons or rollovers

in Programming Questions • 5 months ago

Hi there, I am new to Processing, so hopefully my problem is simple to answer! I found a sketch here in the forum that showed how to use multiple buttons and a rollover. For my project I need to use something similar, in the final sketch there will be many different rollovers or buttons displaying a fair amount of information each, because of this I need to make it so the text with additional information appears and disappears. So far I can make it appear by clicking but I cant make it disappear. It thought that by calling drawData(); in draw() the screen would refresh and the additional information would disappear. Can anyone point me in a good direction?

Here is the code that I have so far,

Elisabeth

int btnLength = 4;
RectButton[] rectBt;
boolean locked;
int y2 = 15;
int h2 = 12;
void setup() {
size(400,200);
rectBt = new RectButton[btnLength];
color col1 = #ff0000;
color col2 = #ffff00;
for(int i=0; i<btnLength; i++) {
rectBt[i] = new RectButton(width/2, y2, 100, h2, col1, col2);
y2 = y2 + 15;;
}
}
void draw() {
drawData();
for(int i=0; i<btnLength; i++) {
rectBt[i].display();
rectBt[i].update();
}
}
void drawData()
{
if (mousePressed ) {
for(int i=0; i<btnLength; i++) {
if (rectBt[i].down()){
textAlign (CENTER);
text ( "SHOW"+ i, (rectBt[i].x + rectBt[i].w/2 +50), rectBt[i].y);
println(i);
};
}
}
}
class Button {
float x, y, w, h;
color basecolor, highlightcolor;
color currentcolor;
boolean hover = false;
boolean down = false;
void update() {
if (hover()) {
currentcolor = highlightcolor;
}
else {
currentcolor = basecolor;
}
}
boolean down() {
if (hover) {
locked = true;
return true;
}
else {
locked = false;
return false;
}
}
boolean hover() {
return true;
}
boolean hoverRect(float x, float y, float width, float height) {
if (mouseX >= x && mouseX <= x+width &&
mouseY >= y && mouseY <= y+height) {
return true;
}
else {
return false;
}
}
}
class RectButton extends Button {
RectButton(float ix, float iy, float iw, float ih, color icolor, color ihighlight) {
x = ix;
y = iy;
w = iw;
h = ih;
basecolor = icolor;
highlightcolor = ihighlight;
currentcolor = basecolor;
}
boolean hover() {
if ( hoverRect(x, y, w, h) ) {
hover = true;
return true;
}
else {
hover = false;
return false;
}
}
void display() {
stroke(255);
fill(currentcolor);
rect(x, y, w, h);
}
}

Replies(5)

dr.mo

Re: Need help with buttons or rollovers

5 months ago

it's not clear from you question when you want the text label to appear and when you want it to disappear. However, assuming you want it there when mouse is clicked, and then disappear when mouse is clicked again (so you have two states of the button clicked and not clicked) I totally rewrote your code. I think you have the correct idea about how to structure this, but i find your code way too convoluted. for example, there really isn't a need for using derived classes.

Hope this helps you:

Button[] gButtons;
void setup(){
size(500,500);
gButtons = new Button[4];
for(int i = 0 ; i < gButtons.length; i++){
gButtons[i] = new Button("button " + i, new Rectangle(50, i * 50 + 50, 100,30),color(255,0,0),color(200,0,0),color(0,0,255));
}
}
void draw(){
background(255);
for(int i = 0 ; i < gButtons.length; i++){
gButtons[i].Update(mouseX, mouseY);
gButtons[i].Draw();
}
}
void mousePressed() {
for(int i = 0 ; i < gButtons.length; i++){
gButtons[i].UpdatePressed(mouseX, mouseY);
}
}
class Button{
Rectangle _rectangle;
color _normalColor;
color _hoverColor;
color _pressedColor;
String _label;
boolean _hover = false;
boolean _pressed = false;
Button(String label, Rectangle rectangle, color normalCol, color hoverCol,color pressedCol){
_label = label;
_normalColor = normalCol;
_hoverColor = hoverCol;
_pressedColor = pressedCol;
_rectangle = rectangle;
}
void Draw(){
noStroke();
if(_pressed) fill(_pressedColor);
else{
if(_hover)fill(_hoverColor);
else fill(_normalColor);
}
rect(_rectangle.x, _rectangle.y,_rectangle.w,_rectangle.h);
if(_pressed){
fill(255);
text(_label, _rectangle.x + 10, _rectangle.y + 20);
}
}
void Update(int x, int y){
if(_rectangle.isInside(x,y)){
_hover = true;
}
else _hover = false;
}
void UpdatePressed(int x, int y){
if(_rectangle.isInside(x,y)){
_pressed = !_pressed;
}
}
}
class Rectangle{
int x,y,w,h;
Rectangle(int x, int y, int w, int h){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}
boolean isInside(int xm, int ym){
if((xm > x && xm < (x + w)) && (ym > y && ym < (y + h))){
return true;
}
return false;
}
}

www.morishuz.com
www.videoreactive.com
www.electrovision-cinema.com

a_e_s_b

Re: Re: Need help with buttons or rollovers

5 months ago

Dr.Mo, that works perfectly fine. Thank you! But this has raised a question. I would need more than one String label but before the programme needs to check if the data is bigger than 0. I know I can add more labels but I have no idea of how to do the check in the class Button.

Should I be opening another thread for this? New to forums too!

This is awesome!

pauline303

Re: Need help with buttons or rollovers

5 months ago

you cant create a text Arraylist:
this is a rough example of a fading text:

ArrayList text = new ArrayList();

void setup() {
size(600, 400);
smooth();
textSize(30);
}
void draw() {
background(0);
strokeWeight(1);
stroke(255);
fill(255, 0, 0);
for (int posY=0; posY<3; posY++)
{
    rect(0, posY*height/4, width/4, height/6);
}
for (int i=0; i<text.size(); i++) {
    FadingText ft = (FadingText) text.get(i);
    ft.run();
}
}

class FadingText {
int x, y;
color c;
int transparency;
String tab;
FadingText(String tab, int x, int y) {
    this.tab = tab;
    this.x = x;
    this.y = y;
    transparency = 255;
}
void run() {
    if (transparency <= 4) {
      transparency = 0;
    }
    else {
      transparency -= 4;
    };
    noStroke();
    fill(255, transparency);
    text(tab, x, y);
}
}

void mousePressed() {
if (mouseX < width/4)
{
    if (mouseY<height/6)
    {
      println("1");
      text.add(new FadingText("tab 1", width/4+20, height/6));
    }
    if (mouseY>height/4 && mouseY<height/6+height/4)
    {
      println("2");
      text.add(new FadingText("tab 2", width/4+20, height/6+height/4));
    }
    if (mouseY>2*height/4 && mouseY<height/6+2*height/4)
    {
      text.add(new FadingText("tab 3", width/4+20, height/6+2*height/4));
      println("3");
    }
}
}

would this help ?

a_e_s_b

Re: Re: Need help with buttons or rollovers

5 months ago

Hey thanks for the reply too! Its nice to know how the fadeout works but I need the text to appear when clicked and disappear when clicked again.

dr.mo

Re: Need help with buttons or rollovers

5 months ago

and just for fun - try replacing void setup() with this:

void setup(){
size(500,500);
int gw = 20;
int gh = 20;
gButtons = new Button[gw*gh];
for(int i = 0 ; i < gw; i++)
{
for(int j = 0 ; j < gh; j++)
{
gButtons[i*gh+j] = new Button(""+i, new Rectangle(i*50, j * 50, 50,50),color(255,0,0),color(200,0,0),color(0,0,255));
}
}
}

www.morishuz.com
www.videoreactive.com
www.electrovision-cinema.com

Top Reply