If in the event handler for the button use the save("image filename") command when I did this it worked fine for me. The code I used is shown below and was created with the GUI builder tool.

1. import guicomponents.*;
2. 
   
3. void setup(){
4.   size(480, 320);
5.   createGUI();
6.   customGUI();
7. }
8. 
   
9. void draw(){
10.   background(200,220,200);
11.   fill(255);
12.   rect(10,10,width-20,height - 20);
13. }
14. 
    
15. // Use this method to add additional statements
16. // to customise the GUI controls
17. void customGUI(){
18. }

gui tab

1. void button1_Click1(GButton button) { //_CODE_:button1:436271:
2.   save("test.png");
3. } //_CODE_:button1:436271:
4. 
   
5. // Create all the GUI controls.
6. // autogenerated do not edit
7. void createGUI(){
8.   G4P.setColorScheme(this, GCScheme.BLUE_SCHEME);
9.   G4P.messagesEnabled(false);
10.   button1 = new GButton(this, "Face text", 355, 244, 80, 30);
11.   button1.setTextAlign(GAlign.CENTER | GAlign.MIDDLE);
12.   button1.addEventHandler(this, "button1_Click1");
13. }
14. 
    
15. // Variable declarations
16. // autogenerated do not edit
17. GButton button1;

It will NOT work if you have G4P.draw() in the draw() method in which case it will save the GUI controls as well.

Thank you for the example Mr. Quarks, however, when I look at the test.png image generated when I click the button, the test.png image has the gui button "Face Text" in it. 

Does this not happen when you run it?

I have tried it with both Processing 1.5.1 and 2.04 and in both cases I get the image without the button.

Are you using G4P.draw() inside the draw() method?

If you do then the button face will be saved with the image and to avoid that you will have to take a slightly more complex approach show below.

In the following code we have a global variable called drawGUI which is initialised to 0 (zero). When you want to save the image then change this to 1, when the next frame is drawn the switch statement prevents the GUI being drawn and increments drawGUI to 2. In the next frame the GUI is still not drawn and the image is saved, finally resting drawGUI back to 0 so the GUI will be drawn in the next frame.

main tab

1. import guicomponents.*;
2. 
   
3. int drawGUI = 0;
4. 
   
5. void setup() {
6.   size(480, 320);
7.   createGUI();
8.   customGUI();
9.   // Place your setup code here
10. }
11. 
    
12. void draw() {
13.   background(200, 220, 200);
14.   fill(255);
15.   rect(10, 10, width-20, height - 20);
16.   switch(drawGUI) {
17.   case 0:
18.     G4P.draw();
19.     break;
20.   case 1:
21.     drawGUI++;
22.     break;
23.   case 2:
24.     save("test.png");
25.     drawGUI = 0;
26.   }
27. }
28. 
    
29. // Use this method to add additional statements
30. // to customise the GUI controls
31. void customGUI() {
32. }

gui tab

1. void button1_Click1(GButton button) { //_CODE_:button1:436271:
2.   drawGUI = 1;
3. } //_CODE_:button1:436271:
4. 
   
5. // Create all the GUI controls.
6. // autogenerated do not edit
7. void createGUI() {
8.   G4P.setColorScheme(this, GCScheme.BLUE_SCHEME);
9.   G4P.messagesEnabled(false);
10.   button1 = new GButton(this, "Face text", 355, 244, 80, 30);
11.   button1.setTextAlign(GAlign.CENTER | GAlign.MIDDLE);
12.   button1.addEventHandler(this, "button1_Click1");
13. }
14. 
    
15. // Variable declarations
16. // autogenerated do not edit
17. GButton button1;

The code in both of my posts work - I get the image saved without the button. If you still can't get it to work you should post your code here.

Your latest setup works, and after starting with an empty sketch and posting your code from yesterday, that works too. very good, I get it..but...the user chooses what size Image and then what size rectangle he/she wants and the rectangle is visible for a split second and vanishes. I think from the background command in the main tab, but if I comment that out, the gui remains in the file saved to disk. Here's the code if you have time to look at it:

The problem is caused because the shape is actually drawn inside the event handlers. Although possible this is not a good idea.

What you should do is

1. Createvraibles to remember the actions selected by the user (using G4P)
2. Then in draw() look at these variables and do the appropriate drawing

Then you can use a button to call the save() command. If you want to save just part of the image then I suggest you post a question in Programming Questions about saving parts of images.

Thank you again Mr. Quarks, is there an example of this style of drawing?

I have looked at your code in more detail to try and work out what you are trying to do. The first thing to realise is that the size() command MUST BE the first command in the setup() method and should not be used elsewhere to resize the window. It seems to me that the easiest solution would be to have the main window as the drawing window set to the maximum size of the image you want to save, and a separate window for the G4P controls.

Then to parts of the display you create a PImage of the required size (option controls) and then save this image, rather than attempting to resize the frame and save the entire frame display.

The following sketch has a separate control window with 2 options for the size of image to be saved, a button that adds arandom box to the display and a button that saves the image based on the size selected in the option buttons.

main tab

1. // Need G4P library
2. import guicomponents.*;
3. 
   
4. // Size of image to save
5. int imgWidth, imgHeight;
6. int imgNo = 0;
7. 
   
8. void setup(){
9.   size(480, 320);
10.   background(255);
11.   // Match initial size selected
12.   imgWidth = 480;
13.   imgHeight = 320;
14.  
15.   createGUI();
16.   customGUI();
17.   // Place your setup code here
18. }
19. 
    
20. void draw(){
21.  
22. }
23. 
    
24. // Use this method to add additional statements
25. // to customise the GUI controls
26. void customGUI(){
27. }

gui tab

1. void controlWinDraw(GWinApplet appc, GWinData data) { //_CODE_:window1:472299:
2.   appc.background(200,255,200);
3. } //_CODE_:window1:472299:
4. 
   
5. void optSize1_click(GOption opt_selected, GOption opt_deselected) { //_CODE_:optSize1:496942:
6.   imgWidth = 480;
7.   imgHeight = 320;
8. } //_CODE_:optSize1:496942:
9. 
   
10. void optSize2_click(GOption opt_selected, GOption opt_deselected) { //_CODE_:optSize2:484236:
11.   imgWidth = 320;
12.   imgHeight = 240;
13. } //_CODE_:optSize2:484236:
14. 
    
15. void btnSave_click(GButton button) { //_CODE_:btnSave:595288:
16.   PImage img = get(0,0, imgWidth, imgHeight);
17.   img.save("Picture" + nf(imgNo, 4) + ".png");
18.   imgNo++;
19. } //_CODE_:btnSave:595288:
20. 
    
21. void btnRandomRect_click(GButton button) { //_CODE_:btnRandomRect:355009:
22.   float x = random(0,380);
23.   float y = random(0,220);
24.   float w = random(40,100);
25.   float h = random(20,100);
26.   int r = (int) random(64, 255);
27.   int g = (int) random(64, 255);
28.   int b = (int) random(64, 255);
29.   fill(r,g,b);
30.   stroke(0);
31.   strokeWeight(1.5);
32.   rect(x,y,w,h);
33. } //_CODE_:btnRandomRect:355009:
34. 
    
35. // Create all the GUI controls.
36. // autogenerated do not edit
37. void createGUI(){
38.   G4P.setColorScheme(this, GCScheme.BLUE_SCHEME);
39.   G4P.messagesEnabled(false);
40.   window1 = new GWindow(this, "Frame title text", 0, 0, 120, 240, false, JAVA2D);
41.   window1.addDrawHandler(this, "controlWinDraw");
42.   optGroup1 = new GOptionGroup();
43.   optSize1 = new GOption(this, "480 x 320", 18, 123, 90);
44.   optGroup1.addOption(optSize1);
45.   optSize1.setSelected(true);
46.   optSize1.addEventHandler(this, "optSize1_click");
47.   optSize2 = new GOption(this, "320 x 240", 18, 156, 90);
48.   optGroup1.addOption(optSize2);
49.   optSize2.addEventHandler(this, "optSize2_click");
50.   window1.add(optSize1);
51.   window1.add(optSize2);
52.   btnSave = new GButton(this, "Save Image", 18, 202, 80, 30);
53.   btnSave.setTextAlign(GAlign.CENTER | GAlign.MIDDLE);
54.   btnSave.addEventHandler(this, "btnSave_click");
55.   btnRandomRect = new GButton(this, "Random Oblong", 19, 12, 80, 30);
56.   btnRandomRect.setTextAlign(GAlign.CENTER | GAlign.MIDDLE);
57.   btnRandomRect.addEventHandler(this, "btnRandomRect_click");
58.   window1.add(btnSave);
59.   window1.add(btnRandomRect);
60. }
61. 
    
62. // Variable declarations
63. // autogenerated do not edit
64. GWindow window1;
65. GOptionGroup optGroup1;
66. GOption optSize1;
67. GOption optSize2;
68. GButton btnSave;
69. GButton btnRandomRect;