# After importing one icon i want to give functionality

**URL:** <https://discourse.processing.org/t/after-importing-one-icon-i-want-to-give-functionality/15859>\
**Category:** Libraries\
**Created:** [November 27, 2019, 9:15am UTC](https://discourse.processing.org/t/after-importing-one-icon-i-want-to-give-functionality/15859 "2019-11-27T09:15:09Z")\
**Posts on this page:** 1\
**Showing post:** 15

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 30, 2019, 9:25am UTC](https://discourse.processing.org/t/after-importing-one-icon-i-want-to-give-functionality/15859/15 "2019-11-30T09:25:09Z")

</div>

please format your code posting by pasting it into the

```auto
</> code button

```

of the editor header menu ( context name: Preformatted text )  
it looks like  
```  
type or paste code here  
```

also can use the ``` manually above and below your code.

thank you.

* * *

to make functioning buttons need  
rectangle or image  
( here combined and you can disable what you not need )

```auto
// using a function for the button and one for mouse over: 
// please see how little change needed to make (2) more buttons

// made some nice buttons for you, using
// https://dabuttonfactory.com/

PImage b_delete,b_letter,b_memo;

void get_images() {
  b_delete = loadImage("data/button_delete.png");  
  b_letter = loadImage("data/button_letter.png");  
  b_memo = loadImage("data/button_memo.png");  
}

int x1 = 100, y1 = 100, w1 =108, h1 =42;
boolean sel1 = false;
String text1 = "letter";

int x2 = x1, y2 = y1+h1+10, w2 =w1, h2 =h1; // _________________ (2)
boolean sel2 = false; // _______________________________________ (2)
String text2 = "memo"; // ______________________________________ (2)

int x3 = x1, y3 = y2+h1+10, w3 =w1, h3 =h1; // _________________ (3)
boolean sel3 = false; // _______________________________________ (3)
String text3 = "delete"; // ____________________________________ (3)

void setup() {
  size(300, 300);
  strokeWeight(3);
  textSize(20);
  get_images();
}

void draw() {
  background(200, 200, 0);
  myButton(x1, y1, w1, h1, sel1, text1,b_letter);
  myButton(x2, y2, w2, h2, sel2, text2,b_memo); // ____________________ (2)
  myButton(x3, y3, w3, h3, sel3, text3,b_delete); // ____________________ (3)
}

void keyPressed() {
}

void mousePressed() {
  if ( over(x1, y1, w1, h1) ) {
    sel1 = ! sel1; // button 1 action
    if ( sel1 ) { 
      println(" pressed event 1"); // here add your code
      // sel1=false; // reset for push button thinking
    }
  }
  if ( over(x2, y2, w2, h2) ) {
    sel2 = ! sel2; // button 2 action //_ (2)
    if ( sel2 ) { 
      println(" pressed event 2"); // here add your code
      // sel2=false; // reset for push button thinking
    }
  }  
  if ( over(x3, y3, w3, h3) ) {
    sel3 = ! sel3; // button 3 action //_ (3)
    if ( sel3 ) { 
      println(" pressed event 3"); // here add your code
      // sel3=false; // reset for push button thinking
    }
  }
}

void myButton(int x, int y, int w, int h, boolean sel, String atext, PImage btn) {
  if ( sel ) fill(0, 200, 0);
  else fill(0, 0, 200);
  strokeWeight(3);
  if ( over(x, y, w, h) ) stroke(200, 0, 200);
  else stroke(0, 200, 200);
  rect(x, y, w, h);
  noStroke();
  fill(200);
  text(atext, x+10, y+h-10);
  // image button version  
  image(btn,x+1, y+1);
}

boolean over(int x, int y, int w, int h) {
  return ( mouseX > x & mouseX < x + w & mouseY > y & mouseY < y + h ) ;
}

```

now that would not work without images,  
unless you disable all code line ( // ) using them.

try to catch here, save under /data/,  
OR make your own.

![button_delete](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a4f5b2468b774ba812433eba5434943a13dcfa98.png)  
 ![button_letter](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8c0779cfa4fc872b47811ad760ce17d31b695881.png)  
 ![button_memo](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0737fde2e5abc9856e7978954477ef270fdcd937.png)

 ![button_three_image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/15f0b4905edb99aa56cbbfd3c86a3959044ab29d.png)  
\_\_  
ok, that code uses some concepts you might need more help to understand,  
please ask here anytime

---

_[View the full topic](https://discourse.processing.org/t/after-importing-one-icon-i-want-to-give-functionality/15859)._