인텔 에디슨에서 LED제어하는 방법을 터득했다면 IOT기능을 활용해볼 차례이다.

바로 웹을 통해 장치를 제어하는 것이다.

기존에 아듀이노나 하드웨어로 장치를 제어하기 위해서는 포텐셔미터 혹은 토글 스위치 같은 하드웨어를 장착하거나

원격 통신장치를 사용해서 통신 프로토콜을 맞추는 작업을 해야했다면, 웹 브라우저는 PC혹은 스마트폰 등 어떠한 플랫폼에서든 접근 가능하고 어디에서나 접속되므로 Embedded장치 제어의 한계를 크게 넓혀주게 된다.


인텔 에디슨은 내장된 WIFI 모듈을 사용하여 원격으로 접속이 가능하다.

그럼 Wiif를 통해서 어떻게 프로그램이 상호 인터페이스 할 수 있는가?


임베디드 세계에서 장치는 장치고 사용자는 유저이다. 하지만 웹의 영역에서 장치는 서비스를 제공하는 서버이고 사용자는 서버에 접속하는 고객 혹은 클라이언트다.

클라이언트는 웹 브라우저라는 HTML스크립트로 동작하는 웹페이지를 통해 접속하고 명령을 내린다.

서버는 웹페이지에서 발생한 이벤트를 통해 입력을 받아서 프로그램 명령을 수행한다.

그리고 다시 이벤트를 발생시켜 웹페이지에 정보를 업데이트한다.

그래서 IOT 프로그램을 하려면 장치의 프로그램 뿐 아니라 HTML, 자바 스크립트를 같이 작업해주어야 한다.

그리고 이 장치 프로그래밍과 스크립트 사이를 연결해주는 통신방식이 바로 Socket 이다.


소켓은 말 그대로 접속단자를 의미한다. 


장치 프로그램과 웹 프로그램이 서로 소켓을 열면 통신이 되는 것이다. 

그럼 어떻게 구현하는지 알아보자. 

빈 프로젝트를 하나 생성하여 main.js를 만든다.


 main.js

 


main.js에서는 아래와 같이 간단히 소켓을 초기화 하고 http서버를 생성한다.

var mraa = require('mraa'); //require mraa
var app = require('express')(); //Express Library
var server = require('http').Server(app); //Create HTTP instance
var io = require('socket.io')(server); //Socket.IO Library
console.log('MRAA Version: ' + mraa.getVersion()); //write the mraa version to the Intel XDK console

클라이언트가 접속했을 때 index.html 파일을 전송할 수 있도록 다음을 추가한다.

app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html'); //serve the static html file
});

이제 IO포트를 열어서 LED를 켜고 끌 수 있도록 한다. 여기서는 D12 핀에 LED가 연결된 것으로 가정한다. 변수 초기화도 여기서 시켜준다.

var LED2 = new mraa.Gpio(12);
LED2.dir(mraa.DIR_OUT); 
var LED2State = 1;

다음은 소켓에서 특정 이벤트가 발생했을 때 호출될 함수를 선언한다. 여기서는 LED2ButtonClick 이라고 정했다. 그럼 HTML에서 LED2ButtonClick 이벤트를 호출하면 이 함수가 실행되는 것이다.
io.on('connection', function(socket){
    socket.on('LED2ButtonClick', function(click){
        LED2.write(LED2State?1:0);
        LED2State = !LED2State;
    });
});

마지막으로 소켓을 열고 이벤트가 발생하는지 확인하기 위해 다음을 수행한다. 포트 번호도 할당한다.

server.listen(3000); //run on port 3000



다음은 HTML코드를 작성하는 것이다. 파일 추가를 해서 index.html을 생성한다.


 index.html 

 

html 문서는 크게 다음과 같이 구성된다

<html>

<head>

자바 스크립트 등의 스크립트 명령어 및 함수가 들어가는 부분

</head>

<body>

페이지에 보여질 내용이 표시되는 부분

</body>

</html>


그럼 <head> </head> 사이에 다음 내용을 추가한다.
이것은 마찬가지로 소켓을 열고 웹페이지에 button1이라는 id를 가진 버튼이 눌리면 소켓으로 해당 내용을 전송하라는 의미이다.
물론 body 안에 button1이라는 id를 가진 버튼을 만들어 주어야 한다.
<body> </body> 사이에 다음을 추가한다.
  

그럼 웹 페이지에 LED ON/OFF 라는 버튼이 생성되었다.


모두 저장했으면 에디슨으로 프로그램을 전송하여 실행시켜보자.


포트가 3000 이므로 웹브라우저의 주소창에  "에디슨에 할당된 주소:3000" 을 입력하여 접속하다.

그럼 아래와 같은 페이지가 생성될 것이다.

이제 이 페이지에 뜬 버튼을 클릭하기만 하면 LED를 켜고 끌 수 있다.

저작자표시 비영리 변경금지

'ROBOTICS > Intel Edison' 카테고리의 다른 글

Intel Edison에 고정 IP 할당하기  (0) 2016.06.07
웹캠으로 스트리밍 전송하기  (0) 2016.02.11
소켓통신을 통해 웹에서 입력받기  (0) 2016.02.11
Wifi 설정하기  (0) 2016.02.11

+ Recent posts

티스토리툴바