Основы робототехники

Home Automation With Arduino. and JavaScript!

Содержание

license

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

, 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.

You can download my own version of this project from GutHub Download!

Step 1: What You'll Need

Physical:

  • Arduino (UNO used with this project, but with some adjustments, almost any developer board will work)
  • LEDs (as much as you want to control)
  • Push buttons (at least three)
  • TIP41 or TIP42 (at least one)
  • Relay (at least one)
  • Photoresistor (at least one)
  • Temperature sensor (on this project I used TMP36, but many can work well)

Non-physical:

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:

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

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:

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.

One file will be called script.js and needs to contain the following:

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:

This will take care of draw a chart with the data we send, in this case is to show the live temperature of our home.

But now we have sockets on the client and not in the server, we need to go back there and add them to work properly, so go on.

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:

As you may see, we are now handling events from the client, retrieving messages and making the arduino react to them, dimming the LED, and turning on / off the living room and the other rooms lights.

After this, we need to emit events to the client to change the UI when getting data/changes from the arduino, so in our arduino code we will need to add and change some of the lines.

On the living room code:

On the other rooms code:

On the temperature measuring code just add the following line at the beginning of the callback on the .on("data". ) function:

And on the backyard light code:

That’s it, our code must work now, go to your command line and run the server

And go in your browser to http://localhost:3000, you should see an UI as the one shown in the attached picture, being able to interact with your Arduino with the UI and vice versa.

I attached my own script.js file so you can take a look.

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.


Источник: www.instructables.com