EN

페이지 3: JavaScript를 이용한 드론 제어 (웹 UI 및 Node.js)

3. JavaScript를 이용한 드론 제어 (웹 UI 및 Node.js)

Node.js를 활용하여 드론과 상호 작용하고 직관적인 웹 기반 제어 인터페이스를 만들 수 있습니다. 이를 통해 브라우저 또는 모바일 장치를 통해 원격 제어가 가능합니다.

3.1. 드론 통신을 위한 Node.js 설정

`node-tello`와 같이 UDP 통신을 처리하는 Node.js 라이브러리를 일반적으로 사용합니다.

// Node.js 프로젝트 초기화
// npm init -y
// npm install node-tello

// server.js (Node.js 백엔드)
const dgram = require('dgram');
const PORT = 8889; // Tello 명령 포트
const HOST = '192.168.10.1'; // Tello IP

const client = dgram.createSocket('udp4');
client.bind(8890); // Tello 응답을 위한 로컬 포트

client.on('message', (msg, rinfo) => {
    console.log(\`Drone: \${msg.toString()}\`);
});

function sendTelloCommand(command) {
    console.log(\`Sending command: \${command}\`);
    client.send(command, 0, command.length, PORT, HOST, (err) => {
        if (err) throw err;
    });
}

// 예시: SDK 모드 진입
sendTelloCommand('command'); 

// ... 나중에 Express와 같은 웹 서버와 통합

3.2. 기본적인 웹 제어 인터페이스 생성

JavaScript가 포함된 간단한 HTML 페이지는 Node.js 백엔드로 명령을 보내고, 백엔드는 이를 드론에 전달할 수 있습니다.

<!-- index.html -->
<button onclick="sendCommand('takeoff')">이륙</button>
<button onclick="sendCommand('land')">착륙</button>
<script>
    async function sendCommand(cmd) {
        // 실제 앱에서는 Node.js 백엔드로의 AJAX 호출입니다.
        // 시연을 위해 백엔드 함수를 호출한다고 가정합니다.
        console.log(\`백엔드로 명령 전송 시뮬레이션: \${cmd}\`);
        // 실제 Express 서버로 fetch하는 예시:
        // await fetch('/api/drone/command', { method: 'POST', body: JSON.stringify({ command: cmd }), headers: { 'Content-Type': 'application/json' } });
    }
</script>

이 설정은 더욱 상호 작용적이고 시각적으로 풍부한 제어 경험을 가능하게 합니다.

Contact Us