I have been asked once or twice how to create a toggle (on/off) button with G4P. Unfortunately the library does not have one out-of-the-box solution.

It is possible to use the GCheckbox and change the graphic used to simulate a toggle button and I will show how to do it here.

The first thing to do is create a tiled image with the pictures to use for the two states. An example is shown here.


The code below was created using the GUI Builder tool, the statement at line 15 changes the image from the default tick-box to our own image above.

The width of the GCheckbox must be at least 12 pixels wider than the displayed image (i.e. half the full image width) otherwise it will cause an exception.

1. // Need G4P library
2. import g4p_controls.*;
3. public void setup() {
4.   size(480, 320, JAVA2D);
5.   createGUI();
6.   customGUI();
7. }
8. public void draw() {
9.   background(230);
10. }
11. 
    
12. // Use this method to add additional statements
13. // to customise the GUI controls
14. public void customGUI() {
15.   mySwitch.setIcon("switch.jpg", 2, null, null);
16. }

gui.tab (header comments removed)

1. public void switch_clicked(GCheckbox source, GEvent event) { //_CODE_:mySwitch:429373:
2.   println("checkbox1 - GCheckbox event occured " + System.currentTimeMillis()%10000000 );
3. } //_CODE_:mySwitch:429373:
4. 
   
5. // Create all the GUI controls.
6. // autogenerated do not edit
7. public void createGUI() {
8.   G4P.messagesEnabled(false);
9.   G4P.setGlobalColorScheme(GCScheme.BLUE_SCHEME);
10.   G4P.setCursor(ARROW);
11.   if (frame != null)
12.     frame.setTitle("Sketch Window");
13.   mySwitch = new GCheckbox(this, 110, 62, 30, 36);
14.   mySwitch.setOpaque(false);
15.   mySwitch.addEventHandler(this, "switch_clicked");
16. }
17. 
    
18. // Variable declarations
19. // autogenerated do not edit
20. GCheckbox mySwitch;