Arduino: Lesson-04 Getting Started with the Arduino Web Editor

1.0    Introduction:

The Arduino Web Editor is an online IDE that allows you to write code and upload sketches to any official Arduino board from your Web browser (i.e. Safari, Firefox, Edge & Chrome). For the rest of this tutorial we recommend using Google Chrome as our default browser.

The web editor is part of the Arduino Create, an online platform that enables developers and creators to write code, access tutorials, configure boards and share projects. The editor was designed to provide users with a continuous workflow as it connects the dots between each part of a developer’s journey from inspiration to implementation. This means that as a creator, you have the ability to manage every aspect of your project right from a single dashboard.

The web editor is hosted online which means it is always up-to-date with the latest features and support for new boards. This online IDE lets you write code and save it to the cloud, always backing it up and making it accessible from any device. It automatically recognizes any arduino and genuino board connected to your PC and configures itself accordingly.

To get started with the Arduino Web Editor (Online IDE), an arduino account is all you need.

2.0    Create an “Arduino Create” Account:

Create a new Arduino Account here: https://auth.arduino.cc/register. Complete the registration form by entering your username, password and email address, then click the “Create Account” button. After this registration, you will receive an email with a link to activate your account, within your mail box, select the link and a new page will open with your confirmed account information.

It should be noted that as a registered developer/creator, you can use this account to write posts on Arduino’s official Forum, add comments on the blog, buy products on the online store and also create tutorials on the Arduino Project Hub.

2.1.   Click on “Create a new account” to get started with the registration.

Fig 1. Login/Create a new account page

 

2.2.   Enter your Username, Email and Password, then select all to agree to the conditions and finally click “Create Account

Fig 2. User Registration page

2.3    Sign in with your newly created credentials.

Fig 3. New User account welcome  page

2.4    Edit your profile by adding your personal and social network info.

Fig 4. User Account profile page

3.0    Select your Platform: Windows/Mac/Linux:

After the registration is complete, go to https://create.arduino.cc/editor. And log in into your account, accept the terms & conditions. Be sure to be part of the Forum, where you can report any bugs & share your feedback.

The Arduino Web Editor is cross platform, so if you are using Windows/Mac/Linux, Click on the “Getting Started” title on the Arduino Create main page or use the link https://create.arduino.cc/getting-started. and simply follow a simple flow to install the Arduino Web Editor Plugin,which permits you to upload sketches from the browser onto your boards.

3.1     Select “Setup the Arduino plugin to start coding online”.

Fig 5. Getting started tools to install the plugin

3.2    Connect your Arduino/Genuino board to the computer using an A-B USB cable as shown below:

Fig 5. The Arduino web editor plugin installation page

3.3     Click to download the Arduino web editor plugin.

Fig 5. Downloading the Arduino web editor plugin for windows.

3.3    Follow the instructions on to install the Arduino web editor plugin on your PC.

Fig 5. Instructions on installing the Arduino web editor plugin for windows.

3.4    Locate where the plugin is and start the installation process.

Fig 6. Locating the Arduino web editor plugin for windows on your PC.

3.4    While the setup is running, click next.

Fig 7. The Arduino-create-agent setup wizard

 

3.5    Accept the license agreement and then click Next.

Fig 8. Accepting the License Agreement

3.6    Specify the installation directory. We suggest you keep the default one.

Fig 9. Specifying the installation directory.

3.7    Select Yes / No as per your requirement.

Fig 10. Browser support.

 

3.8    Click Next to begin the installation.

Fig 11. Getting ready to install.

3.9    After the installation, click Next to complete.

Fig 12. The installation process.

3.10    Click Finish to complete the setup.

Fig 13. The setup complete.

 

3.11    When the plugin is correctly installed, you should see the Arduino create icon on the bottom bar of your desktop and then click Next.

Fig 14. Completed plugin installation.

 

3.12.    On the welcome screen, simply add your full name, your country, then click the “Agree” button to accept the “Terms & Conditions”.

Fig 15. Terms & Conditions.

At the end of the plugin installation flow, you’ll be re-directed to the Arduino login page. Simply login with your newly created credentials.

3.13.    After logging into our newly created account, you’ll be given a simple brief tour of the Web Editor.

Fig 16. Arduino Web Editor Welcome Screen.

3.14.    Once everything is complete, all we have is the Arduino Web Editor layout.

Fig 17. The Arduino Web Editor Layout.

     4.0  The Anatomy of the Arduino Web Editor:

After logging in with your credentials, you are more than ready to start using the Arduino Web Editor. The editor is divided into three main columns as shown below:

Fig 17. The Anatomy of the Arduino Web Editor.

The First Column:

The first column gives you access to the following functions:

a). Navigation:

This lets you switch between apps on the Arduino create homepage.

b). Your Sketchbook:

This is a collection of all your sketches. A “Sketch(es)” is what programs you upload on your board are called.

c). Examples:

These are read-only sketches that demonstrate all the basic Arduino commands (built-in tab), and the behavior of your libraries (from the libraries tab).

d). Libraries:

These are packages that can be included to your sketch to provide extra functionalities.

e). Serial Monitor:

This is a feature that enables you to receive and send data to your board via the USB cable.

f). Help:

Under this tab, you get helpful links and a glossary about Arduino terms.

g). Preferences:

Here, you get options to customize the look and behavior of your editor, such as text size and color theme.

The Second Column:

When a tab in the first column is selected, every menu item under that tab shows its options in a the second column.

The Third Column:

We’ll be using this column the most. The third column gives you access to the following functions:

h). Code Editor:

This is the area where your code goes.

i). Verify & Upload:

These allow you to check if your code works correctly and upload it to your boards.

j). More options:

This provides more file system options to download, save your sketches on the cloud and share them with anyone you want.

k). Boards & Ports:

Boards that you connect to your computer will show up here. Select the one you need from the dropdown  and upload your code to it.

l). Profile & Notifications:

This lets you to access your Arduino profile and personal settings. Check out what’s new on the notifications feed.

5.0   Blinking an Arduino LED from the browser:

Now that we’ve successfully set up the online IDE, lets make sure the computer can talk to the board by uploading a program. For this experiment, we have to connect our Arduino/Genuino boards to our computers via a type A-B USB cable (a.k.a the printer cable). Boards and serial ports are detected automatically in a single drop-down.

Let’s then try to upload the blink sketch example, go to “Examples > 01. Basic > Blink”. The blink sketch will then be displayed in the code area. To upload the sketch, simply click the “upload” button and if the upload is successful, the message, “Success; Done Uploading” will appear in the status bar.

Once the upload is done, you should then see the on-board LED with an L next to it start blinking. If there are no errors, then Congratulations, you’ve successfully programmed your Arduino board to blink it’s own on-board LED. Try modifying the Blink code by changing the values and re-upload the code while monitoring the Uno board for any changes in the blink delay time.

Fig 18. Uploading code to the Uno board that is connected to the computer

N.B: The Web Editor currently supports only official Arduino/Genuino boards and a few certified and AtHeart boards. A full list of the supported boards can be found in the drop-down of “Boards & Ports” and selecting “select other board & port”. You can also test to see if the code runs on other boards that you might not have at the moment by verifying the code on them. You can select manually the board and port her if the connected board in not automatically detected by the IDE.

Fig 19. Other supported boards

6.0    The Serial Monitor:

The serial monitor can be found on the first column of the web editor and when clicked on, a panel will be displayed. It reads the board selected at the moment in the dropdown. In case you have multiple boards, simply select your preferred board and the port infos in the panel will be updated as a result.

Let’s try to print something on the serial monitor and see how it works, go to “Examples > 03. Analog > AnalogInOutSerial” and click the upload button. While the code is uploading, the panel will grayed out and if no board is connected at the time, the serial monitor will be grayed out and unavailable. After the upload, as a result you’ll see values printed out on the panel as shown below.

Fig 20. The Serial Monitor layout.

7.0   Documenting your Projects:

Its is always a good idea to document your projects and to this, go to “Examples > 01.Basic > Fade”. Then open the “layout.png” and “schematic.png” tabs. Here, you will find illustrations that will show you how you can put together your electronics with ability to add your documentation images.

Fig 21.  Documenting current project.

8.0    Sharing your sketches:

Each and every sketch you create has a unique URL that you can share with your collaborators. Simply click on the “Share” button and copy the URL and paste it in your browser to check it out. In the event that the URL is given to someone else, they’ll be to see your code, add a copy of it to their sketchbook in the cloud or download it. They’ll also have access to the code, the layout for the electronics as well as a the full tutorial if available. You can also embed your sketch in your blog posts or website by copying and pasting the embedded code.

If you happen to write a tutorial on the Project Hub and add the link in the software section, your code will be embedded and will always be up-to-date.

Fig. 22. Sketch URL & Embedded code for sharing sketches.

9.0    The Arduino Libraries:

The Arduino community has written over 700 libraries that can be included in our sketches without installing a thing. These libraries can be accessed through the Library Manager  that lets you favorite the ones you like the most. All these libraries are automatically detected, so as a creator, you don’t to install them to have your code compile.

Fig. 23. Selecting the desired libraries preferred.

Sharing a sketch with its libraries, can be somewhat difficult, but with the web editor, you can really speed up this process since they are already on the Arduino servers ans they could just add a copy of your code to their sketchbook and be able to compile without any hassles.

Importing Custom Libraries:

In the event that you want to use your own custom library on the web editor, just zip your custom library and click on the “Import” button on the library panel as shown below.

Fig 24. Importing custom libraries.

In case you want to import multiple custom libraries at once you can do so by creating a single zip file which contains all of them and just import the whole package.

10. Conclusion:

By now you should be well acquainted with how to use the online IDE or the Web Editor. You have learnt how to upload code on to the Uno board connected to the computer, how to document your projects, how to share your sketch with others and also how to import a sketchbook and a custom library of interest.

In the next tutorial we are going to cover how to write our first program.

 

 

Tum Kurtzman
Author: Tum Kurtzman

Computer Engineer, Ugandan Life Hacker, Tech Blogger, YouTuber, Founder & Lead Engineer @ SonaLabs.....

Leave a Reply