DEV Community: Hallessandro D´villa

Johnny Five - Controlling a Arduino Uno with JavaScript

Hallessandro D´villa — Tue, 12 Nov 2019 20:47:10 +0000

Sup guys, I’m back, this time to talk about Johnny Five, a JavaScript plataform for IoT and Robotic. In this post we will see how to control a Led by HTTP request.

Before we start, for this post It Is necessary that you have an Arduino and at least one Led.

Let’s start installing Johnny-Five and your requirements:

apt-get install nodejs-legacy
apt-get install build-essential
npm install serialport
npm install johnny-five

Now open your text editor and create a new .js file and paste the following code:

var five = require("johnny-five"),
    board = new five.Board();

board.on("ready", function() {
  // Create an Led on pin 13
  var led = new five.Led(13);

  // Strobe the pin on/off, defaults to 100ms phases
  led.strobe();
});

Connect your Arduino on PC, and the Led in Arduino this way:

Now on terminal, run the folowing command:

sudo node strobe.js

If everything ok, your Led will light up. :-D

Now let’s make things more fun. Create a folder in your machine and execute npm init on this folder. After install the Express, with the following command:

npm install --save express

Create a new JS file called controller.js, and in this file, import the Express and the Johnny Five:

const express = require("express");
const five = require('johnny-five'); 
const app = express();

Now create the following variables, to deal with de board and the status of Led:

var board = new five.Board();
var isReady = false;
var isOn = false;
var led;

Put your Express server to run, this way:

app.listen(3000, () => {
    console.log("Servidor rodando na porta 3000");
});

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "*");
    next();
});

Now define a route to receive GET Requests:

app.route("/")
    .get((req, res) => {
        toggleLed();
        res.json({status: isOn});
});

When the board Is ready, It’s necessary something to deal with it, for this add the following code on the controller.js:

board.on('ready', function() { 
    // Define the pin 13 to be used
    led = new five.Led(13);
    // Turn off the Led
    led.off();
    // save the actual state of the Led
    isReady = true; 
});

Now add the code for the toggleLed() method, called in the app.route.

function toggleLed () {
    // If the Led is on
    if (isOn) {
        //Turn off the Led
        led.off();
        isOn = false;
    } else {
        //Turn on the Led
        led.on();
        isOn = true;
    }
}

The complete code can be found on my GitHub here.

Now on terminal run the folowwing command:

sudo node controller.js

Access localhost:3000 on browser and see the magic happening.

To improve our experience, let’s create a client application for turn on/off the led. Create a new folder on your machine, and create the folder img, and the files index.html, index.css and index.js.

Inside the folder img, add the images here.

On the css file, add the following code:

.div-buttons {
    display: flex;
    justify-content: center;
    padding-top: 20%;
}

.buttons {
    width: auto;
    height: 140px;
}

.img-led {
    height: 70px;
    width: auto;
}

.title {
    display: flex;
    justify-content: center;
}

#text-led {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20pt;
    text-transform: uppercase;
}

body {
    background-color: beige;
    background-image: linear-gradient(to right,#e5e5ff, #ccccff);
}

Inside the html file, add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="index.css">
    <title>Led Controller</title>
</head>
<body>

    <div class="title"></div>
    <div class="div-buttons"></div>

    <!-- Used to made HTTP request -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

Now on the js file, let’s create a function to made get requests to our api, using the axios library, imported in our html file:

function consultarStatusLed(){
    let url = 'http://localhost:3000/';

    axios.get(url, conf)
        .then(function (response) {
            changeButtons(response.data.status);
        })
        .catch(function (error) {
            // handle error
            console.log(error);
        })
}

Now create a function to request the change of the state of the Led, and change the button on page, for this add the following code:

const $ = document.querySelector.bind(document);

function changeButtons(valor){
    if(valor == false){
        $(".div-buttons").innerHTML = `<input type="image" src="img/on.png" class="buttons" onclick="mudarStatusLed()">`;        
        $(".title").innerHTML = `
            <img src="img/led-off.svg" class="img-led">
            <h3 id="text-led" style='color:green'>Led Controller</h3>
            <img src="img/led-off.svg" class="img-led">
        `;
    }else {
        $(".div-buttons").innerHTML = `<input type="image" src="img/off.png" class="buttons" onclick="mudarStatusLed()">`;        
        $(".title").innerHTML = `
            <img src="img/led-on.svg" class="img-led">
            <h3 id="text-led" style='color:red'>Led Controller</h3>
            <img src="img/led-on.svg" class="img-led">
        `;
    }
}

function mudarStatusLed(){
    consultarStatusLed();
}

Lastly add a call to consultaStatusLed() on the end of the file:

consultarStatusLed();

Save everything and let’s test. Open index.html in a browser and click the on / off button a few times, if everything went well, the result will be as show in the video link below:

The image is terrible, but is what I have in the moment, hehehe.

Final Result

That’s all folks, until next time!

Quick Tip - Array.prototype.concat()

Hallessandro D´villa — Mon, 04 Nov 2019 21:02:35 +0000

Hello everyone, I’m back, this time with a quick tip about how to use the concat() method to merge arrays in JavaScript, so no time to waste, let’s get started.

The concat() method is used to merge one array with another array or element passed as parameter. As others JavaScript methods,concat() don’t change the original array, but instead returns a new array with all the changes. Let’s see a example:

const firstList = [1,2,3];
const secondList = [4,5,6];

const result = firstList.concat(secondList);
//The result will be equal to [1,2,3,4,5,6]

If you pass two or more diferents arrays as parameter to concat(), this will works to and the elements will be add in the new array, following the order of the parameters.

const firstArray = [1];
const secondArray = [2,3,4];
const thirdArray = [5,6];

const result = firstArray.concat(secondArray, thirdArray);
//The result will be equal to [1,2,3,4,5,6]

We can pass too, single values or more complex elements like objects and these elements don’t need to be of the same type, we can concat a array of numbers with strings, there’s no problem.

const firstArray = [1];
const secondArray = [2,3,4];

const stringNumber = "5";

const objectTest = {"name": "Batman", "super_power": "Money"};

const result = firstArray.concat(secondArray, stringNumber, objectTest);
//The result will be equal to [1,2,3,4,"5",{"name": "Batman", "super_power": "Money"}]

And for last, we can merge nested arrays, like this:

const firstArray = [[1]]
const secondArray = [2, 3]
const thirdArray = [4, [5,6,7]]

const result = firstArray.concat(secondArray, thirdArray);
//The result will be equal to [[1], 2, 3, 4, [5,6,7]]

We can add a new value to one of the nested arrays, like this:

result[0].push("0"); 
//The result will be equal to [[1, "0"], 2, 3, 4, [5,6,7]]

So, this is all for now folks, thanks for reading and for more posts you can check my personal blog hallessandro.github.io.

Create a HTTP Server With Python

Hallessandro D´villa — Fri, 06 Sep 2019 14:36:13 +0000

Hi, my name is Hallessandro, I am a software developer that currently works and live in Brazil, and in this post I will show you how to create a HTTP server using Python, so let’s get start.

Requirements

For this post, you will need Python 3.x installed in your machine and some text editor or IDE of your preference.

Our HTTP server will server a simple static HTML web page, this means that every time someone made us a request, the HTTP server will return a HTML page as response.

First of all, let's create a new HTML file, that will be used every time a request was made. For this create a index.html file and put the following code inside it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My HTTP Server</title>
    <style>
        .img-div {
            display: flex;
            justify-content: center;
        }
        h2 {
            text-align: center;
        }
    </style>
</head>
<body>
    <dir class="img-div">
        <img src="tenor.gif" alt="Just a dance image">
    </dir>
    <h2>Welcome, and thanks for visiting our website!</h2>
</body>
</html>

I put a image on our page, so click here and download the image called tenor.gif. You need to put the image in the same folder of the HTML file, or change the src value on the img tag.

Create a HTTP server

For create a HTTP server in Python, you will need import two modules, http.server and socketserver

import http.server
import socketserver as socket

Now we need a way to deal with the http request, and for this, to our luck, Python has the http.server.SimpleHTTPRequestHandler, a simple handler that serves static files from the current directory. For use this guy, make something like this:

handler = http.server.SimpleHTTPRequestHandler

We have a handler to deal with the http request, but now we need to put our server on air, for this we need to use the TCP protocol. In Python is very simple (Like everything else in Python) to open a TCP connection, all we need is use the socketserver.TCPServer class., like this:

socketserver.TCPServer((IP_ADDRESS, PORT), Handler)

As you can see, the TCPServer receives three arguments, the ip address and port as a tuple, and the handler, that in our case is a instance of SimpleHTTPRequestHandler.

The Ip address is not a required information, you can pass a empty string, this means that the server will be listening on any network interface available.

Now all we need to do is put the server to run, for this, inside the TCPServer, we need to call a method called serve_forever() from the TCPServer class, this method start a server and begins listening and responding to incoming request, for use them, make something like this:

with socket.TCPServer(("", PORT), handler) as httpd:
    print("Server is running on port ", PORT)
    httpd.serve_forever()

Now let's test, for this, run the python file from your terminal, if everything is ok, you will see something like this, on the console:

Server is running on port  8090

Now open a web browser and access the url localhost:8090, a page like this will be show:

If you see on your console will be a log to the GET request receive, generated when you access the page on web browser.

127.0.0.1 - - [22/Jan/2019 22:27:32] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [22/Jan/2019 22:27:32] "GET /tenor.gif HTTP/1.1" 200 -

The complete code for this example is this:

import http.server
import socketserver as socket

PORT = 8080
handler = http.server.SimpleHTTPRequestHandler

with socket.TCPServer(("", PORT), handler) as httpd:
    print("Server is running on port ", PORT)
    httpd.serve_forever()

In a real case your server will not just server static html files, but for example purpose, this is a good way to understand how to do this in Python, so for now is all folks, thanks for reading, feel free to contact me and until next time guys.