loading

Ever wanted to create a way to control your garage door using your phone maybe collect data and view it from your laptop. There is a single board computer called the Beaglebone Black which is an extremely powerful device that allows you to control its GPIO pins in order to interact with real world items such as motors, LED's, Lamps, etc. The Beaglebone is just like a raspberry pi board but much more powerful. The Beaglebone community is not as huge as the raspberry pi's so be warned for the lack of tutorials.

As I was searching around the internet for a solution to control my Beaglebone Black from my laptop using a web page, many tutorials popped up using the Beaglebone's bonescript library and the socket.io library using the cloud 9 ide. As I followed tutorials and looked at peoples code I grew frustrated due to the fact that the cloud 9 ide kept crashing, my lack of understanding of javascript and also the lack of flexibility of each tutorial (every tutorial forced you to use a predefined amount of GPIO's). I was familiar with python and my friend introduced me to web.py which is a great web framework used to develop web apps. I also used Adafruit's Beaglebone Black GPIO library to control the individual pins of the Beaglebone Black.

What you will need:

  • A computer
  • SSH terminal such as PuTTY or use SSH on the terminal(For Mac's and Linux, Windows does not have built in SSH)
  • A Beaglebone Black connected to the computer via USB
  • An internet connection to the Beaglebone Black
  • (optional) A SFTP client

Step 1: Install the Required Python Libraries

We need to install two libraries that are not standard modules in python 2.7. The libraries are the Adafruit BBIO and WebPy libraries. We need to access the Beaglebone using SSH. I decided to use the PuTTy terminal and access it using the IP address of the beaglebone, mine is 192.168.7.2 yours can be found on the beaglebone start.html. If you are using Angstrom type in:

  • opkg update && opkg install python-pip python-setuptools python-smbus
  • pip install Adafruit_BBIO
  • pip install web.py

If you are using Debian or Ubuntu:

  • sudo apt-get update
  • sudo apt-get install build-essential python-dev python-setuptools python-pip python-smbus -y
  • pip install Adafruit_BBIO
  • pip install web.py

To test if the libraries are installed properly type in:

  • python
  • import web
  • import Adafruit_BBIO.GPIO

If no errors occur on the python console then you have installed the libraries properly and we are ready to code.

Step 2: The Python Code

The python code is fairly easy to understand if you are familiar with using python, if you are a beginner to programming you might have some trouble understanding parts of the code.

The documentation of the 2 libraries can be found here:

I have written code and commented it so you to understand and tinker with it.

Step 3: Creating the Web Page

If you the python code I attached, you can see me talking about GET request. A GET request is basically a way for a webpage to communicate with a server. In order to add, delete and switch the outputs we are using Jquery to do some basic get requests. I have attached an html page that does just that and I have also commented the code for your convenience.

Due to downloading issues, please copy and paste the code from my github account

Step 4: Transferring the Python File to Your Beaglebone

You can transfer the main.py file via command line but to transfer files easily I am going to use WinSCP(you can use any sftp client) which you can download here. There is Cyberduck for mac users but since I am a PC user I do not know which one is the best so you have to google it. The process is simple just drag the main.py file in the Desktop or any other directory you choose.

Step 5: Running the Server

Running the server is easy just use SSH using PuTTY or your terminal and change your directory to the main.py directory. Type in:

  • python main.py 1234

Now what we just did is ask python to run the main.py file at port 1234

Step 6: You Have Control!

Now go to the control.html file and open with google chrome or any other browser you use, you will have a web page with 2 text boxes and 3 buttons. The pin number text box asks for the pin number like P8_10 or P8_29, etc. You need to have the name filled out in order to use the delete and switch buttons. Now that you have web control you can use this example in order to create a more advanced panel. Maybe use database capabilities to use your Beaglebone Black as a data logger or use it for home automation, the possibilities are endless. If you like this instructable then please vote for this project on the coded creations contest and also favourite this project. Thanks for reading this instructable and keep on hacking! :)

<p>Hi, </p><p>Nice project.</p><p>But why can't I download the control.html file ?</p><p>Greetings</p><p>Erik</p>
<p>Hi, I think the instructables website treats the javascript code in the webpage as a security threat so the best way to get around it is to access my github ControlApps/JqueryControl.html. here is the github page <a href="https://github.com/vatdaell/Beaglebone-Home-Automation" rel="nofollow"> https://github.com/vatdaell/Beaglebone-Home-Autom...</a><br></p>
<p>Also, if you're as silly as me and think you will type out the screenshot don't.... it is incomplete!</p><p>&lt;!DOCTYPE html&gt;</p><p>&lt;html&gt;</p><p>&lt;head&gt;</p><p>&lt;script type=&quot;text/javascript&quot; src = &quot;https:code.jquery.com/jquery-2.1.4.min.js&quot;&gt;</p><p>&lt;script&gt;</p><p>&lt;script type=&quot;text/javascript&quot;&gt;</p><p>var url = http:192.168.7.2:1234</p><p>$(document).ready(function(){</p><p>$(&quot;#switch&quot;).click(function(){</p><p>var name = $(&quot;#txt&quot;).val();</p><p>$.get(url+&quot;sw?name&quot;+name)</p><p>}</p><p>);</p><p>$(&quot;#delete&quot;).click(function(){</p><p>var name = $(&quot;#txt&quot;).val();</p><p>$.get(url+&quot;delet?name=&quot;+name);</p><p>$(&quot;#button&quot;).click(function(){</p><p>var name = $(&quot;#txt&quot;).val();</p><p>var pin = $&quot;#pin&quot;).val();</p><p>$.get(url+&quot;add?name=&quot;+name+name&quot;&amp;pin&quot;+pin);</p><p>}</p><p>);</p><p>}</p>
<p>Hi Vatdael,</p><p>I'm going through your tutorial and noticed the following:</p><p><a href="https://github.com/vatdaell/Beaglebone-Home-Automation/tree/master/Server" rel="nofollow">https://github.com/vatdaell/Beaglebone-Home-Automa...</a></p><p>There is no control.html file here...</p><p>The link does not work <a href="https://github.com/vatdaell/Beaglebone-Home-Automation/blob/master/ControlApps/JqueryControl.html" rel="nofollow">https://github.com/vatdaell/Beaglebone-Home-Automa...</a></p>
<p>I wanted to try it out but the &quot;control.html&quot; file has bad content... Can you upload the correct one?</p>
did you run the server on the beaglebone? There is a cross domain problem but it usually works even with that error. I'll try to fix it
<p>Inside the html file you've attached there's only error message:</p><p>&lt;html&gt;&lt;body&gt;&lt;!--fst--&gt;&lt;h1&gt;403 Forbidden&lt;/h1&gt;<br>Request forbidden by administrative rules.<br>&lt;/body&gt;&lt;/html&gt;</p>
<p>Hey I have the code for a similar project. The control.html is located under ControlApps/JqueryControl.html. here is the github page https://github.com/vatdaell/Beaglebone-Home-Automation</p>
<p>To confirm, will this only give control to inputs while on the home network or could this be remotely accessed, (say I wanted to open / close my garage door from my phone while not at home)?</p>
I haven't setup the network in this tutorial to allow you to access the beaglebone remotely so this is just on the home network
<p>I've always wanted to try out a beaglebone. This looks great! </p>
<p>Thank you! It is fairly easy to setup, if you have linux experience then you will love it!</p>

About This Instructable

8,424views

27favorites

License:

More by Vatdaell:Beaglebone Black Web Control Using WebPy 
Add instructable to: