1
0
Fork 0
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:
cTn 2014-04-22 00:30:22 +02:00
parent 3a5741d9ed
commit 8c4a4277f8
8 changed files with 131 additions and 22 deletions

View file

@ -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"
},

View file

@ -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) {

View file

@ -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;
}

View file

@ -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
View file

@ -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
View 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
View 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
View 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);
});
});
}