72 lines
3.2 KiB
JavaScript
72 lines
3.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// Base API URL
|
|
const API_BASE_URL = 'http://192.168.1.219:8001';
|
|
|
|
// Control Buttons
|
|
const reconnectBtn = document.getElementById('reconnect-btn');
|
|
const startStreamBtn = document.getElementById('streamon-btn');
|
|
const takeoffBtn = document.getElementById('takeoff-btn');
|
|
const landBtn = document.getElementById('land-btn');
|
|
const emergencyBtn = document.getElementById('emergency-btn');
|
|
const moveUpBtn = document.getElementById('move-up-btn');
|
|
const moveDownBtn = document.getElementById('move-down-btn');
|
|
const moveLeftBtn = document.getElementById('move-left-btn');
|
|
const moveRightBtn = document.getElementById('move-right-btn');
|
|
const hoverBtn = document.getElementById('hover-btn');
|
|
|
|
// Status Elements
|
|
const batElem = document.getElementById('bat');
|
|
const baroElem = document.getElementById('baro');
|
|
const tempElem = document.getElementById('temp');
|
|
|
|
// Command Functions
|
|
const sendCommand = async (endpoint) => {
|
|
try {
|
|
const response = await fetch(`${API_BASE_URL}${endpoint}`);
|
|
const data = await response.json();
|
|
console.log(`Command ${endpoint} response:`, data);
|
|
} catch (error) {
|
|
console.error(`Error sending command ${endpoint}:`, error);
|
|
}
|
|
};
|
|
|
|
// Event Listeners for Control Buttons
|
|
if (reconnectBtn) reconnectBtn.addEventListener('click', () => {
|
|
console.log('Reconnect button clicked');
|
|
sendCommand('/reconnect');
|
|
});
|
|
if (startStreamBtn) startStreamBtn.addEventListener('click', () => sendCommand('/stream/streamon'));
|
|
if (takeoffBtn) takeoffBtn.addEventListener('click', () => sendCommand('/command/takeoff'));
|
|
if (landBtn) landBtn.addEventListener('click', () => sendCommand('/command/land'));
|
|
if (emergencyBtn) emergencyBtn.addEventListener('click', () => sendCommand('/command/emergency'));
|
|
|
|
// Movement Commands with fixed distance
|
|
const moveDistance = 20; // Adjust as needed
|
|
if (moveUpBtn) moveUpBtn.addEventListener('click', () => sendCommand(`/command/move/forward/${moveDistance}`));
|
|
if (moveDownBtn) moveDownBtn.addEventListener('click', () => sendCommand(`/command/move/back/${moveDistance}`));
|
|
if (moveLeftBtn) moveLeftBtn.addEventListener('click', () => sendCommand(`/command/move/left/${moveDistance}`));
|
|
if (moveRightBtn) moveRightBtn.addEventListener('click', () => sendCommand(`/command/move/right/${moveDistance}`));
|
|
|
|
// Hover Command
|
|
if (hoverBtn) hoverBtn.addEventListener('click', () => sendCommand('/command/stop'));
|
|
|
|
// Function to Update Drone Status
|
|
const updateDroneStatus = async () => {
|
|
try {
|
|
const response = await fetch(`${API_BASE_URL}/status`);
|
|
const status = await response.json();
|
|
if (batElem) batElem.textContent = status.bat;
|
|
if (baroElem) baroElem.textContent = status.baro;
|
|
if (tempElem) tempElem.textContent = status.temp;
|
|
} catch (error) {
|
|
console.error('Error fetching drone status:', error);
|
|
}
|
|
};
|
|
|
|
// Periodically Update Drone Status
|
|
setInterval(updateDroneStatus, 2000); // Update every second
|
|
|
|
// Initial Status Update
|
|
updateDroneStatus();
|
|
});
|