Placeholder Image

Subtitles section Play video

  • 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!

Hi, my name is Massimo Banzi

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it