node js + 아두이노 연동 제어 실험

황제낙엽 2017.01.02 04:00 조회 수 : 3038

sitelink1 http://cafe.naver.com/circuitsmanual/189110 
sitelink2 http://cafe.naver.com/circuitsmanual/189111 
sitelink3  
extra_vars4  
extra_vars5  
extra_vars6  

1. node js를 이용하여 작은 웹페이지를 하나 만들고

2. 스마트폰의 웹 브라우저를 이용하여 웹페이지에 접근

3. 화면에 있는 버튼을 클릭(터치)하여 3개의 LED를 ON OFF 제어하는 실험입니다.

001.jpg

 

 

 

포스트는 node js가 컴퓨터에서 설치되어 있다는 전제 하에 진행합니다.

(node js를 설치하는 방법은 구글링을 통하여 쉽게 설치 가능하니 여기에서는 생략합니다.)

 

   가. 실험 환경 : 운영체제는 윈도우 10 64비트

   나. 별도의 도구를 이용하지 않고, 텍스트 에디터와 cmd 창을 통한 날코딩으로 진행

 

1. 프로젝트 작성 준비

   가. 윈도우 cmd창을 하나 열어줍니다.

   나. 프로젝트를 저장할 폴더(디렉토리로) 이동합니다. : C:\Temp 폴더에서 시작합니다.

   002.png

 

 

   다. 프로젝트 폴더를 하나 만들어 줍니다.

     cmd(dos) 명령 몇가지는 알아 두시면 좋겠습니다.

       - md iot : iot라는 디렉토리를 만든다.

       - cd iot : iot 디렉토리로 들어(이동) 간다.

 

   003.png

 

 

2. 프로젝트 작성 시작

   가. npm(nodejs package manager)를 이용해서 프로젝트를 생성합니다.

     - npm init 라고 입력한 후 계속 Enter만 입력하여 진행하면 됩니다.

     - 만약 진행되지 않고 오류가 발생하면 해당 폴더를 모두 삭제한 후 처음부터 다시 시작

   004.png

 

 

   나. 현재 폴더에 package.json 파일이 하나 생성된 것을 볼 수 있습니다.

   005.png

 

 

   다. 이제 몇 가지 의존성 패키지를 설치해 줍니다.

     - expressJS 미들웨어(프레임워크) 설치 : npm --save install express

     - 시리얼포트 미들웨어 설치 : npm --save install serialport

     - ejs(embedded javaScript) 미들웨어 설치 : npm --save install ejs

    006.jpg

 

 

   라. 웹페이지를 저장할 디렉토리를 하나 만들어 줍니다.

     - md views

 

 

1. 아두이노에 3개의 LED를 연결해 줍니다.

  - LED는 11, 12, 13번 핀에 연결합니다.

007.jpg

 

 

2. 그리고 스캐치를 이용하여 아래 코드를 업로드 합니다.

 

 

/**

 * 프젝트 : 아두이노와 node js 연동

 * 파일 : iot_01

 * Edit by Callor

 * Date : 2016. 11. 12

 */

 

 

#define LED_01 11

#define LED_02 12

#define LED_03 13

 

#define LED_NUM 3

unsigned int ledArray[] = { LED_01,LED_02, LED_03 } ;

 

 

void setup() {

  Serial.begin(9600);

 

  for(int i = 0 ; i < LED_NUM ; i++) {

    pinMode(ledArray[i], OUTPUT) ;

  }

}

 

void loop() {

 

  if(Serial.available()) {

      char c = Serial.read();

//      Serial.write(c);

      if(c == 'A') {

            for(int i = 0 ; i < LED_NUM ; i++) {

                digitalWrite(ledArray[i], HIGH) ;

            }

           return;

      }

      if(c == 'X') {

            for(int i = 0 ; i < LED_NUM ; i++) {

                digitalWrite(ledArray[i], LOW) ;

            }

           return;

      }

      int ledNum = c - '1';

      digitalWrite(ledArray[ledNum],!digitalRead(ledArray[ledNum])) ;

  }

}

Colored by Color Scripter

 

  - 아두이노 하드웨어 시리얼 포트로 부터 문자열을 받아 

       LED를 ON, OFF 하는 간단한 코드입니다

 

  2. Text 에디터를 이용하여 다음의 코드를 작성하고,

      앞에서 생성한 프로젝트 폴더
      (c:\Temp\iot)에 index.js 이름으로 저장합니다.

    - 코드는 UTF-8 인코딩으로 저장합니다.

 

/**

 * 프젝트 : 아두이노와 node js 연동

 * 파일 : index.js

 * Edit by Callor

 * Date : 2016. 11. 12

 */

 

var express = require('express');

var http = require('http');

 

var app = express();

var path = require('path');

 

var server = http.createServer(app);

server.listen(3000);

 

// 시리얼 포트 설정

// COM6 : 아두이노가 연결된 포트

var serialPort  = require('serialport');

var com6 = new serialPort('COM6',{

    baudrate : 9600,

    // defaults for Arduino serial communication

    dataBits : 8,

    parity : 'none',

    stopBits: 1,

    flowControl: false

})

com6.on('open', function () {

    console.log('open serial communication');

})

 

 

// view engine setup

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'ejs');

app.use(express.static(path.join(__dirname, 'public')));

 

app.get('/',function(req,res) {

    res.status(200).render('controller.ejs');

})

 

app.get('/controller/:id',function(req,res){

    console.log(req.params.id);

    com6.write(req.params.id) ;

    res.status(200).send('LED Controll OK!!');

})

 

Colored by Color Scripter

    

 

  3. Text 에디터를 이용하여 다음의 코드를 작성하고,

      앞에서 생성한 프로젝트 폴더 아래의 views 폴더
      (c:\Temp\iot\views)에 controller.ejs 이름으로 저장합니다.

    - 코드는 UTF-8 인코딩으로 저장합니다.

 

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>

    $(document).ready(function(){

        $("button").click(function(){

            $.get("/controller/" + $(this).attr('id'), function(data, status){ });

        });

    });

    </script>

    <meta charset="UTF-8">

    <title>아두이노 조명제어</title>

</head>

<body>

    <div class="container">

        <h2>조명 제어</h2>

        <button type="button" class="btn btn-success" id='A'>모두 켜기</button>

        

        <button type="button" class="btn btn-warning" id='1'>현관조명</button>

        <button type="button" class="btn btn-primary" id='2'>거실중앙조명</button>

        <button type="button" class="btn btn-success" id='3'>부억조명</button>

        <button type="button" class="btn btn-default"  id='X'>모두 끄기</button>  

        </div>

</body>

</html>

Colored by Color Scripter

 

 

4. nodejs를 시작합니다.

   008.png

 

 

 화면에 open serial cmmunication 이라고 나오면 정상적으로 작동하는 것입니다.

 

5. 컴퓨터의 IP 주소를 확인하고, PC의 웹브라우저나 스마트폰의 웹브라우저를 이용해

   접속해 봅니다.

   - http://192.168.0.33:3000

   - IP 주소는 nodejs가 실행된 컴퓨터의 IP 주소이며 port는 3000번으로 접속해야 합니다.

 

 

 

이 게시물을
목록
쓰기 태그