Skip to content

Commit

Permalink
Redesign of Firmware section at Setup tab (#3770)
Browse files Browse the repository at this point in the history 
* Redesign of Firmware section

* layout change

* popup work

* change branch

* more popup

* also main

* Final

* Final..

* removed popup.js - not needed

* with grid, missing center in frame

* missing center in frame

* Final

* Grid without table

* Fix quality gate issue

* Simple and synamic gris, and dark theme supported

* Update help

* Update help

* Update src/js/tabs/setup.js as suggested

Co-authored-by: Mark Haslinghuis <[email protected]>

---------

Co-authored-by: nerdCopter <[email protected]>
Co-authored-by: Mark Haslinghuis <[email protected]>
  • Loading branch information
@HThuren @nerdCopter @haslinghuis
3 people authored Feb 16, 2024
1 parent b362ed3 commit c289445
Show file tree
Hide file tree
Showing 6 changed files with 104 additions and 43 deletions.
21 changes: 12 additions & 9 deletions locales/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -895,6 +895,9 @@
"initialSetupCpuTemp": {
"message": "CPU Temperature:"
},
"initialSetupCpuTempNotSupported": {
"message": "No support from MSP API before 1.46"
},
"initialSetupRSSI": {
"message": "RSSI:"
},
Expand Down Expand Up @@ -1088,8 +1091,8 @@
"initialSetupInfoBuild": {
"message": "Firmware info"
},
"initialSetupInfoBuildHelp": {
"message": "Shows information regarding the build of firmware. The Build Config and Bulid Log links to the cloud information found by the Build key",
"initialSetupInfoFirmwareHelp": {
"message": "Shows information for firmware Build, require online to Build server.<br>Options show Defined options used in Cloud Build.<br>Log and Config links show cloud information by key stored in firmware.<br>At local Build, section are empty.",
"description": "Message that pops up to describe the Build / Firmware section"
},
"initialSetupInfoBuildDate": {
Expand All @@ -1101,20 +1104,20 @@
"initialSetupInfoBuildInfoKey": {
"message": "Build key"
},
"initialSetupInfoBuildInfoConfig": {
"initialSetupInfoBuildConfig": {
"message": "Config"
},
"initialSetupInfoBuildInfoLog": {
"initialSetupInfoBuildLog": {
"message": "Log"
},
"initialSetupInfoBuildOptions": {
"message": "Build Options:"
"message": "Options"
},
"initialSetupInfoBuildOptionsList": {
"message": "Defines used"
"initialSetupInfoBuildOptionList": {
"message": "Options defined in firmware build"
},
"initialSetupInfoBuildOptionsEmpty": {
"message": "Local Build - no Defines used"
"initialSetupInfoBuildEmpty": {
"message": "Local Build - no Cloud information"
},
"initialSetupNotOnline": {
"message": "Server unavailable"
Expand Down
5 changes: 4 additions & 1 deletion src/css/dark-theme.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -467,7 +467,7 @@ progress[value] {
}
.z {
background-color: #CB4B4B;
}
}
}
.motorblock {
background-color: #393b3a;
Expand Down Expand Up @@ -942,6 +942,9 @@ progress[value] {
.attitude_info {
color: white;
}
.dialogBuildInfo {
background-color: #575757;
}
}
.tab-transponder {
.text {
Expand Down
24 changes: 22 additions & 2 deletions src/css/tabs/setup.less
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.tab-setup {
.ui-grid-col {
.ui-grid-col {
margin-bottom: 0;
}
.content_wrapper {
Expand Down Expand Up @@ -98,7 +98,7 @@
opacity: 0.5;
}
dialog {
width: 40em;
width: min-content;
border-radius: 5px;
.buttons {
position: static;
Expand Down Expand Up @@ -171,6 +171,26 @@
float: left;
}
}
.dialogBuildInfo {
transition: all 0.2s;
overflow-x: hidden;
overflow-y: auto;
background-color: white;
width: min-content;
height: min-content;
}
.dialogBuildInfo-closebtn {
float: right;
}
.dialogBuildInfoGrid-container {
display: grid;
grid-template-columns: auto auto;
grid-gap: 5px;
}
.dialogBuildInfoGrid-item {
padding: 5px 5px 3px 5px;
user-select: text;
}
.block.info {
.fields {
padding: 5px 5px 3px 5px;
Expand Down
73 changes: 51 additions & 22 deletions src/js/tabs/setup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,8 +208,7 @@ setup.initialize = function (callback) {
// Firmware info
msp_api_e = $('.api-version'),
build_date_e = $('.build-date'),
build_info_e = $('.build-info'),
build_opt_e = $('.build-options');
build_info_e = $('.build-info');

// DISARM FLAGS
// We add all the arming/disarming flags available, and show/hide them if needed.
Expand Down Expand Up @@ -417,35 +416,63 @@ setup.initialize = function (callback) {
}
};

function showDialogBuildInfo(title, message) {
const dialog = $('.dialogBuildInfo')[0];

$('.dialogBuildInfo-title').html(title);
$('.dialogBuildInfo-content').html(message);

if ( ! dialog.hasAttribute('open')) {
dialog.showModal();
$('.dialogBuildInfo-closebtn').on('click', function() {
dialog.close();
});
}
}

const showFirmwareInfo = function() {
// Firmware info
msp_api_e.text([FC.CONFIG.apiVersion]);
build_date_e.text([FC.CONFIG.buildInfo]);

if (FC.CONFIG.buildKey.length === 32) {
const buildRoot = `https://build.betaflight.com/api/builds/${FC.CONFIG.buildKey}`;
const buildConfig = `<span class="buildInfoBtn" title="${i18n.getMessage('initialSetupInfoBuildInfoConfig')}: ${buildRoot}/json">
<a href="${buildRoot}/json" target="_blank"><strong>${i18n.getMessage('initialSetupInfoBuildInfoConfig')}</a></strong></span>`;
const buildLog = `<span class="buildInfoBtn" title="${i18n.getMessage('initialSetupInfoBuildInfoLog')}: ${buildRoot}/log">
<a href="${buildRoot}/log" target="_blank"><strong>${i18n.getMessage('initialSetupInfoBuildInfoLog')}</a></strong></span>`;
build_info_e.html(`${buildConfig} &nbsp &nbsp ${buildLog}`);
$('.build-info a').removeClass('disabled');
} else {
$('.build-info a').addClass('disabled');
}
if (navigator.onLine) {
let buildOptionList = "";

if (FC.CONFIG.buildOptions.length) {
let buildOptions = "";
build_opt_e.text = "";
if (FC.CONFIG.buildOptions.length) {
buildOptionList = `<div class="dialogBuildInfoGrid-container">`;
for (const buildOptionElement of FC.CONFIG.buildOptions) {
buildOptionList += `<div class="dialogBuildInfoGrid-item">${buildOptionElement}</div>`;
}
buildOptionList += `</div>`;
build_info_e.html(`<span class="buildInfoBtn" title="${i18n.getMessage('initialSetupInfoBuildOption')}">
<a class="buildOptions" href=#"><strong>${i18n.getMessage('initialSetupInfoBuildOptionsList')}</strong></a></span>`);
} else {
build_info_e.html(i18n.getMessage(navigator.onLine ? 'initialSetupInfoBuildOptionsEmpty' : 'initialSetupNotOnline'));
}

if (FC.CONFIG.buildKey.length === 32) {
const buildRoot = `https://build.betaflight.com/api/builds/${FC.CONFIG.buildKey}`;
const buildConfig = `<span class="buildInfoBtn" title="${i18n.getMessage('initialSetupInfoBuildConfig')}: ${buildRoot}/json">
<a href="${buildRoot}/json" target="_blank"><strong>${i18n.getMessage('initialSetupInfoBuildConfig')}</strong></a></span>`;

const buildLog = `<span class="buildInfoBtn" title="${i18n.getMessage('initialSetupInfoBuildLog')}: ${buildRoot}/log">
<a href="${buildRoot}/log" target="_blank"><strong>${i18n.getMessage('initialSetupInfoBuildLog')}</strong></a></span>`;

for (const buildOption of FC.CONFIG.buildOptions) {
buildOptions = `${buildOptions} &nbsp ${buildOption}`;
const buildOptions = `<span class="buildInfoBtn" title="${i18n.getMessage('initialSetupInfoBuildOptionList')}">
<a class="buildOptions disabled" href=#"><strong>${i18n.getMessage('initialSetupInfoBuildOptions')}</strong></a></span>`;

build_info_e.html(`${buildConfig} ${buildLog} &nbsp; &nbsp; ${buildOptions}`);
$('a.buildOptions').on('click', async function() {
showDialogBuildInfo(`<h3>${i18n.getMessage('initialSetupInfoBuildOptionList')}</h3>`, buildOptionList);
});
$('.build-info a').removeClass('disabled');
} else {
build_info_e.html(i18n.getMessage('initialSetupInfoBuildEmpty'));
$('.build-info a').addClass('disabled');
}
build_opt_e.html(`<span class="buildInfoClassOptions"
title="${i18n.getMessage('initialSetupInfoBuildOptions')}${buildOptions}">
<strong>${i18n.getMessage('initialSetupInfoBuildOptionsList')}</strong></span>`);
} else {
build_opt_e.html(i18n.getMessage(navigator.onLine ? 'initialSetupInfoBuildOptionsEmpty' : 'initialSetupNotOnline'));
build_info_e.html(i18n.getMessage('initialSetupNotOnline'));
$('.build-info a').addClass('disabled');
}
};

Expand Down Expand Up @@ -477,6 +504,8 @@ setup.initialize = function (callback) {

if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46) && FC.CONFIG.cpuTemp) {
cputemp_e.html(`${FC.CONFIG.cpuTemp.toFixed(0)} &#8451;`);
} else {
cputemp_e.text(i18n.getMessage('initialSetupCpuTempNotSupported'));
}

// GPS info is acquired in the background using update_live_status() in serial_backend.js
Expand Down
2 changes: 1 addition & 1 deletion src/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@
:batteryState="FC.BATTERY_STATE?.batteryState"
>
</battery-icon>
<battery-legend
<battery-legend
:voltage="FC.ANALOG.voltage"
:vbatmaxcellvoltage="FC.BATTERY_CONFIG.vbatmaxcellvoltage"
></battery-legend>
Expand Down
22 changes: 14 additions & 8 deletions src/tabs/setup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
</div>
<div class="cell_setup">
<span i18n="initialSetupBackupRestoreText"></span>
</div>
</div>
</div>
</div>
<div class="gui_box grey">
Expand Down Expand Up @@ -154,7 +154,7 @@
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="initialSetupInfoHead"></div>
<div class="helpicon cf_tip" i18n_title="initialSetupInfoHeadHelp"></div>
<div class="helpicon cf_tip" i18n_title="initialSetupInfoHeadHelp"></div>
</div>
<div class="spacer_box">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table" role="presentation">
Expand Down Expand Up @@ -189,7 +189,7 @@
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="initialSensorInfoHead"></div>
<div class="helpicon cf_tip" i18n_title="initialSensorInfoHeadHelp"></div>
<div class="helpicon cf_tip" i18n_title="initialSensorInfoHeadHelp"></div>
</div>
<div class="spacer_box">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table" role="presentation">
Expand Down Expand Up @@ -221,7 +221,7 @@
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="initialSetupInfoBuild"></div>
<div class="helpicon cf_tip" i18n_title="initialSetupInfoBuildHelp"></div>
<div class="helpicon cf_tip" i18n_title="initialSetupInfoFirmwareHelp"></div>
</div>
<div class="spacer_box">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table" role="presentation">
Expand All @@ -239,10 +239,6 @@
<td id="build-info" i18n="initialSetupInfoBuildInfo"></td>
<td class="build-info"></td>
</tr>
<tr>
<td id="build-options" i18n="initialSetupInfoBuildOptions"></td>
<td class="build-options"></td>
</tr>
</tbody>
</table>
</div>
Expand All @@ -262,4 +258,14 @@ <h3 i18n="dialogConfirmResetTitle"></h3>
</div>
</dialog>

<dialog class="dialogBuildInfo">
<div class="dialogBuildInfo-title"></div>
<div class="contentBuildInfo">
<div class="dialogBuildInfo-content" style="margin-top: 10px"></div>
</div>
<div class="dialogButtons">
<a href="#" class="dialogBuildInfo-closebtn regular-button" i18n="close"></a>
</div>
</dialog>

</div>

0 comments on commit c289445

Please sign in to comment.