Intro to the BrainBoardz Web IDE
The team at BrainBoardz has put together a Web IDE to help you program your Neuron through the web browser. You can go to the Web IDE by clicking on ‘IDE’ in the top menu of this website or by click on this link.
The Web IDE looks like the following
There are three main sections to the Web IDE. On the top is the menu bar. Located below the menu bar is the workspace to write your code—currently, the Web IDE support Python. The Neuron comes preprogrammed with CircuitPython. You can enter your code in this workspace. The last section is the serial output from the Neuron. Clicking on Connect will allow your web browser to attach to the Neuron to see the output.
The menu bar has eight icons. The table below the screenshot explains what each icon does
| New – Click on this icon will clear the workspace out. |
| Open File – Clicking on this icon will bring up the file browser that you can use to select a previously saved CicruitPython file. When the file has been selected, the file’s contents will be loaded into the workspace, allowing you to edit the file. |
| Save File – Clicking on this icon will bring up a file browser to allow you to select a location to save the contents of the current workspace. |
| Upload – Click on this icon will bring up a file browser to select the location of the code.py file used to tell the Neuron what to do. |
| Connect – Clicking on this icon will bring up a window to allow you to select the serial port where the Neuron is connected to. |
| REPL – Once you have connected to the Neuron, clicking on this icon will enable the read-eval-print loop on the Neuron. In this mode, you can enter a line of code in the workspace and click on Run to execute that line of code. |
| Run – Clicking on this icon will send the Workspace contents directly to the Neuron once you have entered REPL mode on the Neuron. |
| Projects – Clicking on this icon will bring up a mini browse window containing some sample projects containing code blocks to help you create your projects. |
BrainBoardz is a strong believer in learning by example! So let’s begin with a simple ‘Hello’ tutorial to familiarise you with our Web IDE. First, make sure you are using Google Chrome/Microsoft Edge for this tutorial. Next, plug the USB cable into your Neuron board. Shortly after plugging your board in, you will see a CircuitPython drive appear. Congratulations! You are almost there.
Click on the ‘Projects’ icon. When the window opens, select ‘Print’. Notice that the workspace now has some sample code. This code will simply enter a loop and print “Hello” coming from the Neuron board.
But why don’t we see it? Oh right, we need to connect to the board. Click on the ‘Connect’ icon in the top menu bar and locate the CircuitPython device. On the Mac, it comes up with the following naming. Windows will be different with a COM port rather than cu.usbmodem.
Once we are connected, we can now see “Hello” bringing printed from the Neuron board to the computer over USB-serial. Hmmm…. it seems nothing is showing up. Oh! Let’s try to upload this code to the Neuron. Click on the ‘Upload’ icon and navigate to the CircuitPython drive. When you have navigated to the CircuitPython drive, click on ‘code.py’, then save.
Click on the ‘Upload’ button again to transmit the CircuitPython code to the Neuron. Now you will be able to see ‘Hello’ printed in the status window.
Not sure about you, but the print seems a tad bit slow. Let’s try to speed things up! On line 5, change time.sleep(10) to time.sleep(1). Click ‘Upload’ and wait a few seconds. Viola! We now see that the Neuron is now printing ‘Hello’ faster to the browser. Congratulations! You have now programmed the Neuron using the Web IDE. You are now on your way to developing cool projects using the BrainBoardz system. Stay tuned to the next tutorial!