englebert
/
ExpressFC
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Added the source and also partial working data displayed on the web

master
Englebert 3 years ago
parent
05d0cffe47
commit
598a4e35b3
7 changed files with 310 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      configurator/src/bootstrap.min.css
  2. 1
      configurator/src/bootstrap.min.css.map
  3. 7
      configurator/src/bootstrap.min.js
  4. 1
      configurator/src/bootstrap.min.js.map
  5. 289
      configurator/src/index.html
  6. 2
      configurator/src/jquery-3.6.0.min.js
  7. 3
      configurator/src/sticky-footer-navbar.css

7
configurator/src/bootstrap.min.css
File diff suppressed because it is too large
View File

1
configurator/src/bootstrap.min.css.map
File diff suppressed because it is too large
View File

7
configurator/src/bootstrap.min.js
File diff suppressed because it is too large
View File

1
configurator/src/bootstrap.min.js.map
File diff suppressed because it is too large
View File

289
configurator/src/index.html
View File

@ -0,0 +1,289 @@
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ExpressFC Configurator v1.0</title>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="bootstrap.min.js"></script>
<script src="jquery-3.6.0.min.js"></script>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<link href="sticky-footer-navbar.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">ExpressFC</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">a
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-disabled="true" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Begin page content -->
<main class="d-flex flex-wrap justify-content-between">
<div class="p-3 bd-highlight">
<h3 class="mt-5">RadioController Channels</h3>
Throttle:
<div class="progress">
<div id="rc_throttle" class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">1500</div>
</div>
Yaw:
<div class="progress">
<div id="rc_yaw" class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">1500</div>
</div>
Pitch:
<div class="progress">
<div id="rc_pitch" class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">1500</div>
</div>
Roll:
<div class="progress">
<div id="rc_roll" class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">1500</div>
</div>
</div>
<div class="p-3 bd-highlight">
<h3 class="mt-5">PID Configurations</h3>
<table class="table table-dark table-striped">
<thead>
<tr>
<th scope="col" class="text-center">#</th>
<th scope="col" class="text-center">P</th>
<th scope="col" class="text-center">I</th>
<th scope="col" class="text-center">D</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">ROLL</div></th>
<td><input id="roll_p" type="number" step="0.1" class="form-control"></td>
<td><input id="roll_i" type="number" step="0.001" class="form-control"></td>
<td><input id="roll_d" type="number" step="1" class="form-control"></td>
</tr>
<tr>
<th scope="row">PITCH</th>
<td><input id="pitch_p" type="number" step="0.1" class="form-control"></td>
<td><input id="pitch_i" type="number" step="0.001" class="form-control"></td>
<td><input id="pitch_d" type="number" step="1" class="form-control"></td>
</tr>
<tr>
<th scope="row">YAW</th>
<td><input id="yaw_p" type="number" step="0.1" class="form-control"></td>
<td><input id="yaw_i" type="number" step="0.001" class="form-control"></td>
<td><input id="yaw_d" type="number" step="1" class="form-control"></td>
</tr>
<tr>
<th scope="row">ALT</th>
<td><input id="alt_p" type="number" step="0.1" class="form-control"></td>
<td><input id="alt_i" type="number" step="0.001" class="form-control"></td>
<td><input id="alt_d" type="number" step="1" class="form-control"></td>
</tr>
<tr>
<th scope="row">Pos</th>
<td><input id="pos_p" type="number" step="0.1" class="form-control"></td>
<td><input id="pos_i" type="number" step="0.001" class="form-control"></td>
<td><input id="pos_d" type="number" step="1" class="form-control"></td>
</tr>
<tr>
<th scope="row">PosR</th>
<td><input id="posr_p" type="number" step="0.1" class="form-control"></td>
<td><input id="posr_i" type="number" step="0.001" class="form-control"></td>
<td><input id="posr_d" type="number" step="1" class="form-control"></td>
</tr>
<tr>
<th scope="row">NavR</th>
<td><input id="navr_p" type="number" step="0.1" class="form-control"></td>
<td><input id="navr_i" type="number" step="0.001" class="form-control"></td>
<td><input id="navr_d" type="number" step="1" class="form-control"></td>
</tr>
<tr>
<th scope="row">LEVEL</th>
<td><input id="level_p" type="number" step="0.1" class="form-control"></td>
<td><input id="level_i" type="number" step="0.001" class="form-control"></td>
<td><input id="level_d" type="number" step="1" class="form-control"></td>
</tr>
<tr>
<th scope="row">MAG</th>
<td><input id="mag_p" type="number" step="0.1" class="form-control"></td>
</tr>
<tr>
<th scope="row">TH MID</th>
<td><input id="throttle_mid" type="number" step="0.1" class="form-control"></td>
</tr>
<tr>
<th scope="row">TH EXPO</th>
<td><input id="throttle_expo" type="number" step="0.1" class="form-control"></td>
</tr>
<tr>
<th scope="row">RC RATE</th>
<td><input id="rc_rate" type="number" step="0.1" class="form-control"></td>
</tr>
<tr>
<th scope="row">RC EXPO</th>
<td><input id="rc_expo" type="number" step="0.1" class="form-control"></td>
</tr>
</tbody>
</table>
</div>
<div class="p-2 bd-highlight">
<h3 class="mt-5">Switches</h3>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</main>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">ExpressFC v1.0 by BertFPV</span>
</div>
</footer>
<script>
var i = 0;
setInterval(
function() {
get_feeds();
}, 100
);
get_pids();
function get_feeds() {
var url = "http://192.168.1.1/feeds";
$.get(url, function(data) {
// console.log("Feeds: " + data);
// Explode and display
var feeds = data.split(',');
// Pump to display
$('#rc_throttle').css('width',calc_rc_percent(feeds[0])+'%');
$('#rc_throttle').html(feeds[0]);
$('#rc_yaw').css('width',calc_rc_percent(feeds[1])+'%');
$('#rc_yaw').html(feeds[1]);
$('#rc_pitch').css('width',calc_rc_percent(feeds[2])+'%');
$('#rc_pitch').html(feeds[2]);
$('#rc_roll').css('width',calc_rc_percent(feeds[3])+'%');
$('#rc_roll').html(feeds[3]);
});
}
// Convert 1000 ~ 2000 into percentage
function calc_rc_percent(data) {
if(data == 0 || data < 1000) return 0;
return ((data - 1000)/1000) * 100;
}
function get_pids() {
var url = "http://192.168.1.1/getpids";
$.get(url, function(data) {
console.log("Data: " + data);
// Explode and display
var pids = data.split(',');
// Display on each of the input text box
$('#roll_p').val(pids[0]);
$('#roll_i').val(pids[1]);
$('#roll_d').val(pids[2]);
$('#pitch_p').val(pids[3]);
$('#pitch_i').val(pids[4]);
$('#pitch_d').val(pids[5]);
$('#yaw_p').val(pids[6]);
$('#yaw_i').val(pids[7]);
$('#yaw_d').val(pids[8]);
$('#alt_p').val(pids[9]);
$('#alt_i').val(pids[10]);
$('#alt_d').val(pids[11]);
$('#pos_p').val(pids[12]);
$('#pos_i').val(pids[13]);
$('#pos_d').val(pids[14]);
$('#posr_p').val(pids[15]);
$('#posr_i').val(pids[16]);
$('#posr_d').val(pids[17]);
$('#navr_p').val(pids[18]);
$('#navr_i').val(pids[19]);
$('#navr_d').val(pids[20]);
$('#level_p').val(pids[21]);
$('#level_i').val(pids[22]);
$('#level_d').val(pids[23]);
$('#mag_p').val(pids[24]);
// $('#mag_i').val(pids[25]);
// $('#mag_d').val(pids[26]);
$('#rc_rate').val(pids[27]);
$('#rc_expo').val(pids[28]);
// $('#roll_pitch_rate').val(pids[29]);
// $('#yaw_rate').val(pids[30]);
// $('#dynamic_throttle_pid').val(pids[31]);
$('#throttle_mid').val(pids[32]);
$('#throttle_expo').val(pids[33]);
// $('#angle_trim_roll').val(pids[34]);
// $('#angle_trim_pitch').val(pids[35]);
});
}
</script>
</body>
</html>

2
configurator/src/jquery-3.6.0.min.js
File diff suppressed because it is too large
View File

3
configurator/src/sticky-footer-navbar.css
View File

@ -0,0 +1,3 @@
main > .container {
padding: 60px 15px 0;
}
Write Preview
Loading…
Cancel
Save