Menu

Remote Control Raspberry Pi LED from Web Browser

By Aravindan Chandrasekaran | Internet of Things

May 15
Raspberry Pi GPIO

One function that makes the Internet of Things the Internet of Things is remote control of devices, being able to trigger action from a remote location. This is otherwise known as remote configuration. Whether it’s a home, an office, or an industrial site, connected devices rely on some form of automation through sensors or machines and need a mechanism to control their operation remotely.

Note: This post was originally published in PubNub blog

In this blog post, we’ll build and demonstrate a simple remote configuration application, controlling a device from a web browser. We will build a small IoT simulation using Raspberry Pi and showcase the most common operation, switching on and off a remote device (in this case, Raspberry Pi LEDs).

Though this tutorial is simple, the core design pattern can be extended to large scale implementations, where you can trigger multiple devices simultaneously.

The full code repository is available here.

Hardware Requirements

For this demonstration, we will use the following hardware:

Software Requirements

We will use the following sdks and tools

    1. RPi GPIO , GPIO Python  library for Raspbian OS
    2. PubNub Python SDK
    3. PubNub Javascript SDK

Rasperry Pi 3 Project Design

We will create two subsystems. One will be the controller, a basic web application in the form of a web page which can display the current status of the device and send control messages to it, and the second one is the actual device simulated as a LED, and controlled via Raspberry Pi.

Web Application – Remote Control Web UI

The web interface will look something like this:

rpi-led

This is a very simple web page with a visual indicator for the device and a button to toggle the on/off state of LED.

Behind the scenes, we have the PubNub Javascript API that performs two operations upon receiving certain events.

  1. Sends a request message to toggle the state of the device.
  2. Receives response with the current state of the device.

Button Click Event

When the TOGGLE button is clicked, the webpage sends a Toggle request message to the device via ‘gpio-raspberry-control’  channel.

$('#toggle').click(function(e){
pubmsg = {  "req" : "toggle" };
pubnub.publish(
{ 
channel : 'gpio-raspberry-control' ,
message :  pubmsg
}
);
});

PubNub Channel Subscribe Callback Event

On receiving the toggle request, the Raspberry Pi toggles the state of the LED and sends a response back to the web page with the current state. Web page updates the visual indicator for the LED based on the received state information.

pubnub.subscribe({
channel: 'gpio-raspberry-control',
message: function(m){
console.log(m)
if('resp' in m) {
if('on' ==  m['resp']){
$('#led').removeClass('dim');
$('#led').addClass('glow');
} else {
$('#led').removeClass('glow');
$('#led').addClass('dim');
}
}
}
});

Raspberry Pi and LED

Here is the schematic for the Raspberry Pi connections to be used in this application.

Schematic-rpi

We are going to use the Raspberry Pi GPIO Python library to send the control messages to Raspberry Pi GPIO ports. This library works well with the python environment available by default with Raspbian OS.

The python code for driving the LED is executed as part of the PubNub callback on ‘gpio-raspberry-control’  channel

glow = False
#PubNub Channel Subscribe Callback
def gpioCallback(msg,channel):
global glow
respstring = ''
command = msg
print "Command is : " + str(command)
if('req' in command):
if(command['req'] == 'toggle'):
if(glow):
glow = False;
respstring = 'off'
else:
glow = True
respstring = 'on'
GPIO.output(16, glow)
respmsg = {"resp" : respstring }
pubnub.publish(pubnubChannelName, respmsg)

When a toggle request is received, the application checks the current state of the GPIO driving pin of the LED, toggles its state and then sends the new state back to the web application as a response message.

The exchange of messages between the web application and Raspberry Pi can be visualized as follows.

protocol_flow

And here is how the entire system works:
raspberrypi-led

Wrapping Up

This demonstration can be generalized as application layer service which sits on the top of an IoT stack. PubNub’s APIs can provide the middleware to manage the communication primitives of an IoT stack, while various such applications can be deployed on top to monitor & control the devices and visualize and analyze the data generated from them.


Disclosure: * Denotes an affiliate link – if you click and make a purchase we may receive a small commission.

Follow

About the Author

Aravind is a technology enthusiast. He is an expert in conceptualizing and developing niche apps around IoT and cloud computing and is aspiring to be a full stack developer.

>