Using the Arduino IDE online has many benefits and is straightforward to setup. We’ll show you how.
Web browsers have become far more than just a method for visiting websites. They now have the ability to provide an interface for so much more, rivaling what a traditional application can do too! There has been a rapid increase in the availability of complex in-browser applications (think Google Docs and Tinkercad, to name a few). Outside of tasks that require higher than average levels of computation, there’s not a lot they cannot do!
The Arduino Web Editor is an online IDE (Integrated Development Environment) and is part of Arduino Create - an online platform that provides makers with easy tools to write/share their code, configure boards and access content. This community-focused approach to an Arduino IDE can mitigate some of the hurdles a locally installed IDE, including keeping libraries up-to-date.
It’s also fantastic for anyone using a hot-desk style approach where software installation is more difficult, or educational institutions where students may rotate between different hardware at different times.
Supported Boards
Currently, the Arduino Web Editor only supports Official Arduino/Genuino boards, and a few Certified and AtHeart boards. If you are using another board such as a Node MCU then you’ll have to use the Desktop IDE. Given many of our DIYODE projects are based around UNO/Mega, you shouldn’t have too much trouble using it with a board you like.
Some of the benefits of using the online IDE include:
- Save your sketches in the Cloud
- Always have the most up-to-date version of the IDE and libraries
- Support for new Arduino boards
- Easily share your sketches
ARDUINO CREATE ACCOUNT
First, if you don’t already have one you’ll need to create an Arduino account. Head over to https://auth.arduino.cc/register and complete the sign-up form. You will receive an email with a link to confirm your account.
ACCESS THE ONLINE EDITOR
Now that you have an Arduino account you can access the IDE from: https://create.arduino.cc and select Arduino Web Editor.
You should now be in the Editor Dashboard.
The app is divided into 4 main sections.
INSTALLING THE ARDUINO WEB EDITOR PLUGIN
Before we can connect a board and start uploading sketches it is required that you install the Arduino Web Editor plugin. This enables our web browser to communicate with our device. The plugin comes in a variety of operating systems and web browsers but it is recommended that you use Google Chrome.
To install the plugin, browse to: https://github.com/arduino/arduino-create-agent and your select your Operating System and web browser to download.
Once downloaded, run the installation wizard and follow the prompts to install.
Once installed the application will sit on the tray bar/system tray and will work in the background.
CONNECTING YOUR BOARD
Now that we have the plugin installed let’s connect an Arduino board. Connect the board into your Computer then head back over to the Arduino Web Editor.
Above the code area, you will see a dropdown list where you can select a board. Hopefully, your board was automatically selected, but if not, manually select the board and port.
UPLOADING A SKETCH
Just like last month (if you followed along with our desktop IDE tutorial), we will run the same blinking LED example sketch that’s built into the online IDE.
From the navigation menu, select Examples then 01.BASICS › Blink
Select Upload
You will see a confirmation message if the upload was successful.
BUILT-IN LIBRARIES
A great benefit of the online IDE is that it comes with over 700 libraries that you can use in your projects without needing to install them.
To browse the available libraries, select Libraries, then the Library Manager button.
UPLOADING A LIBRARY
If you need to add an additional library, you can easily upload one that you’ve created or a vendor supplied.
Under the Libraries menu, select the import icon.
Next, browse and upload your library. Note that it must be contained in a .zip file.
USING LIBRARIES
Now, it’s time to put the above into practice.
First, let’s install a library. We will use a simple library called PRNG, which is a simple pseudo-random number generator. We do acknowledge there are easier ways to generate a random number with Arduino functions, such as using random(), but for the sake of this tutorial, we will use this external library.
Navigate to Library Manager and type PRNG into the search area. Select the star on PRNG to add it to your favourites, then select Done.
Now the Library will be listed under the favourites tab.
It’s often helpful to view code examples for a library, to do this expand the Examples dropdown to see the available example sketches.
Let’s include this library into a new sketch. First, ensure you have a new sketch opened. Navigate to Sketchbook and select New Sketch. Next, select the newly created sketch to open it.
Next, navigate back over to Libraries and select the Favourites tab. Now hover over the PRNG Library and select the include button.
It should add the following lines to the top of your sketch:
pRNG - Version: Latest
#include <pRNG.h>
Next, add the following line below the include statement to create a new instance of the pRNG class:
pRNG prng;
Add the following code in the setup() function:
Serial.begin(9600);
delay(2000);
The above code begins the serial communication then waits 2000ms (2 seconds), giving it time to initialise.
Finally, add the following code into the loop function:
int randomInt = prng.getRndInt();
Serial.println(randomInt);
delay(5000);
This will output the random number to the serial monitor every 5 seconds.
SERIAL MONITOR
Don't fret! Your favourite debugging tool is still included in Arduino Create. To access the serial monitor, navigate to Monitor on the menu to see the values.
SUMMARY
As you can see, using Arduino Create is easy and straightforward, and depending on your preference, can simplify code development in a variety of ways.
With other powerful software such as the popular 3D design tool Tinkercad, it firmly slots into the cloud-based development toolkit for makers.
WHERE TO FROM HERE?
There's not really much left to do here except try it!
If you're using shared computers, Arduino Create will make life much easier for you. For someone who is used to using desktop apps other than when browsing the Internet, using a browser for software can take some getting used to.
However this now puts the Arduino IDE in the same realm as Gmail, Tinkercad, and a long line of other exceptionally popular tools, which are 100% browser based and still VERY powerful.
So what are you waiting for? Go and give it a try!