# How to make a processing GUI with a slider and button talking to Arduino

**URL:** <https://discourse.processing.org/t/how-to-make-a-processing-gui-with-a-slider-and-button-talking-to-arduino/11934>\
**Category:** Electronics (Arduino, etc.)\
**Created:** [June 8, 2019, 11:57pm UTC](https://discourse.processing.org/t/how-to-make-a-processing-gui-with-a-slider-and-button-talking-to-arduino/11934 "2019-06-08T23:57:03Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![burak.eral](https://avatars.discourse-cdn.com/v4/letter/b/67e7ee/32.png) [@burak.eral](https://discourse.processing.org/u/burak.eral)\
**Post date:** [June 8, 2019, 11:57pm UTC](https://discourse.processing.org/t/how-to-make-a-processing-gui-with-a-slider-and-button-talking-to-arduino/11934/1 "2019-06-08T23:57:03Z")

</div>

Dear all;

I am trying to make a guy with a slider and two buttons talking to Arduino. Unfortunately, I cannot detect the signals send from processing to Arduino. I think I am struggling to separately read the serial signal from slider and button in Arduino code. I guess I should differentiate slider and buttons as separate objects so that port.write can send it as separate variable.

Any suggestions?

## Processing code:

```auto
import controlP5.*; //library
import processing.serial.*; //library
Serial port; //do not change
ControlP5 cp5; //create ControlP5 object
PFont font;
//int led;

void setup() {

  size(500, 300); //window size, (width, height)
  printArray(Serial.list());
  port = new Serial(this, "/dev/cu.usbmodem14101", 9600); //connected arduino port
  cp5 = new ControlP5(this); //do not change

     font = createFont("calibri", 20); // custom fonts for buttons and title
  
     cp5.addButton("SFL_ON") //"Turn On" is the name of button
    .setPosition(300, 50) //x and y coordinates of upper left corner of button
    .setSize(120, 70) //(width, height)
    .setFont(font)
  ;

      cp5.addButton("SFL_OFF") //"Turn On" is the name of button
    .setPosition(300, 150) //x and y coordinates of upper left corner of button
    .setSize(120, 70) //(width, height)
    .setFont(font)
  ;
   
     cp5.addSlider("led")
    .setPosition(125, 20) //x and y upper left corner
    .setSize(50, 250) //(width, height)
    .setRange(0, 255) //slider range low,high
    .setValue(4) //start val
    .setColorBackground(color(0, 0, 255)) //top of slider color r,g,b
    .setColorForeground(color(0, 255, 0)) //botom of slider color r,g,b
    .setColorValue(color(255, 255, 255)) //vall color r,g,b
    .setColorActive(color(255, 0, 0)) //mouse over color
    ;
    
}

void draw() {

  background(0, 0, 0); // background color of window (r, g, b)
    textFont(font);
  text("SFL CONTROL", 300, 30);
}

void led(int led)
{
  port.write(led);
}

void SFL_ON(){
  port.write('y');
}

void SFL_OFF(){
  port.write('n');
}

```

## Arduino code

```auto
const int NumberRepeats = 5;
const int washtime = 1000;
const int flowdelaytime = 1000;
const int exposetime = 1000;

void setup() {

  pinMode(3, OUTPUT); // SELENOID VALVE/ FLOW
  pinMode(4, OUTPUT); // UV sourece
  Serial.begin(9600); //start serial
  Serial.println("<Arduino is ready>");
}

void loop() {

  if (Serial.available()) { //if data available

//char SFL=Serial.readString();
char SFL = Serial.read();
  // int val = Serial.read();

    if (SFL == 'y') { //if n received

      for (int i = 1; i < NumberRepeats; i++) {
        //Turn on the flow i.e. air pressure
        digitalWrite(3, HIGH);
        //Wait for the flow to wash out particles
        delay(washtime);// washtime

        //Turn off the flow
        digitalWrite(3, LOW);

        //Wait for the flow to stop
        delay(flowdelaytime);//flowdelaytime

        //Turn the UV light on i.e. open shutter
        digitalWrite(4, HIGH);

        //Expose the polymer to UV
        delay(exposetime);// exposetime

        //Turn the UV light off i.e. close shutter
        digitalWrite(4, LOW);

      }

    }

    // // Exit the loop if SFL_OFF received

    // if (SFL == 'n') { //if n received
    // exit(0);//The 0 is required to prevent compile error
    // }

  }

}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [June 9, 2019, 7:44am UTC](https://discourse.processing.org/t/how-to-make-a-processing-gui-with-a-slider-and-button-talking-to-arduino/11934/2 "2019-06-09T07:44:45Z")

</div>

pls take a step back from your project and start a new one,  
just use the serial lib for processing  
[https://processing.org/reference/libraries/serial/serialEvent\_.html](https://processing.org/reference/libraries/serial/serialEvent_.html)

and make a bidirectional code for arduino and processing

to verify what is send and understood try some code like a ECHO in arduino  
so you have a feedback ( to processing ) what later can be disabled.

---

<div class="post-metadata">

**Author:** ![burak.eral](https://avatars.discourse-cdn.com/v4/letter/b/67e7ee/32.png) [@burak.eral](https://discourse.processing.org/u/burak.eral)\
**Post date:** [June 9, 2019, 5:18pm UTC](https://discourse.processing.org/t/how-to-make-a-processing-gui-with-a-slider-and-button-talking-to-arduino/11934/3 "2019-06-09T17:18:47Z")

</div>

Dear kll  
Great Thanks for the suggestion. I am going through tutorials in serialEvent and simplifying the code. I will update you on the progress.

Cheers  
B

---

<div class="post-metadata">

**Author:** ![burak.eral](https://avatars.discourse-cdn.com/v4/letter/b/67e7ee/32.png) [@burak.eral](https://discourse.processing.org/u/burak.eral)\
**Post date:** [June 10, 2019, 3:07pm UTC](https://discourse.processing.org/t/how-to-make-a-processing-gui-with-a-slider-and-button-talking-to-arduino/11934/4 "2019-06-10T15:07:05Z")

</div>

Hi There;

I simplified my program and managed to isolate my issue. What I want is to send is 4 integers and a text string from Processing to Arduino as shown in the attachment.

1)When I used the SimpleWrite example from Processing\>File\>Examples\>Serial\>SimpleWrite. I have managed to turn on/off a LED in my Arduino so sending characters ‘H’ or ‘L’ from Processing to Arduino with serial communication works.

1. I changed the Processing and Arduino codes to see if I can send a number 1 & 2 from P to A. It also works. I am not sure if Arduino accepts them as integer through serial communication.

2. I replaced the simple GUI in SimpleWrite with a slider from ControlP5 and send the integer value of the slider to Arduino. It does not work.

To sum up, I think I can not get the Processing to send an integer value of the slider to Arduino. Any ideas will help. Thanks

I copy paste the Processing and Arduino codes:  
Processing code: SFL\_gui\_v1

```auto
import controlP5.*; //library
import processing.serial.*; //library
Serial port; //do not change
ControlP5 cp5; //create ControlP5 object
//int led;
//
void setup() {
  size(400, 450); //window size, (width, height)
  printArray(Serial.list());
  port = new Serial(this, "/dev/cu.usbmodem14101", 9600); //connected arduino port
  cp5 = new ControlP5(this); //do not change
//
  cp5.addSlider("STOP_TIME")
    .setPosition(125, 50) //x and y upper left corner
    .setSize(200, 50) //(width, height)50, 250
    .setRange(0, 200) //slider range low,high
    .setValue(100) //start val
    .setColorValue(color(255, 255, 255)) //vall color r,g,b
    .setColorActive(color(255, 0, 0)) //mouse over color
   // .setScrollSensitivity(1)
  // .setNumberOfTickMarks(20)
    ;    
}
void draw() {
  background(0, 0, 0); // background color of window (r, g, b)
}
void led(int STOP_TIME)
{
  port.write(STOP_TIME);
}

```

Arduino code

```auto
 int val; // Data received from the serial port
 int ledPin = 4; // Set the pin to digital I/O 4
 void setup() {
 pinMode(ledPin, OUTPUT); // Set pin as OUTPUT
 Serial.begin(9600); // Start serial communication at 9600 bps
 }
 void loop() {
 while (Serial.available()) { // If data is available to read,
 val = Serial.read(); // read it and store it in val
 }
 if (val == 100 ) { // If H was received 'H'
 digitalWrite(ledPin, HIGH); // turn the LED on
 } else {
 digitalWrite(ledPin, LOW); // Otherwise turn it OFF
 }
 delay(100); // Wait 100 milliseconds for next reading
 }

```

 ![41%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f23b571a8d079faaf9efa8a143c06c2bbc321895.jpeg)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [June 11, 2019, 12:58am UTC](https://discourse.processing.org/t/how-to-make-a-processing-gui-with-a-slider-and-button-talking-to-arduino/11934/5 "2019-06-11T00:58:50Z")

</div>

serial print is ASCII string,  
so if you send a CSV type line in both directions,

> 1023,1023,1023

you need a split on “,” and convert to numbers on both sides

---

<div class="post-metadata">

**Author:** ![burak.eral](https://avatars.discourse-cdn.com/v4/letter/b/67e7ee/32.png) [@burak.eral](https://discourse.processing.org/u/burak.eral)\
**Post date:** [June 11, 2019, 9:48pm UTC](https://discourse.processing.org/t/how-to-make-a-processing-gui-with-a-slider-and-button-talking-to-arduino/11934/6 "2019-06-11T21:48:26Z")

</div>

Hi kll;

Great Thanks Do you mean that STOP\_TIME i.e. 100 I send from Processing is broken into three 10 bits separated with commas? How can I see this in Arduino or Processing?

I tried the to print what I received in serial monitor but it does not work , it seems to clash with processing as it shares serial port and in processing print(STOP\_TIME) does not work with void led.

I need to read up more on Serial communication I think. I get that serial communication is ASCII but It is not clear to me why it 10 bit not 8 bit,

Cheers

---

<div class="post-metadata">

**Author:** ![ctj001](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@ctj001](https://discourse.processing.org/u/ctj001)\
**Post date:** [June 20, 2019, 7:00pm UTC](https://discourse.processing.org/t/how-to-make-a-processing-gui-with-a-slider-and-button-talking-to-arduino/11934/7 "2019-06-20T19:00:35Z")

</div>

Hi all,

I am having the same problem as you are, burak.eral. I am trying to read integers from two different sliders in Processing into Arduino. I, too, have be able to work with the H/L button options but seem to have gotten stuck where you did.

Were you able to work around this problem?

Best

---

<div class="post-metadata">

**Author:** ![burak.eral](https://avatars.discourse-cdn.com/v4/letter/b/67e7ee/32.png) [@burak.eral](https://discourse.processing.org/u/burak.eral)\
**Post date:** [June 30, 2019, 4:15pm UTC](https://discourse.processing.org/t/how-to-make-a-processing-gui-with-a-slider-and-button-talking-to-arduino/11934/8 "2019-06-30T16:15:52Z")

</div>

Hi Ctj001;

Yes I did solve the problem I am using 4 sliders and a button. You need to use port.write in the format below with Processing then read on Arduino side using Serial.parseInt.

This video was useful

[![]( " - YouTube") ](https://www.youtube.com/watch?v=jZ5VVmJMU-0)

On Processing side you need the following

1. Define integers S1,S2,S3,S4,SFL
2. Use sliders from controlP5 library by importing them then activating, name them “S1” "S2: …
3. port.write(“a”+ S1 + “,” +S2+“,” +S3+“,” +S4+“,”+SFL+“\n” );

On Arduino side, you need to read the data then parse.

```auto
if (Serial.available()>0)
  {
    if(Serial.find('a')) {
    val1=Serial.parseInt();
    val2=Serial.parseInt();
    val3=Serial.parseInt();
    val4=Serial.parseInt();
    val5=Serial.parseInt();
    
  }

```

---

<div class="post-metadata">

**Author:** ![ctj001](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@ctj001](https://discourse.processing.org/u/ctj001)\
**Post date:** [July 1, 2019, 9:08pm UTC](https://discourse.processing.org/t/how-to-make-a-processing-gui-with-a-slider-and-button-talking-to-arduino/11934/9 "2019-07-01T21:08:57Z")

</div>

Thank you for taking your time to reply!

This was extremely helpful.