webide.pdf

Adafruit WebIDECreated by Tyler Cooper

Last updated on 2013-10-14 02:45:25 PM EDT

23445566778

101316161821

Guide Contents

Guide ContentsOverviewInstallation on Raspberry Pi

Easy installation:Manual Installation:Uninstallation:

Installation on BeagleBoneEasy installation:Manual Installation:Uninstallation:

Getting StartedUsing the WebIDEUsing the DebuggerUsing the Visualizer

Starting the visualizerFAQSubmit a Bug

© Adafruit Industries http://learn.adafruit.com/webide of 21

Overview

We finally have the Adafruit WebIDE in a place where we think it's solid enough for a betarelease. First, a disclaimer: this release will likely have bugs, and minor issues.

The Adafruit WebIDE is by far the easiest way to run code on your Raspberry Pi or BeagleBone.Just connect your Pi or BeagleBone to your local network, and log on to the WebIDE in your webbrowser to edit Python, Ruby, JavaScript, or anything and easily send it over to your Pi. TheWebiDE includes a terminal, so you can easily send various commands to your Pi right from thebrowser. Also, your code will be versioned in a local git repository, and pushed remotely out tobitbucket so you can access it from anywhere, and any time.


Installation on Raspberry Pi

Installation of the editor can be performed in two ways. One is the more trusting, but mucheasier way, the second is a bit more manual.

Easy installation:Log into your Raspberry Pi. If you're on a Mac, you can open Terminal.app to log into theRaspberry Pi over SSH. Linux users can open the default terminal application. If you're usingWindows, you'll want to download a good terminal application. My favorite isPuTTY (http://adafru.it/aWh).

Once you have the terminal application open, assuming you're using Occidentalis, type in thefollowing:

Once you type your password in, and get a prompt, you can copy and paste the followingcommand, and hit enter. This command will download an install.sh script from our githubrepository, and execute it automatically for you.

The editor will be installed into /usr/share/adafruit/webide using the user webide. The script willinstall node, npm, redis-server, git, restartd (watches over your editor server), avahi-daemon(bonjour!), i2c-tools, and libcap2-bin (so we can use port 80 without root). If you'd like toreview the script, it's located in our repository (http://adafru.it/aQo).

After the installation is complete, you'll see the following prompt:

The editor is now installed, and you can open a browser to access it from any computer in yournetwork.

Due to our very small development team, and limited resources, the only browsers that aresupported are Google Chrome, and Mozilla Firefox at this time. We hope to support more inthe future!

$ ssh [email protected]@raspberrypi.locals password:

curl https://raw.github.com/adafruit/Adafruit-WebIDE/alpha/scripts/install.sh | sudo sh

The installation may take from 3-5 minutes, so please be patient.The installation may take from 3-5 minutes, so please be patient.

**** Starting the server...(please wait) ******** The Adafruit WebIDE is installed and running! ******** Commands: sudo service adafruit-webide.sh {start,stop,restart} ******** Navigate to http://raspberrypi.local to use the WebIDE


http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html

https://raw.github.com/adafruit/Adafruit-WebIDE/alpha/scripts/install.sh

Manual Installation:You can manually install the editor by running the following set of commands:

Uninstallation:To uninstall the editor for versions 0.1.9 and older, you can run the following script:

To uninstall the editor for versions 0.2.0 and newer, you can run the following script:

You can also manually uninstall by removing the following components:

Delete the folder the editor exists in.Remove the bitbucket ssh keys in ~/.sshEdit the ssh config to remove the bitbucket reference that is appended.Uninstall nodejs npm redis-server git restartd libcap2-bin avahi-daemon i2c-tools.

sudo apt-get update && sudo apt-get -y install build-essential nodejs nodejs-legacy npm redis-server gitgit clone git://github.com/adafruit/Adafruit-WebIDE.gitcd Adafruit-WebIDEmkdir tmpnpm config set tmp tmpnpm installeditor config/config.js (change port 80 to your port of choice)nodejs server.js

curl https://raw.github.com/adafruit/Adafruit-WebIDE/release/scripts/uninstall.sh | sh

curl https://raw.github.com/adafruit/Adafruit-WebIDE/alpha/scripts/uninstall.sh | sudo sh


Installation on BeagleBone

Installation of the editor can be performed in two ways. One is the more trusting, but mucheasier way, the second is a bit more manual.

Easy installation:Log into your BeagleBone. If you're on a Mac, you can open Terminal.app to log into theBeaglebone over SSH. Linux users can open the default terminal application. If you're usingWindows, you'll want to download a good terminal application. My favorite isPuTTY (http://adafru.it/aWh).

Once you have the terminal application open, assuming you're using the default distribution ofAngstrom, type in the following:

It will ask to add the BeagleBone to a known_hosts file. Type yes, and hit enter. Then, it will askyou to enter a root password. The root password is not set for a default build of Angstrom, soyou can just hit the enter key to bypass the password prompt.

Once you have successfully logged into your Beaglebone, you'll then want to copy and pastethe following one at a time into your terminal and hit enter after each one:

The editor will be installed into /usr/share/adafruit/webide using the user webide. The script willinstall node, npm, redis-server, git, restartd (watches over your editor server), avahi-daemon(bonjour!), i2c-tools, sudo, and libcap2-bin. If you'd like to review the script, it's located in ourGitHub repository.

The editor is now installed, and you can open a browser to access it from any computer in yournetwork.

Due to our very small development team, and limited resources, the only browsers that aresupported are Google Chrome, and Mozilla Firefox at this time. We hope to support more in the

ssh [email protected]

echo "nameserver 8.8.8.8" >> /etc/resolv.confcurl -k https://raw.github.com/adafruit/Adafruit-WebIDE/alpha/scripts/install-angstrom.sh | sh

The installation may take from 3-5 minutes, so please be patient.The installation may take from 3-5 minutes, so please be patient.

**** Starting the server...(please wait) ******** The Adafruit WebIDE is installed and running! ******** Commands: /etc/init.d/adafruit-webide-angstrom.sh {start,stop,restart} ******** Navigate to http://beaglebone.local:8080 to use the WebIDE


http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html

future!

Manual Installation:You can manually install the editor by running the following set of commands. You'll also need tomanually install redis, as it's not installed by default. You can find out how to install redishere (http://adafru.it/caF).

Uninstallation:To uninstall the editor for all versions:

opkg update && sudo opkg install build-essential nodejs npm gitgit clone git://github.com/adafruit/Adafruit-WebIDE.gitcd Adafruit-WebIDEmkdir tmpnpm config set tmp tmpnpm installeditor config/config.js (change port 80 to your port of choice)nodejs server.js

curl -k https://raw.github.com/adafruit/Adafruit-WebIDE/alpha/scripts/uninstall-angstrom.sh | sh


http://redis.io/topics/quickstart

Getting Started

Setting up your Rapsberry Pi WebIDE will only take a few minutes. Let’s get started.

First up, you will connect to the WebIDE (running on the Pi) using a different computer (notthe Pi). The client computer must be on the same network.

Open up a web-browser on a computer that shares the same networks as the Pi and browse toeither http://raspberrypi.local (http://adafru.it/aWs) if you are running Occidentalis, orto http://xx.xx.xx.xx (http://adafru.it/c59) where the x's are replaced with your Pi's IP address.

One of the many useful features of the WebIDE is that all of your code will be stored in thecloud over at bitbucket.org. So, before we can go any further, you need to create your freebitbucket account.

Click here to create your free bitbucket account. (http://adafru.it/aPy)

Once you have created your account, log into bitbucket and go to your Account page:

In your Account page, click on the Integrated Applications link in the left column:

Now, click on the ‘+ Add consumer’ button:

In the pop-up window type in Raspberry Pi WebIDE for the name, then click the ‘Add consumer’


http://raspberrypi.local

http://xx.xx.xx.xx

https://bitbucket.org/account/signup/

button:

What we are after is the Key, and the Secret text. Copy and paste these tokens into the loginscreen of the WebIDE.


Using the WebIDE

The Adafruit Learning System Raspberry Pi WebIDE is packed with neat features. Many of whicharen't all that obvious. Here is a running list of all of those features, and how they work.

https://github.com/adafruit/Adafruit-WebIDE/issues (http://adafru.it/aQ8)

When you first load up the WebIDE for the first time, you should see something similar to whatyou see above (click on the image to view it in its full size).1. This is your Bitbucket username. Right now this link is inactive. Just double check this

username to make sure you are logged into the correct Bitbucket account.2. Here is a list of all of your repositories. The Adafruit Raspberry Pi Python Code repository

(https://github.com/adafruit/Adafruit-Raspberry-Pi-Python-Code.git (http://adafru.it/aYZ)) isautomatically cloned into your Bitbucket account. We have also created a my-pi-projectsrepository. If it has the little folder icon, that means there are files contained within. If it hasan arrow icon, that means it is a file that can be viewed in the WebIDE.

3. Click here to clone a repository from Github or Bitbucket. Follow the instructions in thepopup.

4. No matter where you are in the WebIDE, there will always be a terminal button. Click this totalk directly to your Raspberry Pi, or do things like install libraries without leaving theWebIDE. Handy!

5. When you first log in (or refresh your WebIDE in your browser), you will be greeted with anice message. Read this for any news on the WebIDE.

Once you have completely installed the WebIDE and connected it to Bitbucket, typeOnce you have completely installed the WebIDE and connected it to Bitbucket, typehttp://raspberrypi.local (or http://xx.xx.xx.xx where the x's are replaced with yourhttp://raspberrypi.local (or http://xx.xx.xx.xx where the x's are replaced with yourPi's IP address if you are not running Occidentalis) into your browser.Pi's IP address if you are not running Occidentalis) into your browser.

As the WebIDE is still in its infancy, we need your help to find and squash bugs. As the WebIDE is still in its infancy, we need your help to find and squash bugs. UseUsethe link below to submit an issue on Github.the link below to submit an issue on Github.


https://github.com/adafruit/Adafruit-WebIDE/issues

https://github.com/adafruit/Adafruit-Raspberry-Pi-Python-Code.git

When you view any of the included code examples from Adafruit, there are a couple uniqueitems.1. As with any piece of code, you can simply click the Run button to execute the code on your

Raspberry Pi. The terminal will automatically open when you click Run.2. The Adafruit code is read only, but you can easily copy this code to your my-pi-projects

repository. Just click this link and it will automatically copy the folder, and all of its contentsover.

Once you have copied, imported, or created code from scratch in your my-pi-projects (or otherrepository), this is the screen you will see.1. If you want to create a new file, press this button, and name your file (make sure to add a

proper file type, like .py to the end of your name, otherwise the editor won't know what todo with it). Then click save to add your new file to the current folder.

2. You can also upload a premade file. Once again, make sure it is named properly beforeimporting. You can also import images to the folder (and view those images right in theIDE).

3. Make sure to click save after making any changes to code. This will then update the files inyour Bitbucket account.


Renaming and deleting files is easy!1. Just right click on any of the files that you want to change and the following box will pop up.

Click delete to permanently delete that file. If you click rename, you will be asked whatname you want the file to change to. Make the change, then click save.

In the upper right of the WebIDE, you will see this.1. If it is green, and says 'Connected', that means the WebIDE is communicating with your

Raspberry Pi. If it is disconnected, the WebIDE will keep trying to make contact with your Pifor awhile, then it will finally give up. It will then ask you to reconnect your Pi, and refresh thebrowser.

2. You can log out of your Bitbucket account at any time by clicking Log out.

What isn't shown in the image above is our auto-update feature. If we push out a new updatefor the WebIDE, you will see it pop up between 'Connected' and 'Log out'. Simply click the link,sit back, and the WebIDE will automatically download, unpack, install, restart your Raspberry Pi,and even refresh your browser for you. It doesn't get any easier than that.

In order to see if there are updates available, refresh your browser every day.

Once the WebIDE is installed, you can shutdown (shutdown -h now) or restart (shutdown -r now)your Pi anytime. The next time you want to use it, just start your Pi, and reloadraspberrypi.local to log back into the WebIDE.


Using the Debugger

The python debugger in the WebIDE can be quite useful for many situations. The debuggerallows you to step through your python program in realtime. This is in contrast to the visualizer,which runs the program fully, and then allows you to step through it.

When would you use the debugger? One scenario would be if you're just not getting the rightvalues returned out of your functions. Or your variables aren't being set to the values you'dexpect. You could then debug it, set a breakpoint to where you think it's broken, and seeexactly what the values are at that given moment in your program. Also, you could use theGPIO pins to light various LED's. As you step through your program, you'll see them turn on andoff as you'd expect.

To use the debugger, open a python file, and click the "Debug" link in the toolbar:

Once you've clicked the link, the toolbar will change with a new debugging bar. It should openwithin a couple of seconds. The editor will still display, and you can make changes to yourcode while debugging.

Once the debugger is ready, you'll see the following:

There is quite a bit more to the debugger than just running a program, or even than using thevisualizer.

The first think you'll notice is the toolbar (#1) has new buttons available:1. Save/Restart allows you to save your file, and restart the debugger for that file in one click.

You can initiate that by hitting control-s, or command-s (on OS X). 2. The Exit link will exit the debugger. 3. The Run link will continue execution of your program either to the end, or to the next

breakpoint you have enabled. If there is a breakpoint enabled (clicking in the gutter (#6)), it


will stop there, and wait for your instruction.4. Step Over will step through your program line-by-line until it hits the end. This option will

skip any function calls. So, if you have a function called foo(), it will just run the entirefunction, and move to the next line.

5. Step In will step through your program as well, but it will jump into many of the functions,instead of skipping over them.

The editor is also displayed (#2). You can edit your file at any time. If you do change your file,you'll need to click the Save/Restart link in the toolbar in order to let the debugger pick up anyof the changes you've made.

At the bottom two panels, you'll see the Debug Output (#3), and the Debug Variables (#4). The Debug Output displays anything from stdout or stderr that your program would output(such as print statements). The Debug Variables displays the live variables as they're beingassigned.

The red line in the editor (#5) moves as you step through your program. It is the line that willexecute next, and will stay centered in the editor window as you step through your program.

At the far left of the editor (#6), there is a blank space to the left of the line numbers. This iscalled the gutter. If you click in the gutter when the debugger is in a "Ready" state, you can addbreakpoints. A breakpoint is useful for many situations, such as if you have a longer script, andthere is a certain troubling section that is buggy. Instead of slowly stepping through yourprogram you would set the breakpoint (a red square will appear in the gutter), and then click"Run". The script will execute to the breakpoint, and the red line will stop, and wait for you tocontinue stepping through it.

The last feature you'll want to be aware of is the debug status messages (#7). These will showyou what the debugger is doing. For example, when it initially loads, or when you click"Save/Restart", it will be in an "Initializing..." state. When it's ready for your input, it will be"Ready". Some parts of your script will cause it to appear locked up, but it's really waiting forthe server to return a response from your script (a long sleep() statement could cause this, forexample).

In the screen shot above, you can see what the debugger looks like in the middle of running aprogram. The debugger is currently one step after the breakpoint that was set on line #13. You can see the 'print "Bonjour, World"' in the Debug Output, and the variables as they are inthat given state of the program execution.

At this point in the debug cycle, you could edit your file, and Save/Restart. You could continuestepping through the program, or you could Exit the debugger.


Using the Visualizer

The visualizer is a feature designed to help understand how a Python program is working at amore basic level. It let's you see what the python interpreter is doing as it steps through yourprogram, such as variables being assigned, objects being created, etc.

Generally, the visualizer is a good tool to use if you have simpler scripts that you'd like tounderstand. Some of the questions it will help you with are: "How does recursion work?", "Howdoes a function call work?", "How do various methods, such as append, work when workingwith lists?".

Starting the visualizer

In order to start the visualizer, open a python script that you're able to run. In the menu, therewill be a link with the title "Visualize". Click the "Visualize" link.

Once you've clicked the link, it will take from a couple of seconds, to a few minutes to load,depending on what your python script is doing. Something simple, like lighting a few LED's, orprinting out a few lines will load very quickly. One thing to watch out for is that you don't haveany infinite loops in your code, such as if you have a script that is designed to just keep runningwhile periodically checking the temperature.

The next screen you'll see is the following:

The toolbar (#1) allows you to step through your program. You can navigate any way you'dlike, forward, back, and jump to the start, or end.


The code (#2) is listed to the left. As you step through your program, you'll see two arrows inthe left gutter that will show you what line has just executed (green), and what will be executingonce you click "Forward" (red).

The right column displays the stack (#3) as your program executes. You'll see your variablesgetting assigned, objects being created, etc.

The bottom pane is your program output (#4). Anytime you have a print statement, or anyother type of output, you'll see it displayed in this section.

Here is a screen shot of how it looks while stepping through a program:

One thing to note about the visualizer is that it runs your entire script on the server, then sendsthe playback of your script to the WebIDE. It's not a real-time debugger (but the WebIDE hasone of those as well!). For example, if you have an LED that lights up in your program, it will lightup quick and then send back the response, and when you step through your program, the LEDwon't light up as it has already run.

Credit to the visualizer is given to Philip Guo at pythontutor.com (http://adafru.it/aVp). Weforked, tweaked, converted, and modified his open source creation to work as a streamlinedfeature within the WebIDE.


http://pythontutor.com

FAQ

Does the webIDE support python3?Not yet, but our goal is to eventually support it. It's mostly a matter of balancing the bug fixes

with the feature requests. That being said, we do accept pull requests! :)

Not yet, but our goal is to eventually support it. It's mostly a matter of balancing the bugfixes with the feature requests. That being said, we do accept pull requests!:) 

Can you install WebIDE if you have Apache web server already installed? If so how do you dothis?

The WebIDE will automatically fallback to using port 8080 in the installation process, if port 80 isin use by something like Apache. Alternatively, you can manually set the port by reviewing thenext question in this FAQ.

The WebIDE will automatically fallback to using port 8080 in the installation process, if port 80is in use by something like Apache. Alternatively, you can manually set the port by reviewingthe next question in this FAQ.

How do I change the http port the WebIDE is using?The default is port 80. This can be changed in two ways.

The easiest is navigating to http://raspberrypi.local/config (http://adafru.it/aRq), changing theport, and restarting your server (see installation (http://adafru.it/aRr) on how to restart yourserver).

A port is defined in config/config.js, but changing that file is only temporary. The reason theconfig/config.js file isn't permanent is that an update will overwrite it, erasing you changes.

If you can't access the /config page, because you already have something utilizing port 80, youcan permanently change it by running the following at the command line on your Pi:

The default is port 80. This can be changed in two ways. The easiest is navigatingto <a href="http://raspberrypi.local/config">http://raspberrypi.local/config</a><spanclass="pdf-short-link"> (http://adafru.it/aRq), changing the port, and restarting yourserver (see <a href="http://learn.adafruit.com/webide/installation">installation</a><spanclass="pdf-short-link"> (http://adafru.it/aRr) on how to restart yourserver). A port is defined in config/config.js, but changing that file is onlytemporary. The reason the config/config.js file isn't permanent is that an update willoverwrite it, erasing you changes. If you can't access the /config page, becauseyou already have something utilizing port 80, you can permanently change it by running thefollowing at the command line on your Pi: 

How do I fix OAuth errors signing into the Editor?These suggestions may work for you if you get an error in your browser similar to the

redis-cliHMSET server port 3000exit


http://raspberrypi.local/config

http://learn.adafruit.com/webide/installation

following:failed to obtain request token (status: 400 data: Could not verify OAuth request.)

The first thing to check is that the date for your Pi is set correctly. You can do this by typing'date' at the command line, and view the output. If the time and date isn't set correctly, you willget errors due to the way the OAuth protocol is designed.

Try re-setting your time by executing the following command on your Raspberry Pi, at thecommand line:sudo /etc/init.d/ntp force-reload

A final thing you can try is navigating to /setup, and entering your data from Bitbucket again.These suggestions may work for you if you get an error in your browser similar to thefollowing: failed to obtain request token (status: 400 data: Could not verify OAuthrequest.) The first thing to check is that the date for your Pi is set correctly. Youcan do this by typing 'date' at the command line, and view the output. If the time and dateisn't set correctly, you will get errors due to the way the OAuth protocol isdesigned. Try re-setting your time by executing the following command on yourRaspberry Pi, at the command line: sudo /etc/init.d/ntp force-reload A finalthing you can try is navigating to /setup, and entering your data from Bitbucket again. 

How can I fix my repository when it fails to commit or push to bitbucket?This can happen any number of ways, such as with an SD card that is bad, or if you shut your

system down while a commit or push is in progress, or any number of other ways.

You can find out what the real issue is by viewing the log file.

Open the terminal in the webide and execute the following: cd /usr/share/adafruit/webide/logs

Then execute the following command to view the last few commands from the log file: catoutput.log

You can also view the errors.log file: cat errors.log

If you see an error such as:

error: object file .git/objects/2c/e98048b95181870dbba33675f3d2bc1d995c47 is emptyfatal: loose object 2ce9804 (stored in.git/objects/2c/e98048b95181870dbba33675f3d2bc1d995c47) is corrupt

You can try fixing that by following this fix from Stack Overflow (http://adafru.it/c6g).This can happen any number of ways, such as with an SD card that is bad, or if you shut yoursystem down while a commit or push is in progress, or any number of otherways. You can find out what the real issue is by viewing the logfile. Open the terminal in the webide and execute the following: cd/usr/share/adafruit/webide/logs Then execute the following command to view thelast few commands from the log file: cat output.log You can also view theerrors.log file: cat errors.log If you see an error such as: <blockquotestyle="margin: 0 0 0 40px; border: none; padding: 0px;">error: object file.git/objects/2c/e98048b95181870dbba33675f3d2bc1d995c47 is empty fatal: looseobject 2ce9804 (stored in .git/objects/2c/e98048b95181870dbba33675f3d2bc1d995c47) iscorrupt</blockquote> You can try fixing that by following <ahref="http://stackoverflow.com/a/12371337/629189" title="Link:http://stackoverflow.com/a/12371337/629189">this fix from Stack Overflow</a><span


http://stackoverflow.com/a/12371337/629189

class="pdf-short-link"> (http://adafru.it/c6g).

Submit a Bug

Submit a Bug (http://adafru.it/aQ8)

© Adafruit Industries Last Updated: 2013-10-14 02:45:27 PM EDT of 21

https://github.com/adafruit/Adafruit-WebIDE/issues

webide.pdf

Documents

Transcript of webide.pdf