Raspberry Pi(Web 환경 원격 제어): node-js-coding-ex

node.js coding example

Node.js를 이용한 원격 제어(Remote control) Coding 예

Node.js(HTML, JavaScript 언어에 대한 이해 필요)를 이용한 프로그램을 이해 하는데 도움이 되는 기본 프로그램 예

필요한 배경 지식
디지털 시계 예
Checkbox의 Check 상태에 따라 Server 측의 LED를 제어하는 프로그램 예
Drop-down list(select)를 이용한 제어
예약된 시간에 동작하는 장치(급수 제어 시스템) 예

필요한 배경 지식

HTML: Web pages 작성에 필요한 Markup language
JavaScript: HTML과 Web의 Programming language
Node.js: 원격제어를 가능하게 하는 Web server를 구성하고 JavaScript 언어를 사용 할 수 있게 한다.
Linux OS: Raspberry Pi의 OS 가 Linux 이다.

디지털 시계 예

Checkbox 내 Check 위치를 회전 시키는 프로그램 예: clock-checkbox-rot.html

디지털 시계를 이용하여 일정한 시간 간격으로 Checkbox 내 Check 위치를 회전 시킨다.
학습 포인트

Date() 함수의 이해
setTimeout() 함수를 이용한 일정 주기 발생
Web page에 Digital 시간 출력 하기
JavaScript를 이용한 Checkbox 값 테스트와 설정 하기
여러 개의 Checkbox를 Array로 처리(for 문 또는 while 문으로 처리) 하기.
Button를 이용한 제어

Checkbox 내 Check 위치를 회전 시키는 Web Page 예

실험 방법

위에 있는 clock-checkbox-rot.html File 링크를 클릭하여 내용을 읽어 보고, 이 패이지를 복사하여 clock-checkbox-rot.html을 만든다.
clock-checkbox-rot.html File을 실행(더블 클릭) 한다.
좌, 우 회전 방향을 제어하는 버튼을 Click 하며 Check의 회전 방향을 관찰 한다.

Checkbox의 Check 상태에 따라 Server 측의 LED를 제어하는 프로그램 예

필요한 소프트웨어 Tool: Node.js, Express, onoff Module

Node.js 설치하기를 참고 할 것.
Express 설치 하기를 참고 할 것.
onoff Module 설치 하기를 참고 할 것.

프로그램 예

AJAX와 HTML DOM을 사용한 프로그램 예

Server 측의 프로그램 예: checkbox-led.js
Client 측의 프로그램 예: checkbox-led.html

jQuery와 AJAX, HTML DOM을 사용한 프로그램 예

Server 측의 프로그램 예: checkbox-led-jQuery.js
Client 측의 프로그램 예: checkbox-led-jQuery.html

학습 포인트

GET, POST Method를 사용한 Client와 Server 사이의 Data 송수신에 대한 이해
Checkbox의 상태를 대응하는 문자열로 변환하기. Client와 Server 사이의 Data 송수신은 기본적으로 문자를 이용 한다.
Server 측 GPIO Pin의 상태를 문자열로 변환하기.
HTML 문서에서 버튼을 이용한 JavaScript 함수 실행 하기.
문자열 정보를 이용 하여 장치를 제어하기.
불규칙한 번호로 배열된 GPIO Pin를 Array로 처리 하기

Checkbox의 Check 상태에 따라 Server 측의 LED를 제어하는 프로그램 Web Page 예

checkbox-led.js 프로그램

// express Module을 Including 한다.
const express = require('express');
// express Object를 생성 한다.
const app = express();
const bodyParser = require('body-parser');
//src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js";
// Create application/x-www-form-urlencoded parser
const urlencodedParser = bodyParser.urlencoded({ extended: false })
// create application/json parser
const jsonParser = bodyParser.json()
// Include onoff to interact with the GPIO
const Gpio = require('onoff').Gpio;

const serverPort = 2880;

// LED 제어에 사용하는 GPIO output port pin을 정의한다.
let LED1 = new Gpio(09, 'out'),
  LED2 = new Gpio(25, 'out'),
  LED3 = new Gpio(11, 'out'),
  LED4 = new Gpio(08, 'out'),
  LED5 = new Gpio(07, 'out'),
  LED6 = new Gpio(05, 'out'),
  LED7 = new Gpio(06, 'out'),
  LED8 = new Gpio(12, 'out');

// LED 제어에 사용하는 GPIO output port를 Array로 처리하기 위함.
let leds = [LED1, LED2, LED3, LED4, LED5, LED6, LED7, LED8];

// 이 서버에 checkbox-led.html이 url로 전달 되는 경우 checkbox-led.html File을 전송 한다.
// 예: Client Page 에서 localhost:2880/checkbox-led.html로 접속 하면
//    checkbox-led.html 페이지가 Client Page에 표시 된다.
//    만약 등록된 Domain Name이 있는 경우. Domain Name:2880/checkbox-led.html로 접속 한다.
app.get('/checkbox-led.html', function (req, res) {
   res.sendFile( __dirname + "/html/" + "checkbox-led.html" );
})

// 현재 LED의 설정 상태를 읽어 Checkbox에 표시 하도록 전송 한다.
// 전송 Format:  L:************E , *: O(on) or C(Off)
app.get('/getLedStatus_AJAX', function (req, res) {
	// LED 상태 전송 시작을 표시하는 문자(L:)
	let ledStatus = "L:";
		// LED Port의 상태를 읽어 문자열에 추가 한다.
		for (let i=0; i < 8; i++) {
			ledStatus += leds[i].readSync(); // Get LED status
		}	
		// LED Port의 상태 문자열의 끝을 표시하는 문자(E)
		ledStatus += "E";
	//console.log('ledStatusStr:', ledStatus);
	// LED Port의 상태를 표시하는 문자열을 Client에 전송 한다.
	res.end(ledStatus);
})

// 이 서버에 setLed_AJAX이 전달 되는 경우 실행 되는 post Method 이다.
// Web page로 부터 받은 Checkbox의 상태(O: On, C: Off)에 따라 LED를 제어한다.
// Web page로 부터 전송 받는 Fromat 예: LED:CCOOCCOO
app.post('/setLed_AJAX', jsonParser, function (req, res) {
	//console.log('req.body:', req.body);
	// jsonParser을 사용하여 JavaScript Object로 전달된다.
	let reqObj = req.body;
	let checkBoxStatus = String(reqObj.LED)
	// Client로 부터 전송된 Data를 이용 하여 LED 상태을 설정 한다.
	for (let i = 0; i < 8; i++) {
		// 해당되는 위치의 문자가 "O" 인 경우 LED를 Turn on 한다.
		if(checkBoxStatus.charAt(i) == 'O') leds[i].writeSync(1);
		// 해당되는 위치의 문자가 "C" 인 경우 LED를 Turn off 한다.
		else leds[i].writeSync(0); // Turn off LED;
	}
	// LED 제어가 정상으로 실행 되었음을 알리문 문자 "Y"를 Client에 전송 한다.
	res.end("Y");
})

// Web server를 시작 한다. 이 예에서 listen Port는 2880번으로 설정 되었다.
// 예: Client Page 에서 이 서버에 localhost:2880으로 접속 할 수 있다.
var server = app.listen(serverPort, function () {
   var host = server.address().address
   var port = server.address().port
   // Console에 Host address와 Port 번호를 출력 한다.
   console.log("app listening at http://%s:%s", host, port);
})

실험을 위한 준비

Raspberry Pi의 GPIO 상태를 보기 위한 LED Arary 회로 만들기

아래 회로를 참고하여 LED Arary 모듈을 만든다.

Raspberry Pi의 GPIO 출력을 LED로 확인 할 수 있는 회로와 제작된 LED Arary 모듈 예

LED Arary 회로 예

제작된 LED Arary 모듈

Raspberry Pi의 GPIO Pin과 LED Pin 연결하기

Raspberry Pi GPIO Header의 Pin 배치도를 참고하여 아래와 같이 Raspberry Pi GPIO Header Pin과 LED Arary 모듈을 연결 한다.

LED Pin 1번: Header Pin 21번 GPIO 09번
LED Pin 2번: Header Pin 22번 GPIO 25번
LED Pin 3번: Header Pin 23번 GPIO 11번
LED Pin 4번: Header Pin 24번 GPIO 08번
LED Pin 5번: Header Pin 26번 GPIO 07번
LED Pin 6번: Header Pin 29번 GPIO 05번
LED Pin 7번: Header Pin 31번 GPIO 06번
LED Pin 8번: Header Pin 32번 GPIO 12번

실험 방법

필요한 소프트웨어 Tool을 설치 한다.
적당한 폴더에 Server 측 프로그램(checkbox-led.js)을 복사하여 checkbox-led.js File을 만든다.
checkbox-led.js File이 있는 폴더에 /html/ 폴더를 만들고 이 폴더에 Client 측 프로그램(checkbox-led.html)을 복사하여 checkbox-led.html File을 만든다.
Putty로 Raspberry Pi에 Login 하고, checkbox-led.js이 있는 폴더로 이동 한다.
다음 명령으로 checkbox-led.js를 실행 한다.

node checkbox-led.js

Chrome browser를 실행하고 아래 예를 참고하여 checkbox-led.html 페이지를 연결 한다.

http://Raspberry Pi의 IP 주소:2880/checkbox-led.html

2880은 공유기에서 포트포워드로 설정한 포트 번호 이다.

임의의 Checkbox를 Check하고 "LED 제어하기" 버튼을 클릭 하면, Web page에서 Check된 Checkbox와 대응하는 위치의 LED 가 Turn on 된다.
Checkbox의 Check 상태를 임의로 변경하고 "LED 상태보기" 버튼을 클릭 한 다음, 실험 보오드에서 LED 상태와 Checkbox의 Check된 위치가 일치 하는지 확인 한다.

주: jQuery를 이용한 프로그램도 동일한 방법으로 실험할 수 있다.

Drop-down list(select)를 이용한 제어

Drop-down list에서 선택된 LED만 Turn on 되는 프로그램 예 이다. 프로그램을 간단히 하기 위하여 LED는 4개만 사용 하는 것으로 한다.

필요한 소프트웨어 Tool, 실험을 위한 준비는 위(Checkbox의 Check 상태에 따라 Server 측의 LED를 제어하는 프로그램)예를 참고 할 것.

프로그램 예

AJAX와 HTML DOM을 사용한 프로그램 예

Server 측의 프로그램 예: select-led.js
Client 측의 프로그램 예: select-led.html

jQuery와 AJAX, HTML DOM을 사용한 프로그램 예

Server 측의 프로그램 예: select-led-jQuery.js
Client 측의 프로그램 예: select-led-jQuery.html

학습 포인트

Drop-down list를 이용한 제어

Drop-down list에서 선택된 Server 측 장치 제어 하기.
현재 Server 측의 상태를 Drop-down list에 표시하기.

Drop-down list(select)를 이용한 제어 Web Page 예

select-led.js 프로그램

// express Module을 Including 한다.
const express = require('express');
// express Object를 생성 한다.
const app = express();
const bodyParser = require('body-parser');
// Create application/x-www-form-urlencoded parser
const urlencodedParser = bodyParser.urlencoded({ extended: true })
// create application/json parser
const jsonParser = bodyParser.json()
// Include onoff to interact with the GPIO
const Gpio = require('onoff').Gpio;

const serverPort = 2880;

// LED 제어에 사용하는 GPIO output port pin을 정의한다.
let LED1 = new Gpio(09, 'out'),
  LED2 = new Gpio(25, 'out'),
  LED3 = new Gpio(11, 'out'),
  LED4 = new Gpio(08, 'out');

// LED 제어에 사용하는 GPIO output port를 Array로 처리하기 위함.
let leds = [LED1, LED2, LED3, LED4];

// 이 서버에 select-led.html이 url로 전달 되는 경우 select-led.html File을 전송 한다.
// 예: Client Page 에서 localhost:2880/select-led.html로 접속 하면
//    select-led.html 페이지가 Client Page에 표시 된다.
//    만약 등록된 Domain Name이 있는 경우. Domain Name:2880/select-led.html로 접속 한다.
app.get('/select-led.html', function (req, res) {
   res.sendFile( __dirname + "/html/" + "select-led.html" );
})

// 현재 LED의 설정 상태를 읽어 Drop-down list에 표시 하도록 전송 한다.
// 전송 Format:  L:nE , n: 선택된 LED 번호(selectedIndex)
app.get('/getLedStatus_AJAX', function (req, res) {
	// LED 상태 전송 시작을 표시하는 문자(L:)
	let ledStatus = "L:";
	// 현재 Turn on 상태인 LED가 없는 경우에는 LED 번호에 0를 삽입 한다.
	let j = '0';
	// 현재 Turn on 된 LED의 위치(번호)를 문자열에 추가 한다.
	let i = 0;
	for (i = 0; i < 4; i++) {
		if(leds[i].readSync() == 1) {
			j = String(i + 1);
			ledStatus += j; // 현재 Turn on된 LED 번호를 문자열에 추가 한다.
		}
	}
	// 만약 현재 Turn on 상태의 LED가 없으면 문자 '0'을 첨부 한다.
	if((i == 4) && (j == '0')) ledStatus += j;
	// LED Port의 상태 문자열의 끝을 표시하는 문자(E)
	ledStatus += "E";
	//console.log('ledStatusStr:', ledStatus);
	// LED Port의 상태를 표시하는 문자열을 Client에 전송 한다.
	res.end(ledStatus);
})

// 이 서버에 setLed_AJAX이 전달 되는 경우 실행 되는 post Method 이다.
// Web page로 부터 받은 문자에 따라 대응하는 위치의 LED를 제어(On) 한다.
app.post('/setLed_AJAX', jsonParser, function (req, res) {
	//console.log('req.body:', req.body);
	// jsonParser을 사용하여 JavaScript Object로 전달된다.
	let reqObj = req.body;
	//console.log('reqObj:', reqObj);
	//console.log('reqObj.LED:', reqObj.LED);

let selectIndex = Number(reqObj.LED);

// 모든 LED를 Turn off 한다.
	for (let i=0; i < 4; i++) {
		leds[i].writeSync(0);
	}

// 전송된 문자(Index)의 위치에 해당하는 LED를 Turn on 한다.
	// 0는 모든 LED를 Turn off 하는 명령 이다.
	if(selectIndex != 0){
		selectIndex--;	// 프로그램에서 LED의 번호는 leds(0) - leds(3) 이다.
		leds[selectIndex].writeSync(1);
	}
	// LED 제어가 정상으로 실행 되었음을 알리문 문자 "Y"를 Client에 전송 한다.
	res.end("Y");
})

실험 방법

적당한 폴더에 Server 측 프로그램(select-led.js)을 복사하여 select-led.js File을 만든다.
select-led.js File이 있는 폴더에 /html/ 폴더를 만들고 이 폴더에 Client 측 프로그램(select-led.html)을 복사하여 select-led.html File을 만든다.
Putty로 Raspberry Pi에 Login 하고, select-led.js이 있는 폴더로 이동 한다.
다음 명령으로 select-led.js를 실행 한다.

node select-led.js

Chrome browser를 실행하고 아래 예를 참고하여 select-led.html 페이지를 연결 한다.

http://Raspberry Pi의 IP 주소:2880/select-led.html

2880은 공유기에서 포트포워드로 설정한 포트 번호 이다.

Drop-down list에서 임의의 항목을 선택하고 "LED 제어하기" 버튼을 클릭 하면, Web page에서 선택된 항목에 대응하는 위치의 LED 가 Turn on 된다.
Drop-down list 상태를 임의로 변경하고 "LED 상태보기" 버튼을 클릭 한 다음, 실험 보오드에서 LED 상태와 Drop-down list에서 표시된 항목이 일치 하는지 확인 한다.

주: jQuery를 이용한 프로그램도 동일한 방법으로 실험할 수 있다.

Keypad를 이용한 LED 제어

Keypad에서 입력한 숫자에 대응하는 위치의 Checkbox를 Check 하고 "Send" Key를 클릭하면 Checkbox의 상태를 Server에 전송하여 LED에 출력하는 프로그램 예 이다.

필요한 소프트웨어 Tool, 실험을 위한 준비는 위(Checkbox의 Check 상태에 따라 Server 측의 LED를 제어하는 프로그램)예를 참고 할 것.

프로그램 예

AJAX와 HTML DOM을 사용한 프로그램 예

Server 측의 프로그램 예: keypad-checkbox-led.js
Client 측의 프로그램 예: keypad-led.html

학습 포인트

Keypad를 이용한 LED 제어

Button을 이용한 숫자 입력 Keypad 작성하기
Checkbox Array 제어하기

Keypad를 이용한 LED 제어 Web Page 예

keypad-checkbox-led.js 프로그램

// express Module을 Including 한다.
const express = require('express');
// express Object를 생성 한다.
const app = express();
const bodyParser = require('body-parser');
// Create application/x-www-form-urlencoded parser
const urlencodedParser = bodyParser.urlencoded({ extended: false })
// create application/json parser
const jsonParser = bodyParser.json()
// Include onoff to interact with the GPIO
const Gpio = require('onoff').Gpio;

const serverPort = 2880;

// LED 제어에 사용하는 GPIO output port를 Array로 처리하기 위함.
let leds = [LED1, LED2, LED3, LED4, LED5, LED6, LED7, LED8];

// 이 서버에 keypad-led.html이 url로 전달 되는 경우 keypad-led File을 전송 한다.
// 예: Client Page 에서 localhost:2880/keypad-led.html로 접속 하면
//    keypad-led.html 페이지가 Client Page에 표시 된다.
//    만약 등록된 Domain Name이 있는 경우. Domain Name:2880/keypad-led.html로 접속 한다.
app.get('/keypad-led.html', function (req, res) {
   res.sendFile( __dirname + "/html/" + "keypad-led.html" );
})

// 현재 LED의 설정 상태를 읽어 Checkbox에 표시 하도록 전송 한다.
// 전송 Format:  L:************E , *: 1(on) or 0(Off)
app.get('/getLedStatus_AJAX', function (req, res) {
	// LED 상태 전송 시작을 표시하는 문자(L:)
	let ledStatus = "L:";
		// LED Port의 상태를 읽어 문자열에 추가 한다.
		for (let i=0; i < 8; i++) {
			ledStatus += leds[i].readSync(); // Get LED status
		}	
	// LED Port의 상태 문자열의 끝을 표시하는 문자(E)
	ledStatus += "E";
	//console.log('ledStatusStr:', ledStatus);
	// LED Port의 상태를 표시하는 문자열을 Client에 전송 한다.
	res.end(ledStatus);
})

// 이 서버에 setLed_AJAX이 전달 되는 경우 실행 되는 post Method 이다.
// Web page(Client)로 부터 받은 Checkbox의 상태(O: On, C: Off)에 따라 LED를 제어한다.
// Web page(Client)로 부터 전송 받는 Fromat 예: LED:CCOOCCOO
app.post('/setLed_AJAX', jsonParser, function (req, res) {
	//console.log('req.body:', req.body);
	// jsonParser을 사용하여 JavaScript Object로 전달된다.
	let reqObj = req.body;
	let checkBoxStatus = reqObj.LED
	// Client로 부터 전송된 Data를 이용 하여 LED 상태을 설정 한다.
	for (let i = 0; i < 8; i++) {
		// 해당되는 위치의 문자가 "O" 인 경우 LED를 Turn on 한다.
		if(checkBoxStatus.charAt(i) == 'O') leds[i].writeSync(1);
		// 해당되는 위치의 문자가 "C" 인 경우 LED를 Turn off 한다.
		else leds[i].writeSync(0); // Turn off LED;
	}
	// LED 제어가 정상으로 실행 되었음을 알리문 문자 "Y"를 Client에 전송 한다.
	res.end("Y");
})

실험 방법

적당한 폴더에 Server 측 프로그램(keypad-checkbox-led.js)을 다운로드하여 keypad-checkbox-led.js File을 만든다.
keypad-checkbox-led.js File이 있는 폴더에 /html/ 폴더를 만들고 이 폴더에 Client 측 프로그램(keypad-led.html)을 다운로드하여 keypad-led.html File을 만든다.
Putty로 Raspberry Pi에 Login 하고, keypad-checkbox-led.js이 있는 폴더로 이동 한다.
다음 명령으로 keypad-checkbox-led.js를 실행 한다.

node keypad-checkbox-led.js

Chrome browser를 실행하고 아래 예를 참고하여 keypad-led.html 페이지를 연결 한다.

http://Raspberry Pi의 IP 주소:2880/keypad-led.html

2880은 공유기에서 포트포워드로 설정한 포트 번호 이다.

Keypad에서 임의의 숫자 Key를 클릭하면 대응하는 위치의 Checkbox가 Check 된다. "Send" 버튼을 클릭 하면, Web page에서 Check된 Checkbox에 대응하는 위치의 LED 가 Turn on 된다.
Keypad를 사용하여 Checkbox 상태를 임의로 변경하고 "Send" 버튼을 클릭 한 다음, 실험 보오드에서 LED 상태와 Checkbox에서 Check된 항목이 일치 하는지 확인 한다.
"Get" 버튼을 클릭하면 실험 보오드의 LED 상태가 Checkbox에 표시된다.
"Clear" Key는 Checkbox 상태를 모두 Clear 한다. Checkbox 상태가 Server에 전송되지 않기 때문에 실험 보오드의 LED 상태는 변동되지 않는다.

예약된 시간에 동작하는 장치(급수 제어 시스템) 예

필요한 소프트웨어 Tool: Node.js, Express, onoff Module

Node.js 설치하기를 참고 할 것.
Express 설치 하기를 참고 할 것.
onoff Module 설치 하기를 참고 할 것.

프로그램 예

AJAX와 HTML DOM을 사용한 프로그램 예

Server 측의 프로그램 예: Server 측의 프로그램 예: time-control.js
Client 측의 프로그램 예: time-control.html

jQuery와 AJAX, HTML DOM을 사용한 프로그램 예

Server 측의 프로그램 예: time-control-jQuery.js
Client 측의 프로그램 예: time-control-jQuery.html

학습 포인트

Timer를 사용하여 일정한 시간에 주기적으로 동작하는 시스템에 대한 이해
동작모드(자동, 수동) 설정과 제어 하기.
임시 Data(시스템 제어에 필요한 설정 정보 등)를 JSON Format으로 Disk에 저장 하고 이용하기.

예약된 시간에 동작하는 장치(급수 제어 시스템) Web Page 예

실험을 위한 준비

Raspberry Pi의 GPIO Pin과 LED Pin 연결하기

실제 회로에서는 LED 위치에 제어대상에 적합한 Interface 회로(전자 개폐기, 전자 밸브, 모터 제어회로 등)를 연결 한다.

Raspberry Pi GPIO Header의 Pin 배치도를 참고하여 아래와 같이 Raspberry Pi GPIO Header Pin과 LED Arary 모듈을 연결 한다.

LED Pin 1번: Header Pin 21번 GPIO 09번
LED Pin 2번: Header Pin 22번 GPIO 25번
LED Pin 3번: Header Pin 23번 GPIO 11번
LED Pin 4번: Header Pin 24번 GPIO 08번

실험 방법

적당한 폴더에 time-control.zip File을 복사 하고 압축을 풀면 time-control.js, /html/time-control.html, water-ctrl-data.json 이 만들어 진다.
Putty로 Raspberry Pi에 Login 하고, time-control.js이 있는 폴더로 이동 한다.
다음 명령으로 time-control.js를 실행 한다.

node time-control.js

Chrome browser를 실행하고 아래 예를 참고하여 time-control.html 페이지를 연결 한다.

http://Raspberry Pi의 IP 주소:2880/time-control.html

2880은 공유기에서 포트포워드로 설정한 포트 번호 이다.

time-control.html 페이지에서 이래와 같은 실험을 한다.

수동으로 Valve 제어 하기: 동작모드를 수동으로 설정 한다.

Valve Turn on 하기: Turn on 할 Valve의 Checkbox를 Check 하고 "밸브 수동 On/Off 제어" 명령을 실행 한다. LED의 상태로 동작을 확인 한다.
Valve Turn off 하기: Turn off 할 Valve의 Checkbox의 Check를 해제 하고 "밸브 수동 On/Off 제어" 명령을 실행 한다. LED의 상태로 동작을 확인 한다.

자동으로 Valve 제어 하기: 동작모드를 자동으로 설정 한다.

시작시간, 지속시간, 급수주기를 설정하고 "밸브 제어 시간 설정" 명령을 실행 한다. 시각 시간이 현재 시간과 일치하면 밸브상태 checkbox가 Check 되고 해당 LED가 Turn on 된다.
펌프 설정하기: 펌프 번호를 설정하고 "펌프 설정" 명령을 실행 한다. 펌프가 설정되면 해당 Valve가 동작 될 때 Pump도 함께 동작 한다.

주: jQuery를 이용한 프로그램도 동일한 방법으로 실험할 수 있다.