Merge pull request #336 from pycom/pymakr_online

Pymakr online

config.toml

@@ -1174,12 +1174,19 @@ theme = "doc-theme"
     weight = 10
 
 [[menu.main]]
-    name = "Visualise data"
+    name = "Visualise signals"
     url = "/pybytes/dashboard/"
     identifier = "pybytes@dashboard"
     parent = "pybytes"
     weight = 15
 
+[[menu.main]]
+    name = "Pymakr Online"
+    url = "/pybytes/pymakr-online/"
+    identifier = "pybytes@pymakr-online"
+    parent = "pybytes"
+    weight = 17
+
 [[menu.main]]
     name = "Pybytes library API"
     url = "/pybytes/api/"

content/pybytes/pymakr-online/_index.md

@@ -0,0 +1,88 @@
+---
+title: "Pymakr Online"
+aliases:
+  - pymakr-online/introduction
+---
+
+On this page, we discuss the functionality of Pymakr Online. 
+
+## What is Pymakr Online?
+
+Pymakr Online is an online IDE for your MicroPython projects. We brought our Pymakr Plugin for Atom and Visual Studio code into Pybytes as an IDE, so you won't necessarily need to have those code editors installed anymore in order to work with your Pycom devices.
+
+## What does Pymakr Online offer you?
+
+* Everything you would expect from a code editor: syntax highlighting, auto complete, multi tabs, file tree, search box etc.
+* REPL terminal
+* Import from multiple sources (blank/device/project/Github repository), export to a zip file/device/project
+* Device activity indicator: track what's going between Pymakr Online and your device.
+
+## Let's get started!
+
+There are two ways in which you can use Pymakr online. 
+1. Go to [your device](https://pybytes.pycom.io/devices) and select the `Pymakr Online` tab. This method allows you to make quick changes to the Python code on your device and upload it. This is the method we use below.
+
+![](/gitbook/assets/pybytes/pymakr-online/opening-pymakr-device.png)
+
+2. Start a new project on the [Pymakr](https://pybytes.pycom.io/pymakr) tab in Pybytes. There are several different types you can choose from, including a link to your Github repository! Later, we can link the project to a release. 
+
+![](/gitbook/assets/pybytes/pymakr-online/opening-pymakr-project.png)
+
+## Using Pymakr Online
+
+1. When you open Pymakr Online, you will see the following
+
+![](/gitbook/assets/pybytes/pymakr-online/initial.png)
+
+
+  * On the left we see the files. Depending on where you started, the online environment will first load with the files you last used. If the device is online, it will automatically try to `Refresh Hierarcy` and synchronise the content. You can click the `Refresh Hierarcy` icon next to your device name to manually update the online filestructure. The online editor will automatically try to connect.
+  * In the top right, the connection status is displayed. Every so often, you will see a ping being sent out to the device to check if it is still connected. If you started pymakr from a project, you will also see the `Save/Export` button here as well. 
+  * And finally, on the bottom, the REPL is displayed, this works exactly the same as the REPL you are used to in VSCode or Atom. Everything you type in there will be duplicated to the REPL over USB. 
+
+2. Open the `main.py` file, or, when not available, create one by right clicking on the device name to `Create File`. Here, we can write our own python code in the main editor. You can use the example we added below to try it out. 
+
+![](/gitbook/assets/pybytes/pymakr-online/open-file.png)
+
+  ```python
+  import pycom
+  import time
+  pycom.heartbeat(False)
+  while(True):
+    pycom.rgbled(0xAA0000)
+    time.sleep(0.5)
+    pycom.rgbled(0xAA00AA)
+    time.sleep(0.5)
+    pycom.rgbled(0x00AA00)
+    time.sleep(0.5)
+  ```
+3. After adding the code, a `Save and Upload` button will appear (or you can use the `Save/Export` button already present), allowing you to upload code to the device. Clicking this will upload and reboot the device. The device will restart and go offline for a second. Then come back online and show the RGB LED blinking in three different colors.
+
+![](/gitbook/assets/pybytes/pymakr-online/upload.png)
+
+>Note that if you make a syntax error, the device will come back online but not throw any error in the REPL.
+
+## Creating a Project 
+
+1. Now that you know how to use the Pymakr Online environment, we can create a project (if you have not already). If you just followed the example above, go to the [Pymakr](https://pybytes.pycom.io/pymakr#) tab and click on `Import from Existing Device`. 
+
+![](/gitbook/assets/pybytes/pymakr-online/starting-project.png)
+
+2. Select your device and either `Retrieve from Cloud` or `Request from device`, depending on where the latest version of your code is. This will load the hierarchy and bring up the Pymakr Online interface. 
+
+3. Make your changes and then click the `Save/Export` button, this offers three options. This time, we use `Include in Release`. It will ask us to create a new project, or add to an already existing project. 
+
+![](/gitbook/assets/pybytes/pymakr-online/new-project.png)
+
+
+4. Assuming you have not create a project yet, creat a new one, and name it `My first project` and click next.
+
+![](/gitbook/assets/pybytes/pymakr-online/new-project1.png)
+
+5. Here, it asks for the networks we want to use. For now, lets select WiFi. 
+
+![](/gitbook/assets/pybytes/pymakr-online/new-project1.png)
+
+6. In the next screen, it asks for the WiFi network you want to use, select the one that is most convenient for you.
+
+7. Now that we have successfully create a project. Using projects, you can add unlimited devices and keep them all up-to-date Over The Air (OTA) with new Pybytes configuration files, Python code or update the firmware.
+

content/pybytes/pymakr-online/how-to-open.md

@@ -0,0 +1,10 @@
+---
+title: "How to Open Pymakr Online"
+aliases:
+    - pymakr-online/how-to-open.html
+    - pymakr-online/how-to-open.md
+    - pymakr-online/how-to-open
+---
+
+## The two different ways of opening Pymakr Online
+

content/pybytes/pymakr-online/toolsfeatures.md

@@ -0,0 +1,185 @@
+---
+title: "Tools/Features"
+aliases:
+    - pymakr/toolsfeatures.html
+    - pymakr/toolsfeatures.md
+    - chapter/pymakr/toolsfeatures
+---
+
+There are two different ways of opening Pymakr Online. Each way has some differences on the features and purposes. Read more at [How to Open Pymakr Online](/pymakr-online/how-to-open)
+
+# Pymakr Online linked to a device
+
+If you open Pymakr Online from a device page, Pymakr will be linked to that device.
+
+_**Note: Your device needs to be online in order to be reachable by Pymakr Online**_
+
+## Terminal
+
+Just like Pymakr Plugin, Pymakr Online also has a REPL (Read Evaluate Print Line) terminal. The REPL allows you to run code on your device, line by line. To begin coding, open Pymakr from a device (device's page > pymakr tab > open Pymakr button), go to the terminal and start typing your code. 
+
+
+## Download a file
+
+When Pymakr is loaded, the IDE will request the device its hierarchy (the folder structure). If you open a file that has never been opened in Pymakr Online before, that file's content will be downloaded and saved on the cloud, so the next time you open that same file, the content download won't be necessary, unless you want to. Maybe you changed that file's content in somewhere else and want to force a download to get the current content which is in the device. 
+
+To download the file from the linked device, click on the download icon next to the file name at file tree.
+
+![](/gitbook/assets/pymakr-online/pymakr-download-icon.jpg)
+
+That will download the file content from the device and save it into the cloud.
+
+![](/gitbook/assets/pymakr-online/last-update-one-day-ago.jpg)
+
+*In this case, that file has been updated yesterday.*
+
+![](/gitbook/assets/pymakr-online/last-update-few-seconds-ago.jpg)
+
+*After downloading the main.py content from the device.*
+
+## Upload a file
+
+After making any changes in a file, you will be able to upload it into your device by clicking on "Save and Upload" link.
+
+![](/gitbook/assets/pymakr-online/save-upload.jpg)
+
+
+_**Note: That will upload only the current file.**_
+
+After downloading or uploading a file, its content is stored on the cloud.
+
+## Update Hierarchy
+
+If you want to refresh your device's hierarchy in Pymakr, you should click on Refresh Hierarchy icon next to your device name. That will request the hierarchy from the device, creating or deleting folders according to your device's file hierarchy. 
+
+![](/gitbook/assets/pymakr-online/pymakr-hierarchy.jpg)
+
+
+# Pymakr Online not linked to a device
+
+Pymakr Online can be opened without being linked to a device, from [Pymakr Online](https://www.pybytes.pycom.io/pymakr) initial page.
+
+Since there's no device linked in this way of opening Pymakr Online, there are no device related actions here (download file, device activity indicator etc). Instead, you decide what you are going to do with your code: upload to a project, download a zip file or upload to a device.
+
+Before exporting your project, you first need to import a project into Pymakr or start with a blank project:
+
+## Import code into Pymakr Online
+
+![](/gitbook/assets/pymakr-online/pymakr-online-initial-page.jpg)
+
+*Pymakr Online initial page*
+
+### 1. Blank project
+
+This will open Pymakr Online with the essential files of MicroPython project (main.py and boot.py).
+
+### 2. Project/Release
+
+1. After clicking on Project button, you will see this page, where you must choose one project:
+
+![](/gitbook/assets/pymakr-online/pymakr-projects.jpg)
+
+2. And finally, choose the release you want to work with. That will open Pymakr with the files of the selected release.
+
+![](/gitbook/assets/pymakr-online/pymakr-releases.jpg)
+
+### 3. Device
+
+At this section you can import the code from a device and work with it in Pymakr Online. Note this won't have any connection to any device once it's loaded. 
+
+1. Choose the device you want to work with: 
+
+![](/gitbook/assets/pymakr-online/pymakr-devices.jpg)
+
+2. If you already worked with that device in Pymakr Online, you can use the latest saved code on the cloud, so the device doesn't need to be online, or even turned on. That will instantly open Pymakr with that code.
+
+
+![](/gitbook/assets/pymakr-online/pymakr-device-import-1.jpg)
+
+
+If you want the current files from the device and you are not sure if the saved code on the cloud is up to date, you can download those files from the device by clicking on "Request files from device" button. That will bring you to another modal, which will show you the download progress.
+
+![](/gitbook/assets/pymakr-online/pymakr-device-import-2.jpg)
+
+Once the download has been completed, you can now work with the device's files in Pymakr Online:
+
+![](/gitbook/assets/pymakr-online/pymakr-device-import-3.jpg)!
+
+
+### 4. Zip file
+
+This feature allows you to upload a zip file of your project into Pymakr Online and start to work with it from there. The zip file can not be bigger than 4MB.
+
+### 5. Github Repository
+
+1. Firstly, type the repository name you want to import your code from and press enter:
+
+![](/gitbook/assets/pymakr-online/pymakr-github-import-1.jpg)!
+
+2. Then select your repository by clicking on it.
+
+![](/gitbook/assets/pymakr-online/pymakr-github-import-2.jpg)!
+
+3. Select the branch 
+
+![](/gitbook/assets/pymakr-online/pymakr-github-import-3.jpg)!
+
+4. Wait for a few seconds until the download of the files from the selected branch is completed and then you can start working on Pymakr with those files!
+
+![](/gitbook/assets/pymakr-online/pymakr-github-import-4.jpg)!
+
+_**Note: There's a usage limit of the Github API. You won't be able to search a lot and select different repositories in the same day. Use this feature with moderation.**_
+
+
+## Save/Export
+
+To export your project, ensure that you have opened Pymakr Online from the Pymakr initial page (accessible from the sidebar menu) and not from the device page. For any option here, the size limit is 4MB. 
+
+1. Click on Save/Export button.
+
+![](/gitbook/assets/pymakr-online/pymakr-export.jpg)
+
+2. Choose an option:
+
+![](/gitbook/assets/pymakr-online/pymakr-export-modal.png)
+
+* Upload to a project will be released soon.
+
+* Create and Download a zip file from all of the files from your project.
+
+![](/gitbook/assets/pymakr-online/pymakr-download-zip.jpg)
+
+* You can also export to a device. This modal will open after clicking on "UPLOAD TO DEVICE" button. Note that your device needs to be online in order to receive the files from Pymakr Online.
+
+![](/gitbook/assets/pymakr-online/pymakr-devices-list.jpg)
+
+* Wait while Pymakr Online is uploading your project to the selected device.
+![](/gitbook/assets/pymakr-online/pymakr-upload.jpg)
+
+* Once the upload is done, your device will restart and load the new code.
+![](/gitbook/assets/pymakr-online/pymakr-download-completed.jpg)
+
+
+# Create a new file or folder 
+
+To create a file or folder in Pymakr Online, disregarding of how you opened it, you just need to right click on the folder you want to create the file or folder in.
+
+![](/gitbook/assets/pymakr-online/pymakr-create-folder.jpg)
+
+In this case, I'm creating a folder called 'new-folder' under the project root. For that, I right clicked on the project name. 
+
+Now type the name of the file/folder: 
+![](/gitbook/assets/pymakr-online/pymakr-create-folder-1.jpg)
+
+_**Note: Pymakr Online only supports the formats .py .txt .log .json .html .js .cet .crt**_
+_**A folder name can not contain dots (.)**_
+
+If you want to delete a folder or file, right click on the item to be deleted and then click on "Delete file" or "Delete folder". 
+
+![](/gitbook/assets/pymakr-online/pymakr-create-folder-2.jpg)
+
+
+
+
+
+

content/pybytes/pymakr_online.md

@@ -0,0 +1,5 @@
+---
+title: "Pymakr Online"
+---
+
+On this page, we discuss the