소켓통신을 통해 웹에서 입력받기

ROBOTICS/Intel Edison

소켓통신을 통해 웹에서 입력받기

Kyubotics 2016. 2. 11. 15:27

Intel Edison에서는 Node.Js를 사용하여 웹 서비스를 하고 소켓통신을 수행할 수 있다.

이를 위해서는 socket.io와 http Server가 필요하다.

아래 예제는 Edison 확장보드의 디지털 핀13과 PWM핀 3번을 LED에 연결하고 웹 페이지의 슬라이더와 버튼 입력을 받아 LED 켜고 끄기, 밝기 조절을 해보도록 한다.

먼저 Express 라이브러리에서 app을 생성하고 index.html파일을 호출하도록 한다.

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

res.sendFile(__dirname + '/index.html'); //serve the static html file

});

그리고 Socket IO로부터 입출력을 처리하도록 한다

메인 소스코드

main.js

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

//var myOnboardLed = new mraa.Gpio(3, false, true); //LED hooked up to digital pin (or built in pin on Galileo Gen1)
var myOnboardLed = new mraa.Gpio(13); //LED hooked up to digital pin 13 (or built in pin on Intel Galileo Gen2 as well as Intel Edison)
var LED2 = new mraa.Gpio(12);
myOnboardLed.dir(mraa.DIR_OUT); //set the gpio direction to output
LED2.dir(mraa.DIR_OUT);
var ledState = 1; //Boolean to hold the state of Led
var LED2State = 1;
var blinkInterval = 1000; //set default blink interval to 1000 milliseconds (1 second)

//Initialize PWM on Digital Pin #3 (D3) and enable the pwm pin
var pwm3 = new mraa.Pwm(3);
pwm3.enable(true);

//set the period in microseconds.
pwm3.period_us(2000);
var pwmValue = 0.0;
var dir = 1;
var pwmStep = 0.1;

app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html'); //serve the static html file
});
io.on('connection', function(socket){
    socket.on('changeBlinkInterval', function(data){ //on incoming websocket message...
        blinkInterval = data; //update blink interval
        pwmValue = data/2000.0;
        pwm3.write(pwmValue);
        console.log(pwmValue);
    });
});
io.on('connection', function(socket){
    socket.on('LED2ButtonClick', function(click){
        LED2.write(LED2State?1:0);
        LED2State = !LED2State;
    });
});
server.listen(3000); //run on port 3000

blink(); //start the blink function
function blink(){
    myOnboardLed.write(ledState); //write the LED state
    ledState = 1 - ledState; //toggle LED state
    setTimeout(blink,blinkInterval); //recursively toggle pin state with timeout set to blink interval
}

index.html 파일 소스코드

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>
    <script>
        $(function(){
            var socket = io.connect({port: 3000, host:'localhost'});
            $('#slider').on('input change',function(){
                var slideVal = $(this).val();
                socket.emit('changeBlinkInterval',slideVal);
                document.getElementById('strData1').value=slideVal;
            });
            $('#button1').click('button_click',function(){
                socket.emit('LED2ButtonClick',$(this).val());
            });

});
//        $(function button1_click() {
//            $('#button1').on('input change', function() {
//                socket.emit('LED2ButtonClick', $(this).val());
//        });
    </script>
</head>

<h1>Slide to change blink interval!</h1>
    <p>
    <input id="slider" type="range" min="0" max="1000" value="1000" />
    </p>
    <p>
    <input type="text" id="strData1" maxlength="4" size="8" value="0" readOnly = 'true'/> 
    </p>
    <input type="button" id="button1" value="LED ON" onclick="button1_click();" />

저작자표시 비영리 변경금지 (새창열림)