Tuesday, February 22, 2011

Controlling Big, Mean, Devices.....With Javascript!

It amazing how far from the browser javascript has come with server side technologies like NodeJS. Now we can even control things outside of the browser or the server...How about electricity? Using an arduino it is now possible to control things with javascript outside of your computer. To do this you will need the following things:

  1. A Relay Control Board:
    http://www.sparkfun.com/tutorials/119

    http://www.instructables.com/id/Arduino-Controlled-Relay-Box/

  2. An Arduino http://arduino.cc/en/Main/ArduinoBoardUno

  3. Knowlege of javascript and git.

  4. A working install of NodeJS NPM and the Arduino software.



Yeah, I know this is alot of requirements but you gotta pay to play. I am not going to go over these things either, search the web and you can find much more info then I could type in this blog post, and plus I want to get to the code!

First thing is first. I am going to make a new folder to hold all my js code lets call it "PowerSwitch". I am going to create a directory "deps" under "PowerSwitch" cd into the "deps" directory then clone the node-arduino project. This is a project created by the guys at uxebu to control an Arduino over a serial port via NodeJS.

git clone https://github.com/tobeytailor/node-arduino.git

For whatever reason (I am not sure) I cannot get the "node-serialport" submodule to init. When I do:

git submodule init

In the node-arduino folder I get:

No submodule mapping found in .gitmodules for path 'deps/node-serialport'

No bother though we can install node-serialport from NPM which is even easier anyways. We will update the reference in code later.

npm install serialport

Now that we have the node-arduino library we have to upload the Arduino code to the arduino. Ok. Ok. I lied this is not ALL javascript but all you should need to do is upload this processing script to the Arduino one time. This script basically accepts commands over the serial port. You can view more detailed on this process here http://arduino.cc/en/Guide/HomePage. Overall here are the steps:

  1. Plug in Arduino to your computer.

  2. Start the Arduino software

  3. copy the contents the file in PowerSwitch/src/node.pde to the editor in the Arduino software

  4. Press the upload button.



You should see "Done uploading" if everything was successful. Now its time for some javascript code. First thing we will need to do is update arduino.js in PowerSwitch/deps/node-arduino/lib. Change this:

to:
. This will change the arduino library to reference the serialport library we installed via NPM instead of the library that was installed as a submodule relative the node-arduino library. Next lets create a file called server.js and put copy this code into the file.

This code depends on express. If you dont have express install it.

npm install express

Now create a new folder in PowerSwitch called public and put this index.html file there



Now run server.js

node server.js

Now hook your relay control board to your arduino. I used pin 12. Now plug in your appliance to relay controlled outlet. Then navigate to http://localhost:3000 and you should see a button click the button and the power should turn on. click it again and the power should turn off. Now I noticed a few issues with the node-arduino library. If it does not work the first time just stop and start the app a few times and you should eventually get it work. I have forked the project and I am hoping to get all the issues fixed.

Here is a video of it in action.

Monday, February 21, 2011

Important Concepts in Javascript: Closures

The other day I asked "What are the most important javascript concepts to know for a job interview?". The most common answer was Closures so I figured I would google it. From wikipedia:
In computer science, a closure is a first-class function with free variables that are bound in the lexical environment.

I know, wha? I think after a few hours on wikipedia I think I finally came up with a code snippet that illustrates that statement.

Still confused? I think mozilla explained it the best:
A closure is a special kind of object that combines two things: a function, and the environment in which that function was created. The environment consists of any local variables that were in-scope at the time that the closure was created.

and
A closure lets you associate some data (the environment) with a function that operates on that data.

Ok so why do I care?
Well if you have ever done any web programming in javascript you have probably been using this for years without even knowing it. Lets take a look at binding a click event in jQuery:

Also if you have ever created a javascript objects using the module pattern:


Closures are something that javascript programmers use everyday. To most it comes second nature and you may not even have to think about using them. The simplest definition I can think of is: A closure is when you return a function from within a function and the inner function has access to the environment of the outer function(s) OR when you pass in a function as an argument when creating a callback. I hope I helped clarify this for some people. Please leave a comment if you have a suggestion to improve this article. To find more info check out:

https://developer.mozilla.org/en/JavaScript/Guide/Closures
http://blog.morrisjohns.com/javascript_closures_for_dummies.html