Mirror/betaflight
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight.git synced 2025-07-19 22:35:23 +03:00
Code Issues Wiki Activity

implementation of options tab, polished statusbar

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

10
_locales/en/messages.json
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": { "notifications_app_just_updated_to_version": {
"message": "Application just updated to version: $1" "message": "Application just updated to version: $1"
}, },

26
background.js
View file

@ -44,18 +44,22 @@ chrome.app.runtime.onLaunched.addListener(function() {
chrome.runtime.onInstalled.addListener(function(details) { chrome.runtime.onInstalled.addListener(function(details) {
if (details.reason == 'update') { if (details.reason == 'update') {
var manifest = chrome.runtime.getManifest(); chrome.storage.local.get('update_notify', function(result) {
var options = { if (typeof result.update_notify === 'undefined' || result.update_notify) {
priority: 0, var manifest = chrome.runtime.getManifest();
type: 'basic', var options = {
title: manifest.name, priority: 0,
message: chrome.i18n.getMessage('notifications_app_just_updated_to_version', [manifest.version]), type: 'basic',
iconUrl: '/images/icon_128.png', title: manifest.name,
buttons: [{'title': chrome.i18n.getMessage('notifications_click_here_to_start_app')}] message: chrome.i18n.getMessage('notifications_app_just_updated_to_version', [manifest.version]),
}; iconUrl: '/images/icon_128.png',
buttons: [{'title': chrome.i18n.getMessage('notifications_click_here_to_start_app')}]
};
chrome.notifications.create('baseflight_update', options, function(notificationId) { chrome.notifications.create('baseflight_update', options, function(notificationId) {
// empty // empty
});
}
}); });
} }
}); });

15
main.css
View file

@ -172,8 +172,8 @@ input[type="number"]::-webkit-inner-spin-button {
height: 15px; height: 15px;
padding: 5px; padding: 5px;
padding-left: 12px; padding-left: 8px;
padding-right: 12px; padding-right: 8px;
background-color: #d0d0d0; background-color: #d0d0d0;
} }
@ -220,4 +220,13 @@ input[type="number"]::-webkit-inner-spin-button {
border-top: 1px solid #7d7d79; border-top: 1px solid #7d7d79;
background-color: #bfbeb5; background-color: #bfbeb5;
} }
#status-bar div {
float: left;
padding-right: 10px;
margin-right: 10px;
border-right: 1px solid #7d7d79;
}

15
main.html
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/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/sensors.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/cli.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" /> <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> <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/motor_outputs.js"></script>
<script type="text/javascript" src="./tabs/sensors.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/cli.js"></script>
<script type="text/javascript" src="./tabs/options.js"></script>
<script type="text/javascript" src="./tabs/firmware_flasher.js"></script> <script type="text/javascript" src="./tabs/firmware_flasher.js"></script>
</head> </head>
<body> <body>
@ -104,6 +106,7 @@
<li class="tab_motor_outputs"><a href="#">Motor/Servo Outputs</a></li> <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_sensors"><a href="#">Raw Sensor Data</a></li>
<li class="tab_cli"><a href="#">CLI</a></li> <li class="tab_cli"><a href="#">CLI</a></li>
<li class="tab_options"><a href="#">Options</a></li>
</ul> </ul>
<div class="clear-both"></div> <div class="clear-both"></div>
</div> </div>
@ -111,9 +114,15 @@
</div> </div>
</div> </div>
<div id="status-bar"> <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> | <div>
<span i18n="statusbar_packet_error"></span> <span class="packet-error">0</span> | <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_cycle_time"></span> <span class="cycle-time">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> </div>
</body> </body>
</html> </html>

24
main.js
View file

@ -7,12 +7,20 @@ chrome.runtime.getBackgroundPage(function(result) {
backgroundPage.app_window = window; 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'); 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'); var ga_tracker = service.getTracker('UA-32728876-6');
ga_tracker.sendAppView('Application Started'); ga_tracker.sendAppView('Application Started');
// Google Analytics stuff end // Google Analytics END
$(document).ready(function() { $(document).ready(function() {
// translate to user-selected language // translate to user-selected language
@ -42,13 +50,16 @@ $(document).ready(function() {
var tabs = $('#tabs > ul'); var tabs = $('#tabs > ul');
$('a', tabs).click(function() { $('a', tabs).click(function() {
if ($(this).parent().hasClass('active') == false) { // only initialize when the tab isn't already active 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'); GUI.log('You need to connect before you can view any of the tabs', 'red');
return; return;
} }
var self = this;
GUI.tab_switch_cleanup(function() { GUI.tab_switch_cleanup(function() {
// disable previously active tab highlight // disable previously active tab highlight
$('li', tabs).removeClass('active'); $('li', tabs).removeClass('active');
@ -90,6 +101,9 @@ $(document).ready(function() {
case 'tab_cli': case 'tab_cli':
tab_initialize_cli(); tab_initialize_cli();
break; 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);
});
});
}