Secondary Menu

Home Automation With Arduino... and JavaScript!

Introduction: Home Automation With Arduino... and JavaScript!

In this instructable (my first one actually), I'll guide you to make automation in your home with Arduino, yeah, not so new... But we will also include JavaScript, using Node.js and an awesome library to interact with Arduino called johnny-five (yes, as the little robot from the movie).

The automation is focused on controlling lights (some with LEDs and other with a bulb, also, one of them is dimmable), and a fan. You might know that turning lights and a fan on and off with a physical button is not actually ~automation~, that's why we are going to use a photoresistor, a temperature sensor, and also a web server with an user interface to control and monitor all together. Let's start!

It's important to say that this instructable is focused on the SOFTWARE side, not the hardware, so you need some basic electronics knowledge to build the circuit, but don't worry, it's really easy, this is an easy project, we will take advantage of the facility to use JavaScript with Arduino.

We need to set up Arduino to make it work well with this project, we'll see how in the next step.

Step 2: Getting Arduino Ready

As you may know, Arduino works with the sketch you upload to it, normally you write the code on the Arduino IDE, compile it, and upload it to the board, but with this Instructable you will run on live code with the board getting and posting data in two ways, so we need to set up the Arduino to be able to do it.

Open your Arduino IDE and an example named StandardFirmata, upload it to your board and that's it! Your Arduino is ready to interact with your computer via JavaScript.

We will work first on the server side, getting all the environment ready to interact between Arduino and the browser, so let's go to the next step and configure all.

Step 3: Getting Ready From the Server

First we need to start with a folder dedicated to the project, so, in your command line do this:

mkdir myRockingProject && cd myRockingProject #name it as you want
npm init #to work with node
mkdir public #here we will put the client (browser) stuff

You can download the package.json file I attached, put it on your project folder and in your command line run:

npm install

Then, create a file named server.js, we will put all our serverside stuff here, this is the main file we want to work with, because here is all the communication between node.js and Arduino.

If you created your own package.json with npm init, we will need to add the node modules that let us work well on the environment, so let's run:

npm install --save express johnny-five socket.io

That will install and let you work with the mentioned modules (express j5 and socket.io), you will be able to see a change on your package.json file including the following:

Note: We will not use socket.io right now, but we installed it to get it ready when the time comes.

Now, in our server.js file, we will call the modules to work with, first we need to use express, this will let us route the client calls to our files and interact with it and the server, so let's create our server:

Our server is ready to listen to the client requests and serve information to it, but we still with nothing to serve nor get to, and we don't either have communication with the Arduino.

The next thing is to setup the Arduino-server communication, we will first setup it on the server, so, with the help of Johnny-five library, a powerful JavaScript-Arduino bridge to enable controlling the board directly with JavaScript, we will set all we need to make our automation happen!

In the same file we were working (server.js) we will write the code we would otherwise write on the arduino IDE, so let's write the following:

So far, we are ready to interact with arduino via our server, and we could just build our circuit, run the code and it would work, but where's the fun with that? Everywhere, circuits are awesome, but anyway the objective of this instructable is to interact with the arduino using a web user interface, so let's go to the next step and create our UI.

Attachments

Step 4: Client Side (the Browser)

We will now work with our /public folder, there, we will add the index of our app and the JS files that will make it dynamic, so let's go:

First, create a folder named 'assets', and inside it, create two more named 'lib' and 'styles', on the /lib folder, put bootstrap, jquery, and the p5 files, these will help us approach our objective, bootstrap to look smooth, and p5 and jquery to add custom functionality and a chart to track the house temperature.

Then, in the main folder (/public) create a file named index.html, you can check mine and paste it if you want, and after ending the instructable customize it for you and have fun!

After you have your index file there needs to be also two javascript files, one of them to control the interface with jquery, and another one to create a chart showing the temperature on real time. Also, we will start working with socket.io at this moment.

Socket.io is a powerful JS library to build realtime web applications, we will take advantage of it and use it to emit events from the Arduino-server to the client and viceversa, you can check the socket.io documentation here and there are also many examples on how to use it. Let's continue to our files previously mentioned.

Here we are handling the UI events (click's and a slider) and with them emitting messages via sockets that will be received on the server and will do Arduino work based on them.

In the other file, which we'll name 'temperature_canvas_sketch' we will display the data we got from the temperature sensor with the help of p5.js, a great JS library based on Processing lang. So in our temperature_canvas_sketch.js file let's add this:

Attachments

Step 5: Sockets With the Server and Arduino Event Handling

Now we have our socket event handler / emitter on the client side, we need to make it work on server side, remember that we already installed socket.io module on the second step, so we only need to set it up adding the following lines to our server.js file:

Attachments

Step 6: Final Argument

I hope this instructable was clear for you all and that you will make it and apply yourself. I've got to say that all the code shown was for my particular case use, and this project was originally accomplished as a school subject project, but anyway I'm trying to apply it on my own house (wish me luck). Feel free (and I hope you will) to change the code as you needs are, if you have any doubt, or question you can comment below or contact me for more.

Future steps can be accomplished by you like:

Adding sensors or relays to control more stuff like turning on and of your TV, the fridge, knowing if there's someone at the door before even knocking or ringing the bell

Connect your Arduino to a raspberry pi to get your local server running all the time

Creating an app to your phone with the help of some Node.js frameworks