Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MKC-1766] Updated Arduino cloud editor secondary features tutorial #2120

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: "Arduino Web Editor Secondary Features "
description: "Explore secondary features of the Arduino Web Editor and become a pro using it."
title: "Arduino Cloud Editor Secondary Features "
description: "Explore secondary features of the Arduino Cloud Editor and become a pro using it."
coverImage: "assets/blob_YimidWfjGD.png"
tags: [coding, software]
difficulty: beginner
Expand All @@ -10,74 +10,66 @@ source: "https://create.arduino.cc/projecthub/Arduino_Genuino/arduino-web-editor

## Apps and Online Services

- [Arduino Web Editor](https://create.arduino.cc/editor)
- [Arduino Cloud Editor](https://create.arduino.cc/editor)

## About This Project

In this tutorial, we'll demonstrate some secondary features of the Arduino Web Editor. If you're new to the Arduino Create platform, read this tutorial: [Getting Started with Arduino Web Editor on Various Platforms](https://create.arduino.cc/projecthub/Arduino_Genuino/getting-started-with-arduino-web-editor-on-various-platforms-4b3e4a).
In this tutorial, we'll demonstrate some secondary features of the Arduino Cloud Editor.

Let's start by focusing on the **Sketchbook** tab and then we'll review the **Preferences Tab** of the Web Editor.
Let's start by focusing on the **Sketchbook** page and then we'll review the **Preferences Tab** of the Cloud Editor.

### The Sketchbook Tab

After you've logged into Arduino Create and opened the Arduino Web Editor, you'll see some menu choices in the left margin. The **Sketchbook** tab will list all of your sketches.
After you've logged into Arduino Create and opened the Arduino Cloud Editor, you'll see some menu choices in the left margin. The **Sketchbook** tab will list all of your sketches.

You can create a new sketch clicking on the **New Sketch** button at the top. You can organize your sketches by creating folders using the gray button that looks like a folder with a plus-sign. You can also import sketches and custom libraries from your computer using the other gray button showing an up-arrow (see screenshot below). To learn more about this, read the tutorial on [Importing your Sketchbook and Libraries.](https://create.arduino.cc/projecthub/Arduino_Genuino/import-your-sketchbook-and-libraries-to-the-web-editor-296bb3)
You can create a new sketch clicking on the **Create** button at the top, or in the middle of the page if no sketches exist. You can organize your sketches by creating folders. You can also import custom libraries from your computer on the library tab when you are in a sketch. To learn more about this, read the tutorial on [Importing your Sketchbook and Libraries.](https://create.arduino.cc/projecthub/Arduino_Genuino/import-your-sketchbook-and-libraries-to-the-web-editor-296bb3)

![Sketchbook Tab](assets/sketchbook_tab_zBkRKx4hY6.PNG)
![Sketchbook Page](assets/sketch-page-options.png)

Sketchbook Tab
Sketchbook Page

If you have many sketches in your sketchbook, you can easily find the one you want by typing the name of the sketch – or part of its name – in the search box. Using the **Order By** option, you can sort sketches by name or by date modified.
If you have many sketches in your sketchbook, you can easily find the one you want by typing the name of the sketch – or part of its name – in the search box.

Once you see the sketch you want, right-click on it – or click on the small icon to the left of it. This will reveal a menu of choices related to the sketch:
Once you see the sketch you want, click on the option menu at the right of the last modified date. This will reveal a menu of choices related to the sketch:

- **Duplicate Sketch** will create a copy of the sketch you selected.
- **Rename Sketch** allows you to rename the selected sketch.
- **Download Sketch** will download the sketch , both.ino and other files to your computer.
- **Export CMake File** will export the sketch and included libraries to your computer so you can build it, locally.
- **Share Sketch** allows you to share the sketch with others. The *Secret* content of a sketch will be deleted automatically in the shared sketch.
- **Move Sketch** allows you to move the sketch between folders.
- **Display Sketch Info** shows additional information about your sketch (e.g., size and date last modified).
- **Rename Sketch** allows you to rename the selected sketch.
- **Duplicate Sketch** will create a copy of the sketch you selected.
- **Delete Sketch** will delete the sketch you selected. A popup window will ask for confirmation to avoid deleting files accidentally.
- **Import File into Sketch** allows you to import additional files, such as images or circuit schematics, into the sketch.
- **Download Sketch** will download the sketch , both.ino and other files to your computer.
- **Share Sketch** allows you to share the sketch with others. The *Secret* content of a sketch will be deleted automatically in the shared sketch.
- **Move to folder** allows you to move the sketch between folders and create new folders.

### The Preferences Tab

The Preferences Tab contains some options to customize the look and behavior of the Editor (see the screenshot below).

At the top, you can see how much space is currently used by your sketches and how many sketches are in your sketchbook. Click on the **MoreInfo** button for more accurate information regarding these two values and on imported custom libraries.

![Preferences Tab](assets/preferences_tab_LDdNfMWzyS.PNG)

The Preferences Tab contains some options to customize the look and behavior of the Editor (see the screenshot below). It can be found at the bottom of the left menu bar when you are inside a sketch.

![Preferences Tab](assets/editor-preferences.png)

Following the usage information, are settings related to how the editor looks:

- **Editor Font Size** allows you to change the font size.
- **Editor Theme** allows you to switch between a light and dark theme;
- **Editor Font Size** allows you to change the font size.

In the **SKETCH** section, you can set the sketch save option:

- **Enable Autosave** tells the Editor to automatically save the sketch whenever it's modified.

There are a few options related to saving sketches in the next section:
In the **DEVICE** section, you can set the following option:

- **Save when Verifying and Uploading** means the Editor will save the sketch each time you verify and upload it.
- **Enable Autosave** tells the Editor to save automatically the sketch whenever it's modified.
- **Always Show Output Panel** is set to show the output section at the bottom of the code window.
- **Enable auto-selection** If turned on, then in new sketches, when you plug a device in it will get automatically selected.

In the **Advanced Options** section, you can set a few other options:
In the **VERIFY & UPLOAD** section, you can set the console verbosity option:

- **Show All Files**, if set, will make visible the.ino files and related files in other formats that are in your sketchbook.
- **Show Verbose Output**, when enabled, will cause more detailed information to be displayed while a sketch is being compiled and uploaded.

### Extras: Full-Screen and Auto-Indent

There are two other settings that might be useful to you. In the code window, in the top right corner, you'll notice two icons. In the screenshot below we drew an orange box around these icons to indicate them.

![Code Window](assets/code_window_wGdNfZoeTp.PNG)


![Sketch Window](assets/sketch-options.png)

The top icon allows you to enter **Full-Screen** mode: the code window will be maximized while the side bar will be minimized. The bottom icon is for **Auto-Indent**. When pressed, it will automatically indent your code to make it more readable.

## Enjoy!

That's all there is: it's that easy to use the Arduino Web Editor. Now that you know how to manage your sketches inside a sketchbook, as well as how to customize the Editor, we hope you'll find creating and editing your sketches much easier and more pleasurable.
That's all there is: it's that easy to use the Arduino Cloud Editor. Now that you know how to manage your sketches inside a sketchbook, as well as how to customize the Editor, we hope you'll find creating and editing your sketches much easier and more pleasurable.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading