Run Processing programs on your touchscreen RPi2

Install G4P Library

I've used the ControlP5 libraries for graphical user interface projects in the past under Processing version 2. Sadly, it hasn't kept up with the new features in Processing 3, and some incompatibilities caused errors. No big deal, the G4P library [6] has some nice buttons, sliders, and dials that are actually a little easier to use than the ControlP5 screen widgets.

The Processing team has made adding new libraries easy. Navigate to the Sketch tab then to the Import Library menu item to get a new drop-down box. Select Add Library. The Contribution Manager window will appear. Select the Libraries tab and type g4p into the search box. G4P should show up, and you can click on it to show an installation button in the lower right-hand part of the window. Select Install, and the library will install itself. Follow the same process for any additional libraries you like. A little green check mark will appear in the status column, indicating success.

A Little Code

All I needed for my prototype was a toggle switch and a single slider, so I combined parts from the g4p_coolsliders and g4_image_tog_button programs while removing all the other unnecessary fluff (Listing 1).

Listing 1

Processing Code for Toggle and Slider

01 /*
02  To try out different configurations try the example
03  G4P_CustomSlider_Config.
04  - for Processing V2 and V3
05  (c) 2015 Peter Lager
06
07  */
08 import g4p_controls.*;
09
10 GImageToggleButton btnToggle0;
11 GCustomSlider sdr1;
12 GLabel label1;
13
14 void setup() {
15   size(300, 200);
16
17   // Simple switch
18   btnToggle0 = new GImageToggleButton(this, 10, 10);
19   // Create description labels
20   createLabels();
21
22   //=============================================================
23   // Simple default slider,
24   // constructor is `Parent applet', the x, y position and length
25   sdr1 = new GCustomSlider(this, 20, 80, 260, 50, null);
26   sdr1.setShowDecor(false, true, true, true);
27   sdr1.setNbrTicks(5);
28   sdr1.setLimits(40, -100, 100);
29   }
30
31   // Event handler for image toggle buttons
32   int abc = 50;
33   public void handleToggleButtonEvents(GImageToggleButton button, GEvent event) {
34   println(button + "   State: " + button.getState());
35   int redstate = button.getState();
36   // console text to see that the switch works
37   if (redstate == 0) {
38     abc = 100;
39     }
40   else {
41     abc = 200;
42     }
43   println("color = " + abc);
44     // visual sign switch is working, comment for no text zombies
45     background(abc, 200, 255);
46   }
47
48   // Event handler for the slider
49   public void handleSliderEvents(GValueControl slider, GEvent event) {
50   // console text to display changing values of slider
51     println(sdr1.getValueS() + "    " + event);
52   }
53
54   // Create the labels saying what-is-what
55   public void createLabels() {
56     label1 = new GLabel(this, 60, 10, 110, 50);
57     label1.setText("Library default 2 state button");
58     label1.setTextBold();
59     label1.setOpaque(true);
60   }
61
62   void draw() {
63   // uncomment so slider numbers don't become onscreen zombies when flipping switch
64   // background(200, 200, 255);
65   }

You'll notice that the code is pretty straightforward. Importing the G4P library and setting up instances of the toggle switch and the slider are the first order of business. Next, the event handlers print the status of the toggle switch and slider to the IDE's console as they are adjusted by the user. Finally, the draw() function just loops over and over, waiting for input, like every other Processing program.

Buy this article as PDF

Express-Checkout as PDF

Pages: 4

Price $2.95
(incl. VAT)

Buy Raspberry Pi Geek

SINGLE ISSUES
 
SUBSCRIPTIONS
 
TABLET & SMARTPHONE APPS
Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content