Skip to content

Commit

Permalink
Feature #95 to disable Wi-Fi when MAVLink or LTM are set as protocol.
Browse files Browse the repository at this point in the history 
- #95 Test pending. WiFi can be configured to be disabled when LTM or MAVLink are set as protocol AND a standard WiFi mode is enabled.
- ESP32 reports its chip model via JSON to website
- GUI notice for LR mode is more stylish
- Moved Gateway IP in GUI to Wi-Fi section
  • Loading branch information
@seeul8er
seeul8er committed Jan 18, 2025
1 parent 38661c2 commit d19a830
Show file tree
Hide file tree
Showing 11 changed files with 341 additions and 62 deletions.
138 changes: 135 additions & 3 deletions frontend/dronebridge.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,19 @@ body {
}

h2 {
margin-top: 2rem;
font-size: x-large;
padding-top: 2rem;
margin-bottom: .8rem
}

h3 {
font-family: Arial, sans-serif;
font-size: large
font-size: large;
}

h4 {
font-family: Arial, sans-serif;
font-size: medium;
font-weight: bold;
}

button.button-primary {
Expand Down Expand Up @@ -129,4 +134,131 @@ input, select {
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

div.note {
background-color: #00316600;
border-left: solid 4px #ff881a;
line-height: 18px;
overflow: hidden;
padding: 12px;
margin-bottom: 1.1rem
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
.checkbox-wrapper-14 input[type=checkbox] {
--active: #ff9734;
--active-inner: #fff;
--focus: 0px rgb(255, 169, 88);
--border: #ffffff;
--border-hover: #ff9734;
--background: #fffff;
--disabled: #F6F8FF;
--disabled-inner: #E1E6F9;
-webkit-appearance: none;
-moz-appearance: none;
height: 21px;
outline: none;
display: inline-block;
vertical-align: top;
position: relative;
margin: 0;
cursor: pointer;
border: 1px solid var(--bc, var(--border));
background: var(--b, var(--background));
transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}
.checkbox-wrapper-14 input[type=checkbox]:after {
content: "";
display: block;
left: 0;
top: 0;
position: absolute;
transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
}
.checkbox-wrapper-14 input[type=checkbox]:checked {
--b: var(--active);
--bc: var(--active);
--d-o: .3s;
--d-t: .6s;
--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
}
.checkbox-wrapper-14 input[type=checkbox]:disabled {
--b: var(--disabled);
cursor: not-allowed;
opacity: 0.9;
}
.checkbox-wrapper-14 input[type=checkbox]:disabled:checked {
--b: var(--disabled-inner);
--bc: var(--border);
}
.checkbox-wrapper-14 input[type=checkbox]:disabled + label {
cursor: not-allowed;
}
.checkbox-wrapper-14 input[type=checkbox]:hover:not(:checked):not(:disabled) {
--bc: var(--border-hover);
}
.checkbox-wrapper-14 input[type=checkbox]:focus {
--bc: var(--active);
}
.checkbox-wrapper-14 input[type=checkbox]:not(.switch) {
width: 21px;
}
.checkbox-wrapper-14 input[type=checkbox]:not(.switch):after {
opacity: var(--o, 0);
}
.checkbox-wrapper-14 input[type=checkbox]:not(.switch):checked {
--o: 1;
}
.checkbox-wrapper-14 input[type=checkbox] + label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
margin-left: 4px;
}

.checkbox-wrapper-14 input[type=checkbox]:not(.switch) {
border-radius: 7px;
}
.checkbox-wrapper-14 input[type=checkbox]:not(.switch):after {
width: 5px;
height: 9px;
border: 2px solid var(--active-inner);
border-top: 0;
border-left: 0;
left: 7px;
top: 4px;
transform: rotate(var(--r, 20deg));
}
.checkbox-wrapper-14 input[type=checkbox]:not(.switch):checked {
--r: 43deg;
}
.checkbox-wrapper-14 input[type=checkbox].switch {
width: 38px;
border-radius: 5px;
}
.checkbox-wrapper-14 input[type=checkbox].switch:after {
left: 2px;
top: 2px;
border-radius: 20%;
width: 17px;
height: 17px;
background: var(--ab, var(--border));
transform: translateX(var(--x, 0));
}
.checkbox-wrapper-14 input[type=checkbox].switch:checked {
--ab: var(--active-inner);
--x: 17px;
}
.checkbox-wrapper-14 input[type=checkbox].switch:disabled:not(:checked):after {
opacity: 0.6;
}
}

.checkbox-wrapper-14 * {
box-sizing: inherit;
}
.checkbox-wrapper-14 *:before,
.checkbox-wrapper-14 *:after {
box-sizing: inherit;
}
58 changes: 52 additions & 6 deletions frontend/dronebridge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,17 @@ let old_conn_status = 0; // connection status before last update of UI to know w
let serial_via_JTAG = 0; // set to 1 if ESP32 is using the USB interface as serial interface for data and not using the UART. If 0 we set UART config to invisible for the user.
let last_byte_count = 0;
let last_timestamp_byte_count = 0;
let esp_chip_model = 0; // according to get_esp_chip_model_str()

function change_wifi_dis_arm_visibility() {
// we only support this feature when MAVLink or LTM are set AND when a standard Wi-Fi mode is enabled
let dis_wifi_arm_div = document.getElementById("dis_wifi_arm_div")
if (document.getElementById("esp32_mode").value > "2" || document.getElementById("telem_proto").value === "5") {
dis_wifi_arm_div.style.display = "none";
} else {
dis_wifi_arm_div.style.display = "block";
}
}

function change_ap_ip_visibility(){
let ap_ip_div = document.getElementById("ap_ip_div");
Expand All @@ -29,18 +40,22 @@ function change_ap_ip_visibility(){
} else {
wifi_ssid_div.style.visibility = "visible";
}
change_wifi_dis_arm_visibility();
}

function change_msp_ltm_visibility(){
let msp_ltm_div = document.getElementById("msp_ltm_div");
let trans_pack_size_div = document.getElementById("trans_pack_size_div");
if (document.getElementById("telem_proto").value === "1") {
let telem_proto = document.getElementById("telem_proto");
let dis_wifi_arm_div = document.getElementById("dis_wifi_arm_div");
if (telem_proto.value === "1") {
msp_ltm_div.style.display = "block";
trans_pack_size_div.style.display = "none";
} else {
msp_ltm_div.style.display = "none";
trans_pack_size_div.style.display = "block";
}
change_wifi_dis_arm_visibility();
}

function change_uart_visibility() {
Expand Down Expand Up @@ -71,7 +86,7 @@ function toJSONString(form) {
let elements = form.querySelectorAll("input, select")
for (let i = 0; i < elements.length; ++i) {
let element = elements[i]
let name = element.name
let name = element.name;
let value = element.value;
// parse numbers as numbers except for the SSID and the password fields
if (!isNaN(Number(value)) && (name.localeCompare("wifi_ssid") !== 0) && (name.localeCompare("wifi_pass") !== 0)) {
Expand All @@ -80,7 +95,13 @@ function toJSONString(form) {
}
} else {
if (name) {
obj[name] = value
if (element.type === "checkbox") {
// convert checked/not checked to 1 & 0 as value
obj[name] = element.checked ? 1 : 0;
} else {
// just get the value specified by the input/select
obj[name] = value
}
}
}
}
Expand Down Expand Up @@ -139,11 +160,31 @@ async function send_json(api_path, json_data = undefined) {
return await response.json();
}

function get_esp_chip_model_str(esp_model_index) {
switch (esp_model_index) {
default:
case 0:
return "unknown/unsupported ESP32 chip";
case 1:
return "ESP32";
case 2:
return "ESP32-S2";
case 9:
return "ESP32-S3";
case 5:
return "ESP32-C3";
case 13:
return "ESP32-C6";
case 12:
return "ESP32-C5";
}
}

function get_system_info() {
get_json("api/system/info").then(json_data => {
console.log("Received settings: " + json_data)
document.getElementById("about").innerHTML = "DroneBridge for ESP32 - v" + json_data["major_version"] +
"." + json_data["minor_version"] + " - esp-idf " + json_data["idf_version"]
document.getElementById("about").innerHTML = "DroneBridge for ESP32 v" + json_data["major_version"] +
"." + json_data["minor_version"] + " - esp-idf " + json_data["idf_version"] + " - " + get_esp_chip_model_str(json_data["esp_chip_model"])
document.getElementById("esp_mac").innerHTML = json_data["esp_mac"]
serial_via_JTAG = json_data["serial_via_JTAG"];
}).catch(error => {
Expand Down Expand Up @@ -258,7 +299,12 @@ function get_settings() {
if (json_data.hasOwnProperty(key)) {
let elem = document.getElementById(key)
if (elem != null) {
elem.value = json_data[key] + ""
if (elem.type === "checkbox") {
// translate 1 & 0 to checked and not checked
elem.checked = json_data[key] === 1;
} else {
elem.value = json_data[key] + ""
}
}
}
}
Expand Down
29 changes: 19 additions & 10 deletions frontend/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,17 +58,17 @@ <h2>Settings</h2>
<h3>Wi-Fi</h3>
<div class="row">
<div class="twelve columns">
<label for="esp32_mode">ESP32 Mode (requires save & reboot)</label>
<label for="esp32_mode">ESP32 Mode</label>
<select id="esp32_mode" name="esp32_mode" form="settings_form" onchange="change_ap_ip_visibility()">
<option value="1">WiFi Access Point Mode</option>
<option value="2">WiFi Client Mode</option>
<option value="3">Wifi Access Point LR Mode</option>
<option value="4">ESP-NOW LR Mode AIR</option>
<option value="5">ESP-NOW LR Mode GND</option>
</select>
<div id="esp-lr-ap-disclaimer" style="color: #ff881a; margin-bottom: 0.8rem">LR Mode makes the
device invisible for non-LR enabled devices!</br>You will not be able to change the config!</br>
Data rate is reduced to ~0.25Mbps. Range may be increase by a factor of ~2.</br>Press boot
<div class="note" id="esp-lr-ap-disclaimer"><h4>Attention:</h4>
LR Mode makes the device invisible for non-LR enabled devices!</br>You will not be able to change the config!</br></br>
The data rate is reduced to ~0.25Mbps. The range may be increase by a factor of ~2.</br>Press the boot
button (short press for AP-Mode with password "dronebridge" or long press for reset to defaults)
or erase the flash memory of the ESP32 and re-flash DroneBridge for ESP32 to get back into
normal Wi-Fi Mode!
Expand All @@ -86,12 +86,24 @@ <h3>Wi-Fi</h3>
</div>
</div>
<div class="row">
<div id="ap_channel_div" class="twelve columns">
<div id="ap_channel_div" class="six columns">
<label for="ap_channel">Channel</label>
<input type="text" name="ap_channel" value="" id="ap_channel">
</div>
<div class="six columns" id="ap_ip_div">
<label for="ap_ip">Gateway IP address</label>
<input type="text" name="ap_ip" value="" id="ap_ip">
</div>
</div>
<div id="dis_wifi_arm_div" class="row">
<div class="twelve columns">
<div class="checkbox-wrapper-14">
<input id="dis_wifi_arm" name="dis_wifi_arm" type="checkbox" class="switch">
<label for="dis_wifi_arm">Disable Wi-Fi when autopilot is armed</label>
</div>
</div>
</div>
<h3>Serial</h3>
<h3 style="margin-top: 2rem">Serial</h3>
<div class="row" id="tx_rx_div">
<div class="six columns">
<label for="tx_pin">UART TX Pin</label>
Expand Down Expand Up @@ -186,10 +198,7 @@ <h3>Serial</h3>
</div>
</div>
<div class="row">
<div class="six columns" id="ap_ip_div">
<label for="ap_ip">Gateway IP address</label>
<input type="text" name="ap_ip" value="" id="ap_ip">
</div>

</div>
</div>
</form>
Expand Down
2 changes: 1 addition & 1 deletion frontend/skeleton.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ body {
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 2rem;
margin-bottom: .8rem;
font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
Expand Down
Loading

0 comments on commit d19a830

Please sign in to comment.