Mu2_Deploy/ui/general/spirilink.html

245 lines
13 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">
<div class="row mt-4">
<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>
<!-- WiFi Configuration -->
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-header">
<img src="settings_ethernet.svg" class="me-2"> WiFi Configuration
</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">
<!-- 2.4 GHz Channels -->
<option value="1">1 (2.412 GHz)</option>
<option value="2">2 (2.417 GHz)</option>
<option value="3">3 (2.422 GHz)</option>
<option value="4">4 (2.427 GHz)</option>
<option value="5">5 (2.432 GHz)</option>
<option value="6">6 (2.437 GHz)</option>
<option value="7">7 (2.442 GHz)</option>
<option value="8">8 (2.447 GHz)</option>
<option value="9">9 (2.452 GHz)</option>
<option value="10">10 (2.457 GHz)</option>
<option value="11">11 (2.462 GHz)</option>
<option value="12">12 (2.467 GHz)</option>
<option value="13">13 (2.472 GHz)</option>
<option value="14">14 (2.484 GHz, Japan only)</option>
<!-- 5 GHz Channels -->
<option value="36">36 (5.180 GHz)</option>
<option value="40">40 (5.200 GHz)</option>
<option value="44">44 (5.220 GHz)</option>
<option value="48">48 (5.240 GHz)</option>
<option value="52">52 (5.260 GHz)</option>
<option value="56">56 (5.280 GHz)</option>
<option value="60">60 (5.300 GHz)</option>
<option value="64">64 (5.320 GHz)</option>
<option value="100">100 (5.500 GHz)</option>
<option value="104">104 (5.520 GHz)</option>
<option value="108">108 (5.540 GHz)</option>
<option value="112">112 (5.560 GHz)</option>
<option value="116">116 (5.580 GHz)</option>
<option value="120">120 (5.600 GHz)</option>
<option value="124">124 (5.620 GHz)</option>
<option value="128">128 (5.640 GHz)</option>
<option value="132">132 (5.660 GHz)</option>
<option value="136">136 (5.680 GHz)</option>
<option value="140">140 (5.700 GHz)</option>
<option value="149">149 (5.745 GHz)</option>
<option value="153">153 (5.765 GHz)</option>
<option value="157">157 (5.785 GHz)</option>
<option value="161">161 (5.805 GHz)</option>
<option value="165">165 (5.825 GHz)</option>
</select>
</div>
<div class="col-md-4">
<label for="wifiRegion" class="form-label">WiFi Region</label>
<select id="wifiRegion" class="form-select">
<option value="BO">BO (Max TX)</option>
<option value="US">US (United States)</option>
<option value="EU">EU (Europe)</option>
<option value="JP">JP (Japan)</option>
<option value="AU">AU (Australia, Max TX)</option>
<option value="CA">CA (Canada)</option>
<option value="CN">CN (China)</option>
<option value="IN">IN (India)</option>
<option value="ZA">ZA (South Africa)</option>
<option value="KR">KR (South Korea)</option>
</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>
</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="settings_ethernet.svg" class="me-2"> Temperature Configuration
</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" value="10">
</div>
<div class="col-md-6">
<label for="tempWarning" class="form-label">Overheat Warning (°C)</label>
<input type="number" id="tempWarning" class="form-control" value="60">
</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="settings_ethernet.svg" class="me-2"> Drone MAVLink Configuration
</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" value="10">
</div>
<div class="col-md-3">
<label for="droneMavlinkType" class="form-label">Connection Type</label>
<select id="droneMavlinkType" class="form-select">
<option value="listen">Listen</option>
<option value="connect">Connect</option>
</select>
</div>
<div class="col-md-3">
<label for="droneMavlinkIP" class="form-label">IP Address</label>
<input type="text" id="droneMavlinkIP" class="form-control" value="0.0.0.0">
</div>
<div class="col-md-3">
<label for="droneMavlinkPort" class="form-label">Port</label>
<input type="number" id="droneMavlinkPort" class="form-control" value="14550">
</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="settings_ethernet.svg" class="me-2"> Drone Video Configuration
</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" value="20">
</div>
<div class="col-md-3">
<label for="droneVideoType" class="form-label">Connection Type</label>
<select id="droneVideoType" class="form-select">
<option value="listen">Listen</option>
<option value="connect">Connect</option>
</select>
</div>
<div class="col-md-3">
<label for="droneVideoIP" class="form-label">IP Address</label>
<input type="text" id="droneVideoIP" class="form-control" value="0.0.0.0">
</div>
<div class="col-md-3">
<label for="droneVideoPort" class="form-label">Port</label>
<input type="number" id="droneVideoPort" class="form-control" value="5602">
</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="settings_ethernet.svg" class="me-2"> MAVLink Settings
</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" checked>
</div>
<div class="col-md-3">
<label for="mavlinkSysId" class="form-label">System ID</label>
<input type="number" id="mavlinkSysId" class="form-control" value="3">
</div>
<div class="col-md-3">
<label for="mavlinkCompId" class="form-label">Component ID</label>
<input type="number" id="mavlinkCompId" class="form-control" value="68">
</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>
</div>
</div>
</div>
</div>
</div>
<!-- Save Button -->
<div class="row mt-4 mb-5">
<div class="col-6">
<button class="btn btn-primary" id="save">Save/Update</button>
<span id="result" class="ms-3"></span>
</div>
<div class="col-6">
<button id="applyEncryptionFile" class="btn btn-primary">Apply Encryption File from Base Station</button>
</div>
</div>
<pre id="output"></pre>
</div>
<script src="spirilink.js"></script>
</body>
</html>