Arduino IDE Interface - The First Impressions 1.2

Hello again! We’re continuing our tutorial about the Arduino, and today I want to talk about the official Arduino IDE. This time, no tricks, it’s really the IDE developed by Arduino. And it freely supports official, unofficial, and even non-Arduino boards. But let’s consider it step-by-step.

You may check here first the Arduino IDE interface the first impression 1.1.

You can download the Arduino IDE from the official site Sofware | Arduino (Figure 1). At the moment of writing this tutorial, the current version is 1.8.13, so I’ll talk about it. Frankly, there have been no significant differences in the IDE interface in all the time I’ve used it, so if you have any older or newer version, it probably doesn’t matter.

As you can see from Figure 1, the Arduino IDE can be installed on all popular operating systems. Moreover, there is an unofficial IDE called ArduinoDroid that you can install on your Android smartphone or tablet which supports a USB host, so you can connect your board to it, and program it there. (ArduinoDroid - Arduino ESP8266/ESP32 IDE). I didn’t test it, though, so if you decide to install and use it, it’s at your own risk.

The installation of the IDE doesn’t have any specific tricks and needs no registration. You just install it, open it, and work with it.

When you open the IDE for the first time, it creates a new sketch named today’s date (Figure 2). The programs in Arduino are called “sketches” so I’ll use this term as well.

At first sight, the interface of the Arduino IDE is very austere. Upon second glance, it keeps being austere. Let’s briefly describe the main parts of it.

Code area is the largest white space where you write your sketch. The black area below is the output window where the IDE displays information about the compilation and downloading process, errors, and other things.

In the left top part there are five buttons:

Verify. Allows you to compile your sketch and check if there are any errors.

Upload. When you press this button, it first compiles, even if you pressed the “Verify” button before. Then, if there are no errors, the binary file is uploaded to the board, which is connected to the specified port (we’ll talk about that later).

New. Creates a new sketch.

Open. To open one of the previously created sketches or an example sketch.

Save. Nothing surprising here, this button saves the current sketch.

In the right top part there is only one button:

Serial Monitor. Opens a window with which you can communicate with your board using the serial UART interface (we’ll talk about this later as well).

I would like to say that it’s all you need in order to work with the Arduino IDE but this would be a lie. You still need to use some menu points, so let’s briefly consider them. I will skip the explanation of the points that are obvious, like ‘New’, ‘Open’, ‘Copy’, ‘Paste’, etc.

1. File Menu (Figure 3):

• Open Recent. Stores the list of the previously opened sketches.
• Sketchbook. Stores the list of the sketches you have created and saved in the folder specified as “Sketchbook”.
• Examples. Consists of hundreds of code examples for different boards. These examples are categorized to make finding the right one easier. These are incredibly helpful and should not be overlooked.
• Preferences. Allows to set up different IDE parameters, like font size, interface language, output options, and others.

2. Edit Menu (Figure 4):

• Copy for Forum. Copies the sketch into the clipboard in the ideal format ready to be inserted on the Arduino forum. This may be useful if you often ask for help on the forum.
• Copy as HTML. Copies the sketch with the HTML tags to allow you to open it in some non-WYSIWYG editor that supports HTML.
• Comment/Uncomment. This one seems to be quite useful. Allows you to select the part of the code and comment on it. Or select a commented portion and uncomment it.

3. Sketch Menu (Figure 5):

• Verify/Compile. The same action as the button “Verify”.
• Upload. The same as the button “Upload”.
• Upload Using Programmer. Allows you to upload the binary file using an external programmer like USBAsp or other.
• Export compiled Binary. Creates a binary file with the ‘hex’ extension and copies it into the same folder where the sketch file is located. You may need this if you want to share the binary file with someone but don’t want to share the sketch code.
• Include Library. Allows to include some libraries written by Arduino or third-party into your project. These libraries usually allow you to work with some extension boards and modules.
• Add File..... Allows you to add your own file written in C or Assembly language.

4. Tools Menu (Figure 6). This section is the meatiest and requires the most explanation.

• Auto Format. This is a “Make my code look nice” button. Sometimes when you write the code you may forget about the indents or miss a bracket. In this case, this option will help you to format code correctly and notice mistakes easier (See Figure 7, before and after).

• Archive Sketch. Also a useful option. It allows you to archive the current sketch folder into the specified path. Thus, you can somehow control the versions of your sketches.
• Fix Encoding and Reload. Frankly, I’ve never used this option but it seems like it allows you to automatically change the encoding to the correct one. For example, if you copied the code from some site with another encoding (like comments in a different alphabet like Cyrillic) and some characters are shown wrong.
• Manage Libraries. Allows you to download the libraries provided by Arduino and update their version. The IDE will periodically inform you that there are new versions of the libraries and boards and ask you to please update them.
• Serial Monitor. The same as the button in the right top corner.
• Serial Plotter. This is something new for me. It’s to plot a graph of information as it’s coming it - it’s a good way to visualize data instead of getting raw numbers like you would in the serial monitor.
• WiFi100 /WiFiNINA Firmware Updater. Looks like something very specific for the mentioned two boards. If you don’t have them, then you don’t need this.
• Board. This is a very important option. Here you should properly select the board you have (Figure 8).

As you see, there is a submenu with several points.

• Board Manager. Allows you to add new boards and update the installed ones.
• The other submenus are optional depending on what boards you have installed. As you can see, I added the Digistump AVR boards, ESP32, and ESP8266 boards (I’ll talk about all of them in the next tutorials). So if your list is not the same as in Figure 8, don’t worry, it’s not you have the wrong version, it’s me having installed new boards.

Now the time has come to connect your board to the PC and try to upload something into it.

If you have the original Arduino board, when you connect it to the PC, it will install the drivers automatically, as the IDE provides the required ones. But if you have the Chinese noname copy with the CH340 USB-to-UART bridge, you will need to install the drivers separately. You can find one here, for example, CH340 Drivers for Windows, Mac, and Linux. Or just google “CH340 driver” and download it from wherever you want.

After you install the driver and connect your board, it will be recognized in the system as a COM port. To work with it, you will need to know its number. I already showed how to find it in the tutorial “Communicating with a PC using UART - Part 11 Microcontroller Basics (PIC10F200)”. To avoid repetition, I suggest going there if you need it instead of me explaining it again here.

OK, to be specific, I’ll tell you how to set up the Uno board which is connected to the COM46 port (yeah, my PC has seen a lot…). First of all, you need to open the Tools menu and select the Arduino/Genuino Uno board, as shown in Figure 8. Then you need to select the COM46 (or whichever number you have) in the menu Tools->Port. After that, your Tools menu will look like Figure 9.

Now let’s open an example project. It’s a good tradition to make the first program for blinking the LED. Fortunately, the Uno board has an on-board user LED which we can blink.

To do this we need to go to the menu ‘File’, select the point ‘Examples’, find point ‘01.Basics’, and select ‘Blink’ (Figure 10).

For now, we will leave the text code (we’ll consider it in the next tutorial). As the simple examples usually don’t have any mistakes, we can press the button “Upload”, wait for some seconds, and see the following output (Figure 11).

Also, you should see that the LED marked ‘L’ on the board starts to blink 1 time per second which means everything went fine!

Tada! We have successfully connected and programmed our Arduino (or not Arduino) board! Now we’re ready to write our own sketches.

I feel like, at this moment, I should’ve said that’s all for now, and we’ll see you next time. But no, another big yet interesting chapter is pending. Bonus info - yay!

Now, this is a really new thing for me which I had never tried before, so it’s really the first impression. Arduino launched an online editor. And now I’ll guide you through its installation. It’s really simple, like everything made for the Arduino ecosystem.

First, you need to download and install the Arduino Create Agent. You can do it from the official site: WELCOME TO ARDUINO CREATE AGENT INSTALLATION!

Under this link, there are some steps that will guide you on the downloading, installation, and running of the Arduino Create Agent.

As a result, you should see its icon in the taskbar (Figure 12).

After that, you can open the Arduino Editor using this link: Arduino - Editor Page.

You will see an interface very similar to the Arduino IDE (Figure 13):

It’s more primitive, obviously, and doesn’t have as many options as the IDE but it has certain advantages. First, you can run it on any device and edit the same sketch from anywhere because it’s stored in the cloud. Second, the compilation is also done in the cloud and thus performs very fast (at least for me, in comparison to my old laptop).

Let’s briefly consider the interface of this Editor. In the left part there is the main menu where you can see these points:

• Sketchbook. Here are the sketches that you created or uploaded from your PC. This seems like a good time to note that you may copy your sketchbook from the PC into the cloud.
• Examples. Well, examples are always examples. But here I was surprised to see that all the examples have not only sketches but also descriptions, and sometimes even the schematic and layout diagram, which is very nice! You can select some examples and see this yourself.
• Libraries. The same as in the IDE, it consists of libraries provided by the Arduino which you can use in your projects.
• Monitor. This is the serial monitor, using which you can communicate with your board via the UART interface.
• Reference. Very nice list of the most widely used functions, variables, structures used in the Arduino coding, with a detailed explanation.
• Help. Help on working with the Arduino Editor.
• Preferences. Some interface tweaks.
• Feature Usage. This one shows how to use the Arduino Editor. It also reminds you that you’re using the free version and it has certain limitations (like only 100 sketches, only 200 compiles per day, only 100 MB of the free space). But you can update your plan with the paid subscription and avoid these limitations.

Let’s now upload another example. Open the “Example” menu, find the point “04. Communication”, and select the “ASCII Table” example. In the window to the right, you will see the code of the sketch (Figure 14).

This example prints out the ASCII table via the UART interface. But before proceeding we need to do the same thing as in the Arduino IDE - select the board and port. For me, the port was selected automatically when I just ran the Arduino Create Agent and connected the board.

To select the board you need to click on the white rectangle above the code next to the “Upload” button and find your board in the list (Figure 15).

You should also select the port, otherwise, it will give an error. When you are done, click “OK” and return to the main window. You will see the name of your board and the selected port number (Figure 14).

Now you can click on the button “Upload”, wait a few seconds and see the text “avrdude done. Thank you.” (See Figure 14). But how do we see the result of the operation of the sketch? For this, we need to open the “Monitor” menu on the left and see the following table (Figure 16).

And now that’s really it! This tutorial turned out meatier than I expected initially because I found something new for me and decided to share it with you.

As you can see, the Arduino IDE (as well as online Arduino Editor) is a really simple one. All you need to do is to connect your board, select the proper board name and the port number, and that’s all. You don’t need to go to the menu anymore. Just write the code, and periodically save and verify it.

Next time we will write some sketches, and also I’ll tell you more about the Arduino IDE editor itself because there are some words to be said about it. See you soon!