mirror of
https://github.com/iNavFlight/inav-configurator.git
synced 2025-07-15 12:25:13 +03:00
started to work on new GUI functionality
This commit is contained in:
skaman82
parent
4e8fc955b0
commit
19897cd574
6 changed files with 237 additions and 51 deletions
|
|
@ -257,6 +257,103 @@ function onConnect() {
|
|||
|
||||
var port_picker = $('#portsinput');
|
||||
port_picker.hide();
|
||||
|
||||
var dataflash = $('#dataflash_wrapper');
|
||||
dataflash.show();
|
||||
|
||||
|
||||
|
||||
// TEST code for profile change in header
|
||||
function get_pid_controller() {
|
||||
if (GUI.canChangePidController) {
|
||||
MSP.send_message(MSP_codes.MSP_PID_CONTROLLER, false, false, get_pid_names);
|
||||
} else {
|
||||
get_pid_names();
|
||||
}
|
||||
}
|
||||
|
||||
function get_pid_names() {
|
||||
MSP.send_message(MSP_codes.MSP_PIDNAMES, false, false, get_pid_data);
|
||||
}
|
||||
|
||||
// requesting MSP_STATUS manually because it contains CONFIG.profile
|
||||
MSP.send_message(MSP_codes.MSP_STATUS, false, false, get_pid_controller);
|
||||
|
||||
var profile_e = $('select[name="profilechange"]');
|
||||
|
||||
// Fill in currently selected profile
|
||||
profile_e.val(CONFIG.profile);
|
||||
// UI Hooks
|
||||
profile_e.change(function () {
|
||||
var profile = parseInt($(this).val());
|
||||
MSP.send_message(MSP_codes.MSP_SELECT_SETTING, [profile], false, function () {
|
||||
GUI.log(chrome.i18n.getMessage('pidTuningLoadedProfile', [profile + 1]));
|
||||
|
||||
GUI.tab_switch_cleanup(function () {
|
||||
|
||||
// < here goes the code to reinitialise the current tab
|
||||
TABS[this.active_tab].initialize();
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// testing profile change END
|
||||
|
||||
// TEST code for dataflash status in header
|
||||
MSP.send_message(MSP_codes.MSP_DATAFLASH_SUMMARY, false, false);
|
||||
|
||||
function formatFilesize(bytes) {
|
||||
if (bytes < 1024) {
|
||||
return bytes + "B";
|
||||
}
|
||||
|
||||
var kilobytes = bytes / 1024;
|
||||
|
||||
if (kilobytes < 1024) {
|
||||
return Math.round(kilobytes) + "kB";
|
||||
}
|
||||
|
||||
var megabytes = kilobytes / 1024;
|
||||
|
||||
return megabytes.toFixed(1) + "MB";
|
||||
}
|
||||
|
||||
function update_html() {
|
||||
if (DATAFLASH.usedSize > 0) {
|
||||
$(".dataflash-used").css({
|
||||
width: (DATAFLASH.usedSize / DATAFLASH.totalSize * 100) + "%",
|
||||
display: 'block'
|
||||
});
|
||||
|
||||
$(".dataflash-used div").text('Used space ' + formatFilesize(DATAFLASH.usedSize));
|
||||
} else {
|
||||
$(".dataflash-used").css({
|
||||
display: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
if (DATAFLASH.totalSize - DATAFLASH.usedSize > 0) {
|
||||
$(".dataflash-free").css({
|
||||
width: ((DATAFLASH.totalSize - DATAFLASH.usedSize) / DATAFLASH.totalSize * 100) + "%",
|
||||
display: 'block'
|
||||
});
|
||||
$(".dataflash-free div").text('Free space ' + formatFilesize(DATAFLASH.totalSize - DATAFLASH.usedSize));
|
||||
} else {
|
||||
$(".dataflash-free").css({
|
||||
display: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// testing dataflash change END
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function onClosed(result) {
|
||||
|
|
@ -269,11 +366,14 @@ function onClosed(result) {
|
|||
$('#tabs ul.mode-connected').hide();
|
||||
$('#tabs ul.mode-disconnected').show();
|
||||
|
||||
var sensor_state = $('#sensor-status');
|
||||
sensor_state.hide();
|
||||
|
||||
var port_picker = $('#portsinput');
|
||||
port_picker.show();
|
||||
|
||||
var sensor_state = $('#sensor-status');
|
||||
sensor_state.hide();
|
||||
var dataflash = $('#dataflash_wrapper');
|
||||
dataflash.hide();
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
122
main.css
122
main.css
|
|
@ -360,27 +360,6 @@ input[type="number"]::-webkit-inner-spin-button {
|
|||
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.45));
|
||||
}
|
||||
|
||||
/*
|
||||
#documentation-controls {
|
||||
float: right;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
#button-documentation {
|
||||
float: left;
|
||||
padding: 0 12px 0 12px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
background-color: #ffcb18;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
border: solid 1px #c0c0c0;
|
||||
display: none;
|
||||
}
|
||||
*/
|
||||
#options {
|
||||
float: right;
|
||||
width: 20px;
|
||||
|
|
@ -885,13 +864,8 @@ dialog {
|
|||
}
|
||||
|
||||
.content_wrapper {
|
||||
/* leave 20px side padding always */
|
||||
/*padding: 0 20px 0 20px;
|
||||
for testing: */
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
/*float: left;
|
||||
width:calc(100% - 40px);*/
|
||||
}
|
||||
|
||||
.content_toolbar {
|
||||
|
|
@ -1097,9 +1071,6 @@ dialog {
|
|||
}
|
||||
|
||||
.fixed_band .save_btn a {
|
||||
/* line-height:20px;
|
||||
padding:3px 13px 5px 13px;
|
||||
*/
|
||||
margin-top: 9px;
|
||||
margin-bottom: 0px;
|
||||
margin-right: 20px;
|
||||
|
|
@ -1364,11 +1335,102 @@ dialog {
|
|||
color: #fff;
|
||||
font-size: 10px;
|
||||
}
|
||||
/* Dataflash element styling*/
|
||||
|
||||
#dataflash_wrapper {
|
||||
color:white;
|
||||
font-size:10px;
|
||||
margin-top: 20px;
|
||||
width:95px;
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
line-height: 12px;
|
||||
height: 33px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #272727;
|
||||
box-shadow: 0px 1px 0px rgba(92, 92, 92, 0.5);
|
||||
background-color: #434343;
|
||||
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55));
|
||||
padding-top:5px;
|
||||
display:none;
|
||||
text-shadow: 0px 1px rgba(0, 0, 0, 1.0);
|
||||
|
||||
}
|
||||
|
||||
#profile_change {
|
||||
color:white;
|
||||
margin-top: 16px;
|
||||
width:95px;
|
||||
float: right;
|
||||
margin-right: 0px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.dataflash-contents {
|
||||
margin-top: 18px;
|
||||
border: 1px solid #4A4A4A;
|
||||
background-color: #4A4A4A;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
border-radius: 3px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
.dataflash-contents .notsupported {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dataflash-contents li {
|
||||
height: 6px;
|
||||
position: relative;
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.20);
|
||||
border-radius: 4px;
|
||||
|
||||
}
|
||||
|
||||
.dataflash-contents li div {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
margin-top: 0px;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width:90px;
|
||||
text-align:left;
|
||||
color:silver;
|
||||
}
|
||||
|
||||
.dataflash-used {
|
||||
background-color: #59AA29;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
height: 8px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
background-color: #bcf;
|
||||
}
|
||||
|
||||
.noflash {
|
||||
display:none;
|
||||
color: #4f4f4f;
|
||||
text-align: center;
|
||||
text-shadow: 0px 1px rgba(0, 0, 0, 1.0);
|
||||
margin-top:2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
|
||||
.content_wrapper {
|
||||
padding: 15px;
|
||||
/*width:calc(100% - 30px);*/
|
||||
}
|
||||
.tab_title {
|
||||
font-size: 16px;
|
||||
|
|
|
|||
22
main.html
22
main.html
|
|
@ -126,6 +126,28 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="header-wrapper">
|
||||
<div id="dataflash_wrapper">
|
||||
<div class="noflash" align="center">No dataflash <br>chip found</div>
|
||||
<ul class="dataflash-contents">
|
||||
<li class="dataflash-used">
|
||||
<div class="legend">Used space</div>
|
||||
</li>
|
||||
<li class="dataflash-free">
|
||||
<div class="legend">Free space</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="profile_change">
|
||||
<div class="dropdown dropdown-dark">
|
||||
<form name="pid-tuning" id="pid-tuning">
|
||||
<select class="dropdown-select" name="profilechange">
|
||||
<option value="0">Profile 1</option>
|
||||
<option value="1">Profile 2</option>
|
||||
<option value="2">Profile 3</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sensor-status" class="sensor_state mode-connected">
|
||||
<ul>
|
||||
<li class="gyro" title="Gyroscope">
|
||||
|
|
|
|||
|
|
@ -98,6 +98,8 @@
|
|||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.tab-dataflash .dataflash-used {
|
||||
|
|
|
|||
|
|
@ -54,26 +54,26 @@ TABS.dataflash.initialize = function (callback) {
|
|||
|
||||
function update_html() {
|
||||
if (DATAFLASH.usedSize > 0) {
|
||||
$(".tab-dataflash .dataflash-used").css({
|
||||
$(".dataflash-used").css({
|
||||
width: (DATAFLASH.usedSize / DATAFLASH.totalSize * 100) + "%",
|
||||
display: 'block'
|
||||
});
|
||||
|
||||
$(".tab-dataflash .dataflash-used div").text('Used space ' + formatFilesize(DATAFLASH.usedSize));
|
||||
$(".dataflash-used div").text('Used space ' + formatFilesize(DATAFLASH.usedSize));
|
||||
} else {
|
||||
$(".tab-dataflash .dataflash-used").css({
|
||||
$(".dataflash-used").css({
|
||||
display: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
if (DATAFLASH.totalSize - DATAFLASH.usedSize > 0) {
|
||||
$(".tab-dataflash .dataflash-free").css({
|
||||
$(".dataflash-free").css({
|
||||
width: ((DATAFLASH.totalSize - DATAFLASH.usedSize) / DATAFLASH.totalSize * 100) + "%",
|
||||
display: 'block'
|
||||
});
|
||||
$(".tab-dataflash .dataflash-free div").text('Free space ' + formatFilesize(DATAFLASH.totalSize - DATAFLASH.usedSize));
|
||||
$(".dataflash-free div").text('Free space ' + formatFilesize(DATAFLASH.totalSize - DATAFLASH.usedSize));
|
||||
} else {
|
||||
$(".tab-dataflash .dataflash-free").css({
|
||||
$(".dataflash-free").css({
|
||||
display: 'none'
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue