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.
« Previous 1 2 3 Next »
Buy this article as PDF
Pages: 4
(incl. VAT)