Control an LED from the Internet with Raspberry Pi – Node.js – ably.io – Part 1

Update: 12/4/2017

I’m going to be adding some additional posts that describe all the feature of http://www.internetofcoolthings.net/ably/.

Videos

Part 1 (This video starts at the header ‘Create a directory for your code’).
Note if you have not set up NodeJs and Javascript on your Pi you’ll need to follow each of the headers up to ‘Create your directory…’ and then you can follow on the video. For those who took our workshop – you already have Nodejs and JavaScript installed.

Part 2 (This video starts at the header ‘The Code’)

Part 3 (This video starts at the header “Create a web site”)

Part 4 (Run your server on startup)

Overview

In this post we will remotely toggle an LED connected to a Raspberry Pi. Remember if you can toggle an LED you can control anything.

You don’t need experience in any of these technologies to complete this tutorial. I will supply all code.

We will program the Pi in JavaScript running on Nodejs. This code code will listen for commands from our web page.

We will program our webpage in html and JavaScript running in the browser. This code will send commands to our Pi to toggle the LED on and off. We will be using Microsoft Azure to host our web page for free. Or if you have you own web space – you can use that.

We will use ably.io to stream the commands from our web page to our Raspberry Pi in what seems to be real-time – Ably is fast. We can also stream data from our Pi back to our web page. You will need to create an Ably account – It’s free for the basic stuff we will be doing and you don’t need a credit card to sign up.

We will use the node GPIO package onoff to toggle the pins on our PI thus turning our LED on and off.

Parts

I do not derive any income from these links. Find cheapest price with good reviews. Also look around for other Pi packages. Some will come with an SD card included – some even with an Operating System installed.

Raspberry Pi (2 or 3)

Micro SD Card

LED, Resistor & Breadboard

SD Reader/Writer

Installing Noobs and Nodejs on your Raspberry Pi

If you want a quick setup see below. If you want a detailed version DavaJ does a great job. If you follow Dave’s steps you can then skip  down to ‘Create a directory for your code’ section.

Install Raspbian

  • Download/Install NOOBS directions here
  • Insert micro sd card (connectors up) into the the Pi slot it fits best into -)
  • Hook up keyboard, mouse and monitor (and Ethernet if you have it). If not go to upper right of screen once your install is done to connect to your wireless router
  • Plug it in
  • Choose ->Raspbian -> Install (Watch for any prompts… I don’t know make a decision)
  • Update Config info – Raspberry Pi Icon (upper left) -> Preferences -> Raspberry Pi Configuration -> Localization -> Set all to language/location of your choice. Note you can also change your computer name and password if you like under the System tab. Probably a good idea…

Update Pi Kernel and Software

Open terminal window – Icon top of screen that looks like a ‘terminal window’
Type the following commands (wait for first to finish before typing second)

  • $ sudo apt update
  • $ sudo apt full-upgrade

Install NodeJs using NodeSource.com

Note: I have been using nodesource for a while now and trust their service. Whether you do is up to you. Type the following 2 lines into your terminal windows.

NodeStep1

  • $ sudo apt install nodejs

NodeStep8

Create a directory for your code

Open a terminal window and type the following two commands to make and then change to a directory.

NodeStep3

Create a package.json file

This file will contain information about your project and any files your project depends on. Type the following into your terminal window. You can open package.json and change ‘index.js’ to ‘listener.js’ if you like. No need to as we’ll be changing the name of ‘listener.js’ in the next lesson and modifying your package.json file.

NodeStep4

Install onoff – control Raspberry Pi pins

Type the following into your terminal window.

NodeStep5

Install Ably – pass data from our webpage to Pi and back

Type the following into your terminal window.

NodeStep6

Wire up the Pi

Connect the black wire to ground on your Pi to the shorter lead on your LED
Connect the red wire to GPIO 27 on your Pi and to one end of your resistor
Connect the other end of the resistor to the longer lead on your LED
Note there are plenty of tutorials out there that will show you how to calculate the proper size resistor for your LED. You can also live without the resistor for some quick tests, on and off just don’t leave the LED on very long without a resistor or it will burn out.

rasbperry-pi-3-led-ably

Test from terminal window

Type the following lines into your terminal window to turn the led on and off

NodeStep7

The Code – download here

We can now write the code we need to toggle our LED remotely. This will consist of two parts:

  •  JavaScript – running in nodejs on our Pi – which listens for ably commands and toggles the LED
  • Html page with JavaScript which will send the commands

Pi JavaScript (Listener)

Every new ably.io account come with a Sandbox key and channel by default. We will be using both here.

  • Choose Pi icon (upper left) -> Programming -> Geany
  • Type the code below with your Sandbox key included (case matters…!)
  • Save the file as listener.js in  /home/pi/nodePi directory

 

listener

Test

Let’s do some testing before we move on to writing the Html/Javascript code to send messages.

Open a terminal window and type the following to run our listener.js file

NodeStep9

If you don’t have any file errors your cursor will move to the next line and wait for commands. If you do have errors in the file your Pi will tell you. Fix them and try again…

Now that our listener is running we can write some commands to test

Open a second terminal window and type the following commands with your sandbox key

NodeStep10

Fun stuff… Your LED should have toggled on and off. If not the fun actually begins – debugging.

  • Check your LED connections. Are you using the right pins?
  • Check each line of code. Is it exact? Case counts – ‘Sandbox’ != ‘sandbox’…

Create a Web Site

    • Browse to this link to create Azure account. You do not need to be a student to create a free account.
    • Once you have an account – create a web site.
      azure-web-app-steps
    • Html Page(Sender)

      Next we’ll create a web page to allow us to toggle our LED from anywhere we have an internet connection.

      You can write this code on your main computer or on your Pi. Notepad works just fine as an editor or if you have an Html editor you can use that.

    • Create a file in notepad called LightToggle.html
    • Add the following code and save

      LedOnOff

      Upload files

    • Upload the html file to your page
      • Browse to: https://{sitename}.scm.azurewebsites.net/DebugConsole
      • Navigate to: site/wwwroot
      • Upload the html file
    • Browse to: http://{sitename}.azurewebsites.net/LightToggle.html
    • Enjoy

      Notes:

      This is great but it would be useful to have the webpage displays the state of your system in realtime. In the next post we’ll add some code so the light behaves like the one at http://www.internetofcoolthings.net/ably/

      Notice the first time you browse to the page the icons display the state of the Pi – (led, door, temp). Also if you open two (any number) browser windows you’ll notice each page updates when you change the state by clicking a button in any of the windows.

      There are more advanced way to create a reactive system but this is simple to understand and works.

Advertisements

2 thoughts on “Control an LED from the Internet with Raspberry Pi – Node.js – ably.io – Part 1

  1. Pingback: RealTimeWeekly | RealTimeWeekly #159

  2. Pingback: Control an LED from the Internet with Raspberry Pi – node.js – ably.io – Part 2 | Internet of cool Things

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s