Subtitles section Play video Print subtitles Hi, my name is Massimo Banzi and I like to make things. And welcome to another Arduino tutorial video. Today we're going to learn how Arduino can control software running on your computer. We are going to use a very simple circuit as you can see here, where we are going to read the position of a potentiometer and sending that data over the USB connection to your computer, where a small program written in the processing language is going to be used to change the color of the Arduino logo depending on the position of the potentiometer. So, how does this work? Well, if you noticed it, the Arduino has two chips. One main processor here, that is the one that execute the code that you program in the Arduino IDE. And this other smaller square chip that lets the Arduino processor communicate with the USB bus over to the computer. So, we are going to use for this project something that is called, Serial Communication. Because the Arduino will send data over to the computer one bit at the time at a certain speed we will define in software, and then, the square chip that you see here will convert that into USB data that travels over to the computer. We have used the serial communication in the past in order to visualize the data that comes from the Arduino board with the Arduino IDE. There is a button on the Arduino IDE called serial monitor. If you press that, a small window opens up and then you can see all the data that comes from the Arduino board, visualized scrolling down the small window. Then there is a little menu at the bottom that says normally 9600, and that's for example the speed of communication used by the Arduino to send the data so, the Arduino speed of sending and the Arduino IDE speed of receiving have to be the same in other to keep the data readable. In this case we are going to do more with the data that comes to the computer. Instead of just visualizing it on the screen, we are going to use another software to capture the data and use it to do something and control the software from the Arduino. In order to do this, we are going to use the processing language. Processing is a great software that was a major inspiration, and one of the bases for developing Arduino and it is a great way to learn how to program. You can download the processing IDE for free from the prossesing.org website. After you download it, you should install it according to the instructions you find on the web site and you should go through a couple of tutorials like the overview tutorial. After that, you can load the processing code into the processing IDE, and you can load the Arduino code into the Arduino IDE and then transfer the program on the Arduino board and after the code is loaded, you will see that the TX LED will start to blink signaling that the Arduino is sending data. You can open the serial monitor, see the data scrolling on the screen... after you see that, the Arduino part of the work is done. You can close the serial monitor, then you switch over to the processing IDE, you press the button to start the code on the processing IDE. That will read the data coming from the Arduino from the serial port and then it will use the number to change the background color of the Arduino logo. Now, we should go through the code and see in detail how the two different applications work. Let's build the circuit first. Here you can see that we have a potentiometer plugged into the breadboard and we have one wire going from the potentiometer to the analog input zero, in order to read the value coming from the potentiometer. Then we have two wires connected to the potentiometer going to the plus and minus rail on the breadboard and then we have a red and black wire going from those two rails to the 5V and GND signals on the breadboard. When I change the position of the potentiometer corresponding voltage is coming out of this wire and going into the analog input zero and that data gets converted into a number that gets sent down the USB cable over to the computer and then to the processing code. We will start with the Arduino code, so here you will see that the code is very simple. In the setup()function we have a Serial.begin() command with 9600 as a parameter. This opens up the serial communication between the Arduino and the computer at the speed of 9600 bits per second. Then in the main loop we read, from the analog input zero, using analogRead(A0). The value that we read is between 0 and 1023 and we divide that by 4. This is because Serial.write(), which is the function we are using to send the data over to the computer only accepts bytes that have a value that goes between 0 and 255 as a maximum value. So, by dividing the result of "analog read" by 4 we go from a value that goes between 0 and 1023 to a value that goes from 0 to 255. Serial.write() sends the data from the Arduino onto the cable over to the computer. After that we've the delay of 33ms just to avoid overloading the serial communication with too much data that can actually create some problems on some slower computers. Once the data is reaching the computer, then we have to explore what the processing code is doing in order to read that data and visualize it So, switching over to the processing code. At the beginning we have this "import" statement that imports the library "prossesing.serial this one is the twin library of our Serial.begin() a serial library on our Arduino There is a corresponding serial library in processing that we are using to open the communication and read the data from the board Then we have an object called "Serial" that defines the serial port we want to use to communicate with the Arduino And then we define a "PImage" object called logo that will contain the logo image that we want to tweak. Finally, we have an integer value called "bgcolor" that starts at 0 and that defines the color of the background. Let's look at the setup() function. At the beginning we use colorMode(HSB) to define that the colors that we are going to specify later, are using this HSB convention, and you can read more about this in the processing documentation. Then, we use the loadImage() function to load the "logo.png" file into the "logo" object. Then, the size() function defines the size of the processing output window, that is going to be the same as the size of the Arduino logo. Then here, there is a tricky part. There's a println() statement that will print a list of all the serial ports that are present on your computer. This is because we need to know the name of the serial port in order to open the correct one. Now, for a strange number of reasons, on a Mac, the Arduino board port is always the first one on the list. So, if you look at the code we have here, my port is defined as a new serial object that picks the element zero in the list of ports, so the first port in the list. So, on Mac and Linux this generally works out of the box, while on windows we get a list of COM1, COM5, COM3, COM19, etc... The actual COM ports you get on the computer change depending on your computer, on where the Arduino is plugged in and a number of others factors. You will have to use the output of Serial.list() and what you see at the bottom of the screen on processing to determinate witch one is the port that you need to use, and then you change in your code, you change the 0 here, that I'm highlighting, with the number of the port from the list that corresponds to your Arduino. After you have done that the processing code is configured in order to talk to the Arduino and we can then, look at what happens in the loop. In the loop we start by setting the background to white, by doing background(255), that cleans the window at the beginning of each frame, then, there is an "if" statement that says if myPort.available() is greater than 0, this basically is used by processing to check if that particular serial port has data that has come in recently and that can be processed. If available() returns a number that is larger than zero, there is data available that we can read, so we say, "bgcolor", which is the variable that defines the color of the background equal to myPort.read(). You can see now, by looking at the code side by side, on the Arduino side we've Serial.write() that send the data, and then on the processing side we have myPort.read() that reads the same number into the bgcolor variable. After reading the value that comes from the Arduino into the bgcolor variable, we use println(bgcolor) to print the value contained inside bgcolor at the bottom of the processing IDE window. After that, we use this function call background() where we use the value of bgcolor to define the hue of the color that we are going to use behind the Arduino logo. And then finally, by saying: image(logo,0,0) we tell processing that we want to overlay the Arduino logo on top of everything else on the screen, starting from coordinates (0, 0) the top left corner of the window. If I now run the processing code by pressing on the run button, I get a small window and you can see that at the moment the color of the logo is light blue and there is 128 printed on the bottom of the processing IDE. If I move the potentiometer, you can see that each value corresponds to a color, so, zero is red here, then it become orange, 71 represent green for example, the we get to blue, and then purple and back to red. So, we have seen that we are able to capture the value of a sensor, here on the Arduino board, convert that to a number, that gets sent over the USB connection to the computer and then there is a piece of software on the computer that can capture that number and use it to control something that happens on your computer, so now, this new thing that you learned today opens a huge amount of possibilities, because there are literally thousands of softwares on your computer that can actually read data from the serial port. Anything that can read data from the serial port, can then be controlled with your Arduino and circuits as simple as this. I hope you have enjoyed the tutorial, and remember: you have to build it, hack it and share it, because Arduino is you!
B1 arduino serial processing data logo computer Arduino Video Tutorial 09: Tweak the Arduino Logo 57 1 Chuan Zhe Lin posted on 2013/05/20 More Share Save Report Video vocabulary