# Button connection from Arduino to Processing

**URL:** https://discourse.processing.org/t/button-connection-from-arduino-to-processing/37192
**Category:** Electronics (Arduino, etc.)
**Created:** [May 28, 2022, 11:33pm UTC](https://discourse.processing.org/t/button-connection-from-arduino-to-processing/37192 "2022-05-28T23:33:46Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![friedadedoncker](https://avatars.discourse-cdn.com/v4/letter/f/51bf81/32.png) [@friedadedoncker](https://discourse.processing.org/u/friedadedoncker)
#### Post date: [May 28, 2022, 11:33pm UTC](https://discourse.processing.org/t/button-connection-from-arduino-to-processing/37192/1 "2022-05-28T23:33:46Z")

</div>

Hi!

I’m trying to connect a button from Arduino to visuals in Processing. Can’t get it to work. I’m very new to this so any help and explanations are welcome!! (Potmeter works fine)

Here is the Processing code:

```auto
import processing.serial.*; 
  
Serial serial;   
int sensorValue; 
int buttonState;
int LOW;

void setup() { 
  // set the canvas size is 400 x 400
  size(400, 400);  
  
  // Open the serial port and set the baud rate to 9600
  // This experiment arduino board is connected to COM26, here please
  // adjust according to actual situation.
  serial = new Serial(this, "/dev/cu.usbmodem14201", 9600); 
} 
  
void draw() { 
  if ( serial.available() > 0) { 
    // Read from serial production sensor value.
    sensorValue = serial.read();  
    buttonState = serial.read();  
    println(sensorValue);
    println(buttonState);//Print out the processing received sensor value
  
    // Draw a circle on canvas
    background(255); // Background to white
    fill(0,0,255); // Within the circle fill in blue
    ellipse(200, 200, sensorValue, sensorValue); //In point(200,200) as the center circle
  
 if (buttonState == 1){
       ellipse(200, 200, 20, 20); //In point(200,200) as the center circle
 } else {
   rect(200,200,20,20);
} }
} 

```

And the Arduino code:

```auto
// constants won't change. They're used here to set pin numbers:
const int buttonPin = 2; // the number of the pushbutton pin
int potPin = 0; // define UNO board A0 pin connect the potentiometer

// variables will change:
int buttonState = 0; // variable for reading the pushbutton status

void setup() {
  // initialize the pushbutton pin as an input:
  pinMode(buttonPin, INPUT);
}

void loop() {

  // read the state of the pushbutton value:
  int buttonState = digitalRead(buttonPin);

  // check if the pushbutton is pressed. If it is, the buttonState is HIGH:
  if (buttonState == HIGH) {
    Serial.write(1);
    Serial.print(1);

  } else {
    Serial.write(0);
    Serial.print(0);
  }

  // Read the potentiometer voltage
  int sensorValue = analogRead(potPin);   
  //Because the processing 'serial.read()' only support the value between 0-255, 
  //so you need to put a scale of 0-1023 numerical scale between 0-255
  int Voltage = map(sensorValue,0,1023,0,255); 
  Serial.write(Voltage);  
  delay(100); 
}

```

Also a picture of the button connection:

 ![283543085_420534476556641_6922303676867676584_n](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/5/35613ea1f064a067e0e87c5befe171439fb8eaef.jpeg)  
Pins:  
Left = S  
Middle = +  
Right = -

Thanks so much for any help!

---

<div class="post-metadata">

### Author: ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)
#### Post date: [May 28, 2022, 11:43pm UTC](https://discourse.processing.org/t/button-connection-from-arduino-to-processing/37192/2 "2022-05-28T23:43:41Z")

</div>

> [@friedadedoncker](#):
>
> ```auto
> Serial.write(1);
> Serial.print(1);
> 
> ```

You might want two calls to write()… and no calls to print().

---

<div class="post-metadata">

### Author: ![friedadedoncker](https://avatars.discourse-cdn.com/v4/letter/f/51bf81/32.png) [@friedadedoncker](https://discourse.processing.org/u/friedadedoncker)
#### Post date: [May 28, 2022, 11:45pm UTC](https://discourse.processing.org/t/button-connection-from-arduino-to-processing/37192/3 "2022-05-28T23:45:13Z")

</div>

Those are there just so I can read the values from my button in Arduino 🙂

---

<div class="post-metadata">

### Author: ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)
#### Post date: [May 28, 2022, 11:46pm UTC](https://discourse.processing.org/t/button-connection-from-arduino-to-processing/37192/4 "2022-05-28T23:46:03Z")

</div>

> [@friedadedoncker](#):
>
> ```auto
> sensorValue = serial.read();  
> buttonState = serial.read();  
> 
> ```

But you do two calls to read()! Doesn’t that block the whole program?

---

<div class="post-metadata">

### Author: ![friedadedoncker](https://avatars.discourse-cdn.com/v4/letter/f/51bf81/32.png) [@friedadedoncker](https://discourse.processing.org/u/friedadedoncker)
#### Post date: [May 28, 2022, 11:47pm UTC](https://discourse.processing.org/t/button-connection-from-arduino-to-processing/37192/5 "2022-05-28T23:47:41Z")

</div>

Could be yess, how can I receive 2 values from Arduino without blocking the program?

---

<div class="post-metadata">

### Author: ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [May 29, 2022, 12:45am UTC](https://discourse.processing.org/t/button-connection-from-arduino-to-processing/37192/6 "2022-05-29T00:45:38Z")

</div>

Hi  
In this link you can receive 3 values

> **[How to Send Multiple Signals from the Arduino to Processing - dummies](https://www.dummies.com/article/technology/computers/hardware/arduino/how-to-send-multiple-signals-from-the-arduino-to-processing-164740/)**
>
> The only thing better than sending signals to Processing is sending multiple signals, right? Sending multiple signals is often a stumbling block, though, because although sending values from multiple sensors is easy, handling them in the correct...

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [May 29, 2022, 6:29pm UTC](https://discourse.processing.org/t/button-connection-from-arduino-to-processing/37192/7 "2022-05-29T18:29:57Z")

</div>

Hello @friedadedoncker,

The A/D on an Arduino is 10-bit and returns a 16-bit integer from 0 to 1024.

I modified the code from here to provide more flexibility:

_[How to Send Multiple Signals from the Arduino to Processing - dummies](https://www.dummies.com/article/technology/computers/hardware/arduino/how-to-send-multiple-signals-from-the-arduino-to-processing-164740/)_

> **Arduino Code**
>
> ```auto
> // https://www.dummies.com/article/technology/computers/hardware/arduino/how-to-send-multiple-signals-from-the-arduino-to-processing-164740/
> 
> /*
> Serial Call and Response
> Language: Wiring/Arduino
> This program sends an ASCII A (byte of value 65) on startup
> and repeats that until it gets some data in.
> Then it waits for a byte in the serial port, and
> sends three sensor values whenever it gets a byte in.
> Thanks to Greg Shakar and Scott Fitzgerald for the improvements
> The circuit:
> * potentiometers attached to analog inputs 0 and 1
> * pushbutton attached to digital I/O 2
> Created 26 Sept. 2005
> by Tom Igoe
> modified 24 April 2012
> by Tom Igoe and Scott Fitzgerald
> This example code is in the public domain.
> http://www.arduino.cc/en/Tutorial/SerialCallResponse
> */
> 
> int inByte = 0; // incoming serial byte
> 
> void setup()
> {
> // start serial port at 9600 bps:
> Serial.begin(9600);
> // while (!Serial) 
> // {
> // ; // wait for serial port to connect. Needed for Leonardo only
> // }
> establishContact(); // send a byte to establish contact until receiver
> // responds
> delay(1000);
> }
> 
> int count;
> 
> void loop()
> {
> // if we get a valid byte, read analog ins:
> if (Serial.available() > 0) 
> {
> // get incoming byte:
> inByte = Serial.read();
> 
> delay(100);
> Serial.print(count);
> Serial.print(',');
> Serial.print(random(-100, 100));
> Serial.print(',');
> Serial.print(random(-100, 100));
> Serial.print('\n');
> 
> count++;
> if (count>360) count = 0;
> }
> }
>   
> void establishContact() 
> {
> while (Serial.available() <= 0) 
> {
> Serial.print('A'); // send a capital A
> Serial.print('\n');
> delay(300);
> }
> }
> 
> ```

> **Processing Code**
>
> ```auto
> // This example code is in the public domain.
> import processing.serial.*;
> int bgcolor; // Background color
> int fgcolor; // Fill color
> Serial myPort; // The serial port
> //int[] serialInArray; // Where we'll put what we receive
> int serialCount = 0; // A count of how many bytes we receive
> int xpos, ypos; // Starting position of the ball
> boolean firstContact = false; // Whether we've heard from the
> // microcontroller
> 
> int count;
> int x, y, hue;
> 
> void setup()
> {
> size(250, 250, P3D); // Stage size
> colorMode(HSB, 360, 100, 100);
> background(128);
>   
> //noStroke(); // No border on the next thing drawn
> // Set the starting position of the ball (middle of the stage)
> xpos = width/2;
> ypos = height/2;
> // Print a list of the serial ports, for debugging purposes:
> 
> printArray(Serial.list());
> 
> // I know that the first port in the serial list on my mac
> // is always my FTDI adaptor, so I open Serial.list()[0].
> // On Windows machines, this generally opens COM1.
> // Open whatever port is the one you're using.
> String portName = Serial.list()[4];
> myPort = new Serial(this, portName, 9600);
> delay(10);
> myPort.clear();
> myPort.bufferUntil('\n');
> noLoop();
> }
> 
> void draw()
> {
> if (hue == 0)  
> background(128);
> translate(width/2, height/2);
> rotateY((frameCount%360)*TAU/360);
> strokeWeight(5);
> stroke(hue, 100, 100);
> point(x, y);
> }
> 
> void serialEvent(Serial myPort)
> {
> println(count++);
> // read a byte from the serial port:
> String inString = myPort.readStringUntil('\n');
> inString = trim(inString);
> println(inString, inString.length());
> 
> if (firstContact == false)
> {
> if (inString.equals("A") == true)
> {
> println('!');
> myPort.clear(); // clear the serial port buffer
> firstContact = true; // you've had first contact from the microcontroller
> myPort.write('A'); // ask for more
> }
> } 
> else
> {
> int[] serialInArray; // Where we'll put what we receive
> serialInArray = int(split(inString, ','));
> hue = serialInArray[0];
> x = serialInArray[1];
> y = serialInArray[2];
> printArray(serialInArray);
> myPort.write('A'); // ask for more
> redraw();
> }
> }
> 
> ```

References:

- [Serial / Libraries / Processing.org](https://processing.org/reference/libraries/serial/index.html)

- [https://itp.nyu.edu/physcomp/lessons/interpreting-serial-data/](https://itp.nyu.edu/physcomp/lessons/interpreting-serial-data/)

- [html - What do &lt; and &gt; stand for? - Stack Overflow](https://stackoverflow.com/questions/5068951/what-do-lt-and-gt-stand-for)  
This will explain at least one bug on page above.

- [analogRead() - Arduino Reference](https://www.arduino.cc/reference/en/language/functions/analog-io/analogread/)

`:)`

---

<div class="post-metadata">

### Author: ![RichardDL](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@RichardDL](https://discourse.processing.org/u/RichardDL)
#### Post date: [June 2, 2022, 5:00pm UTC](https://discourse.processing.org/t/button-connection-from-arduino-to-processing/37192/8 "2022-06-02T17:00:32Z")

</div>

> [@friedadedoncker](#):
>
> Those are there just so I can read the values from my button in Arduino

Usually if you are using serial output to talk to an application (e.g. Processing) on the PC you can’t use serial output to see what your Ard sketch is doing. (Yes, you could use text output and the make the application use that, or you could design the protocol so it ignores the information print, but I think you’re not doing any of that.) If you have information prints, they will probably mess up your comms.

You have an Arduno Mega, and one fun thing about that is it has 3 extra serial ports. See labels TX1, RX1 etc. I suggest you buy one (better 3) of [TTL to USB adaptor](https://www.ebay.co.uk/itm/393474366118?hash=item5b9ce65aa6:g:kn8AAOSwW6NhBFjW) (That’s the right item, not recommending that shop, lots on ebay and elsewhere.) Connect that to Mega with 3 wires RX to TX, TX to RX, Gnd to Gnd, connect to PC and another COM port will appear. In the Mega you can use e.g. Serial1.write. If you connect Processing to that you don’t have to stop the sketch to reload the Mega. The serial port you’re using now can be for reloading and Serial Monitor.
