Newbie struggling with controlP5 - Getting values from controls

duncan_a

Newbie struggling with controlP5 - Getting values from controls

in Contributed Library Questions • 1 year ago

Hi

I'm a complete newbie to processing, I don't think like a programmer and I'm generally very confused.

I'm trying to build a control interface for Arduino (no, I haven't mastered that either!!!) and I have several things that are really puzzling me, but I'll post them individually by control...

1) How do I get a variable to take the value of a slider? I need to get the current value of a slider so that I can then display it as part of a text label - valSlider1 = (slider value as float) + ("Secs") to show, say, "1.25 Secs". Once I have the value in a variable then I can send it over serial to the Arduino (I haven't investigated serial comms with processing yet).

2) How do I do the same thing with toggle buttons? I need to know which buttons in a functional group are pressed. These are "opt1" to "opt4", "t1 to t20", etc) and, as they are boolean I'm looking to know which ones are "1" or "true".

3) Are radio buttons achieved the same way as toggle buttons? I have read a few things relating to radio buttons but couldn't work what the authors were saying.

4) How do I set the control event of a push button to send a character over serial when pressed? I realise this should be relatively simple but I am really lost in the control events. At the moment the code produces the screen display I expect (if not quite what I want) but I get what I assume is a warning message in red that runs to many, many lines - the first of which begins
"14-Oct-2012 17:27:38 controlP5.ControlBroadcaster printMethodError
SEVERE: An error occured while forwarding a Controller event, please check your code at controlEvent
java.lang.reflect.InvocationTargetException
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:597)
    at controlP5.ControlBroadcaster.invokeMethod(Unknown Source)
    at controlP5.ControlBroadcaster.broadcast(Unknown Source).............................."
I have absolutely no idea what it's telling me (I thought Arduino error messages were obscure until now) but, as it is marked SEVERE then I assume that I ought to get it fixed.

Thanks for any help but, please, make it simple...

Duncan

Replies(5)

andreas.s..

Re: Newbie struggling with controlP5 - Getting values from controls

1 year ago

Hi, some sample code and the version you are using would be helpful.

1) assuming you initialize your slider with

cp5.addSlider("mySlider");

you can get the value of the slider by calling its getValue function with

cp5.getController("mySlider").getValue();

2) same as 1)

3) see the radioButton example. A RadioButton (note: is of type ControlGroup not Controller) stores its state in an array which you can access with

cp5.getGroup("radioButton").getArrayValue();
// here I am following the name of the radioButton in the ControlP5radioButton example

here a value of the array is either 1 (for true) or 0 (for false).

4) the error message is caused by code inside controlEvent, maybe a nullpointer or wrong casting?

duncan_a

Re: Newbie struggling with controlP5 - Getting values from controls

1 year ago

Hi Andreas

Thanks for the reply

I now have the sliders working and I can get the values from them OK, but I'm still struggling with the RadioButtons.

I have this:

void doMode()
{
sendMode = int(cp5.getGroup("radioButton").getArrayValue());
switch(sendMode)
{
    case(0000): showMode = "NONE"; break;
    case(1000): showMode = "First"; break;
    case(0100): showMode = "Second"; break;
    case(0010): showMode = "Third"; break;
    case(0001): showMode = "Fourth"; break;
    println ("Selected Mode " + showMode + "sendMode = " + sendMode);
}
}

But it returns an error "cannot convert from float[] to int" - if I set "sendMode" to a float (and then try and convert it to an int or a string) I get an error of "cannot convert from float[] to float"...

As for your answer "4) the error message is caused by code inside controlEvent, maybe a nullpointer or wrong casting?" - I have absolutely no idea what that means (I'm a newbie remember).

Can you (or anybody else) reccomend a good book for the basics of Processing that includes using the controlP5 items?

Is it possible to change the appearance of the controls - give buttons a 3d look with a border for instance? I've tried to add borders by drawing lines but they appear on all tabs which doesn't work for me as I have different controls on different tabs and the end result is a complete mess. The plain "square on a background" is fine in terms of function but not very nice to look at.

Thanks

Duncan

benja

Re: Newbie struggling with controlP5 - Getting values from controls

1 year ago

Hi Duncan,

it is really helpful, if you provide your whole sketch. Then we are able to copy and run the code in processing to test it. The error in you doMode-function is clear: You try to assign an array of floats-values to a single int-variale. That doens't work.
You can assign it to a float-array ( float[]) and then iterate over that array and compare the values. But instead of "getArrayValue()" you could just use "value()". That should return the id of the selected item.

duncan_a

Re: Newbie struggling with controlP5 - Getting values from controls

1 year ago

Hi benja

Sorry - I wasn't ignoring you...

I tried that out and got in a tangle so I thought I'd tidy up the sketch and post it - but I screw-up somewhwere and it doesn't work at all now (yes, I know, I should have saved it immediately before and worked on a copy) - so I'm going to get it into a new sketch piece by piece and if I still have the original problems I'll post the new one.

My apologies

Duncan

duncan_a

Re: Newbie struggling with controlP5 - Getting values from controls

1 year ago

Hi

Here (I hope) is the sketch. I have rebuilt it and annotated it as much as I can but it's a heck of a mess by the standards of anyone who can even hal-program I'm afraid - I may even have things in the wrong part of the sketch, and I know some of the "notes to self" are not yet reflected in the code

I have added a list of the main problems at the beginning and there are a couple more in the sketch itself.

Any help, with simple explanations to help me learn would be very welcome - and I do mean simple, I still haven't fully understood "You can assign it to a float-array ( float[]) and then iterate over that array and compare the values"

/*
Rebuild of "Play3"
22 October 2012
Processing v2.0b3
Version of controlP5 unknown - downloaded beginning of October 2012

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
Current Status - as seen by a newbie
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
Selecting any tab throws red text
Control Events for Radio Buttons (Target Mode) throw red text
Cannot 'pick up' variable values to display, but can for println, so must have them
Cannot move drawn lines to Tab 1
When "window" is closed, produces "Null Pointer Exception" Error
With no trigger event, prints 0 as value of s1 three times then
correct 1.0 three times - same thing for s2...
so firing lines 642 and 649 somehow!!!
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
*/

import controlP5.*;
ControlP5 cp5;
import processing.serial.*;
Serial serial;

int myColor = color(0, 0, 0);
int sliderValue = 100;
int sliderTicks1 = 100;
int sliderTicks2 = 30;
int t;
float td = 0.00;
float fb = 0.00;
int var; // variable used all over the place!!!
boolean sound = false;
boolean fireback = false;
boolean random_time = false;
String showOptions = "Test"; // Should show S, F, R, SF. SR, SFR or FR
//F=1, F=3, R=5
// Therefore combinations are: 1, 3, 5, 4, 6, 9 or 8 (using +) - 1 byte
int sendMode; // Array Variables sent to SATR
String showMode ="Test"; // Variable to display Target Mode set
int options; // Options selected
// Values to be 1, 3, 5, 4, 6, 9 or 8 therefore 1 byte
int type; // Target type
// Values to be 0, 1, 2, 3 therefore 1 byte
Slider abc;
RadioButton r;
Textlabel myTextlabelA;
Textlabel myTextlabelB;
Textlabel myTextlabelC;
Textlabel myTextlabelD;
Textlabel indicatorlabelA;
Textlabel indicatorlabelB;
Textlabel indicatorlabelC;
Textlabel indicatorlabelD;
Textlabel targetslabelA;
Textlabel groupslabelA;
Textlabel sessionlabel;

PImage img;

/*
@@@@@@@@@@@@@@@@
Begin VOID Setup
@@@@@@@@@@@@@@@@
*/
void setup()
{
/*
##############################################################################
Define screen size
##############################################################################
Is there a way to do "Full-Screen" and then scale the graphics and controls???
##############################################################################
*/
size(800, 600);

/*
######################
Set up the Serial Port
######################
*/
int serialPortNumber = 0; // Will only have one connected item
    println(Serial.list());
// Next part doesn't work - don't know why
String port = Serial.list()[serialPortNumber];
serial = new Serial(this, port, 9600);
/*
#####################
End Serial Port Setup
#####################
*/

/*
#################
Set Up the Screen
#################
*/
noStroke(); // Not sure what this does
// Load the header image
img = loadImage("DummyHeader.png");
size(790, 600);
/*
################
End Screen Setup
################
*/

/*
################
Set Up the Fonts
################
*/
// Set Font for Major Controls
cp5 = new ControlP5(this);
ControlFont cf1 = new ControlFont(createFont("Arial", 16));
// Set Font for Minor Controls
cp5 = new ControlP5(this);
ControlFont cf2 = new ControlFont(createFont("Arial Bold", 12));
// Set Font for Labels
cp5 = new ControlP5(this);
ControlFont cf3 = new ControlFont(createFont("Arial", 20));
// Set Font for main Target Buttons
cp5 = new ControlP5(this);
ControlFont cf4 = new ControlFont(createFont("Arial Bold", 20));
/*
###############
End Fonts Setup
###############
*/

/*
##############################################
Do the Tabs
##############################################
Can't find a way to increase the font size
Would like to use cf2 (Ariel Bold 12) centered
##############################################
*/
cp5.getTab("default")
.setColorBackground(color(0, 100, 160, 150))
.setColorLabel(color(255))
.setColorActive(color(255, 128, 0)) // Orange
.activateEvent(true)
.setLabel("SETUP")
//.getCaptionLabel().align(CENTER,CENTER)- Doesn't seem to work
.setId(1)
.setWidth(60)
.setHeight (30)
;

cp5.getTab("tab1")
.setColorBackground(color(160, 0, 100, 150))
.setColorLabel(color(255))
.setColorActive(color(255, 128, 0)) // Orange
.activateEvent(true)
.setLabel("SESSION")
//.getCaptionLabel().align(CENTER,CENTER)- Doesn't seem to work
.setId(2)
//.setPosition(80,100)
.setWidth(60)
.setHeight (30)
;

cp5.getTab("Tab2")
.setColorBackground(color(100, 160, 0, 150))
.setColorLabel(color(255))
.setColorActive(color(255, 128, 0)) // Orange
.activateEvent(true)
.setLabel("RUN")
//.getCaptionLabel().align(CENTER,CENTER)- Doesn't seem to work
.setId(3)
.setWidth(60)
.setHeight (30)
;
/*
##############
End Tabs Setup
##############
*/

/*
################################################
Set Up the Sliders
################################################
Want to lose the value display within the Slider
And have it updating in real time to the right
################################################
*/

// name, minimum, maximum, default value (float), x, y, width, height
cp5.addSlider("s1")
//cp5.addSlider("s1", 0, 2, 0.5, 200, 255, 400, 20)
.setCaptionLabel("")
.setPosition(200, 255)
.setWidth(400)
.setHeight(20)
.setRange(0, 2) // values can range from big to small as well
.setValue(1.0)
.setNumberOfTickMarks(21)
.setSliderMode(Slider.FIX)
;

// name, minimum, maximum, default value (float), x, y, width, height
cp5.addSlider("s2")
//cp5.addSlider("s2", 0, 2, 0.5, 200, 305, 400, 20) - Can't see how to use this method than do the TickMarks and the Fix
.setCaptionLabel("")
.setPosition(200, 305)
.setWidth(400)
.setHeight(20)
.setRange(0, 2) // values can range from big to small as well
.setValue(0.5)
.setNumberOfTickMarks(21)
.setSliderMode(Slider.FIX)
;
/*
#################
End Sliders Setup
#################
*/

/*
#############################
Set up Options Toggle Buttons
#############################
There has to be a neater way!
#############################
*/
//name, default value (boolean), x, y, width, height
//Option Button 2 (opt12)
cp5.addToggle("opt1",false,200,150,80,30);
cp5.controller("opt1").setCaptionLabel("Sound"); // change what the button says on it
cp5.controller("opt1").captionLabel().setControlFont(cf1);
cp5.controller("opt1").captionLabel().toUpperCase(false);
cp5.controller("opt1").captionLabel().style().marginLeft = 18;
cp5.controller("opt1").captionLabel().style().marginTop = -30;
//Option Button 2 (opt12)
cp5.addToggle("opt2",false,307,150,80,30);
cp5.controller("opt2").setCaptionLabel("FireBack"); // change what the button says on it
cp5.controller("opt2").captionLabel().setControlFont(cf1);
cp5.controller("opt2").captionLabel().toUpperCase(false);
cp5.controller("opt2").captionLabel().style().marginLeft = 10;
cp5.controller("opt2").captionLabel().style().marginTop = -30;
//Option Button 3 (opt3)
cp5.addToggle("opt3",false,414,150,80,30);
cp5.controller("opt3").setCaptionLabel("Option3"); // change what the button says on it
cp5.controller("opt3").captionLabel().setControlFont(cf1);
cp5.controller("opt3").captionLabel().toUpperCase(false);
cp5.controller("opt3").captionLabel().style().marginLeft = 11;
cp5.controller("opt3").captionLabel().style().marginTop = -30;
/*
########################
End Option Buttons Setup
########################
*/

    /*
##################################
Set Up the Modes (Radio) Buttons
##################################
*/
r = cp5.addRadioButton("radioButton")
.setPosition(200, 200) // Posisition of Row Start
.setSize(80, 30) // Button Size
//.setColorForeground(color(120)) // Button Hover colour
.setColorActive(color(255, 128, 0)) // Orange Button Clicked colour
.setColorLabel(color(255)) // Label Text colour
.setItemsPerRow(4) // Number of Buttons & Captions
.setSpacingColumn(27) // Distance between one Button/Caption pair and next
.setNoneSelectedAllowed(false) //*** Need to make it default to first ***
.addItem("rb1", 1) // Button 1
.addItem("rb2", 2) // Button 2 Caption Text
.addItem("rb3", 3) // Button 3 Caption Text
.addItem("rb4", 4) // Button 4 Caption Text
;
// Do the Labels
//Radio Button 1 (rb1) caption
cp5.controller("rb1").setCaptionLabel("Basic"); // change what the button says on it
cp5.controller("rb1").captionLabel().setControlFont(cf1);
cp5.controller("rb1").captionLabel().toUpperCase(false);
cp5.controller("rb1").captionLabel().style().marginLeft = -63;
//Radio Button 2 (rb2) caption
cp5.controller("rb2").setCaptionLabel("Timed"); // change what the button says on it
cp5.controller("rb2").captionLabel().setControlFont(cf1);
cp5.controller("rb2").captionLabel().toUpperCase(false);
cp5.controller("rb2").captionLabel().style().marginLeft = -65;
//Radio Button 3 (rb3) caption
cp5.controller("rb3").setCaptionLabel("Controlled"); // change what the button says on it
cp5.controller("rb3").captionLabel().setControlFont(cf1);
cp5.controller("rb3").captionLabel().toUpperCase(false);
cp5.controller("rb3").captionLabel().style().marginLeft = -80;
//Radio Button 4 (rb4) caption
cp5.controller("rb4").setCaptionLabel("Random"); // change what the button says on it
cp5.controller("rb4").captionLabel().setControlFont(cf1);
cp5.controller("rb4").captionLabel().toUpperCase(false);
cp5.controller("rb4").captionLabel().style().marginLeft = -73;
;
/*
#################################
End Options (Radio) Buttons Setup
#################################
*/

/*
#################
Set Up the Labels
#################
*/
myTextlabelA = cp5.addTextlabel("label_1")
.setText("Target Mode")
.setPosition(10, 200)
.setColorValue(0xffffff00)
.setFont(cf3)
;

myTextlabelB = cp5.addTextlabel("label_2")
.setText("Target Duration ")
.setPosition(10, 250)
.setColorValue(0xffffff00)
.setFont(cf3)
;

myTextlabelC = cp5.addTextlabel("label_3")
.setText("Fire Back Delay")
.setPosition(10, 300)
.setColorValue(0xffffff00)
.setFont(cf3)
;

myTextlabelD = cp5.addTextlabel("label_4")
.setText("Options Enabled")
.setPosition(10, 150)
.setColorValue(0xffffff00)
.setFont(cf3)
;

indicatorlabelA = cp5.addTextlabel("ind_1")
// Needs to show the selected Options
.setText(showOptions)
.setPosition(630, 150)
.setColorValue(0xffffff00)
.setFont(cf3)
;

indicatorlabelB = cp5.addTextlabel("ind_2")
// Needs to show the selected Target Type in next line
.setText(showMode) // takes initial value only, not updated
.setPosition(630, 200)
.setColorValue(0xffffff00)
.setFont(cf3)
;

indicatorlabelC = cp5.addTextlabel("s1_label")
// Needs to show the current slider value + " Secs"
.setText(td+" Secs") // takes initial value only, not updated
.setPosition(630, 250)
.setColorValue(0xffffff00)
.setFont(cf3)
;

indicatorlabelD = cp5.addTextlabel("s2_label")
// Needs to show the current slider value + " Secs"
.setText(fb+" Secs")
.setPosition(630, 300)
.setColorValue(0xffffff00)
.setFont(cf3)
;

targetslabelA = cp5.addTextlabel("targets")
.setText("Set Targets")
.setPosition(10, 180)
.setColorValue(0xffffff00)
.setFont(createFont("Ariel", 20))
;
cp5.getController("targets").moveTo("tab1");

groupslabelA = cp5.addTextlabel("groups")
.setText("Set Groups")
.setPosition(10, 310)
.setColorValue(0xffffff00)
.setFont(createFont("Ariel", 20))
;
cp5.getController("groups").moveTo("tab1");

sessionlabel = cp5.addTextlabel("session")
.setText("Session")
.setPosition(687, 130)
.setColorValue(0xffffff00)
.setFont(createFont("Ariel", 20))
;
cp5.getController("session").moveTo("tab1");
/*
################
End Labels Setup
################
*/

/*
#########################
Set Up the Target Buttons
#########################
*/
cp5.addToggle("t1",false,150,150,40,40);
cp5.controller("t1").setCaptionLabel("1"); // change what the button says on it
cp5.controller("t1").captionLabel().setControlFont(cf4);
cp5.controller("t1").captionLabel().toUpperCase(false);
cp5.controller("t1").captionLabel().style().marginLeft = 15;
cp5.controller("t1").captionLabel().style().marginTop = -37;
cp5.getController("t1").moveTo("tab1");
cp5.addToggle("t2",false,200,150,40,40);
cp5.controller("t2").setCaptionLabel("2"); // change what the button says on it
cp5.controller("t2").captionLabel().setControlFont(cf4);
cp5.controller("t2").captionLabel().toUpperCase(false);
cp5.controller("t2").captionLabel().style().marginLeft = 15;
cp5.controller("t2").captionLabel().style().marginTop = -37;
cp5.getController("t2").moveTo("tab1");
cp5.addToggle("t3",false,250,150,40,40);
cp5.controller("t3").setCaptionLabel("3"); // change what the button says on it
cp5.controller("t3").captionLabel().setControlFont(cf4);
cp5.controller("t3").captionLabel().toUpperCase(false);
cp5.controller("t3").captionLabel().style().marginLeft = 15;
cp5.controller("t3").captionLabel().style().marginTop = -37;
cp5.getController("t3").moveTo("tab1");
cp5.addToggle("t4",false,300,150,40,40);
cp5.controller("t4").setCaptionLabel("4"); // change what the button says on it
cp5.controller("t4").captionLabel().setControlFont(cf4);
cp5.controller("t4").captionLabel().toUpperCase(false);
cp5.controller("t4").captionLabel().style().marginLeft = 15;
cp5.controller("t4").captionLabel().style().marginTop = -37;
cp5.getController("t4").moveTo("tab1");
cp5.addToggle("t5",false,350,150,40,40);
cp5.controller("t5").setCaptionLabel("5"); // change what the button says on it
cp5.controller("t5").captionLabel().setControlFont(cf4);
cp5.controller("t5").captionLabel().toUpperCase(false);
cp5.controller("t5").captionLabel().style().marginLeft = 15;
cp5.controller("t5").captionLabel().style().marginTop = -37;
cp5.getController("t5").moveTo("tab1");
cp5.addToggle("t6",false,400,150,40,40);
cp5.controller("t6").setCaptionLabel("6"); // change what the button says on it
cp5.controller("t6").captionLabel().setControlFont(cf4);
cp5.controller("t6").captionLabel().toUpperCase(false);
cp5.controller("t6").captionLabel().style().marginLeft = 15;
cp5.controller("t6").captionLabel().style().marginTop = -37;
cp5.getController("t6").moveTo("tab1");
cp5.addToggle("t7",false,450,150,40,40);
cp5.controller("t7").setCaptionLabel("7"); // change what the button says on it
cp5.controller("t7").captionLabel().setControlFont(cf4);
cp5.controller("t7").captionLabel().toUpperCase(false);
cp5.controller("t7").captionLabel().style().marginLeft = 15;
cp5.controller("t7").captionLabel().style().marginTop = -37;
cp5.getController("t7").moveTo("tab1");
cp5.addToggle("t8",false,500,150,40,40);
cp5.controller("t8").setCaptionLabel("8"); // change what the button says on it
cp5.controller("t8").captionLabel().setControlFont(cf4);
cp5.controller("t8").captionLabel().toUpperCase(false);
cp5.controller("t8").captionLabel().style().marginLeft = 15;
cp5.controller("t8").captionLabel().style().marginTop = -37;
cp5.getController("t8").moveTo("tab1");
cp5.addToggle("t9",false,550,150,40,40);
cp5.controller("t9").setCaptionLabel("9"); // change what the button says on it
cp5.controller("t9").captionLabel().setControlFont(cf4);
cp5.controller("t9").captionLabel().toUpperCase(false);
cp5.controller("t9").captionLabel().style().marginLeft = 15;
cp5.controller("t9").captionLabel().style().marginTop = -37;
cp5.getController("t9").moveTo("tab1");
cp5.addToggle("t10",false,600,150,40,40);
cp5.controller("t10").setCaptionLabel("10"); // change what the button says on it
cp5.controller("t10").captionLabel().setControlFont(cf4);
cp5.controller("t10").captionLabel().toUpperCase(false);
cp5.controller("t10").captionLabel().style().marginLeft = 8;
cp5.controller("t10").captionLabel().style().marginTop = -37;
cp5.getController("t10").moveTo("tab1");
cp5.addToggle("t11",false,150,200,40,40);
cp5.controller("t11").setCaptionLabel("11"); // change what the button says on it
cp5.controller("t11").captionLabel().setControlFont(cf4);
cp5.controller("t11").captionLabel().toUpperCase(false);
cp5.controller("t11").captionLabel().style().marginLeft = 8;
cp5.controller("t11").captionLabel().style().marginTop = -37;
cp5.getController("t11").moveTo("tab1");
cp5.addToggle("t12",false,200,200,40,40);
cp5.controller("t12").setCaptionLabel("12"); // change what the button says on it
cp5.controller("t12").captionLabel().setControlFont(cf4);
cp5.controller("t12").captionLabel().toUpperCase(false);
cp5.controller("t12").captionLabel().style().marginLeft = 8;
cp5.controller("t12").captionLabel().style().marginTop = -37;
cp5.getController("t12").moveTo("tab1");
cp5.addToggle("t13",false,250,200,40,40);
cp5.controller("t13").setCaptionLabel("13"); // change what the button says on it
cp5.controller("t13").captionLabel().setControlFont(cf4);
cp5.controller("t13").captionLabel().toUpperCase(false);
cp5.controller("t13").captionLabel().style().marginLeft = 8;
cp5.controller("t13").captionLabel().style().marginTop = -37;
cp5.getController("t13").moveTo("tab1");
cp5.addToggle("t14",false,300,200,40,40);
cp5.controller("t14").setCaptionLabel("14"); // change what the button says on it
cp5.controller("t14").captionLabel().setControlFont(cf4);
cp5.controller("t14").captionLabel().toUpperCase(false);
cp5.controller("t14").captionLabel().style().marginLeft = 8;
cp5.controller("t14").captionLabel().style().marginTop = -37;
cp5.getController("t14").moveTo("tab1");
cp5.addToggle("t15",false,350,200,40,40);
cp5.controller("t15").setCaptionLabel("15"); // change what the button says on it
cp5.controller("t15").captionLabel().setControlFont(cf4);
cp5.controller("t15").captionLabel().toUpperCase(false);
cp5.controller("t15").captionLabel().style().marginLeft = 8;
cp5.controller("t15").captionLabel().style().marginTop = -37;
cp5.getController("t15").moveTo("tab1");
cp5.addToggle("t16",false,400,200,40,40);
cp5.controller("t16").setCaptionLabel("16"); // change what the button says on it
cp5.controller("t16").captionLabel().setControlFont(cf4);
cp5.controller("t16").captionLabel().toUpperCase(false);
cp5.controller("t16").captionLabel().style().marginLeft = 8;
cp5.controller("t16").captionLabel().style().marginTop = -37;
cp5.getController("t16").moveTo("tab1");
cp5.addToggle("t17",false,450,200,40,40);
cp5.controller("t17").setCaptionLabel("17"); // change what the button says on it
cp5.controller("t17").captionLabel().setControlFont(cf4);
cp5.controller("t17").captionLabel().toUpperCase(false);
cp5.controller("t17").captionLabel().style().marginLeft = 8;
cp5.controller("t17").captionLabel().style().marginTop = -37;
cp5.getController("t17").moveTo("tab1");
cp5.addToggle("t18",false,500,200,40,40);
cp5.controller("t18").setCaptionLabel("18"); // change what the button says on it
cp5.controller("t18").captionLabel().setControlFont(cf4);
cp5.controller("t18").captionLabel().toUpperCase(false);
cp5.controller("t18").captionLabel().style().marginLeft = 8;
cp5.controller("t18").captionLabel().style().marginTop = -37;
cp5.getController("t18").moveTo("tab1");
cp5.addToggle("t19",false,550,200,40,40);
cp5.controller("t19").setCaptionLabel("19"); // change what the button says on it
cp5.controller("t19").captionLabel().setControlFont(cf4);
cp5.controller("t19").captionLabel().toUpperCase(false);
cp5.controller("t19").captionLabel().style().marginLeft = 8;
cp5.controller("t19").captionLabel().style().marginTop = -37;
cp5.getController("t19").moveTo("tab1");
cp5.addToggle("t20",false,600,200,40,40);
cp5.controller("t20").setCaptionLabel("20"); // change what the button says on it
cp5.controller("t20").captionLabel().setControlFont(cf4);
cp5.controller("t20").captionLabel().toUpperCase(false);
cp5.controller("t20").captionLabel().style().marginLeft = 8;
cp5.controller("t20").captionLabel().style().marginTop = -37;
cp5.getController("t20").moveTo("tab1");
/*
########################
End Target Buttons Setup
########################
*/

/*
########################
Set Up the Group Buttons
########################
*/
cp5.addToggle("g1",false,150,280,90,90);
cp5.controller("g1").setCaptionLabel("1"); // change what the button says on it
cp5.controller("g1").captionLabel().setControlFont(cf4);
cp5.controller("g1").captionLabel().toUpperCase(false);
cp5.controller("g1").captionLabel().style().marginLeft = 40;
cp5.controller("g1").captionLabel().style().marginTop = -62;
cp5.getController("g1").moveTo("tab1");
    cp5.addToggle("g2",false,250,280,90,90);
cp5.controller("g2").setCaptionLabel("2"); // change what the button says on it
cp5.controller("g2").captionLabel().setControlFont(cf4);
cp5.controller("g2").captionLabel().toUpperCase(false);
cp5.controller("g2").captionLabel().style().marginLeft = 40;
cp5.controller("g2").captionLabel().style().marginTop = -62;
cp5.getController("g2").moveTo("tab1");
    cp5.addToggle("g3",false,350,280,90,90);
cp5.controller("g3").setCaptionLabel("3"); // change what the button says on it
cp5.controller("g3").captionLabel().setControlFont(cf4);
cp5.controller("g3").captionLabel().toUpperCase(false);
cp5.controller("g3").captionLabel().style().marginLeft = 40;
cp5.controller("g3").captionLabel().style().marginTop = -62;
cp5.getController("g3").moveTo("tab1");
    cp5.addToggle("g4",false,450,280,90,90);
cp5.controller("g4").setCaptionLabel("4"); // change what the button says on it
cp5.controller("g4").captionLabel().setControlFont(cf4);
cp5.controller("g4").captionLabel().toUpperCase(false);
cp5.controller("g4").captionLabel().style().marginLeft = 40;
cp5.controller("g4").captionLabel().style().marginTop = -62;
cp5.getController("g4").moveTo("tab1");
    cp5.addToggle("g5",false,550,280,90,90);
cp5.controller("g5").setCaptionLabel("5"); // change what the button says on it
cp5.controller("g5").captionLabel().setControlFont(cf4);
cp5.controller("g5").captionLabel().toUpperCase(false);
cp5.controller("g5").captionLabel().style().marginLeft = 40;
cp5.controller("g5").captionLabel().style().marginTop = -62;
cp5.getController("g5").moveTo("tab1");
/*
#######################
End Group Buttons Setup
#######################
*/

}
/*
@@@@@@@@@@@@@@
End Void Setup
@@@@@@@@@@@@@@
*/

/*
@@@@@@@@@@@@@@@
Begin Void Draw
@@@@@@@@@@@@@@@
*/
void draw ()
{
background(0);
image(img, 0, 30);
stroke (255);
line (0, 30, 800, 30);
line (0, 130, 800, 130);
/*
######################################################
The following items need to show on "session" tab only
######################################################
*/
line (0, 260, 800, 260); // Needs to be on "session" tab only
line (660, 130, 660, 260); // Needs to be on "session" tab only
doTargetBtnOutlines (); // Needs to be on "session" tab only
doGroupBtnOutlines (); // Needs to be on "session" tab only

}
/*
@@@@@@@@@@@@@
END VOID DRAW
@@@@@@@@@@@@@
*/

/*
#########################
Function - Control Events
#########################
*/
void controlEvent(ControlEvent theControlEvent) {
if (theControlEvent.isTab())
    {
      println("got an event from tab : "+theControlEvent.getTab().getName()+" with id "+theControlEvent.getTab().getId());
    }

if(theControlEvent.controller().name()=="s1")
    {
      //td = cp5.getController("sl").getValue();
      td = (theControlEvent.controller().value());
      println ("Duration = " + td);
    }

if(theControlEvent.controller().name()=="s2")
    {
      //td = cp5.getController("sl").getValue();
      fb = (theControlEvent.controller().value());
      println ("Delay = " + fb);
    }

if (theControlEvent.controller ().name() == "opt1")
    {
      int valOpt1 = int(cp5.getController("opt1").getValue());
      print("Sound = "); // Solely for testing
      println (valOpt1); // Solely for testing
//      toggle(sound);
    }

if (theControlEvent.controller ().name() == "opt2")
    {
      int valOpt2 = int(cp5.getController("opt2").getValue());
      print("FireBack = "); // Solely for testing
      println (valOpt2); // Solely for testing
//      toggle(fireback);
    }

if (theControlEvent.controller ().name() == "opt3")
    {
      int valOpt3 = int(cp5.getController("opt3").getValue());
      print("Option 3 = "); // Solely for testing
      println (valOpt3); // Solely for testing
//      toggle(option3);
    }

if (theControlEvent.controller ().name() == "rb1")
    {
      type = 0;
      showMode = "Mode 0";
      println ("Type 0");
    }

if (theControlEvent.controller ().name() == "rb1")
    {
      type = 0;
      showMode = "Mode 0";
    }

    if (theControlEvent.controller ().name() == "rb2")
    {
      type = 1;
      showMode = "Mode 1";
    }

if (theControlEvent.controller ().name() == "rb3")
    {
      type = 2;
      showMode = "Mode 2";
    }
if (theControlEvent.controller ().name() == "rb4")
    {
      type = 3;
      showMode = "Mode 3";
    }
}
/*
###########################
End Control Events Function
###########################
*/

/*
#############################################################
Function - Draw outline boxes for Target Buttons (aesthetic)
#############################################################
*/
void doTargetBtnOutlines ()
{
int x0 = 150;
int y0 = 150;
int y1 = 200;
//Do upper row
for (int i =0; i<10; i++)
{
    int tempx0 = x0+(i*50);
    noFill();
    rect (tempx0-1, y0-1, 41, 41);
}
// Now do lower row
for (int i =0; i<10; i++)
{
    int tempx0 = x0+(i*50);
    noFill();
    rect (tempx0-1, y1-1, 41, 41);
}
}
/*
###################################
End Target Button outlines Function
###################################
*/

//################################################################
// Draw the outline boxes for the Group Buttons (purely aesthetic)
void doGroupBtnOutlines ()
{
int x0 = 150;
int y0 = 280;
//Do row
for (int i =0; i<5; i++)
{
    int tempx0 = x0+(i*100);
    noFill();
    rect (tempx0-1, y0-1, 91, 91);
}
}
/*
###################################
End Group Button outlines Function
###################################
*/

/*
#####################################
Function - Do Mode selection routines
#####################################
*/
void doMode()
{
sendMode = int(cp5.getGroup("radioButton").value());
switch(sendMode)
{
    case(0): showMode = "0";
    println ("Mode "+showMode+" selected"); // Purely for testing
    break;
    case(1): showMode = "1";
    println ("Mode "+showMode+" selected"); // Purely for testing
    break;
    case(2): showMode = "2";
    println ("Mode "+showMode+" selected"); // Purely for testing
    break;
    case(3): showMode = "3";
    println ("Mode "+showMode+" selected"); // Purely for testing
    break;
}
    println ("Selected Mode " + showMode + "sendMode = " + sendMode);
}

Top Reply