Motor Tab rework
skaman82
parent
11b282fdbf
commit
92d11f71e3
179
tabs/motors.css
179
tabs/motors.css
|
|
@ -1,12 +1,15 @@
|
|||
.tab-motors .modelAndAccel {
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.tab-motors .spacer {
|
||||
width: calc(100% - 34px);
|
||||
margin:10px;
|
||||
}
|
||||
|
||||
.tab-motors #accel {
|
||||
float: left;
|
||||
width: calc(100% - 282px);
|
||||
width: calc(100% - 292px);
|
||||
}
|
||||
|
||||
.tab-motors .mixerPreview {
|
||||
|
|
@ -16,85 +19,132 @@
|
|||
.tab-motors .mixerPreview img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-top: 18px;
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.tab-motors .plot_control {
|
||||
float: left;
|
||||
|
||||
width: 158px;
|
||||
|
||||
border: 1px solid silver;
|
||||
float: right;
|
||||
width: 160px;
|
||||
/* border: 1px solid silver; */
|
||||
height: 100%;
|
||||
height: 160px;
|
||||
margin: 0px;
|
||||
background-color: #ECECEC;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius:3px;
|
||||
}
|
||||
|
||||
.tab-motors .plot_control .title {
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding-left:10px;
|
||||
padding-top:10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
border-bottom: 1px solid silver;
|
||||
background-color: #ececec;
|
||||
}
|
||||
.tab-motors .plot_control .title a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.tab-motors .plot_control dl {
|
||||
padding: 5px 5px 0 5px;
|
||||
padding: 10px 10px 0 10px;
|
||||
line-height: 22px;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.tab-motors .plot_control dt {
|
||||
float: left;
|
||||
|
||||
width: 60px;
|
||||
height: 22px;
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab-motors .plot_control dd {
|
||||
height: 22px;
|
||||
/* margin-left: 20px; */
|
||||
height: 25px;
|
||||
float: right;
|
||||
width: 73px;
|
||||
}
|
||||
|
||||
.tab-motors .plot_control select {
|
||||
float: right;
|
||||
|
||||
width: 80px;
|
||||
border: 1px solid silver;
|
||||
}
|
||||
|
||||
.tab-motors .plot_control .x {
|
||||
color: #00A8F0;
|
||||
}
|
||||
.tab-motors .plot_control .y {
|
||||
color: #C0D800;
|
||||
}
|
||||
.tab-motors .plot_control .z {
|
||||
color: #CB4B4B;
|
||||
}
|
||||
.tab-motors .plot_control .x, .tab-motors .plot_control .y, .tab-motors .plot_control .z {
|
||||
background-color: #00A8F0;
|
||||
padding:3px;
|
||||
color: #fff;
|
||||
height: 12px;
|
||||
float: right;
|
||||
border-radius: 3px;
|
||||
line-height: 12px;
|
||||
margin-bottom: 2px;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.tab-motors .plot_control .y {
|
||||
background-color: #C0D800;
|
||||
padding:3px;
|
||||
color: #fff;
|
||||
height: 12px;
|
||||
float: right;
|
||||
border-radius: 3px;
|
||||
line-height: 12px;
|
||||
margin-bottom: 2px;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.tab-motors .plot_control .z {
|
||||
background-color: #CB4B4B;
|
||||
padding:3px;
|
||||
color: #fff;
|
||||
height: 12px;
|
||||
float: right;
|
||||
border-radius: 3px;
|
||||
line-height: 12px;
|
||||
margin-bottom: 2px;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.tab-motors .plot_control .x, .tab-sensors .plot_control .y, .tab-sensors .plot_control .z {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.tab-motors .plot_control .title a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.tab-motors svg {
|
||||
float: left;
|
||||
|
||||
width: calc(100% - 168px); /* - (plot control, margin)*/
|
||||
height: 140px;
|
||||
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.tab-motors .grid .tick {
|
||||
stroke: silver;
|
||||
stroke-width: 1px;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.tab-motors .grid path {
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
.tab-motors .data .line {
|
||||
stroke-width: 2px;
|
||||
fill: none;
|
||||
}
|
||||
.tab-motors .axis path, .tab-motors .axis line {
|
||||
fill: none;
|
||||
stroke: #000000;
|
||||
stroke: #ccc;
|
||||
stroke-width: 1px;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
.tab-motors text {
|
||||
stroke: none;
|
||||
fill: #828885;
|
||||
font-size:10px;
|
||||
}
|
||||
.tab-motors .line:nth-child(1) {
|
||||
stroke: #00A8F0;
|
||||
}
|
||||
|
|
@ -105,22 +155,33 @@
|
|||
stroke: #CB4B4B;
|
||||
}
|
||||
|
||||
|
||||
.tab-motors .motorblock {
|
||||
margin-bottom:0px;
|
||||
background-color: #ECECEC;
|
||||
/*background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15));*/
|
||||
}
|
||||
.tab-motors .left.motors {
|
||||
float: left;
|
||||
|
||||
width: calc(50% - 50px);
|
||||
}
|
||||
.tab-motors .right.servos {
|
||||
float: right;
|
||||
|
||||
width: 50%;
|
||||
}
|
||||
.tab-motors .title {
|
||||
padding-bottom: 2px;
|
||||
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab-motors .title2 {
|
||||
padding-bottom: 2px;
|
||||
text-align: center;
|
||||
font-size:12px;
|
||||
font-family: 'open_sanslight', Arial;
|
||||
}
|
||||
|
||||
.tab-motors .titles {
|
||||
height: 20px;
|
||||
}
|
||||
|
|
@ -129,14 +190,11 @@
|
|||
|
||||
width: calc((100% / 9) - 10px);
|
||||
margin-right: 10px;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
.tab-motors .servos .titles li {
|
||||
float: right;
|
||||
|
||||
width: calc((100% / 8) - 10px);
|
||||
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.tab-motors .titles .active {
|
||||
|
|
@ -144,28 +202,29 @@
|
|||
}
|
||||
.tab-motors .m-block {
|
||||
float: left;
|
||||
|
||||
width: calc((100% / 9) - 12px);
|
||||
width: calc((100% / 9) - 10px);
|
||||
height: 100px;
|
||||
|
||||
margin-right: 10px;
|
||||
|
||||
text-align: center;
|
||||
|
||||
border: 1px solid silver;
|
||||
background-color: #f4f4f4;
|
||||
border-radius:3px;
|
||||
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||||
}
|
||||
.tab-motors .m-block .meter-bar {
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||||
background-color: #E0E0E0;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #F5F5F5;
|
||||
|
||||
|
||||
}
|
||||
.tab-motors .m-block .label {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 45px;
|
||||
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #474747;
|
||||
|
|
@ -175,18 +234,18 @@
|
|||
}
|
||||
.tab-motors .servos .m-block {
|
||||
float: right;
|
||||
|
||||
width: calc((100% / 8) - 12px);
|
||||
|
||||
width: calc((100% / 8) - 10px);
|
||||
margin: 0 0 0 10px;
|
||||
border-radius:3px;
|
||||
|
||||
}
|
||||
.tab-motors .indicator {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
|
||||
width: 100%;
|
||||
|
||||
text-align: center;
|
||||
border-radius:2px;
|
||||
|
||||
}
|
||||
.tab-motors .motor_testing {
|
||||
margin-top: 15px;
|
||||
|
|
@ -197,10 +256,8 @@
|
|||
|
||||
.tab-motors .motor_testing .sliders input {
|
||||
-webkit-appearance: slider-vertical;
|
||||
|
||||
width: calc((100% / 9) - 13px);
|
||||
height: 100px;
|
||||
|
||||
height: 73px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.tab-motors .motor_testing .sliders input:first-child {
|
||||
|
|
@ -217,20 +274,18 @@
|
|||
|
||||
.tab-motors .motor_testing .values li {
|
||||
float: left;
|
||||
|
||||
width: calc((100% / 9) - 10px);
|
||||
margin-left: 10px;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
.tab-motors .motor_testing .notice {
|
||||
float: right;
|
||||
|
||||
width: calc(50% - 22px);
|
||||
|
||||
width: calc(50% - 24px);
|
||||
padding: 5px;
|
||||
|
||||
border: 1px dotted silver;
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 3px;
|
||||
background-color: #FFFFFF;
|
||||
font-size:11px;
|
||||
}
|
||||
|
||||
.tab-motors .motor_testing .notice p {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@
|
|||
<div class="cf_doc_version_bt">
|
||||
<a id="button-documentation" href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a>
|
||||
</div>
|
||||
|
||||
<div class="gui_box grey" style="margin-bottom: 15px;">
|
||||
|
||||
<div class="wrapper modelAndAccel">
|
||||
<div class="mixerPreview">
|
||||
<img src="./resources/motor_order/custom.svg" />
|
||||
|
|
@ -52,8 +55,11 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="gui_box motorblock">
|
||||
<div class="spacer">
|
||||
<div class="left motors">
|
||||
<div class="title">Motors</div>
|
||||
<div class="title2">Motors</div>
|
||||
<ul class="titles">
|
||||
<li title="Motor - 1">1</li>
|
||||
<li title="Motor - 2">2</li>
|
||||
|
|
@ -68,7 +74,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="right servos">
|
||||
<div class="title">Servos</div>
|
||||
<div class="title2">Servos</div>
|
||||
<ul class="titles">
|
||||
<li title="Servo - 8">8</li>
|
||||
<li title="Servo - 7">7</li>
|
||||
|
|
@ -116,5 +122,5 @@
|
|||
</div>
|
||||
<div class="cler-both"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div></div></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -161,6 +161,18 @@ TABS.motors.initialize = function (callback) {
|
|||
documentationButton.html("Documentation for "+CONFIG.flightControllerVersion);
|
||||
documentationButton.attr("href","https://github.com/cleanflight/cleanflight/tree/v{0}/docs".format(CONFIG.flightControllerVersion));
|
||||
|
||||
// load switchery
|
||||
var elems = Array.prototype.slice.call(document.querySelectorAll('#motorsEnableTestMode'));
|
||||
elems.forEach(function(html) {
|
||||
var switchery = new Switchery(html,
|
||||
{
|
||||
color: '#59aa29',
|
||||
size: 'small',
|
||||
secondaryColor: '#c4c4c4'
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
$('#motorsEnableTestMode').prop('disabled', 'true');
|
||||
|
||||
update_model(CONFIG.multiType);
|
||||
|
|
@ -434,10 +446,10 @@ TABS.motors.initialize = function (callback) {
|
|||
var data = MOTOR_DATA[i] - MISC.mincommand,
|
||||
margin_top = block_height - (data * (block_height / full_block_scale)).clamp(0, block_height),
|
||||
height = (data * (block_height / full_block_scale)).clamp(0, block_height),
|
||||
color = parseInt(data * 0.256);
|
||||
color = parseInt(data * 0.01);
|
||||
|
||||
$('.motor-' + i + ' .label', motors_wrapper).text(MOTOR_DATA[i]);
|
||||
$('.motor-' + i + ' .indicator', motors_wrapper).css({'margin-top' : margin_top + 'px', 'height' : height + 'px', 'background-color' : 'rgb(' + color + ',0,0)'});
|
||||
$('.motor-' + i + ' .indicator', motors_wrapper).css({'margin-top' : margin_top + 'px', 'height' : height + 'px', 'background-color' : 'rgba(89,170,41,0.'+ color +')'});
|
||||
}
|
||||
|
||||
// servo indicators are still using old (not flexible block scale), it will be changed in the future accordingly
|
||||
|
|
@ -445,10 +457,10 @@ TABS.motors.initialize = function (callback) {
|
|||
var data = SERVO_DATA[i] - 1000,
|
||||
margin_top = block_height - (data * (block_height / 1000)).clamp(0, block_height),
|
||||
height = (data * (block_height / 1000)).clamp(0, block_height),
|
||||
color = parseInt(data * 0.256);
|
||||
color = parseInt(data * 0.01);
|
||||
|
||||
$('.servo-' + i + ' .label', servos_wrapper).text(SERVO_DATA[i]);
|
||||
$('.servo-' + i + ' .indicator', servos_wrapper).css({'margin-top' : margin_top + 'px', 'height' : height + 'px', 'background-color' : 'rgb(' + color + ',0,0)'});
|
||||
$('.servo-' + i + ' .indicator', servos_wrapper).css({'margin-top' : margin_top + 'px', 'height' : height + 'px', 'background-color' : 'rgba(89,170,41,0.'+ color +')'});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -256,7 +256,7 @@
|
|||
float: right;
|
||||
position: relative;
|
||||
margin: 0px 0px 10px 0;
|
||||
width:calc(70% - 3px);
|
||||
width:calc(70% - 0px);
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
background-color:#DEDEDE;
|
||||
|
|
|
|||
161
testing.html
161
testing.html
|
|
@ -1,161 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Unbenanntes Dokument</title>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="./js/libraries/switchery/dist/switchery.css" media="all" />
|
||||
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="./main.css" media="all" />
|
||||
<link rel="stylesheet" type="text/css" href="./js/libraries/jbox/jBox.css" />
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript" src="./js/libraries/jquery-ui-1.11.2.min.js"></script>
|
||||
<script type="text/javascript" src="./js/libraries/jquery-2.1.4.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="./js/libraries/switchery/dist/switchery.js"></script>
|
||||
<script type="text/javascript" src="./js/libraries/jbox/jBox.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
|
||||
}
|
||||
#fixed_band {
|
||||
color: #c00;
|
||||
font: bold 15px arial;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
border: 1px solid #c00;
|
||||
width: 200px;
|
||||
top: 0px;
|
||||
position:absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="option">
|
||||
<label>
|
||||
<input class="porttoggle"/>
|
||||
<span i18n="firmwareFlasherNoReboot"></span>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input class="porttoggle" type="checkbox" />
|
||||
<span i18n="firmwareFlasherNoReboot"></span>
|
||||
</label>
|
||||
<span class="description" i18n="firmwareFlasherNoRebootDescription"></span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="fixed_band">This div is going to be fixed</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
d<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br><span class="fixfalse">False</span>
|
||||
<br>
|
||||
<br><span class="fixtrue">True</span>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
d<br><a href="#" class="cf_tip" title="Tooltip-test">Tooltip Test</a>
|
||||
<br>
|
||||
d<br><a href="#" class="cf_tip" title="Tooltip-test2">Tooltip Test2</a>
|
||||
<br>
|
||||
<br>
|
||||
d<br><a href="#" class="cf_tip" title="Tooltip-test3">Tooltip Test3</a>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
d<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
d
|
||||
<script>
|
||||
var elems = Array.prototype.slice.call(document.querySelectorAll('.porttoggle'));
|
||||
|
||||
elems.forEach(function(html) {
|
||||
var switchery = new Switchery(html,
|
||||
{
|
||||
color: '#59aa29',
|
||||
secondaryColor: '#c4c4c4'
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<script>
|
||||
|
||||
function relative_sticky(id, topSpacing){
|
||||
|
||||
if(!topSpacing){ var topSpacing = 0; }
|
||||
|
||||
var el_top = parseFloat(document.getElementById(id).getBoundingClientRect().top);
|
||||
el_top = el_top - parseFloat(document.getElementById(id).style.top);
|
||||
el_top = el_top * (-1);
|
||||
el_top = el_top + topSpacing;
|
||||
|
||||
if(el_top > 0){
|
||||
document.getElementById(id).style.top = el_top + "px";
|
||||
} else{
|
||||
document.getElementById(id).style.top = "0px";
|
||||
}
|
||||
}
|
||||
|
||||
window.onscroll = function(){
|
||||
|
||||
relative_sticky("fixed_band", 200);
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// loading tooltips
|
||||
|
||||
|
||||
|
||||
$('.cf_tip').jBox('Tooltip', {
|
||||
delayOpen: 100,
|
||||
delayClose: 100,
|
||||
position: {
|
||||
x: 'right',
|
||||
y: 'center'
|
||||
},
|
||||
outside: 'x'
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue