In this tutorial, we will discuss the various steps of accessing Arduino IDE online using the Arduino Web Editor. It is a more advanced version of the desktop-based Arduino IDE. We will learn to transfer key programming activities to the cloud-based web editor. Additionally, we’ll expand these methods to connect our devices to the IoT cloud, and create dashboards for sharing.
1. Getting Started
Sign in to Arduino online from the official link. Arduino “Create” is now also known as Arduino “Cloud”. You can use Chrome, Edge, or Firefox browsers (desktop versions). You can use a Google account or Apple ID to enable access.
There are three main apps on the homescreen: IoT Cloud, Web Editor, and Manager for Linux. All are interconnected which means any program you compile on one app can be retrieved on the others.
To get started, go to Arduino Web Editor. It takes a few seconds for Arduino Cloud to load properly. Once done you’re ready to start using the Arduino Web Editor.
2. Working with Arduino Web Editor
We will briefly summarize the important features of Arduino web editor. Previously we covered many of these features and tutorials for which the appropriate links have been provided in this section.
There are three main vertical sections in the Arduino web editor screen:
- a green section comprising editor options including sketchbook, libraries, preferences (settings), and features usage
- an exhaustive section where you can scroll down for libraries, examples, and references
- the main programming window where you can import sketches, add and save the files, select boards, and much more.
At the outset, select your board from the default board provided using an option called “select other board and port”. In this case, we are choosing Arduino Uno as the default board. If your third-party board is not available in the menu options, there’s no need to worry. These can be separately configured from the Arduino IoT Cloud app (covered later in this tutorial).
The overall interface of Arduino web editor resembles Arduino 2.0 which is currently in beta. Go to “Preferences” where you can do minor settings changes such as font size, and modify the appearance of the web editor. Here we have chosen the dark theme for the IDE, but you can choose more using GitHub .zip files.
The dark theme is evident below. You can also use the library manager in the menu options to add multiple third-party libraries into the programming window.
Adding a library is easier in the web version compared to the desktop versions. You only need to “favorite” your library and it will show in the favorites menu. Here we are choosing a library on thermistors.
The libraries are usually known by the
#include criteria. Just click “include” on the favorites among your libraries to get them into the sketch window.
Do you have any other sketches that you want to import into the window? Go to the screen dropdown menu shown here and click “import file into sketch”.
These are mostly .ino files which represent the format in which Arduino IDE sketches are saved. If you have an Arduino desktop IDE, you can locate the .ino sketches from the “show sketch folder” option in Sketch menu.
Here an .ino file called “sketch_may28a.ino” has been imported into the main window. You can easily rename or delete it.
It’s also easy to import your whole sketchbook into the Arduino web editor. This is useful if you plan to entirely migrate from the desktop version to the cloud. These sketchbooks are imported in .zip format, and you can find many such sketchbooks on GitHub and Arduino Project Hub on Arduino.cc.
3. Install Arduino Create Agent on Windows
Having briefly covered how to work with Arduino Web IDE, let’s discuss an important plug-in of the web editor called “Arduino Create Agent”. If you don’t have this agent installed on your computer, you will not be able to upload sketches to the Arduino device online. The agent’s job is to recognize Arduino and other boards, and read/write data from the serial monitor
When prompted, click the “download” button to download the Agent .exe file. It has to be done only once for your Arduino cloud account.
On Windows devices, the set up procedure of this agent is similar to any other program. Linux and Mac users should follow the file download instructions at this link.
Wait a few minutes for the program to completely install, and the files to be unpacked.
You might notice a security warning certificate on Windows devices. Click “OK” to proceed.
Once done, click “Finish” to have the Agent installation complete.
This is what the agent looks like on a Windows computer. You can directly go to your Arduino IoT cloud page from this right-click menu option.
4. Set Up Arduino Web Editor for Linux Devices (Optional)
You can also make your Arduino web editor to work with Linux-based boards such as Raspberry Pi, Beaglebone, and many others. This option can be accessed from the Arduino cloud homepage, as Arduino Linux Manager is one of the three main apps. Click “Set up a Linux device” to proceed with this option.
In the next screen, you can choose your Linux-based device/board which you want to work with your Arduino IDE online.
For Raspberry Pi, you need to set up your Arduino Create Agent, set up your Raspberry Pi, and install the Arduino editor.
5. Using Arduino IoT Cloud
Now that we’ve learned to work with Arduino IDE on the web, and integrate its agent, the next step is to use a key app called “Arduino IoT Cloud”. You can see this option on the main sign-in page. Once you choose the app, you will go the screen below. It has four options: “things”, “dashboard”, “devices”, and “integrations”. Here we will show you how to create your first “thing” on Arduino’s web editor. We can have several of these “things” running simultaneously.
First rename the IoT Cloud thing. Here it is being renamed as “Test Device”. Next we have to create variables which are some parameters such as acceleration, velocity, temperature, humidity, etc. For this, go to “Add variable”.
Let’s take the example of robot cars. Here we have added “cloud acceleration” variable. Enable “read & write” in the variable permission if you want to deploy the sketch. Also, put the threshold value as per your needs.
In the next step, you will need to set up a device. It can be either any Arduino device or a third-party device. Remember in the previous sections we discussed the problem of not having a device enabled in the Sketchbook main window. This is where you fix the problem. There’s a large range of compatible devices to choose from.
You will have to install some drivers based on the device chosen. Click Yes to continue.
In this case though, we are choosing an ESP 32 device specifically using an ESP32 Wrover module.
To continue the set up, give your device a name. You will also need a device ID and secret key. Save them to continue.
Once the device is paired successfully, you will see a notification. Now you can connect your device to sensors, actuators, and other input hardware.
You can visualize your entire setup of variables and devices in the Things dashboard.
You can also view or edit your sketch for the device at this juncture.
Since all Arduino web apps are interconnected, you can import this configuration into your Arduino web editor. The board has been automatically updated to “ESP 32 Wrover module” as shown here.
6. Creating a Dashboard with Arduino IOT Cloud
For collaboration and sharing, you need a dashboard. Dashboards are defined as visual user interfaces for interacting with your boards over the cloud. This is the second option you can access from Arduino IoT Cloud. Click “Build dashboard” to proceed.
There are various options here. You may add a “widget” of switch, push buttons, sliders, steppers, colors, and so forth. The created dashboard will give a graphical appearance of any app you design that connects with the IoT cloud.
7. Pricing Plans: Arduino Web Editor
Arduino web editor is free to use, and you can create unlimited sketches for your needs. But the free account has some restrictions. For example, you can only save the sketches for 1 day (can download them easily), and only100 MB space is provided, with only 200 seconds per day compilation time. This is enough for a beginner. For more advanced Arduino users, there are other plans at reasonable cost starting only $2.99 per month.
You can keep track of your quota and storage from the web editor itself.
Arduino is the world’s largest open-source hardware and software ecosystem compatible with several modules, shields, third-party microcontrollers, and also single-board computers. Accessing them all on a web browser is a tremendous improvement over working with a desktop IDE.
The main benefits include developers getting access to premium Arduino features, libraries, and built-in components. They can write code online and upload the sketches to the board. The cloud also allows remote collaboration using dashboards, and an Arduino account is the only thing you need to access all the features.
Get the best of IoT Tech Trends delivered right to your inbox!