started to work on new GUI functionality

pull/3/head
skaman82 9 years ago
parent 4e8fc955b0
commit 19897cd574

@ -254,10 +254,107 @@ function onConnect() {
var sensor_state = $('#sensor-status');
sensor_state.show();
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) {
if (result) { // All went as expected
@ -269,12 +366,15 @@ 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 dataflash = $('#dataflash_wrapper');
dataflash.hide();
var sensor_state = $('#sensor-status');
sensor_state.hide();
}
function read_serial(info) {

@ -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;
@ -1353,7 +1324,7 @@ dialog {
border-radius: 3px;
color: #fff;
font-size: 10px;
}
}
.fixfalse {
background-color: #e60000;
@ -1364,19 +1335,110 @@ 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;
line-height: 18px;
font-family: 'open_sanslight', Arial;
margin-bottom: 10px;
height: 22px;
}
}
.cf_doc_version_bt a {
padding: 1px 5px 1px 5px;
margin-top: -35px;

@ -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">
@ -193,10 +215,10 @@
title="Dataflash"></a></li>
<li class="tab_cli"><a href="#" i18n="tabCLI" class="tabicon ic_cli" title="CLI"></a></li>
<!-- spare icons
<li class=""><a href="#"class="tabicon ic_mission">Mission (spare icon)</a></li>
<li class=""><a href="#"class="tabicon ic_advanced">Advanced (spare icon)</a></li>
<li class=""><a href="#"class="tabicon ic_wizzard">Wizzard (spare icon)</a></li>
-->
<li class=""><a href="#"class="tabicon ic_mission">Mission (spare icon)</a></li>
<li class=""><a href="#"class="tabicon ic_advanced">Advanced (spare icon)</a></li>
<li class=""><a href="#"class="tabicon ic_wizzard">Wizzard (spare icon)</a></li>
-->
</ul>
</div>
<div class="clear-both"></div>

@ -367,8 +367,8 @@ $("#showlog").on('click', function() {
if ( state ) {
$("#log").animate({height: 27}, 200);
$("#log").removeClass('active');
$("#content").removeClass('logopen');
$("#tabs").removeClass('logopen');
$("#content").removeClass('logopen');
$("#tabs").removeClass('logopen');
$("#scrollicon").removeClass('active');
state = false;

@ -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…
Cancel
Save