mirror of
https://github.com/betaflight/betaflight-configurator.git
synced 2025-07-22 07:45:19 +03:00
Added sensor icons. Experimenting with theme change
This commit is contained in:
skaman82
parent
f6a9005049
commit
819c07f2f5
18 changed files with 453 additions and 58 deletions
|
|
@ -10,8 +10,8 @@ function startApplication() {
|
||||||
id: 'main-window',
|
id: 'main-window',
|
||||||
frame: 'chrome',
|
frame: 'chrome',
|
||||||
innerBounds: {
|
innerBounds: {
|
||||||
minWidth: 960,
|
minWidth: 1150, // changed from 960
|
||||||
minHeight: 625
|
minHeight: 700 // changed from 625
|
||||||
}
|
}
|
||||||
}, function (createdWindow) {
|
}, function (createdWindow) {
|
||||||
createdWindow.contentWindow.addEventListener('load', function () {
|
createdWindow.contentWindow.addEventListener('load', function () {
|
||||||
|
|
|
||||||
BIN
images/icons/sensor_acc_off.png
Normal file
BIN
images/icons/sensor_acc_off.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
images/icons/sensor_acc_on.png
Normal file
BIN
images/icons/sensor_acc_on.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
images/icons/sensor_baro_off.png
Normal file
BIN
images/icons/sensor_baro_off.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3 KiB |
BIN
images/icons/sensor_baro_on.png
Normal file
BIN
images/icons/sensor_baro_on.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
images/icons/sensor_gyro_off.png
Normal file
BIN
images/icons/sensor_gyro_off.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
images/icons/sensor_gyro_on.png
Normal file
BIN
images/icons/sensor_gyro_on.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
images/icons/sensor_mag_off.png
Normal file
BIN
images/icons/sensor_mag_off.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
images/icons/sensor_mag_on.png
Normal file
BIN
images/icons/sensor_mag_on.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
BIN
images/icons/sensor_sat_off.png
Normal file
BIN
images/icons/sensor_sat_off.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
images/icons/sensor_sat_on.png
Normal file
BIN
images/icons/sensor_sat_on.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
images/icons/sensor_sonar_off.png
Normal file
BIN
images/icons/sensor_sonar_off.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
images/icons/sensor_sonar_on.png
Normal file
BIN
images/icons/sensor_sonar_on.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3 KiB |
|
|
@ -304,38 +304,54 @@ function sensor_status(sensors_detected) {
|
||||||
|
|
||||||
if (have_sensor(sensors_detected, 'acc')) {
|
if (have_sensor(sensors_detected, 'acc')) {
|
||||||
$('.accel', e_sensor_status).addClass('on');
|
$('.accel', e_sensor_status).addClass('on');
|
||||||
|
$('.accicon', e_sensor_status).addClass('active');
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
$('.accel', e_sensor_status).removeClass('on');
|
$('.accel', e_sensor_status).removeClass('on');
|
||||||
|
$('.accicon', e_sensor_status).removeClass('active');
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (have_sensor(sensors_detected, 'gyro')) {
|
if (have_sensor(sensors_detected, 'gyro')) {
|
||||||
$('.gyro', e_sensor_status).addClass('on');
|
$('.gyro', e_sensor_status).addClass('on');
|
||||||
|
$('.gyroicon', e_sensor_status).addClass('active');
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
$('.gyro', e_sensor_status).removeClass('on');
|
$('.gyro', e_sensor_status).removeClass('on');
|
||||||
|
$('.gyroicon', e_sensor_status).removeClass('active');
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (have_sensor(sensors_detected, 'baro')) {
|
if (have_sensor(sensors_detected, 'baro')) {
|
||||||
$('.baro', e_sensor_status).addClass('on');
|
$('.baro', e_sensor_status).addClass('on');
|
||||||
|
$('.baroicon', e_sensor_status).addClass('active');
|
||||||
} else {
|
} else {
|
||||||
$('.baro', e_sensor_status).removeClass('on');
|
$('.baro', e_sensor_status).removeClass('on');
|
||||||
|
$('.baroicon', e_sensor_status).removeClass('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (have_sensor(sensors_detected, 'mag')) {
|
if (have_sensor(sensors_detected, 'mag')) {
|
||||||
$('.mag', e_sensor_status).addClass('on');
|
$('.mag', e_sensor_status).addClass('on');
|
||||||
|
$('.magicon', e_sensor_status).addClass('active');
|
||||||
} else {
|
} else {
|
||||||
$('.mag', e_sensor_status).removeClass('on');
|
$('.mag', e_sensor_status).removeClass('on');
|
||||||
|
$('.magicon', e_sensor_status).removeClass('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (have_sensor(sensors_detected, 'gps')) {
|
if (have_sensor(sensors_detected, 'gps')) {
|
||||||
$('.gps', e_sensor_status).addClass('on');
|
$('.gps', e_sensor_status).addClass('on');
|
||||||
|
$('.gpsicon', e_sensor_status).addClass('active');
|
||||||
} else {
|
} else {
|
||||||
$('.gps', e_sensor_status).removeClass('on');
|
$('.gps', e_sensor_status).removeClass('on');
|
||||||
|
$('.gpsicon', e_sensor_status).removeClass('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (have_sensor(sensors_detected, 'sonar')) {
|
if (have_sensor(sensors_detected, 'sonar')) {
|
||||||
$('.sonar', e_sensor_status).addClass('on');
|
$('.sonar', e_sensor_status).addClass('on');
|
||||||
|
$('.sonaricon', e_sensor_status).addClass('active');
|
||||||
} else {
|
} else {
|
||||||
$('.sonar', e_sensor_status).removeClass('on');
|
$('.sonar', e_sensor_status).removeClass('on');
|
||||||
|
$('.sonaricon', e_sensor_status).removeClass('active');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
134
main.css
134
main.css
|
|
@ -214,7 +214,7 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
line-height: 2px;
|
line-height: 2px;
|
||||||
height:67px;
|
height:67px;
|
||||||
border-radius:3px;
|
border-radius:5px;
|
||||||
border:1px solid #272727;
|
border:1px solid #272727;
|
||||||
box-shadow: 0px 2px 0px rgba(92,92,92,0.5);
|
box-shadow: 0px 2px 0px rgba(92,92,92,0.5);
|
||||||
background-color: #434343;
|
background-color: #434343;
|
||||||
|
|
@ -229,28 +229,148 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
height:67px;
|
height:67px;
|
||||||
width:45px;
|
width:45px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
color: white;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-top:1px solid #373737;
|
border-top:1px solid #373737;
|
||||||
border-bottom:1px solid #1a1a1a;
|
border-bottom:1px solid #1a1a1a;
|
||||||
border-left:1px solid #373737;
|
border-left:1px solid #373737;
|
||||||
border-right:1px solid #222222;
|
border-right:1px solid #222222;
|
||||||
|
background-color: #434343;
|
||||||
|
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.gyroicon {
|
||||||
|
background-image:url(images/icons/sensor_gyro_off.png);
|
||||||
|
background-size:100%;
|
||||||
|
background-position:top;
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
height:30px;
|
||||||
|
margin-top:3px;
|
||||||
|
width:45px;
|
||||||
|
padding-top:40px;
|
||||||
|
color: #818181;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.gyroicon.active {
|
||||||
|
background-image:url(images/icons/sensor_gyro_on.png);
|
||||||
|
color: #61d514;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.accicon {
|
||||||
|
background-image:url(images/icons/sensor_acc_off.png);
|
||||||
|
background-size:100%;
|
||||||
|
background-position:top;
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
height:30px;
|
||||||
|
margin-top:3px;
|
||||||
|
width:45px;
|
||||||
|
padding-top:40px;
|
||||||
|
color: #818181;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.accicon.active {
|
||||||
|
background-image:url(images/icons/sensor_acc_on.png);
|
||||||
|
color: #61d514;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.magicon {
|
||||||
|
background-image:url(images/icons/sensor_mag_off.png);
|
||||||
|
background-size:100%;
|
||||||
|
background-position:top;
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
height:30px;
|
||||||
|
margin-top:3px;
|
||||||
|
width:45px;
|
||||||
|
padding-top:40px;
|
||||||
|
color: #818181;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.magicon.active {
|
||||||
|
background-image:url(images/icons/sensor_mag_on.png);
|
||||||
|
color: #61d514;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.gpsicon {
|
||||||
|
background-image:url(images/icons/sensor_sat_off.png);
|
||||||
|
background-size:100%;
|
||||||
|
background-position:top;
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
height:30px;
|
||||||
|
margin-top:3px;
|
||||||
|
width:45px;
|
||||||
|
padding-top:40px;
|
||||||
|
color: #818181;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.gpsicon.active {
|
||||||
|
background-image:url(images/icons/sensor_sat_on.png);
|
||||||
|
color: #61d514;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.baroicon {
|
||||||
|
background-image:url(images/icons/sensor_baro_off.png);
|
||||||
|
background-size:100%;
|
||||||
|
background-position:top;
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
height:30px;
|
||||||
|
margin-top:3px;
|
||||||
|
width:45px;
|
||||||
|
padding-top:40px;
|
||||||
|
color: #818181;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.baroicon.active {
|
||||||
|
background-image:url(images/icons/sensor_baro_on.png);
|
||||||
|
color: #61d514;
|
||||||
|
}
|
||||||
|
.sonaricon {
|
||||||
|
background-image:url(images/icons/sensor_sonar_off.png);
|
||||||
|
background-size:100%;
|
||||||
|
background-position:top;
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
height:30px;
|
||||||
|
margin-top:3px;
|
||||||
|
width:45px;
|
||||||
|
padding-top:40px;
|
||||||
|
color: #818181;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.sonaricon.active {
|
||||||
|
background-image:url(images/icons/sensor_sonar_on.png);
|
||||||
|
color: #61d514;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#sensor-status li:last-child {
|
#sensor-status li:last-child {
|
||||||
border-right: 0px solid #c0c0c0;
|
border-right: 0px solid #c0c0c0;
|
||||||
border-top-right-radius:3px;
|
border-top-right-radius:5px;
|
||||||
border-bottom-right-radius:3px;
|
border-bottom-right-radius:5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sensor-status li:first-child {
|
#sensor-status li:first-child {
|
||||||
border-left: 0px solid #c0c0c0;
|
border-left: 0px solid #c0c0c0;
|
||||||
border-top-left-radius:3px;
|
border-top-left-radius:5px;
|
||||||
border-bottom-left-radius:3px;
|
border-bottom-left-radius:5px;
|
||||||
}
|
}
|
||||||
#sensor-status .on {
|
#sensor-status .on {
|
||||||
background-color: #b8cf02;
|
background-color: #434343;
|
||||||
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55));
|
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
79
main.html
79
main.html
|
|
@ -85,7 +85,7 @@
|
||||||
<script type="text/javascript" src="./tabs/logging.js"></script>
|
<script type="text/javascript" src="./tabs/logging.js"></script>
|
||||||
<script type="text/javascript" src="./tabs/dataflash.js"></script>
|
<script type="text/javascript" src="./tabs/dataflash.js"></script>
|
||||||
<script type="text/javascript" src="./tabs/firmware_flasher.js"></script>
|
<script type="text/javascript" src="./tabs/firmware_flasher.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript" src="./js/libraries/switchery/switchery.js"></script>
|
<script type="text/javascript" src="./js/libraries/switchery/switchery.js"></script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -162,12 +162,12 @@
|
||||||
<div class="header-wrapper">
|
<div class="header-wrapper">
|
||||||
<div id="sensor-status" class="sensor_state">
|
<div id="sensor-status" class="sensor_state">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="gyro" title="Gyroscope">Gyro</li>
|
<li class="gyro" title="Gyroscope"><div class="gyroicon">Gyro</div></li>
|
||||||
<li class="accel" title="Accelerometer">Accel</li>
|
<li class="accel" title="Accelerometer"><div class="accicon">Accel</div></li>
|
||||||
<li class="mag" title="Magnetometer">Mag</li>
|
<li class="mag" title="Magnetometer"><div class="magicon">Mag</div></li></li>
|
||||||
<li class="baro" title="Barometer">Baro</li>
|
<li class="baro" title="Barometer"><div class="baroicon">Baro</div></li></li>
|
||||||
<li class="gps" title="GPS">GPS</li>
|
<li class="gps" title="GPS"><div class="gpsicon">GPS</div></li></li>
|
||||||
<li class="sonar" title="Sonar / Range finder">Sonar</li>
|
<li class="sonar" title="Sonar / Range finder"><div class="sonaricon">Sonar</div></li></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="documentation-controls">
|
<div id="documentation-controls">
|
||||||
|
|
@ -187,33 +187,31 @@
|
||||||
<div class="tab_container">
|
<div class="tab_container">
|
||||||
<div id="tabs">
|
<div id="tabs">
|
||||||
<ul class="mode-disconnected">
|
<ul class="mode-disconnected">
|
||||||
<li id="tab_landing"><a href="#" i18n="tabLanding" class="tabicon ic_welcome"></a></li>
|
<li class="tab_landing"><a href="#" i18n="tabLanding" class="tabicon ic_welcome"></a></li>
|
||||||
<li id="tab_help"><a href="#" i18n="tabHelp" class="tabicon ic_help"></a></li>
|
<li class="tab_help"><a href="#" i18n="tabHelp" class="tabicon ic_help"></a></li>
|
||||||
<li id="tab_firmware_flasher"><a href="#" i18n="tabFirmwareFlasher" class="tabicon ic_flasher"></a></li>
|
<li class="tab_firmware_flasher"><a href="#" i18n="tabFirmwareFlasher" class="tabicon ic_flasher"></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<ul class="mode-connected">
|
||||||
|
<li class="tab_setup"><a href="#" i18n="tabSetup" class="tabicon ic_setup"></a></li>
|
||||||
<ul class="mode-connected">
|
<li class="tab_ports"><a href="#" i18n="tabPorts" class="tabicon ic_ports"></a></li>
|
||||||
<li id="tab_setup"><a href="#" i18n="tabSetup" class="tabicon ic_setup"></a></li>
|
<li class="tab_configuration"><a href="#" i18n="tabConfiguration" class="tabicon ic_config"></a></li>
|
||||||
<li id="tab_ports"><a href="#" i18n="tabPorts" class="tabicon ic_ports"></a></li>
|
<li class="tab_pid_tuning"><a href="#" i18n="tabPidTuning" class="tabicon ic_pid"></a></li>
|
||||||
<li id="tab_configuration"><a href="#" i18n="tabConfiguration" class="tabicon ic_config"></a></li>
|
<li class="tab_receiver"><a href="#" i18n="tabReceiver" class="tabicon ic_rx"></a></li>
|
||||||
<li id="tab_pid_tuning"><a href="#" i18n="tabPidTuning" class="tabicon ic_pid"></a></li>
|
|
||||||
<li id="tab_receiver"><a href="#" i18n="tabReceiver" class="tabicon ic_rx"></a></li>
|
|
||||||
<!-- <li class="tab_modes"><a href="#" i18n="tabModeSelection"></a></li> -->
|
<!-- <li class="tab_modes"><a href="#" i18n="tabModeSelection"></a></li> -->
|
||||||
<li id="tab_auxiliary"><a href="#" i18n="tabAuxiliary" class="tabicon ic_modes"></a></li>
|
<li class="tab_auxiliary"><a href="#" i18n="tabAuxiliary" class="tabicon ic_modes"></a></li>
|
||||||
<li id="tab_adjustments"><a href="#" i18n="tabAdjustments" class="tabicon ic_adjust"></a></li>
|
<li class="tab_adjustments"><a href="#" i18n="tabAdjustments" class="tabicon ic_adjust"></a></li>
|
||||||
<li id="tab_servos"><a href="#" i18n="tabServos" class="tabicon ic_servo"></a></li>
|
<li class="tab_servos"><a href="#" i18n="tabServos" class="tabicon ic_servo"></a></li>
|
||||||
<li id="tab_gps"><a href="#" i18n="tabGPS" class="tabicon ic_gps"></a></li>
|
<li class="tab_gps"><a href="#" i18n="tabGPS" class="tabicon ic_gps"></a></li>
|
||||||
<li id="tab_motors"><a href="#" i18n="tabMotorTesting" class="tabicon ic_motor"></a></li>
|
<li class="tab_motors"><a href="#" i18n="tabMotorTesting" class="tabicon ic_motor"></a></li>
|
||||||
<li id="tab_led_strip"><a href="#" i18n="tabLedStrip" class="tabicon ic_led"></a></li>
|
<li class="tab_led_strip"><a href="#" i18n="tabLedStrip" class="tabicon ic_led"></a></li>
|
||||||
<li id="tab_sensors"><a href="#" i18n="tabRawSensorData" class="tabicon ic_sensors"></a></li>
|
<li class="tab_sensors"><a href="#" i18n="tabRawSensorData" class="tabicon ic_sensors"></a></li>
|
||||||
<li id="tab_logging"><a href="#" i18n="tabLogging" class="tabicon ic_log"></a></li>
|
<li class="tab_logging"><a href="#" i18n="tabLogging" class="tabicon ic_log"></a></li>
|
||||||
<li id="tab_dataflash"><a href="#" i18n="tabDataflash" class="tabicon ic_data"></a></li>
|
<li class="tab_dataflash"><a href="#" i18n="tabDataflash" class="tabicon ic_data"></a></li>
|
||||||
<li id="tab_cli"><a href="#" i18n="tabCLI" class="tabicon ic_cli"></a></li>
|
<li class="tab_cli"><a href="#" i18n="tabCLI" class="tabicon ic_cli"></a></li>
|
||||||
<li id=""><a href="#"class="tabicon ic_backup">Backup (spare)</a></li>
|
<li class=""><a href="#"class="tabicon ic_backup">Backup (spare)</a></li>
|
||||||
<li id=""><a href="#"class="tabicon ic_mission">Mission (spare)</a></li>
|
<li class=""><a href="#"class="tabicon ic_mission">Mission (spare)</a></li>
|
||||||
<li id=""><a href="#"class="tabicon ic_advanced">Advanced (spare)</a></li>
|
<li class=""><a href="#"class="tabicon ic_advanced">Advanced (spare)</a></li>
|
||||||
<li id=""><a href="#"class="tabicon ic_wizzard">Wizzard (spare)</a></li>
|
<li class=""><a href="#"class="tabicon ic_wizzard">Wizzard (spare)</a></li>
|
||||||
|
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -245,7 +243,20 @@
|
||||||
<p>Waiting for data ...</p>
|
<p>Waiting for data ...</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<script>
|
||||||
|
/** log trigger **/
|
||||||
|
$("#showlog").on('click', function() {
|
||||||
|
var state = $(this).data('state');
|
||||||
|
if ( state ) {
|
||||||
|
$("#log").animate({height: 27}, 800);
|
||||||
|
state = false;
|
||||||
|
}else{
|
||||||
|
$("#log").animate({height: 100}, 800);
|
||||||
|
state = true;
|
||||||
|
}
|
||||||
|
$(this).text(state ? 'Close' : 'Open');
|
||||||
|
$(this).data('state', state);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
27
main.js
27
main.js
|
|
@ -60,7 +60,7 @@ $(document).ready(function () {
|
||||||
$('a', ui_tabs).click(function () {
|
$('a', ui_tabs).click(function () {
|
||||||
if ($(this).parent().hasClass('active') == false && !GUI.tab_switch_in_progress) { // only initialize when the tab isn't already active
|
if ($(this).parent().hasClass('active') == false && !GUI.tab_switch_in_progress) { // only initialize when the tab isn't already active
|
||||||
var self = this,
|
var self = this,
|
||||||
tabClass = $(self).parent().prop('id');
|
tabClass = $(self).parent().prop('class');
|
||||||
|
|
||||||
var tabRequiresConnection = $(self).parent().hasClass('mode-connected');
|
var tabRequiresConnection = $(self).parent().hasClass('mode-connected');
|
||||||
|
|
||||||
|
|
@ -211,20 +211,6 @@ $(document).ready(function () {
|
||||||
googleAnalyticsConfig.setTrackingPermitted(check);
|
googleAnalyticsConfig.setTrackingPermitted(check);
|
||||||
});
|
});
|
||||||
|
|
||||||
function close_and_cleanup(e) {
|
|
||||||
if (e.type == 'click' && !$.contains($('div#options-window')[0], e.target) || e.type == 'keyup' && e.keyCode == 27) {
|
|
||||||
$(document).unbind('click keyup', close_and_cleanup);
|
|
||||||
|
|
||||||
$('div#options-window').slideUp(250, function () {
|
|
||||||
el.removeClass('active');
|
|
||||||
$(this).empty().remove();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// TEST
|
// TEST
|
||||||
var css = $("#default");
|
var css = $("#default");
|
||||||
$("div#options-window #remove").click(function(){
|
$("div#options-window #remove").click(function(){
|
||||||
|
|
@ -237,6 +223,17 @@ $("div#options-window #restore").click(function(){
|
||||||
// TEST
|
// TEST
|
||||||
|
|
||||||
|
|
||||||
|
function close_and_cleanup(e) {
|
||||||
|
if (e.type == 'click' && !$.contains($('div#options-window')[0], e.target) || e.type == 'keyup' && e.keyCode == 27) {
|
||||||
|
$(document).unbind('click keyup', close_and_cleanup);
|
||||||
|
|
||||||
|
$('div#options-window').slideUp(250, function () {
|
||||||
|
el.removeClass('active');
|
||||||
|
$(this).empty().remove();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
$(document).bind('click keyup', close_and_cleanup);
|
$(document).bind('click keyup', close_and_cleanup);
|
||||||
|
|
||||||
$(this).slideDown(250);
|
$(this).slideDown(250);
|
||||||
|
|
|
||||||
251
main_bak.html
Executable file
251
main_bak.html
Executable file
|
|
@ -0,0 +1,251 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<meta name="author" content="cTn" />
|
||||||
|
|
||||||
|
<link type="text/css" rel="stylesheet" href="./main2.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./main.css" media="all" id="default" />
|
||||||
|
|
||||||
|
<link type="text/css" rel="stylesheet" href="./js/libraries/jquery.nouislider.min.css">
|
||||||
|
<link type="text/css" rel="stylesheet" href="./js/libraries/jquery.nouislider.pips.min.css">
|
||||||
|
<link type="text/css" rel="stylesheet" href="./js/libraries/flightindicators.css">
|
||||||
|
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/landing.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/setup.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/help.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/ports.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/configuration.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/pid_tuning.css" media="all" />
|
||||||
|
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/receiver.css" media="all" />
|
||||||
|
<!-- <link type="text/css" rel="stylesheet" href="./tabs/modes.css" media="all" /> -->
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/servos.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/gps.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/motors.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/led_strip.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/sensors.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/cli.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/logging.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/dataflash.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/firmware_flasher.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/adjustments.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./tabs/auxiliary.css" media="all" />
|
||||||
|
|
||||||
|
<link type="text/css" rel="stylesheet" href="./styles/opensans_webfontkit/fonts.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./styles/dropdown-lists/css/style_lists.css" media="all" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="./js/libraries/switchery/switchery.css" media="all" />
|
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript" src="./js/libraries/q.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/libraries/google-analytics-bundle.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/libraries/jquery-2.1.3.min.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/libraries/jquery-ui-1.11.2.min.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="./js/libraries/d3.min.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/libraries/jquery.nouislider.all.min.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/libraries/three/three.min.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/libraries/three/Projector.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/libraries/three/CanvasRenderer.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/libraries/jquery.flightindicators.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/libraries/semver.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/port_handler.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/port_usage.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/serial.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/usb.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/gui.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/model.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/request_balancer.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/serial_backend.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/data_storage.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/msp.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/backup_restore.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/protocols/stm32.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/protocols/stm32usbdfu.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/localization.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/boards.js"></script>
|
||||||
|
<script type="text/javascript" src="./main.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="./tabs/landing.js"></script>
|
||||||
|
<script type="text/javascript" src="./tabs/setup.js"></script>
|
||||||
|
<script type="text/javascript" src="./tabs/help.js"></script>
|
||||||
|
<script type="text/javascript" src="./tabs/ports.js"></script>
|
||||||
|
<script type="text/javascript" src="./tabs/configuration.js"></script>
|
||||||
|
<script type="text/javascript" src="./tabs/pid_tuning.js"></script>
|
||||||
|
<script type="text/javascript" src="./tabs/receiver.js"></script>
|
||||||
|
<!-- <script type="text/javascript" src="./tabs/modes.js"></script> -->
|
||||||
|
<script type="text/javascript" src="./tabs/auxiliary.js"></script>
|
||||||
|
<script type="text/javascript" src="./tabs/adjustments.js"></script>
|
||||||
|
<script type="text/javascript" src="./tabs/servos.js"></script>
|
||||||
|
<script type="text/javascript" src="./tabs/gps.js"></script>
|
||||||
|
<script type="text/javascript" src="./tabs/motors.js"></script>
|
||||||
|
<script type="text/javascript" src="./tabs/led_strip.js"></script>
|
||||||
|
<script type="text/javascript" src="./tabs/sensors.js"></script>
|
||||||
|
<script type="text/javascript" src="./tabs/cli.js"></script>
|
||||||
|
<script type="text/javascript" src="./tabs/logging.js"></script>
|
||||||
|
<script type="text/javascript" src="./tabs/dataflash.js"></script>
|
||||||
|
<script type="text/javascript" src="./tabs/firmware_flasher.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="./js/libraries/switchery/switchery.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="main-wrapper">
|
||||||
|
<div class="headerbar">
|
||||||
|
|
||||||
|
<div id="logo"></div>
|
||||||
|
<div id="port-picker">
|
||||||
|
|
||||||
|
<div class="dropdown dropdown-dark" style="margin-bottom:3px;">
|
||||||
|
<select class="dropdown-select" id="port" title="Port">
|
||||||
|
<option value="manual">Manual</option>
|
||||||
|
<!-- port list gets generated here -->
|
||||||
|
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dropdown dropdown-dark" style="margin-bottom:5px;">
|
||||||
|
<select class="dropdown-select" id="baud" title="Baud Rate">
|
||||||
|
<option value="115200" selected="selected">115200</option>
|
||||||
|
<option value="57600">57600</option>
|
||||||
|
<option value="38400">38400</option>
|
||||||
|
<option value="28800">28800</option>
|
||||||
|
<option value="19200">19200</option>
|
||||||
|
<option value="14400">14400</option>
|
||||||
|
<option value="9600">9600</option>
|
||||||
|
<option value="4800">4800</option>
|
||||||
|
<option value="2400">2400</option>
|
||||||
|
<option value="1200">1200</option>
|
||||||
|
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="port-override-option" style="width:195px; float:left;">
|
||||||
|
<label for="port-override" style="background-color:#2b2b2b; border-radius:3px; padding:3px; margin-bottom:5px; color:#ddd; float:left;">Port: <input id="port-override" type="text" value="/dev/rfcomm0" style="background-color:rgba(0, 0, 0, 0.1);; color:#888888; width:154px; margin-left:2px; margin-top:-2px; padding:1px; border-radius:3px; height:15px; float:right;"/></label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style="color:#888888;">
|
||||||
|
<input class="auto_connect" type="checkbox" />
|
||||||
|
<span class="auto_connect" i18n="autoConnect"></span>
|
||||||
|
</label>
|
||||||
|
<div class="connect_contols">
|
||||||
|
<div class="connect_b"><a class="connect" href="#"></a></div>
|
||||||
|
<a class="connect_state" i18n="connect"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a id="options" href="#" i18n_title="options_title"></a>
|
||||||
|
|
||||||
|
<div class="tab-dataflash" id="flashstate" style="width:120px; float:right; height:12px; display:none;"
|
||||||
|
>
|
||||||
|
<div class="require-dataflash" id="header_dataflash">
|
||||||
|
<ul class="dataflash-contents" style="height:7px; margin:12px;">
|
||||||
|
<li class="dataflash-free" style="height:10px; text-align:left;">
|
||||||
|
<div class="legend" align="left" style="font-size:10px; margin-top:-40px; float:left; line-height:12px; width:100%; color:white;"></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="header-wrapper">
|
||||||
|
<div id="sensor-status" class="sensor_state">
|
||||||
|
<ul>
|
||||||
|
<li class="gyro" title="Gyroscope">Gyro</li>
|
||||||
|
<li class="accel" title="Accelerometer">Accel</li>
|
||||||
|
<li class="mag" title="Magnetometer">Mag</li>
|
||||||
|
<li class="baro" title="Barometer">Baro</li>
|
||||||
|
<li class="gps" title="GPS">GPS</li>
|
||||||
|
<li class="sonar" title="Sonar / Range finder">Sonar</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div id="documentation-controls">
|
||||||
|
<ul>
|
||||||
|
<li><a id="button-documentation" href="#" target="_blank"></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div> </div>
|
||||||
|
|
||||||
|
<div class="clear-both"></div>
|
||||||
|
<div class="logswitch"><a href="#" id="showlog">Show Log</a></div>
|
||||||
|
|
||||||
|
<div id="log"><div id="scrollicon"></div>
|
||||||
|
<div class="wrapper">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab_container">
|
||||||
|
<div id="tabs">
|
||||||
|
<ul class="mode-disconnected">
|
||||||
|
<li id="tab_landing"><a href="#" i18n="tabLanding" class="tabicon ic_welcome"></a></li>
|
||||||
|
<li id="tab_help"><a href="#" i18n="tabHelp" class="tabicon ic_help"></a></li>
|
||||||
|
<li id="tab_firmware_flasher"><a href="#" i18n="tabFirmwareFlasher" class="tabicon ic_flasher"></a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="mode-connected">
|
||||||
|
<li id="tab-setup"><a href="#" i18n="tabSetup" class="tabicon ic_setup"></a></li>
|
||||||
|
<li id="tab_ports"><a href="#" i18n="tabPorts" class="tabicon ic_ports"></a></li>
|
||||||
|
<li id="tab_configuration"><a href="#" i18n="tabConfiguration" class="tabicon ic_config"></a></li>
|
||||||
|
<li id="tab_pid_tuning"><a href="#" i18n="tabPidTuning" class="tabicon ic_pid"></a></li>
|
||||||
|
<li id="tab_receiver"><a href="#" i18n="tabReceiver" class="tabicon ic_rx"></a></li>
|
||||||
|
<!-- <li class="tab_modes"><a href="#" i18n="tabModeSelection"></a></li> -->
|
||||||
|
<li id="tab_auxiliary"><a href="#" i18n="tabAuxiliary" class="tabicon ic_modes"></a></li>
|
||||||
|
<li id="tab_adjustments"><a href="#" i18n="tabAdjustments" class="tabicon ic_adjust"></a></li>
|
||||||
|
<li id="tab_servos"><a href="#" i18n="tabServos" class="tabicon ic_servo"></a></li>
|
||||||
|
<li id="tab_gps"><a href="#" i18n="tabGPS" class="tabicon ic_gps"></a></li>
|
||||||
|
<li id="tab_motors"><a href="#" i18n="tabMotorTesting" class="tabicon ic_motor"></a></li>
|
||||||
|
<li id="tab_led_strip"><a href="#" i18n="tabLedStrip" class="tabicon ic_led"></a></li>
|
||||||
|
<li id="tab_sensors"><a href="#" i18n="tabRawSensorData" class="tabicon ic_sensors"></a></li>
|
||||||
|
<li id="tab_logging"><a href="#" i18n="tabLogging" class="tabicon ic_log"></a></li>
|
||||||
|
<li id="tab_dataflash"><a href="#" i18n="tabDataflash" class="tabicon ic_data"></a></li>
|
||||||
|
<li id="tab_cli"><a href="#" i18n="tabCLI" class="tabicon ic_cli"></a></li>
|
||||||
|
<li id=""><a href="#"class="tabicon ic_backup">Backup (spare)</a></li>
|
||||||
|
<li id=""><a href="#"class="tabicon ic_mission">Mission (spare)</a></li>
|
||||||
|
<li id=""><a href="#"class="tabicon ic_advanced">Advanced (spare)</a></li>
|
||||||
|
<li id=""><a href="#"class="tabicon ic_wizzard">Wizzard (spare)</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<div class="clear-both"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="content">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="status-bar">
|
||||||
|
<div>
|
||||||
|
<span i18n="statusbar_port_utilization"></span> <span class="port_usage_down">D: 0%</span> <span class="port_usage_up">U: 0%</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span i18n="statusbar_packet_error"></span> <span class="packet-error">0</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span i18n="statusbar_i2c_error"></span> <span class="i2c-error">0</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span i18n="statusbar_cycle_time"></span> <span class="cycle-time">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="version">
|
||||||
|
<!-- configuration version generated here -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="cache">
|
||||||
|
<div class="data-loading">
|
||||||
|
<p>Waiting for data ...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue