Insights into the Arduino IoT Cloud Platform and Web Editor

Before getting started with any development or cloud platform, it’s important to get a broad idea about the platform’s functionality, including its functions, controls, widgets, and so on. These platforms are like a kitchen full of spices, vegetables, meat, and other ingredients. To cook a good meal in a new kitchen, you need to get an idea about what’s in the kitchen – what types of tools, ingredients, spices, and other stuff are available. Product development is just like cooking a meal – if you have a good idea about what the platform provides, then you will be able to develop an awesome project. Another benefit of getting an overview of a platform is that it will save your time in the long run and give you confidence in your product design, because you already have a good understanding of the platform and can combine different things logically to develop something new according to your...

Technical requirements

For this chapter only, Arduino IoT Cloud access is required to explore the different functionalities and dashboard control widgets we’ll cover in this chapter.

Introducing the Arduino IoT Cloud interface

The Arduino IoT Cloud’s main interface is composed of five primary components – Things, devices, dashboards, integrations, and templates, as shown in Figure 3.1. Each component has its own properties, which will be discussed in detail in this section.

Figure 3.1 – Arduino IoT Cloud components

Things, devices, and dashboards are highly coupled with each other in every project. For example, for even a small project, we require a Thing and a device to get onboard the cloud platform. Is it enough to just configure a Thing and a device? No – a dashboard is also mandatory, from which the user can give input to the Thing and over which the system can show Thing data for user visualization.

However, integrations are a more optional component, with use cases varying from project to project and only being used by developers when they want to connect any non-compatible device to the Arduino...

Exploring input controls

Input controls are very important in IoT product development, where users control the flow of operations according to metrics. The latest trends and technologies in the User Interface/User Experience (UI/UX) field bring lots of different input controls that vary in size, shape, and design, providing a better end user experience.

The Arduino IoT Cloud team has taken account of the latest trends in the market and provided nine different, stunning input widgets, each of which provides users the ability to give input to Things in various ways. Each widget is linked to a single cloud variable; you can link multiple widgets to a single cloud variable, but the data type must be the one specified by the widget control. In the following subsections, I have categorized the input widgets into various groups, based on their resemblance with each other.

Switch, push button, slider, and stepper

Let’s start with the very basic input control widgets –...

Delving into output controls

In the previous sections, we discussed input widget controls. Arduino IoT Cloud dashboards also feature stunning output controls. There are nine widgets here (although two are non-device widgets – messenger and sticky note).

Value, status, gauge, percentage, and LED

Let’s start with the basic output widgets commonly used by developers in almost every solution. These output widgets are used to display a single value either in numerical or graphical format. Figure 3.9 shows all the main and basic output control widgets:

Figure 3.9 – The Value, Status, LED, Gauge, and Percentage widgets

In this section, we will discuss in detail five different output widget controls in separate sections. First, we will start with the value widget control.

Value

The value widget is a very basic and important widget that is widely used in projects to display sensor/actuator values, such as temperature or humidity...

Understanding the Arduino Web Editor

Arduino has also launched a web-based editor that is independent of Arduino IoT Cloud and the desktop IDE. It works with any board compatible with the Arduino IDE without needing to install boards via the board manager. The Web Editor is compatible with a majority of web browsers, including Chrome, Firefox, Microsoft Edge, and Safari. To work with the Web Editor, your machine should have the Arduino Create Agent, which acts as a bridge between the device and the Web Editor. All code is stored on the cloud, so there is no risk of losing code or any need to make backups.

To visit the Arduino Web Editor, go to https://create.arduino.cc/editor, where you will see something like the following:

Figure 3.12 – The Arduino Web Editor

The numbers in the preceding screenshot correspond to the following elements of the Web Editor:

1. This is the main menu of the Web Editor, where you will find all the navigation...

Assignments

This chapter is longer in length than the previous ones, as we want to give you an in-depth overview of Arduino IoT Cloud and its main pillars, which include Things, devices, dashboards, integrations and templates, progressing to further chapters. In this chapter, we have discussed dashboards, input and output widget controls, as well as the Arduino Web Editor in detail. To consolidate what you have learned in this chapter, we have created three different assignments for you. These assignments will help you to understand the core concepts necessary to proceed with the book, as well as in your professional projects.

Make sure to attempt all the assignments given ahead.

Assignment 1

ASNA Group is a leading ISO-certified salt supplier organization in Pakistan. The organization processes salt according to international standards, but they are facing issues in warehouse monitoring, where they want to maintain the temperature/humidity in line with the standards, to avoid...

Summary

This chapter was just like understanding the ingredients and kitchen tools we have before we start cooking. Firstly, we learned about how the Arduino IoT Cloud components work, including Things, devices, dashboards, integrations, and templates. Then, we studied all the input/output widget controls to get a proper idea of their potential usage, including some example code and the cloud variable types. In the following section, we examined what the Arduino Web Editor is and how its different features work, including examples, libraries, and the Serial Monitor. You should now have a good understanding of all the different ingredients of the Arduino IoT Cloud and the Web Editor and how to employ them appropriately.

This chapter was most important before starting the next chapters, as it gives you an in-depth overview of all the main pillars of the Arduino IoT Cloud and how they work in real time, which will help you to understand how the Arduino IoT Cloud works. Arduino dashboard...