diff --git a/content/hardware/08.edu/solution-and-kits/alvik/tutorials/getting-started/assets/filemanageronline.png b/content/hardware/08.edu/solution-and-kits/alvik/tutorials/getting-started/assets/filemanageronline.png new file mode 100644 index 0000000000..269aac58a6 Binary files /dev/null and b/content/hardware/08.edu/solution-and-kits/alvik/tutorials/getting-started/assets/filemanageronline.png differ diff --git a/content/hardware/08.edu/solution-and-kits/alvik/tutorials/getting-started/assets/filesidebaronline.png b/content/hardware/08.edu/solution-and-kits/alvik/tutorials/getting-started/assets/filesidebaronline.png new file mode 100644 index 0000000000..2e10528bbc Binary files /dev/null and b/content/hardware/08.edu/solution-and-kits/alvik/tutorials/getting-started/assets/filesidebaronline.png differ diff --git a/content/hardware/08.edu/solution-and-kits/alvik/tutorials/getting-started/assets/onlinebuttons.png b/content/hardware/08.edu/solution-and-kits/alvik/tutorials/getting-started/assets/onlinebuttons.png new file mode 100644 index 0000000000..d13a5a28d4 Binary files /dev/null and b/content/hardware/08.edu/solution-and-kits/alvik/tutorials/getting-started/assets/onlinebuttons.png differ diff --git a/content/hardware/08.edu/solution-and-kits/alvik/tutorials/getting-started/getting-started.md b/content/hardware/08.edu/solution-and-kits/alvik/tutorials/getting-started/getting-started.md index 33bedf97d0..06ff669dd0 100644 --- a/content/hardware/08.edu/solution-and-kits/alvik/tutorials/getting-started/getting-started.md +++ b/content/hardware/08.edu/solution-and-kits/alvik/tutorials/getting-started/getting-started.md @@ -146,6 +146,19 @@ while (True): You are now all set, disconnect Alvik from the computer, put some obstacles around Alvik, turn it ON, and see how Alvik navigates around your room avoiding them. +#### Let's Start Coding Alvik (Online IDE) + +Note that some features might look different if you are using the Online IDE. Fear not, all code and files are interpreted the same independently of the IDE you choose. However, the UI of the Online IDE displays files differently. + +You can open the file manager using the button: +![File Manager Button](assets/filemanageronline.png) + +The files will then be displayed in a sidebar, also in a different arrangement. In the online IDE, files can be viewed in a sidebar: +![Files side window](assets/filesidebaronline.png) + +A few options are available at the bottom. These are: `create a new file`, `create a new folder`, `delete a file`, `rename`, `upload` and `download`: +![Buttons Online IDE](assets/onlinebuttons.png) + ### Next Steps * There is a set of already built examples that will help you to better understand how Alvik works, you can download them from [this link](https://github.com/arduino/arduino-alvik-mpy/releases), unzip them in your already created _alvik_ folder and you will be able to see them straight away in the Arduino Labs for MicroPython. diff --git a/content/hardware/08.edu/solution-and-kits/alvik/tutorials/user-manual/user-manual.md b/content/hardware/08.edu/solution-and-kits/alvik/tutorials/user-manual/user-manual.md index 2ad16d7b29..503321a97d 100644 --- a/content/hardware/08.edu/solution-and-kits/alvik/tutorials/user-manual/user-manual.md +++ b/content/hardware/08.edu/solution-and-kits/alvik/tutorials/user-manual/user-manual.md @@ -363,7 +363,7 @@ After executing these commands, there will be updates of the process on the prom Alvik is intended to be programmed with MicroPyton. We recommend you to install the [Arduino Lab for MicroPython](https://labs.arduino.cc/en/labs/micropython) editor. -***If you're using a Chromebook, you'll need to use the [**online version**](https://lab-micropython.arduino.cc/) of Arduino Lab for MicroPython, using Chrome. You'll need to login with an Arduino account to use it.*** +***If you're using a Chromebook, you'll need to use the [**online version**](https://lab-micropython.arduino.cc/) of Arduino Lab for MicroPython, using Chrome. You'll need to login with an Arduino account to use it. Note that some of the UI elements might look different check our [article](https://docs.arduino.cc/micropython/environment/online-editor/) for more information.*** Now that all the previous steps have been set, let's see how to create custom programs for Alvik to move forward until detecting an object in front of it, Alvik will detect it, dodge it and continue on its way. diff --git a/content/micropython/02.environment/00.online-editor/assets/filemanageronline.png b/content/micropython/02.environment/00.online-editor/assets/filemanageronline.png new file mode 100644 index 0000000000..269aac58a6 Binary files /dev/null and b/content/micropython/02.environment/00.online-editor/assets/filemanageronline.png differ diff --git a/content/micropython/02.environment/00.online-editor/assets/filesidebaronline.png b/content/micropython/02.environment/00.online-editor/assets/filesidebaronline.png new file mode 100644 index 0000000000..2e10528bbc Binary files /dev/null and b/content/micropython/02.environment/00.online-editor/assets/filesidebaronline.png differ diff --git a/content/micropython/02.environment/00.online-editor/assets/onlinebuttons.png b/content/micropython/02.environment/00.online-editor/assets/onlinebuttons.png new file mode 100644 index 0000000000..d13a5a28d4 Binary files /dev/null and b/content/micropython/02.environment/00.online-editor/assets/onlinebuttons.png differ diff --git a/content/micropython/02.environment/00.online-editor/online-editor.md b/content/micropython/02.environment/00.online-editor/online-editor.md index 010faf9cc4..79704bc51e 100644 --- a/content/micropython/02.environment/00.online-editor/online-editor.md +++ b/content/micropython/02.environment/00.online-editor/online-editor.md @@ -31,8 +31,21 @@ Setting up the online environment is quick and easy. Follow the steps below to a ```python print("Hello World!") ``` +5. We should now see `Hello World!` printed in the REPL. + +## Online vs. Offline Editors: Key Differences + +Note that some features might look different if you are using the Online IDE. Fear not, all code and files are interpreted the same regardless of the IDE you choose; however, the UI of the Online IDE displays files differently. + +You can open the file manager using the button: +![File Manager Button](assets/filemanageronline.png) + +The files will then be displayed in a side bar, also in a different arrangement. In the online IDE, files can be viewed in a side bar: +![Files side window](assets/filesidebaronline.png) + +A few options are available at the bottom, these are: `create new a file`, `create new a folder`, `delete a file`, `rename`, `upload` and `download`, located at the bottom: +![Buttons Online IDE](assets/onlinebuttons.png) -We should now see `Hello World!` printed in the REPL. ## Troubleshooting