sundowndev
/
betaflight-configurator
mirror of https://github.com/sundowndev/betaflight-configurator.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

custom made meter indicators with sub-glyph rendering

10.3.x-maintenance
cTn 2014-09-23 14:23:56 +02:00
parent 177498bd20
commit b826d8a6cf
2 changed files with 88 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
tabs/receiver.css
View File

@ -19,42 +19,6 @@
height: 22px;
line-height: 20px;
}
.tab-receiver .bars ul:nth-of-type(1) meter::-webkit-meter-optimum-value {
background: #00A8F0;
}
.tab-receiver .bars ul:nth-of-type(2) meter::-webkit-meter-optimum-value {
background: #C0D800;
}
.tab-receiver .bars ul:nth-of-type(3) meter::-webkit-meter-optimum-value {
background: #f8921a;
}
.tab-receiver .bars ul:nth-of-type(4) meter::-webkit-meter-optimum-value {
background: #f02525;
}
.tab-receiver .bars ul:nth-of-type(5) meter::-webkit-meter-optimum-value {
background: #9440ED;
}
.tab-receiver .bars ul:nth-of-type(6) meter::-webkit-meter-optimum-value {
background: #45147a;
}
.tab-receiver .bars ul:nth-of-type(7) meter::-webkit-meter-optimum-value {
background: #cf7a26;
}
.tab-receiver .bars ul:nth-of-type(8) meter::-webkit-meter-optimum-value {
background: #147a66;
}
.tab-receiver .bars ul:nth-of-type(9) meter::-webkit-meter-optimum-value {
background: #0609a9;
}
.tab-receiver .bars ul:nth-of-type(10) meter::-webkit-meter-optimum-value {
background: #7a1445;
}
.tab-receiver .bars ul:nth-of-type(11) meter::-webkit-meter-optimum-value {
background: #267acf;
}
.tab-receiver .bars ul:nth-of-type(12) meter::-webkit-meter-optimum-value {
background: #7a6614;
}
.tab-receiver .bars .name {
padding: 0 10px 0 0;
@ -63,33 +27,75 @@
text-align: right;
}
.tab-receiver .bars .meter {
position: relative;
width: calc(100% - 50px);
}
.tab-receiver .bars .meter meter {
-webkit-appearance: none;
.tab-receiver .bars .meter-bar {
position: relative;
margin-top: 2px;
width: 100%;
height: 17px; /* border doesn't count here */
height: 15px;
border: 1px solid silver;
background-color: #f4f4f4;
}
.tab-receiver .bars .meter meter::-webkit-meter-bar {
background: #f4f4f4;
}
.tab-receiver .bars .value {
.tab-receiver .bars .meter-bar .label {
position: absolute;
margin-top: 2px;
left: calc(50% - 25px);
width: 50px;
height: 15px;
line-height: 15px;
text-align: center;
line-height: 16px;
color: #474747;
}
.tab-receiver .bars .meter-bar .fill {
position: relative;
overflow: hidden;
width: 50%;
height: 15px;
background-color: green;
}
.tab-receiver .bars .meter-bar .fill .label {
color: white;
text-shadow: 0px 0px 2px #000000;
}
.tab-receiver .bars ul:nth-of-type(1) .fill {
background-color: #00A8F0;
}
.tab-receiver .bars ul:nth-of-type(2) .fill {
background-color: #C0D800;
}
.tab-receiver .bars ul:nth-of-type(3) .fill {
background-color: #f8921a;
}
.tab-receiver .bars ul:nth-of-type(4) .fill {
background-color: #f02525;
}
.tab-receiver .bars ul:nth-of-type(5) .fill {
background-color: #9440ED;
}
.tab-receiver .bars ul:nth-of-type(6) .fill {
background-color: #45147a;
}
.tab-receiver .bars ul:nth-of-type(7) .fill {
background-color: #cf7a26;
}
.tab-receiver .bars ul:nth-of-type(8) .fill {
background-color: #147a66;
}
.tab-receiver .bars ul:nth-of-type(9) .fill {
background-color: #0609a9;
}
.tab-receiver .bars ul:nth-of-type(10) .fill {
background-color: #7a1445;
}
.tab-receiver .bars ul:nth-of-type(11) .fill {
background-color: #267acf;
}
.tab-receiver .bars ul:nth-of-type(12) .fill {
background-color: #7a6614;
}
.tab-receiver .tunings {
float: right;

43
tabs/receiver.js
View File

@ -61,23 +61,44 @@ TABS.receiver.initialize = function (callback) {
<ul>\
<li class="name">' + name + '</li>\
<li class="meter">\
<span class="value"></span>\
<meter min="800" max="2200"></meter>\
<div class="meter-bar">\
<div class="label"></div>\
<div class="fill">\
<div class="label"></div>\
</div>\
</div>\
</li>\
</ul>\
');
}
var meter_array = [];
$('meter', bar_container).each(function () {
meter_array.push($(this));
// we could probably use min and max throttle for the range, will see
var meter_scale = {
'min': 800,
'max': 2200
};
var meter_fill_array = [];
$('.meter .fill', bar_container).each(function () {
meter_fill_array.push($(this));
});
var meter_values_array = [];
$('.value', bar_container).each(function () {
meter_values_array.push($(this));
var meter_label_array = [];
$('.meter', bar_container).each(function () {
meter_label_array.push($('.label' , this));
});
// correct inner label margin on window resize (i don't know how we could do this in css)
$(window).resize(function () {
var containerWidth = $('.meter:first', bar_container).width(),
labelWidth = $('.meter .label:first', bar_container).width(),
margin = (containerWidth / 2) - (labelWidth / 2);
for (var i = 0; i < meter_label_array.length; i++) {
meter_label_array[i].css('margin-left', margin);
}
}).resize(); // trigger so labels get correctly aligned on creation
// handle rcmap
if (bit_check(CONFIG.capability, 30)) {
var RC_MAP_Letters = ['A', 'E', 'R', 'T', '1', '2', '3', '4'];
@ -296,8 +317,8 @@ TABS.receiver.initialize = function (callback) {
function update_ui() {
// update bars with latest data
for (var i = 0; i < RC.active_channels; i++) {
meter_array[i].val(RC.channels[i]);
meter_values_array[i].text(RC.channels[i]);
meter_fill_array[i].css('width', (RC.channels[i] - meter_scale.min) / (meter_scale.max - meter_scale.min) * 100 + '%');
meter_label_array[i].text(RC.channels[i]);
}
// push latest data to the main array
@ -377,5 +398,7 @@ TABS.receiver.initialize = function (callback) {
};
TABS.receiver.cleanup = function (callback) {
$(window).unbind('resize');
if (callback) callback();
};