1. Preparing the programming environment

First of all, let's prepare the environment of the underlying programming.

Node.js is a server-side JavaScript environment. Although it may be hard to imagine by words alone, in short, it is an execution environment that enables processing to be performed even in places such as browsers that are invisible.
Node.js can use packages using management software called npm. Think of packages as containers that summarize the functions necessary to connect humans and machines.

1. Installation of Node.js
   Installing on PC is easy, but installing to Raspberry Pi is a bit complicated.
   This time we use v0.12.15. Although it is not the latest version, we use the old one to use the ultrasonic distance sensor.
   Version control of Node can be done easily using the system nvm.
   （1）Installation of git

   $ sudo apt-get install git-core

   Now, you can use git.
   （2） Installation of nvm

   $ git clone https://github.com/creationix/nvm.git /usr/local/nvm

   $ source /usr/local/nvm/nvm.sh

   Now you can install nvm and enable it.
   （3）Installation of Node.js (Installation takes 1 hour or more.)

   $ nvm install v0.12.15

   Installation of Node.js is complete. Finally, check if the installation succeeded.

   $ nvm ls

2. Installing npm and packages
   Let's install npm this time after installing Node.js.
   （1）Installation of npm
   

   $ sudo apt-get install npm

   When you receive a confirmation message, please enter "y" to start the installation.
   （2）Installing packages
   We will use two packages "r-pi-usonic" and "socket.io" this time. "r-pi-usonic" is for connecting Raspberry Pi and ultrasonic sensor, "socket.io" is a package for asynchronous bidirectional communication.
   

   $ npm init

   Here are some questions, please press the Enter key for all questions.
   

   $ npm I -D r-pi-usonic socket.io

The environment for programming is now in place.

2. Programming of Raspberry Pi

1. Let's do the wiring before starting the programming.
   We use breadboard for wiring. Breadboard is like a base on which circuits can be made without soldering. Although the appearance is a plate with only holes vacant at even intervals, the inside seems to have electricity flowing like the yellow line in the figure. Let's not make a mistake as the role is also written on the ultrasonic sensor pin.
   Vcc ― 5V
   Trig ― GPIO18
   Echo ― GPIO17
   GND ― GND

2. （1）Please create the distance.js file.
   

   $ nano ~/Public/app/distance.js

   （2）Please create the following code.

   Click here for the code

   var usonic = require('r-pi-usonic'); //
   //
   var sensorConfig = {
   	echoPinGPIO:	17,
   	triggerPinGPIO: 18,
   	timeout:    	1000
   };
   /**
    *
    */
   //
   usonic.init(function (error) {
   	if (error) {
       	console.error(error)
   	}
   	else {
        	//
        	sensor = usonic.createSensor(
            	snsorConfig.echoPinGIPO,
            	sensorConfig.triggerPinGPIO,
            	sensorConfig.timeout
        	);
        	//
        	console.log( "Distance : " + sensor());
      }
   });
   
   
   

   close
   （3）Please execute after saving.

   $ sudo node ~/Public/app/distance.js

   It will be successful if a numerical value appears after "Distance:” Let's try to hold the hand in front of the sensor and change the value.
3. If you only measure the distance you can do with this code alone, but this time we will allow the browser to display the results.
   （1）Create app.js file.

   $ nano ~/Public/app/app.js

   （2）Please create the following code.

   Click here for the code

   /**
    *
    */
   var port     	= 3000; //
   var intervalTime = 500;  //
   var con	= null; //
   var sensor = null; //
   var timer  = null; //
   var io 	= require('socket.io')(port);
   var usonic = require('r-pi-usonic');
   //
   var sesorConfig = {
   	echoPinGPIO:   17,
   	triggerPinGPIO:18,
   	timeout:   	1000
   };
   /**
    *
    *
    */
   //
   usonic.init(function (error) {
   	if (error) {
       	console.error(error)
   	}
   	else {
       	sensor = usonic.createSensor(
           	sensorConfig.echoPinGPIO,
           	sensorConfig.triggerPinGPIO,
           	sensorConfig.timeout
       	);
   	}
   });
   //
   io.on('connection', function (socket) {
   	con = socket;
   	//
   	socket.on('start', function (msg) {
       	timer = setInterval(function () {
           	con.emit("sensor", sensor()); //
       	}, intervalTime);
   	});
   	//
   	socket.on('end', function() {
       	clearInterval(timer);
   	});
   });
   

   close
   （3）Please execute after saving.

   $ sudo node ~/Public/app/app.js

   　　

Now Raspberry Pi is ready to connect to the browser.

3. PC programming

Now that Raspberry Pi is ready to reflect the data in the browser, let's prepare the PC side next time.

1. Create a directory on the connected PC.
   

   $ mkdir -p ~/Sintyou
   $ cd Sintyou

2. Create html.index in this directory.
   

   $ nano index.html

3. Edit index.html
   
5. After saving, create index.js
   

   $ nano index.js

6. Edit index.js as follows
   
   Click here for the code

   /**
     *
     */
   var element = document.getElementById("distance");
   var start   = document.getElementById("start");
   var end   = document.getElementById("end");
   var socket  = null;
   var isStart = false;
   var host	="Please write the IP address of Raspberry Pi"; //
   var port	="Please write the port number of Raspberry Pi"; //
   var criteria       = 200;                                                 //
   //
   function init () {
   	//
   	start.addEventListener("click", function () {
       	if (isStart) return;
   	//
   	isStart = true;
   	
   	//
   	start.disabled = isStart;
   	end.disabled   = !isStart;
   	//
   	open();
   	//
   	socket.emit ('start', "");
    });
    //
    end.addEventListener("click", function () {
    	if (!isStart) return;
    	//
    	isStart = false;
    	//
    	start.disabled = isStart;
    	end.disabled   = !isStart;
   	//  
   	socket.emit ('end', "");
    }); 	
   }
   /**
    *
    *
    */
   function open () {
   	if (socket == null) {
       	//
       	socket = io(host + ':' + port);
       	//
       	socket.on('connect_error', function (error) {
           	console.error(error)
       	//
       	isStart = false;
       	//
       	start.disabled = isStart;
       	end.disabled   = !isStart;
    	});
    	//
    	socket.on('connect', function (con) {
        	console.log('connected!);
    	});
    	//
    	//
    	socket.on('sensor', function (value) {
        	//
        	height = parseFloat(value);
              height = criteria - height;
   
        	//
        	element.innerText = height.toFixed(2) + 'cm';
    	});
      }
   } 
   
   //
   init();
   

   close
7. Let's execute index.html after saving.
   When you push the Start button, the value obtained by subtracting the numerical value measured with distance.js from 200 appears. Let's set the ultrasonic distance sensor at the height of 2 m from the floor when the work so far is completed. If you want to raise the height to be installed, height should be measured correctly if you change the number "var criteria = 200" in index.js to the height you want to set.