It would probably be simpler to write your own class for this... the buttons is APWidgets weren't designed for this purpose.

I am still learning here. Wouldn't even know where to start. Could you give me a kick start or tell me what to google for some generic code examples?

Try the Button example in Sketchbook > Examples > Topics > GUI

Those are generated buttons not images. 

EDIT: Woah! Both of those responses beat me to it! Well...

The easiest way to do this would be to rewrite the image button class from the G4P source to support Android but, unfortunately, I can't find the source... Peter Lager (the creator of G4P) would be able to help, but I haven't seen him on in a while...

The process of creating the image button, I imagine, should be relatively easy...  Peter even explains how it is done. You just have to learn the basics necessary...

You're going to need to learn OOP (if you haven't already) and create a class to store your image buttons. Store the reference to the PImage there as well... create a couple of functions for displaying the button and testing for clicks. I expect that I won't be able to get through all the way in one response... let me know if you need more help.

EDIT (again, after reading your response): It isn't that complicated... just a wrapper for a PImage that also draws it into an offscreen buffer that checks the mouse position...

Heck, you're still learning and you expected this to work for you, I might as well write this for you. Hold on a moment...

for the sake of doing it i tried to run the button example on the emulator and on device. Emulator and device force close if i add the code needed for UDP to the example. 

I figured that it wouldn't hurt to write the code for you, seeing as you didn't expect to encounter this kind of obstacle... and it's fun to write it...

Anyway, I've already finished writing it. It's built for Android, so there aren't any hover-overs... I think I commented it pretty well... I didn't test it, but it should work... Here it is:

The ImageButton class:

1. /*
2. ImageButton class
3. 
   
4. Assumes that pixels in the image with an alpha value greater than zero are pixels that are part of the main image
5. All fully transparent pixels do not apply for collision detection
6. 
   
7. You must create the function called "buttonEvent(String)" for this code to work
8. */
9. 
   
10. class ImageButton {
11.   //The parent PApplet
12.   PApplet parent;
13.  
14.   //The image source
15.   PImage image;
16.  
17.   //The location and dimensions
18.   PVector loc;
19.   PVector dim;
20.  
21.   //The identifier of this ImageButton
22.   String id;
23.  
24.   //Whether or not the ImageButton is pressed
25.   boolean pressed;
26.  
27.   /*
28.   Creates an new ImageButton
29.  
30.   PApplet parent - use "this"
31.   String  path   - the path to the image file
32.   String  id     - the identifier of this image, used for firing press events
33.   */
34.   ImageButton(PApplet parent, String path, String id) {
35.     this.parent = parent;
36.    
37.     parent.registerDraw(this);
38.    
39.     image = loadImage(path);
40.    
41.     loc = new PVector(0, 0);
42.     dim = new PVector(image.width, image.height);
43.   }
44.  
45.   /*
46.   Creates an new ImageButton
47.  
48.   PApplet parent - use "this"
49.   String path   - the path to the image file
50.   String id     - the identifier of this image, used for firing press events
51.   float  x      - the x position of the ImageButton
52.   float  y      - the y position of the ImageButton
53.   */
54.   ImageButton(PApplet parent, String path, String id, float x, float y) {
55.     this.parent = parent;
56.    
57.     parent.registerDraw(this);
58.    
59.     image = loadImage(path);
60.    
61.     loc = new PVector(x, y);
62.     dim = new PVector(image.width, image.height);
63.   }
64.  
65.   /*
66.   Creates an new ImageButton
67.  
68.   PApplet parent - use "this"
69.   String path   - the path to the image file
70.   String id     - the identifier of this image, used for firing press events
71.   float  x      - the x position of the ImageButton
72.   float  y      - the y position of the ImageButton
73.   float  width  - the width of the image
74.   float  height - the height of the image
75.   */
76.   ImageButton(PApplet parent, String path, String id, float x, float y, float width, float height) {
77.     this.parent = parent;
78.    
79.     parent.registerDraw(this);
80.    
81.     image = loadImage(path);
82.     image.resize((int) width, (int) height);
83.    
84.     loc = new PVector(x, y);
85.     dim = new PVector(width, height);
86.   }
87.  
88.   void draw() {
89.     update();
90.     display();
91.   }
92.  
93.   void update() {
94.     if(mousePressed && mouseOver()) {
95.       if(!pressed) {
96.         //Fire the button event
97.         buttonPressEvent(id);
98.         pressed = true;
99.       }
100.     } else pressed = false;
101.   }
102.  
103.   void display() {
104.     pushStyle();
105.    
106.     //Tint the image if it is pressed
107.     if(pressed) tint(204);
108.     //Display the image
109.     image(image, loc.x, loc.y);
110.    
111.     popStyle();
112.   }
113.  
114.   //This is the magic mouse detection part
115.   boolean mouseOver() {
116.     return alpha(image.get((int) (mouseX - loc.x), (int) (mouseY - loc.y))) > 0;
117.   }
118. }

You are the best!

Ok. I think i see what all you have happening in here. Generally speaking anyway.....

Oh. I just realized that you're using Hypermedia... that might have something to do with it...
If there is an error, the console should tell you pretty much exactly what it is.

Looking at this again, you took out the draw() function in the class and turned it into the main draw() function.
It isn't designed to work that way, and it would certainly cause an error...

In the class, I used a technique also used in Processing libraries: you pass an instance of the main sketch (this) to the constructor and receive draw() function calls inside the class with a call to parent.registerDraw(this) if parent is the variable passed to the class.

You need to put the draw() function back into the class and create a blank draw() function (so that the code runs) in the main program. It may not fix all of your errors (if Hypermedia doesn't work with Android), but it's worth a shot and it's good to make sure that I'm getting through properly...

I have tryed all of the above. i saw the two draws and didn't understand why there were two so i pulled one just to see what would change. i also have commented out the hypermedia library as the udp calls only to get the same error. 

I commented out the hypermedia, udp object, and variable set from the globals. Then i commented out all the udp calls from buttonPressEvent() and added a println() just to see if the events catch. 

Do you get an error message of any kind?
Also... can you post the updated code?

I'm sorry that this is becoming such an issue...

No need at all the be sorry. You are very much assisting in my learning and understanding of OOP and how to adapt classes for needed functions. 

Ah, that would do it...
What link?

If the screen is black... is the application responsive?
I think you have it from here, though...

Sorry. Accidently hit no to the marking as spam message so it killed the link. 

Funny... the only thing you're displaying is a bunch of ImageButtons, so it's probably a problem with my class.
Put a println() statement in ImageButton's display() function to see if it's getting called...

Looking back at your code... your buttonPressEvent() function would be much simplified if you passed the first argument to your UDP function as the id for each corresponding ImageButton. That way, you would only need one line of code in that function...

Added println("Testing this app"); after image(image, loc.x, loc.y); in display(). No Change. 

The println() call won't change anything in the output of the program, but it will tell you if the program is running. Look at the console... Right now, one of two things is happening: Either the program isn't running properly (which there is little you can do about aside from commenting out more lines of code) or the display() function isn't being called; in which case you can call it yourself from draw(). It should be being called... Can I see your code?

What I meant in the second part is that... you can utilize the id parameter to the ImageButton's constructor better: instead of passing the name of the channel, you could provide the unique access code (I'm not sure what to call it) such as "DCCH046 ". Then, all you have to do in buttonPressEvent() is to pass the id to udp.send(). I hope I'm getting through...

I was looking int he display window. didn't see anything. But a black screen means it isnt drawing the images either....

Okay... if you put a call to println() (with arguments) in the main draw() function, do you get anything in the console? If you're confused, perhaps a refresher... just in case...

You're starting to understand the second thing, but you didn't implement it (or try to). Regardless, it doesn't matter that much and you should focus on getting the images to display...

Will work on trying to optimize after i get this sucker working. :-)

Ok, i went out of town for a while and now finally got back home so i can keep working on this project. 

I am not seeing where the image is actually supposed to be drawn in the class: 

Line 102 (in your latest code) displays the image... the display() function looks like this:

1. void display() {
2.   pushStyle();
3.  
   
4.   //Tint the image if it is pressed
5.   if (pressed) tint(204);
6.  
   
7.   //Display the image
8.   image(image, loc.x, loc.y);
9.  
   
10.   println("Testing the code");
11.  
    
12.   popStyle();
13. }

Do you actually get "Testing the code" printed in the console?

• If so, then the function is running. Try commenting out line 5 (in the code above)...
• If not, then try calling each button's draw() function every frame. There may be a problem with an inner class registering for draw().
  

testing the code does not print to console. so it would appear i have issues with the class. 

Okay, so that's confirmed... the whole registering draw() thing doesn't work with nested classes. That's a bummer. It means that now, you have to manually call each of the ImageButtons' draw() function from within the main draw() in order for the code to function properly

It seems i am very much out of my depth. I have no idea how to even do that :-(

Progress, somewhat. 

So... they display now? That's good... If they aren't clickable, then it's probably a problem with my coding...
Time to do the step-by-step testing.
In ImageButton's update() method, add the following line:

1. println(mouseOver());

Ok, they are clickable and they shade like they should. 

I have the answer to that as well, and it's another flaw in my code...
Add the following line to ImageButton's constructor:

1. this.id = id;

You are the best. I was trying to figure it out and never would have gotten that. 

The statements are working. It's my UDP that is giving it issues. I can set the if statements to print the ID and all is right with the world. 

AH HA!

Now... may I interest you in arrays?

that will be my project right after i re-size the graphics from the 480 x 800 of my old phone to my new phones 800 x 1280. 

some success and some confusion. 

I talked to a friend of mine who has been programming for a while and asked him to point me in the right direction.