Arduino Web Editor: Using Arduino IDE Online

Featured Arduino Web Editor Use Arduino Ide Online

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.

Arduino Web Editor Sign In Page
Arduino Sign-In Page

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.

Arduino Web Editor Arduino Cloud Page
Arduino Cloud Page

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.

Arduino Web Editor Loading Arduino Cloud
Loading Arduino Cloud in 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.  
Arduino Web Editor Homescreen Page
Arduino Web Editor Homescreen Page

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).

Arduino Web Editor Select Board Port
Select Board and Port

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.

Arduino Web Editor Arduino Ide Preferences
Arduino Web Editor Preferences

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.

Arduino Web Editor Dark Theme
Web IDE Dark Theme

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.

Arduino Web Editor Favorite Contributed Libraries
Favorite Contributed Libraries

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.

Arduino Web Editor Insert Favorite Library
Insert Favorited Library

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”.

Arduino Web Editor Import File Into Sketch
Import .ino 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.

Arduino Web Editor Ino File Imported
Importing .ino File

Here an .ino file called “sketch_may28a.ino” has been imported into the main window. You can easily rename or delete it.

Arduino Web Editor Ino File Deleted
.ino File Deleted

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.

Arduino Web Editor Sketchbook Import
Import Whole Sketchbook in .Zip Format

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

Arduino Web Editor Arduino Create Agent
Arduino Create Agent not Found Error

When prompted, click the “download” button to download the Agent .exe file. It has to be done only once for your Arduino cloud account.

Arduino Web Editor Agent Installing
Arduino Agent Installing

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.

Arduino Web Editor Agent Setup Screen
Agent Setup Screen

Wait a few minutes for the program to completely install, and the files to be unpacked.

Arduino Web Editor Agent Installing Unpacking
Arduino Agent Installing & Unpacking

You might notice a security warning certificate on Windows devices. Click “OK” to proceed.

Arduino Web Editor Agent Security Certification
Arduino Agent Security Certification

Once done, click “Finish” to have the Agent installation complete.

Arduino Web Editor Agent Setup Finished
Arduino Agent Setup Finished

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.

Arduino Web Editor Agent Working
Arduino Agent on Windows PC

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.

Arduino Web Editor Manager Linux Devices
Arduino Web Editor Linux Devices Manager

In the next screen, you can choose your Linux-based device/board which you want to work with your Arduino IDE online.

Arduino Web Editor Selection Linux Devices
Linux Devices

For Raspberry Pi, you need to set up your Arduino Create Agent, set up your Raspberry Pi, and install the Arduino editor.

Arduino Web Editor Manager Linux Raspberry Pi
Raspberry Pi in Arduino Cloud

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.

Arduino Web Editor Arduino Iot Cloud Homepage
Arduino IoT Cloud Homescreen

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”.

Arduino Web Editor Arduino Iot Cloud Setup Page
Arduino IoT Cloud Setup Page

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.

Arduino Web Editor Arduino Iot Cloud Add Variable
Add Variable in IoT Cloud

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.

Arduino Web Editor Arduino Iot Cloud Setup Device
Arduino Set Up Device

You will have to install some drivers based on the device chosen. Click Yes to continue.

Arduino Web Editor Arduino Iot Cloud Device Drivers
Arduino Agent Installing Device Drivers

In this case though, we are choosing an ESP 32 device specifically using an ESP32 Wrover module.

Arduino Web Editor Arduino Iot Cloud Device Esp32
ESP32 Device Installed

To continue the set up, give your device a name. You will also need a device ID and secret key. Save them to continue.

Arduino Web Editor Arduino Iot Cloud Device Naming
Third-party Device Named in Things
Arduino Web Editor Arduino Iot Cloud Device Id Secret Key
Device ID and Secret Key

Once the device is paired successfully, you will see a notification. Now you can connect your device to sensors, actuators, and other input hardware.

Arduino Web Editor Arduino Iot Cloud Device Setup Successful
Device Setup Successful

You can visualize your entire setup of variables and devices in the Things dashboard.

Arduino Web Editor Arduino Iot Cloud Final Device Setup Page
Final Setup Page Arduino IoT Cloud: Device + Variable

You can also view or edit your sketch for the device at this juncture.

Arduino Web Editor Arduino Iot Cloud Sketch Updated
Arduino Web Sketch Updated

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.

Arduino Web Editor Arduino Iot Cloud Full Editor Viewjpg
Arduino Web Editor View of Things Sketch

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.

Arduino Web Editor Dashboards Buildjpg
Dashboard Page

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.

Arduino Web Editor Dashboards Add
Adding Widgets in Dashboard

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.

Arduino Web Editor Arduino Cloud Plans
Arduino Cloud Plans

You can keep track of your quota and storage from the web editor itself.

Arduino Web Editor Arduino Cloud Free Plan
Arduino Cloud Free Plan

Conclusion

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.

Related:

Sayak Boral Sayak Boral

IoT-addicted since early 2016. Love to explore the challenges, opportunities and trend insights into what is becoming the third wave of Internet.

More Posts