There are four components in this system:
- Breadboard with LEDs attached to GPIO on a Raspberry Pi
- Web application on Raspberry Pi
- Websockets server application on Raspberry Pi
- Internet browser
- A WebSocket is then used to transmit LED ON/OFF commands to the server.
Connect the LEDs to your Raspberry Pi GPIO
We start by assembling our LEDs on a breadboard as shown in schematic below:
Note that in this example we have chosen to connect our LEDs to pins 16 and 18 on the Raspberry Pi.
You can verify that LEDs are working by running the python script below:
import RPi.GPIO as GPIO
#Set GPIO pins as outputs
#Switch GPIO pins ON
#Wait 5 seconds
#Switch GPIO pins OFF
#Reset GPIO pins to their default state
Get a Remote Shell
To get remote access to your Raspberry Pi please visit www.dataplicity.com(free sign up) and follow the installation instructions to get remote terminal access to your Pi. When done, locate your device in your dataplicity account and click "Enable wormhole". You'll then need the wormhole address which can be found just above the remote shell (see below).
Run the Project
Step 1 : Click the link below to download all the code necessary for this project.
Step 2 : Run the server.
If you don't have tornado framework installed for python please type in the command below.
sudo pip install tornado
Open the "ws-webio" directory in terminal and run the command below.
sudo python server.py
When done you should see a printout informing you that Tornado server has started.
In your browser type in:
If the webpage loads correctly you should see it in your browser and get additional printouts in your terminal.
Click the buttons on the page to switch ON/OFF the LEDs !
Taking a closer look
Now that you've got the project set up and running if you would like to know a bit more on how it works "behind the scenes" please read further.
> Inside the web browser
On page load:
After all the files have loaded, the browser component looks like this.
Note there are two communication channels with the Raspberry Pi - one for the static files and one for the long-running WebSocket command channel.
> Inside the application server (Tornado)
In this example, the web application server is running inside a Python web framework called "Tornado" (see http://www.tornadoweb.org/en/stable/). All of the files are prepared in the "ws-webio" folder, with "server.py" hosting the receiving end of the WebSocket.
The diagram below illustrates what is happening inside "ws-webio" folder when the "server.py" application is running, and how each piece of code interacts with each other.
- An HTTP Server (part of the Tornado framework). This server listens for client connections and forwards them to the core application.
- A Tornado application. This sits inside the HTTP Server and maps given routes to "handlers" for further processing.
- Application settings which tell the application where to find resources, such as the static files we intend to present to the web browser.
- Handlers. This is where the magic happens: when your browser sends a request or an event, handlers are where these requests or events will be processed. In this application, the handlers are responsible for both returning the static files to the web browser upon request, and also for operating the receiving end of the WebSocket and controlling the local GPIOs.