mirror of
https://github.com/betaflight/betaflight.git
synced 2025-07-19 22:35:23 +03:00
implementation of options tab, polished statusbar
This commit is contained in:
parent
3a5741d9ed
commit
8c4a4277f8
8 changed files with 131 additions and 22 deletions
|
@ -1,4 +1,14 @@
|
|||
{
|
||||
"options_receive_app_notifications": {
|
||||
"message": "Receive desktop <strong>notification</strong> when application updates"
|
||||
},
|
||||
"options_improve_configurator": {
|
||||
"message": "<strong>Improve</strong> Baseflight - Configurator by sending anonymous usage data to the developer team"
|
||||
},
|
||||
"options_back": {
|
||||
"message": "Leave Options"
|
||||
},
|
||||
|
||||
"notifications_app_just_updated_to_version": {
|
||||
"message": "Application just updated to version: $1"
|
||||
},
|
||||
|
|
|
@ -44,6 +44,8 @@ chrome.app.runtime.onLaunched.addListener(function() {
|
|||
|
||||
chrome.runtime.onInstalled.addListener(function(details) {
|
||||
if (details.reason == 'update') {
|
||||
chrome.storage.local.get('update_notify', function(result) {
|
||||
if (typeof result.update_notify === 'undefined' || result.update_notify) {
|
||||
var manifest = chrome.runtime.getManifest();
|
||||
var options = {
|
||||
priority: 0,
|
||||
|
@ -58,6 +60,8 @@ chrome.runtime.onInstalled.addListener(function(details) {
|
|||
// empty
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
chrome.notifications.onButtonClicked.addListener(function(notificationId, buttonIndex) {
|
||||
|
|
13
main.css
13
main.css
|
@ -172,8 +172,8 @@ input[type="number"]::-webkit-inner-spin-button {
|
|||
height: 15px;
|
||||
|
||||
padding: 5px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
|
||||
background-color: #d0d0d0;
|
||||
}
|
||||
|
@ -221,3 +221,12 @@ input[type="number"]::-webkit-inner-spin-button {
|
|||
border-top: 1px solid #7d7d79;
|
||||
background-color: #bfbeb5;
|
||||
}
|
||||
|
||||
#status-bar div {
|
||||
float: left;
|
||||
|
||||
padding-right: 10px;
|
||||
margin-right: 10px;
|
||||
|
||||
border-right: 1px solid #7d7d79;
|
||||
}
|
13
main.html
13
main.html
|
@ -16,6 +16,7 @@
|
|||
<link type="text/css" rel="stylesheet" href="./tabs/motor_outputs.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/options.css" media="all" />
|
||||
<link type="text/css" rel="stylesheet" href="./tabs/firmware_flasher.css" media="all" />
|
||||
|
||||
<script type="text/javascript" src="./js/libraries/google-analytics-bundle.js"></script>
|
||||
|
@ -44,6 +45,7 @@
|
|||
<script type="text/javascript" src="./tabs/motor_outputs.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/options.js"></script>
|
||||
<script type="text/javascript" src="./tabs/firmware_flasher.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -104,6 +106,7 @@
|
|||
<li class="tab_motor_outputs"><a href="#">Motor/Servo Outputs</a></li>
|
||||
<li class="tab_sensors"><a href="#">Raw Sensor Data</a></li>
|
||||
<li class="tab_cli"><a href="#">CLI</a></li>
|
||||
<li class="tab_options"><a href="#">Options</a></li>
|
||||
</ul>
|
||||
<div class="clear-both"></div>
|
||||
</div>
|
||||
|
@ -111,9 +114,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="status-bar">
|
||||
<span i18n="statusbar_port_utilization"></span> <span class="port_usage_down">D: 0%</span> <span class="port_usage_up">U: 0%</span> |
|
||||
<span i18n="statusbar_packet_error"></span> <span class="packet-error">0</span> |
|
||||
<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_cycle_time"></span> <span class="cycle-time">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
24
main.js
24
main.js
|
@ -7,12 +7,20 @@ chrome.runtime.getBackgroundPage(function(result) {
|
|||
backgroundPage.app_window = window;
|
||||
});
|
||||
|
||||
// Google Analytics stuff begin
|
||||
// Google Analytics BEGIN
|
||||
var ga_config; // google analytics config reference
|
||||
var ga_tracking; // global result of isTrackingPermitted
|
||||
|
||||
var service = analytics.getService('ice_cream_app');
|
||||
service.getConfig().addCallback(function(config) {
|
||||
ga_config = config;
|
||||
ga_tracking = config.isTrackingPermitted();
|
||||
});
|
||||
|
||||
var ga_tracker = service.getTracker('UA-32728876-6');
|
||||
|
||||
ga_tracker.sendAppView('Application Started');
|
||||
// Google Analytics stuff end
|
||||
// Google Analytics END
|
||||
|
||||
$(document).ready(function() {
|
||||
// translate to user-selected language
|
||||
|
@ -42,13 +50,16 @@ $(document).ready(function() {
|
|||
var tabs = $('#tabs > ul');
|
||||
$('a', tabs).click(function() {
|
||||
if ($(this).parent().hasClass('active') == false) { // only initialize when the tab isn't already active
|
||||
if (configuration_received == false) { // if there is no active connection, return
|
||||
var self = this;
|
||||
var index = $(self).parent().index();
|
||||
|
||||
// i am using hardcoded index here (for options tab) since i don't have time to write tab locking mechanism at the moment
|
||||
// if there is no active connection, return
|
||||
if (configuration_received == false && index != 9) {
|
||||
GUI.log('You need to connect before you can view any of the tabs', 'red');
|
||||
return;
|
||||
}
|
||||
|
||||
var self = this;
|
||||
|
||||
GUI.tab_switch_cleanup(function() {
|
||||
// disable previously active tab highlight
|
||||
$('li', tabs).removeClass('active');
|
||||
|
@ -90,6 +101,9 @@ $(document).ready(function() {
|
|||
case 'tab_cli':
|
||||
tab_initialize_cli();
|
||||
break;
|
||||
case 'tab_options':
|
||||
tab_initialize_options();
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
9
tabs/options.css
Normal file
9
tabs/options.css
Normal file
|
@ -0,0 +1,9 @@
|
|||
.tab-options {
|
||||
line-height: 20px;
|
||||
}
|
||||
.tab-options input {
|
||||
float: left;
|
||||
|
||||
margin-top: 3px;
|
||||
margin-right: 5px;
|
||||
}
|
9
tabs/options.html
Normal file
9
tabs/options.html
Normal file
|
@ -0,0 +1,9 @@
|
|||
<div class="tab-options">
|
||||
<div class="notifications">
|
||||
<label><input type="checkbox" /><span i18n="options_receive_app_notifications"></span></label>
|
||||
</div>
|
||||
<div class="statistics">
|
||||
<label><input type="checkbox" /><span i18n="options_improve_configurator"></span></label>
|
||||
</div>
|
||||
<a class="back" href="#" i18n="options_back"></a>
|
||||
</div>
|
45
tabs/options.js
Normal file
45
tabs/options.js
Normal file
|
@ -0,0 +1,45 @@
|
|||
function tab_initialize_options() {
|
||||
ga_tracker.sendAppView('Options');
|
||||
|
||||
$('#content').load("./tabs/options.html", function() {
|
||||
GUI.active_tab = 'options';
|
||||
|
||||
// translate to user-selected language
|
||||
localize();
|
||||
|
||||
if (configuration_received) {
|
||||
$('a.back').hide();
|
||||
} else {
|
||||
$('a.back').click(function() {
|
||||
$('#tabs > ul li').removeClass('active'); // de-select any selected tabs
|
||||
tab_initialize_default();
|
||||
});
|
||||
}
|
||||
|
||||
// if notifications are enabled, or wasn't set, check the notifications checkbox
|
||||
chrome.storage.local.get('update_notify', function(result) {
|
||||
if (typeof result.update_notify === 'undefined' || result.update_notify) {
|
||||
$('div.notifications input').prop('checked', true);
|
||||
}
|
||||
});
|
||||
|
||||
$('div.notifications input').change(function() {
|
||||
var check = $(this).is(':checked');
|
||||
|
||||
chrome.storage.local.set({'update_notify': check});
|
||||
});
|
||||
|
||||
// if tracking is enabled, check the statistics checkbox
|
||||
if (ga_tracking == true) {
|
||||
$('div.statistics input').prop('checked', true);
|
||||
}
|
||||
|
||||
$('div.statistics input').change(function() {
|
||||
var check = $(this).is(':checked');
|
||||
|
||||
ga_tracking = check;
|
||||
|
||||
ga_config.setTrackingPermitted(check);
|
||||
});
|
||||
});
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue