servos tab table polish

pull/3/head
cTn 11 years ago
parent fb099298b8
commit 75588cbf48

@ -45,6 +45,13 @@
background-color: #ececec; background-color: #ececec;
} }
.tab-servos table .channel {
width: 40px;
text-align: center;
}
.tab-servos table .channel input {
vertical-align: middle;
}
.tab-servos table input[type="number"] { .tab-servos table input[type="number"] {
width: 65px; width: 65px;
height: 20px; height: 20px;
@ -55,13 +62,6 @@
text-align: right; text-align: right;
} }
.tab-servos table .channel input[type="checkbox"]:first-child {
margin-left: 24px;
}
.tab-servos table .channel input[type="checkbox"] {
margin-top: 4px;
margin-right: 21px;
}
.tab-servos table .direction { .tab-servos table .direction {
} }
.tab-servos .direction .name { .tab-servos .direction .name {

@ -1,26 +1,33 @@
<div class="tab-servos"> <div class="tab-servos">
Model: <strong class="model"></strong> Model: <strong class="model"></strong>
<div class="supported_wrapper"> <div class="supported_wrapper">
<div class="direction_wrapper">
<div class="title" style="width: 258px">Gyroscope / Accelerometer Direction</div>
<table class="directions" style="width: 260px">
<tr class="main">
<th style="width: 200px">Name</th>
<th>Direction</th>
</tr>
</table>
</div>
<div class="title">Change Direction in TX To Match</div> <div class="title">Change Direction in TX To Match</div>
<table class="fields"> <table class="fields">
<tr class="main"> <tr class="main">
<th>Name</th> <th style="">Name</th>
<th style="width: 70px">MID</th> <th style="width: 70px">MID</th>
<th style="width: 70px">MIN</th> <th style="width: 70px">MIN</th>
<th style="width: 70px">MAX</th> <th style="width: 70px">MAX</th>
<th style="width: 320px">Throt | Roll | Pitch | Yaw | AUX1 | AUX2 | AUX3 | AUX4</th> <th style="width: 40px">CH-1</th>
<th style="width: 40px">CH-2</th>
<th style="width: 40px">CH-3</th>
<th style="width: 40px">CH-4</th>
<th style="width: 40px">AUX1</th>
<th style="width: 40px">AUX2</th>
<th style="width: 40px">AUX3</th>
<th style="width: 40px">AUX4</th>
<th style="width: 200px">Direction</th> <th style="width: 200px">Direction</th>
</tr> </tr>
</table> </table>
<div class="direction_wrapper">
<div class="title" style="width: 258px">Gyroscope / Accelerometer Direction</div>
<table class="directions" style="width: 260px">
<tr class="main">
<th style="width: 200px">Name</th>
<th>Direction</th>
</tr>
</table>
</div>
<div class="live"> <div class="live">
<span>Enable Live mode: </span><input type="checkbox" /> <span>Enable Live mode: </span><input type="checkbox" />
</div> </div>

@ -57,16 +57,14 @@ function tab_initialize_servos() {
<td class="middle"><input type="number" min="1000" max="2000" value="' + ((SERVO_CONFIG[obj].middle <= 7) ? 1500 : SERVO_CONFIG[obj].middle) + '" /></td>\ <td class="middle"><input type="number" min="1000" max="2000" value="' + ((SERVO_CONFIG[obj].middle <= 7) ? 1500 : SERVO_CONFIG[obj].middle) + '" /></td>\
<td class="min"><input type="number" min="1000" max="2000" value="' + SERVO_CONFIG[obj].min +'" /></td>\ <td class="min"><input type="number" min="1000" max="2000" value="' + SERVO_CONFIG[obj].min +'" /></td>\
<td class="max"><input type="number" min="1000" max="2000" value="' + SERVO_CONFIG[obj].max +'" /></td>\ <td class="max"><input type="number" min="1000" max="2000" value="' + SERVO_CONFIG[obj].max +'" /></td>\
<td class="channel">\ <td class="channel"><input type="checkbox"/></td>\
<input type="checkbox"/>\ <td class="channel"><input type="checkbox"/></td>\
<input type="checkbox"/>\ <td class="channel"><input type="checkbox"/></td>\
<input type="checkbox"/>\ <td class="channel"><input type="checkbox"/></td>\
<input type="checkbox"/>\ <td class="channel"><input type="checkbox"/></td>\
<input type="checkbox"/>\ <td class="channel"><input type="checkbox"/></td>\
<input type="checkbox"/>\ <td class="channel"><input type="checkbox"/></td>\
<input type="checkbox"/>\ <td class="channel"><input type="checkbox"/></td>\
<input type="checkbox"/>\
</td>\
<td class="direction">\ <td class="direction">\
<input class="first" type="checkbox"/><span class="name">' + name + '</span>\ <input class="first" type="checkbox"/><span class="name">' + name + '</span>\
<input class="second" type="checkbox"/><span class="alternate">' + alternate + '</span>\ <input class="second" type="checkbox"/><span class="alternate">' + alternate + '</span>\
@ -76,7 +74,7 @@ function tab_initialize_servos() {
if (SERVO_CONFIG[obj].middle <= 7) { if (SERVO_CONFIG[obj].middle <= 7) {
$('div.tab-servos table.fields tr:last td.middle input').prop('disabled', true); $('div.tab-servos table.fields tr:last td.middle input').prop('disabled', true);
$('div.tab-servos table.fields tr:last td.channel').find('input').eq(SERVO_CONFIG[obj].middle).prop('checked', true); $('div.tab-servos table.fields tr:last td.channel input').eq(SERVO_CONFIG[obj].middle).prop('checked', true);
} }
if (directions == true) { if (directions == true) {
@ -107,10 +105,10 @@ function tab_initialize_servos() {
$('div.tab-servos table.fields tr:last').data('info', {'obj': obj}); $('div.tab-servos table.fields tr:last').data('info', {'obj': obj});
// UI hooks // UI hooks
$('div.tab-servos table.fields tr:last td.channel').find('input').click(function() { $('div.tab-servos table.fields tr:last td.channel input').click(function() {
if($(this).is(':checked')) { if($(this).is(':checked')) {
$(this).parent().parent().find('td.middle input').prop('disabled', true); $(this).parent().parent().find('td.middle input').prop('disabled', true);
$(this).parent().find('input').not($(this)).prop('checked', false); $(this).parent().parent().find('.channel input').not($(this)).prop('checked', false);
} else { } else {
$(this).parent().parent().find('td.middle input').prop('disabled', false).val(1500); $(this).parent().parent().find('td.middle input').prop('disabled', false).val(1500);
} }
@ -133,7 +131,8 @@ function tab_initialize_servos() {
var info = $(this).data('info'); var info = $(this).data('info');
if ($('.middle input', this).is(':disabled')) { if ($('.middle input', this).is(':disabled')) {
var val = $('.channel input:checked', this).index(); var selection = $('.channel input', this);
var val = selection.index(selection.filter(':checked'));
SERVO_CONFIG[info.obj].middle = parseInt(val); SERVO_CONFIG[info.obj].middle = parseInt(val);
} else { } else {

Loading…
Cancel
Save