Skip to content

Commit e911ae2

Browse files
Merge pull request #2120 from arduino/benjamindannegard/web-editor-features-update
[MKC-1766] Updated Arduino cloud editor secondary features tutorial
2 parents df20c12 + caf9bf0 commit e911ae2

File tree

7 files changed

+28
-36
lines changed

7 files changed

+28
-36
lines changed
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
title: "Arduino Web Editor Secondary Features "
3-
description: "Explore secondary features of the Arduino Web Editor and become a pro using it."
2+
title: "Arduino Cloud Editor Secondary Features "
3+
description: "Explore secondary features of the Arduino Cloud Editor and become a pro using it."
44
coverImage: "assets/blob_YimidWfjGD.png"
55
tags: [coding, software]
66
difficulty: beginner
@@ -10,74 +10,66 @@ source: "https://create.arduino.cc/projecthub/Arduino_Genuino/arduino-web-editor
1010

1111
## Apps and Online Services
1212

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

1515
## About This Project
1616

17-
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).
17+
In this tutorial, we'll demonstrate some secondary features of the Arduino Cloud Editor.
1818

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

2121
### The Sketchbook Tab
2222

23-
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.
23+
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.
2424

25-
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)
25+
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)
2626

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

29-
Sketchbook Tab
29+
Sketchbook Page
3030

31-
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.
31+
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.
3232

33-
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:
33+
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:
3434

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

4542
### The Preferences Tab
4643

47-
The Preferences Tab contains some options to customize the look and behavior of the Editor (see the screenshot below).
48-
49-
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.
50-
51-
![Preferences Tab](assets/preferences_tab_LDdNfMWzyS.PNG)
52-
44+
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.
5345

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

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

57-
- **Editor Font Size** allows you to change the font size.
5850
- **Editor Theme** allows you to switch between a light and dark theme;
51+
- **Editor Font Size** allows you to change the font size.
52+
53+
In the **SKETCH** section, you can set the sketch save option:
54+
55+
- **Enable Autosave** tells the Editor to automatically save the sketch whenever it's modified.
5956

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

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

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

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

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

7367
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.
7468

75-
![Code Window](assets/code_window_wGdNfZoeTp.PNG)
76-
77-
69+
![Sketch Window](assets/sketch-options.png)
7870

7971
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.
8072

8173
## Enjoy!
8274

83-
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.
75+
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.
Loading

0 commit comments

Comments
 (0)