199 lines
11 KiB
HTML
199 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>SpiriLink Configuration</title>
|
|
<meta charset="utf-8">
|
|
<link href="../base1/bootstrap.min.css" type="text/css" rel="stylesheet">
|
|
<!-- <link href="../base1/style.css" type="text/css" rel="stylesheet"> -->
|
|
<script src="../base1/cockpit.js"></script>
|
|
<script src="../base1/jquery-3.7.1.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container mt-5 mb-5">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h2 class="fw-bold">SpiriLink Configuration</h2>
|
|
<p>Configuration File: <i><span id="file_location"></span></i></p>
|
|
<p>SpiriLink provides MAVLink, RTSP video, and a UDP tunnel over a modified 8812EU wireless card to provide a long distance, high speed wireless link. Edit the configuration settings below.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form class="row" id="spiriLinkForm" action="javascript:void(0);" novalidate>
|
|
<!-- Save Button -->
|
|
<div class="row mt-2 mb-3">
|
|
<div class="col-6">
|
|
<button class="btn btn-primary" id="save">Save/Update</button>
|
|
</div>
|
|
<div class="col-6 d-flex justify-content-end">
|
|
<button id="applyEncryptionFile" class="btn btn-primary">Apply Encryption File from Base Station</button>
|
|
</div>
|
|
</div>
|
|
|
|
<pre id="result" class="ms-1"></pre>
|
|
|
|
<!-- WiFi Configuration -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<img src="assets/icons/settings_wifi.svg" class="me-2"/><span>WiFi Configuration</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<label for="wifiChannel" class="form-label">WiFi Channel</label>
|
|
<select id="wifiChannel" class="form-select"></select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="wifiRegion" class="form-label">WiFi Region</label>
|
|
<select id="wifiRegion" class="form-select">
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="wifiTxPower" class="form-label">WiFi Tx Power (dBm * 100)</label>
|
|
<input type="number" id="wifiTxPower" class="form-control"
|
|
placeholder="e.g., 3000 for 30dBm">
|
|
<div class="invalid-feedback">Must be an integer.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Temperature Configuration -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<img src="assets/icons/settings_temp.svg" class="me-2"/><span>Temperature Configuration</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="tempInterval" class="form-label">Measurement Interval (s)</label>
|
|
<input type="number" id="tempInterval" class="form-control" required>
|
|
<div class="invalid-feedback">Must be an integer.</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="tempWarning" class="form-label">Overheat Warning (°C)</label>
|
|
<input type="number" id="tempWarning" class="form-control" step="0.1" required>
|
|
<div class="invalid-feedback">Must be a number with at most one decimal. </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Drone Video Configuration -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<img src="assets/icons/settings_video.svg" class="me-2"/><span>Drone Video Configuration</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-3">
|
|
<label for="droneVideoFwmark" class="form-label">FWMark</label>
|
|
<input type="number" id="droneVideoFwmark" class="form-control" required>
|
|
<div class="invalid-feedback">Must be an integer.</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="droneVideoType" class="form-label">Connection Type</label>
|
|
<select id="droneVideoType" class="form-select" required></select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="droneVideoIP" class="form-label">IP Address</label>
|
|
<input type="text" id="droneVideoIP" class="form-control" required>
|
|
<div class="invalid-feedback">IP Address must be in the format xxx.xxx.xxx.xxx</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="droneVideoPort" class="form-label">Port</label>
|
|
<input type="number" id="droneVideoPort" class="form-control" required>
|
|
<div class="invalid-feedback">Port must be between 1 and 65535</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Drone MAVLink Configuration -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<img src="assets/icons/lan.svg" class="me-2"/><span>Drone MAVLink Configuration</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-3">
|
|
<label for="droneMavlinkFwmark" class="form-label">FWMark</label>
|
|
<input type="number" id="droneMavlinkFwmark" class="form-control" required>
|
|
<div class="invalid-feedback">Must be an integer.</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="droneMavlinkType" class="form-label">Connection Type</label>
|
|
<select id="droneMavlinkType" class="form-select" required></select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="droneMavlinkIP" class="form-label">IP Address</label>
|
|
<input type="text" id="droneMavlinkIP" class="form-control" required>
|
|
<div class="invalid-feedback">IP Address must be in the format xxx.xxx.xxx.xxx</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="droneMavlinkPort" class="form-label">Port</label>
|
|
<input type="number" id="droneMavlinkPort" class="form-control" required>
|
|
<div class="invalid-feedback">Port must be between 1 and 65535</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MAVLink Configuration -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<img src="assets/icons/settings_ethernet.svg" class="me-2"/><span>MAVLink Settings</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-3">
|
|
<label for="injectRssi" class="form-label">Inject RSSI</label>
|
|
<input type="checkbox" id="injectRssi" class="form-check-input">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="mavlinkSysId" class="form-label">System ID</label>
|
|
<input type="number" id="mavlinkSysId" class="form-control" min="1" max="255" required>
|
|
<div class="invalid-feedback">System ID must be between 1 and 255</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="mavlinkCompId" class="form-label">Component ID</label>
|
|
<input type="number" id="mavlinkCompId" class="form-control" min="1" max="255" required>
|
|
<div class="invalid-feedback">Comp ID must be between 1 and 255</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="mavlinkTcpPort" class="form-label">MAVLink TCP Port</label>
|
|
<input type="number" id="mavlinkTcpPort" class="form-control"
|
|
placeholder="None if left blank">
|
|
<div class="invalid-feedback">Port must be between 1 and 65535</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script src="spirilink.js"></script>
|
|
</body>
|
|
|
|
</html> |