Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-21 15:25:22 +03:00
Code Issues Wiki Activity

More Work done:

Browse source 
• Tooltip integration
• Sensor Tab: rework
• Help & Documentation Tab: basic styling
• Logging Tab: basic styling
• PID Tab: some fixes
• Added the word „configurator (+ version)“ under the logo
• Removed not yet used „help icons“
This commit is contained in:
skaman82 2015-11-05 16:37:15 +01:00
parent 8e79a250ed
commit 1816979cc4
37 changed files with 3448 additions and 1606 deletions
Download patch file Download diff file Expand all files Collapse all files

82
js/libraries/jbox/README.md Executable file
View file

@ -0,0 +1,82 @@
jBox
====
jBox is a powerful and flexible jQuery plugin, taking care of all your modal windows, tooltips, notices and more.
Demo: http://stephanwagner.me/jBox
Docs: http://stephanwagner.me/jBox/documentation
Tooltips
--------
You can use jQuery selectors to add tooltips to elements:
$('.tooltip').jBox('Tooltip');
Now elements with class="tooltip" will open tooltips:
<span class="tooltip" title="My first tooltip">Hover me!</span>
<span class="tooltip" title="My second tooltip">Hover me!</span>
Modal windows
-------------
You can set up modal windows the same way as tooltips.
But most of times you'd want more variety, like a title or HTML content:
new jBox('Modal', {
width: 300,
height: 200,
attach: $('#myModal'),
title: 'My Modal Window',
content: '<i>Hello there!</i>'
});
<div id="myModal">Click me to open a modal window!</div>
Confirm windows
---------------
Confirm windows are modal windows which requires the user to confirm a click action on an element.
Give an element the attribute data-confirm to attach it:
new jBox('Confirm', {
confirmButton: 'Do it!',
cancelButton: 'Nope'
});
<div onclick="doit()" data-confirm="Do you really want to do this?">Click me!</div>
<a href="http://stephanwagner.me" data-confirm="Do you really want to leave this page?">Click me!</a>
Notices
-------
A notice will open automatically and destroy itself after some time:
new jBox('Notice', {
content: 'Hurray! A notice!'
});
Images
------
To create image modal windows you only need following few lines:
new jBox('Image');
<a href="/image-large.jpg" data-jbox-image="gallery1" title="My image"><img src="/image.jpg" alt=""></a>
Learn more
----------
These few examples are very basic.
The jBox library is quite powerful and offers a vast variety of options to customize appearance and behavior.
Learn more in the documentation: http://stephanwagner.me/jBox/documentation

572
js/libraries/jbox/jBox.css Executable file
View file

@ -0,0 +1,572 @@
/* Global */
.jBox-wrapper {
text-align: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.jBox-title,
.jBox-content,
.jBox-container {
position: relative;
word-break: break-word;
}
.jBox-container {
background: #fff;
border:1px solid #59aa29;
max-width:180px;
font-size:11px;
line-height:13px;
color:#525352;
}
.jBox-content {
padding: 4px 5px;
overflow: auto;
-webkit-transition: opacity .15s;
transition: opacity .15s;
}
/* jBox Tooltip */
.jBox-Tooltip .jBox-container,
.jBox-Mouse .jBox-container {
border-radius: 3px;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}
.jBox-Tooltip .jBox-title,
.jBox-Mouse .jBox-title {
padding: 8px 10px 0;
font-weight: bold;
}
.jBox-hasTitle.jBox-Tooltip .jBox-content,
.jBox-hasTitle.jBox-Mouse .jBox-content {
padding-top: 5px;
}
/* Pointer */
.jBox-pointer {
position: absolute;
overflow: hidden;
}
.jBox-pointer-top { top: 0; }
.jBox-pointer-bottom { bottom: 0; }
.jBox-pointer-left { left: 0; }
.jBox-pointer-right { right: 0; }
.jBox-pointer-top,
.jBox-pointer-bottom {
width: 22px;
height: 10px;
}
.jBox-pointer-left,
.jBox-pointer-right {
width: 10px;
height: 20px;
}
.jBox-pointer:after {
content: '';
width: 10px;
height: 9px;
position: absolute;
background: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border:1px solid #59aa29;
}
.jBox-pointer-top:after {
left: 5px;
top: 6px;
box-shadow: -1px -1px 4px rgba(0, 0, 0, .2);
}
.jBox-pointer-right:after {
top: 5px;
right: 6px;
box-shadow: 1px -1px 4px rgba(0, 0, 0, .2);
}
.jBox-pointer-bottom:after {
left: 5px;
bottom: 6px;
box-shadow: 1px 1px 4px rgba(0, 0, 0, .2);
}
.jBox-pointer-left:after {
top: 5px;
left: 6px;
box-shadow: -1px 1px 4px rgba(0, 0, 0, .2);
}
/* jBox Modal & jBox Confirm */
.jBox-Modal .jBox-container,
.jBox-Confirm .jBox-container {
border-radius: 3px;
box-shadow: 0 3px 15px rgba(0, 0, 0, .4), 0 0 5px rgba(0, 0, 0, .4);
}
.jBox-Modal .jBox-title,
.jBox-Confirm .jBox-title {
border-radius: 3px 3px 0 0;
padding: 10px 15px;
background: #f4f5f6;
border-bottom: 1px solid #ddd;
text-shadow: 0 1px 1px #fff;
}
.jBox-Modal.jBox-closeButton-title .jBox-title,
.jBox-Confirm.jBox-closeButton-title .jBox-title {
padding-right: 55px;
}
.jBox-Modal.jBox-closeButton-box:before,
.jBox-Confirm.jBox-closeButton-box:before {
box-shadow: 0 3px 15px rgba(0, 0, 0, .4), 0 0 5px rgba(0, 0, 0, .4);
}
/* jBox Modal */
.jBox-Modal .jBox-content {
padding: 12px 15px;
}
/* jBox Confirm */
.jBox-Confirm .jBox-content {
text-align: center;
padding: 45px 35px;
}
.jBox-Confirm-footer {
border-top: 1px solid #e2e2e2;
background: #fafafa;
border-radius: 0 0 3px 3px;
text-align: center;
padding: 10px 0;
}
.jBox-Confirm-button {
display: inline-block;
cursor: pointer;
font-size: 15px;
line-height: 30px;
height: 30px;
border-radius: 3px;
padding: 0 20px;
-webkit-transition: color .2s, background-color .2s;
transition: color .2s, background-color .2s;
}
.jBox-Confirm-button-cancel {
text-shadow: 0 1px 1px rgba(255, 255, 255, .6);
background: #ddd;
color: #999;
margin-right: 25px;
}
.jBox-Confirm-button-cancel:hover {
background: #ccc;
color: #666;
}
.jBox-Confirm-button-submit {
text-shadow: 0 -1px 1px rgba(0, 0, 0, .2);
background: #5fc04c;
color: #fff;
}
.jBox-Confirm-button-submit:hover {
background: #53a642;
}
.jBox-Confirm-button-cancel:active,
.jBox-Confirm-button-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .26);
}
/* jBox Notice */
.jBox-Notice {
-webkit-transition: margin .2s;
transition: margin .2s;
}
.jBox-Notice .jBox-container {
border-radius: 3px;
box-shadow: 0 0 3px rgba(0, 0, 0, .2);
color: #fff;
text-shadow: 0 -1px 1px #000;
background: #333;
background-image: linear-gradient(to bottom, #444, #222);
}
.jBox-Notice .jBox-content {
border-radius: 3px;
padding: 12px 20px;
}
.jBox-Notice .jBox-title {
padding: 8px 20px 0;
font-weight: bold;
}
.jBox-hasTitle.jBox-Notice .jBox-content {
padding-top: 5px;
}
.jBox-Notice-color .jBox-container {
text-shadow: 0 -1px 1px rgba(0, 0, 0, .3);
}
.jBox-Notice-gray .jBox-container {
color: #666;
text-shadow: 0 1px 1px #fff;
background: #f4f4f4;
background-image: linear-gradient(to bottom, #fafafa, #f0f0f0);
}
.jBox-Notice-red .jBox-container {
background: #b02222;
background-image: linear-gradient(to bottom, #ee2222, #b02222);
}
.jBox-Notice-green .jBox-container {
background: #70a800;
background-image: linear-gradient(to bottom, #95cc2a, #70a800);
}
.jBox-Notice-blue .jBox-container {
background: #2b91d9;
background-image: linear-gradient(to bottom, #5abaff, #2b91d9);
}
.jBox-Notice-yellow .jBox-container {
color: #744700;
text-shadow: 0 1px 1px rgba(255, 255, 255, .6);
background: #ffb11f;
background-image: linear-gradient(to bottom, #ffd665, #ffb11f);
}
/* jBox Image */
.jBox-Image {
background: #fff;
padding: 8px 8px 45px;
border-radius: 5px;
}
.jBox-Image .jBox-content {
padding: 0;
width: 100%;
height: 100%;
}
.jBox-image-container {
border-radius: 5px;
background: #fff center center no-repeat;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
.jBox-image-label {
box-sizing: border-box;
position: absolute;
background: #fff;
top: 100%;
left: 0;
width: 100%;
color: #333;
margin-top: -35px;
padding: 0 90px 5px 10px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .3s;
transition: opacity .3s;
opacity: 0;
}
.jBox-image-label.active {
opacity: 1;
}
.jBox-image-pointer-next,
.jBox-image-pointer-prev {
position: absolute;
bottom: 0px;
width: 22px;
height: 45px;
background: no-repeat center center url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ijc0LjcgMjI0IDE4LjcgMzIiPg0KPHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTkzLDIyNy40TDgwLjQsMjQwTDkzLDI1Mi42YzAuNCwwLjQsMC40LDEuMSwwLDEuNWwtMS42LDEuNmMtMC40LDAuNC0xLDAuNS0xLjUsMEw3NSwyNDAuN2MtMC40LTAuNC0wLjUtMSwwLTEuNWwxNC45LTE0LjljMC40LTAuNCwxLTAuNCwxLjUsMGwxLjYsMS42QzkzLjUsMjI2LjQsOTMuNCwyMjcsOTMsMjI3LjR6Ii8+DQo8L3N2Zz4=);
background-size: 11px auto;
cursor: pointer;
opacity: .6;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: opacity .2s;
transition: opacity .2s;
}
.jBox-image-pointer-next:hover,
.jBox-image-pointer-prev:hover {
opacity: 1;
}
.jBox-image-pointer-next {
right: 8px;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.jBox-image-pointer-prev {
right: 30px;
}
.jBox-image-open #jBox-overlay {
background-color: rgba(0, 0, 0, .86);
}
.jBox-Image.jBox-loading .jBox-container:before {
left: auto;
top: auto;
bottom: -33px;
right: 55px;
margin-top: -9px;
margin-left: -9px;
}
/* Close button */
.jBox-closeButton {
cursor: pointer;
position: absolute;
}
.jBox-closeButton svg {
position: absolute;
top: 50%;
right: 50%;
}
.jBox-closeButton path {
-webkit-transition: fill .2s;
transition: fill .2s;
}
.jBox-closeButton path {
fill: #aaa;
}
.jBox-closeButton:hover path {
fill: #888;
}
.jBox-closeButton:active path {
fill: #666;
}
/* Close button in overlay */
#jBox-overlay .jBox-closeButton {
top: 0;
right: 0;
width: 40px;
height: 40px;
}
#jBox-overlay .jBox-closeButton svg {
width: 20px;
height: 20px;
margin-top: -10px;
margin-right: -10px;
}
#jBox-overlay .jBox-closeButton path {
fill: #d2d4d6;
}
#jBox-overlay .jBox-closeButton:hover path {
fill: #fff;
}
#jBox-overlay .jBox-closeButton:active path {
fill: #b2b4b6;
}
/* Close button in title */
.jBox-closeButton-title .jBox-closeButton {
top: 0;
right: 0;
bottom: 0;
width: 40px;
}
.jBox-closeButton-title .jBox-closeButton svg {
width: 12px;
height: 12px;
margin-top: -6px;
margin-right: -6px;
}
/* Close button in box */
.jBox-closeButton-box .jBox-closeButton {
top: -8px;
right: -10px;
width: 24px;
height: 24px;
background: #fff;
border-radius: 50%;
}
.jBox-closeButton-box .jBox-closeButton svg {
width: 10px;
height: 10px;
margin-top: -5px;
margin-right: -5px;
}
.jBox-hasTitle.jBox-Modal.jBox-closeButton-box .jBox-closeButton {
background: #f4f5f6;
}
.jBox-closeButton-box:before {
content: '';
position: absolute;
top: -8px;
right: -10px;
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}
.jBox-pointerPosition-top.jBox-closeButton-box:before {
top: 4px;
}
.jBox-pointerPosition-right.jBox-closeButton-box:before {
right: 2px;
}
/* Overlay */
#jBox-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
background-color: rgba(0, 0, 0, .6);
}
/* Block scrolling */
body[class^="jBox-blockScroll-"],
body[class*=" jBox-blockScroll-"] {
overflow: hidden;
}
/* Draggable */
.jBox-draggable {
cursor: move;
}
/* Spinner */
@keyframes jBoxLoading {
to {transform: rotate(360deg);}
}
@-webkit-keyframes jBoxLoading {
to {-webkit-transform: rotate(360deg);}
}
.jBox-loading .jBox-content {
min-height: 32px;
min-width: 38px;
opacity: 0;
}
.jBox-spinner {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
}
.jBox-spinner:before {
content: 'Loading…';
display: block;
width: 20px;
height: 20px;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.jBox-spinner:not(:required):before {
content: '';
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, .3);
border-top-color: rgba(0, 0, 0, .6);
animation: jBoxLoading .6s linear infinite;
-webkit-animation: jBoxLoading .6s linear infinite;
}
/* IE8 fixes */
.jBox-IE8.jBox-Tooltip .jBox-container,
.jBox-IE8.jBox-Mouse .jBox-container {
border: 1px solid #aaa;
}
.jBox-IE8 .jBox-pointer:after {
display: none;
}
.jBox-IE8 .jBox-pointer {
border: 0;
background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNq01l0OwyAIAGAlvY+n8ZJ6Gk/EqqkNtf7ApCQ+LM34iuCmRUQzihjj6FH+kjWL8N4/Ph9GHpiTnC9SwDbhLGyvspSScc71KkOa/HpuuRhIK+psE2pjONouCQg7kBSEXUgC2tHo52mTTBpnaEATWlaYK6MrhIAaceWpOcsCrYp6FV4H/90zTWjUQ/gSevVQq0ecHqoOxWpYoO7p5O9ku2fnVtp7QAik2rsK3fnpWfjynJWpbw+1BkghurrYDjiCptg/4AxaYhJwBbEwDsiB2NgM5EIirAdKIDFGQSmU1+NaIPjJYt2I25vxT4ABAMhWvtle2YvmAAAAAElFTkSuQmCC);
}
.jBox-IE8 .jBox-pointer-top { background-position: center top; }
.jBox-IE8 .jBox-pointer-bottom { background-position: center bottom; }
.jBox-IE8 .jBox-pointer-left { background-position: left center; }
.jBox-IE8 .jBox-pointer-right { background-position: right center; }
.jBox-IE8.jBox-Modal .jBox-container {
border: 3px solid #aaa;
}
/* No SVG support fixes */
.jBox-nosvg .jBox-closeButton:before {
font-family: Verdana, sans-serif;
content: 'x';
text-align: center;
font-size: 18px;
color: #888;
}

1633
js/libraries/jbox/jBox.js Executable file
View file

File diff suppressed because it is too large Load diff

2
js/libraries/jbox/jBox.min.js vendored Executable file
View file

File diff suppressed because one or more lines are too long

46
js/libraries/jbox/themes/ModalBorder.css Executable file
View file

@ -0,0 +1,46 @@
/* Wrapper */
.jBox-ModalBorder {
border-radius: 8px;
background: rgba(0, 0, 0, .4);
padding: 8px;
box-shadow: 0 0 6px rgba(0, 0, 0, .2);
}
/* Container */
.jBox-ModalBorder .jBox-container {
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
/* Close button */
.jBox-ModalBorder.jBox-closeButton-box {
border-top-right-radius: 0;
}
.jBox-ModalBorder.jBox-closeButton-box:before {
display: none;
}
.jBox-ModalBorder.jBox-hasTitle.jBox-closeButton-box .jBox-closeButton,
.jBox-ModalBorder.jBox-closeButton-box .jBox-closeButton {
background: rgba(0, 0, 0, .4);
border-radius: 0 50% 50% 0;
right: -32px;
top: -8px;
}
.jBox-ModalBorder.jBox-closeButton-box .jBox-closeButton path {
fill: #d2d4d6;
}
.jBox-ModalBorder.jBox-closeButton-box .jBox-closeButton:hover path {
fill: #fff;
}
.jBox-ModalBorder.jBox-closeButton-box .jBox-closeButton:active path {
fill: #b2b4b6;
}

45
js/libraries/jbox/themes/NoticeBorder.css Executable file
View file

@ -0,0 +1,45 @@
/* jBox: Notice */
.jBox-NoticeBorder .jBox-container {
border-radius: 6px;
}
.jBox-NoticeBorder .jBox-content,
.jBox-NoticeBorder .jBox-title {
padding-left: 26px;
}
.jBox-NoticeBorder.jBox-Notice-color .jBox-container {
color: #fff;
text-shadow: 0 -1px 0 #000;
background: rgba(0, 0, 0, .92);
}
.jBox-NoticeBorder.jBox-Notice-color .jBox-container:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 8px;
border-radius: 5px 0 0 5px;
background-image: linear-gradient(45deg, rgba(255, 255, 255, .5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .5) 75%, transparent 75%, transparent);
background-size: 18px 18px;
}
.jBox-NoticeBorder.jBox-Notice-red .jBox-container:after {
background-color: #ee0000;
}
.jBox-NoticeBorder.jBox-Notice-green .jBox-container:after {
background-color: #95cc2a;
}
.jBox-NoticeBorder.jBox-Notice-blue .jBox-container:after {
background-color: #4cb4ff;
}
.jBox-NoticeBorder.jBox-Notice-yellow .jBox-container:after {
background-color: #ffba00;
}

33
js/libraries/jbox/themes/TooltipBorder.css Executable file
View file

@ -0,0 +1,33 @@
/* Container */
.jBox-TooltipBorder .jBox-container {
border-radius: 5px;
border: 2px solid #52a2cb;
}
/* Pointer */
.jBox-TooltipBorder .jBox-pointer:after {
border: 2px solid #52a2cb;
}
.jBox-TooltipBorder .jBox-pointer-top,
.jBox-TooltipBorder .jBox-pointer-bottom {
width: 34px;
height: 12px;
}
.jBox-TooltipBorder .jBox-pointer-left,
.jBox-TooltipBorder .jBox-pointer-right {
width: 12px;
height: 34px;
}
/* Close button */
.jBox-TooltipBorder.jBox-closeButton-box:before {
width: 28px;
height: 28px;
background: #52a2cb;
}

37
js/libraries/jbox/themes/TooltipDark.css Executable file
View file

@ -0,0 +1,37 @@
/* Container */
.jBox-TooltipDark .jBox-container {
border-radius: 3px;
background: #222;
color: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, .4);
}
/* Pointer */
.jBox-TooltipDark .jBox-pointer:after {
background: #222;
}
/* Close button */
.jBox-TooltipDark .jBox-closeButton {
background: #222;
}
.jBox-TooltipDark.jBox-closeButton-box:before {
box-shadow: 0 0 6px rgba(0, 0, 0, .4);
}
.jBox-TooltipDark.jBox-closeButton-box .jBox-closeButton path {
fill: #d2d4d6;
}
.jBox-TooltipDark.jBox-closeButton-box .jBox-closeButton:hover path {
fill: #fff;
}
.jBox-TooltipDark.jBox-closeButton-box .jBox-closeButton:active path {
fill: #b2b4b6;
}

40
main.css
View file

@ -35,9 +35,24 @@ a:hover {
/* Help-Icon */
span .helpicon {
float:right;
margin-top:2px;
margin-right:0px;
display:block;
height:14px;
width:14px;
opacity: 0.2;
background-image:url(images/icons/cf_icon_info_grey.svg);
background-size:contain;
background-position:center;
}
.helpicon {
float:right;
margin-top:-18px;
margin-top:7px;
margin-right:7px;
display:block;
height:14px;
@ -134,6 +149,20 @@ input[type="number"]::-webkit-inner-spin-button {
margin-top:15px;
}
.logo_text {
position: absolute;
height:20px;
width: 132px;
left: 31px;
top: 63px;
color: #949494;
opacity:0.5;
}
.logo_text .version {
float:right;
}
#port-picker {
position:relative;
width:100%;
@ -978,7 +1007,7 @@ dialog {
border:1px solid #ffe55f;
margin-bottom:7px;
margin-top:3px;
width:100%;
width:calc(100% - 2px);
border-radius: 3px;
font-size:11px;
font-family: 'open_sansregular', Arial;
@ -1088,7 +1117,7 @@ dialog {
border-radius:4px;
background-color:#FFFFFF;
float:left;
width:100%;
width: calc(100% - 2px);
margin-bottom:10px;
font-family: 'open_sansregular', Arial;
@ -1123,6 +1152,7 @@ dialog {
padding-right:10px;
padding-top:4px;
margin-bottom:0px;
float:left;
}
@ -1530,6 +1560,7 @@ body {
height:24px;
padding-bottom:0px;
margin-bottom:5px;
float:left;
}
.spacer_box_title {
@ -1537,6 +1568,7 @@ body {
padding-right: 10px;
padding-top: 3px;
margin-bottom: 0px;
float: left;
}
@ -1547,7 +1579,7 @@ input {
.helpicon {
float:right;
margin-top:-15px;
margin-top:5px;
margin-right:7px;
height:14px;
width:14px;

421
main.html
View file

@ -1,214 +1,217 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="cTn" />
<!--link type="text/css" rel="stylesheet" href="./main2.css" media="all" /-->
<link type="text/css" rel="stylesheet" href="./main.css" media="all" id="default" />
<link type="text/css" rel="stylesheet" href="./js/libraries/jquery.nouislider.min.css" />
<link type="text/css" rel="stylesheet" href="./js/libraries/jquery.nouislider.pips.min.css" />
<link type="text/css" rel="stylesheet" href="./js/libraries/flightindicators.css" />
<link type="text/css" rel="stylesheet" href="./tabs/landing.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/setup.css"media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/help.css"media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/ports.css"media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/configuration.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/pid_tuning.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/receiver.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/servos.css"media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/gps.css"media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/motors.css"media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/led_strip.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/logging.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/dataflash.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/firmware_flasher.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/adjustments.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/auxiliary.css" media="all" />
<link type="text/css" rel="stylesheet" href="./styles/opensans_webfontkit/fonts.css" media="all" />
<link type="text/css" rel="stylesheet" href="./styles/dropdown-lists/css/style_lists.css" media="all" />
<link type="text/css" rel="stylesheet" href="./js/libraries/switchery/dist/switchery.css" media="all" />
<script type="text/javascript" src="./js/libraries/q.js"></script>
<script type="text/javascript" src="./js/libraries/google-analytics-bundle.js"></script>
<script type="text/javascript" src="./js/libraries/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./js/libraries/jquery-ui-1.11.4.min.js"></script>
<script type="text/javascript" src="./js/libraries/d3.min.js"></script>
<script type="text/javascript" src="./js/libraries/jquery.nouislider.all.min.js"></script>
<script type="text/javascript" src="./js/libraries/three/three.min.js"></script>
<script type="text/javascript" src="./js/libraries/three/Projector.js"></script>
<script type="text/javascript" src="./js/libraries/three/CanvasRenderer.js"></script>
<script type="text/javascript" src="./js/libraries/jquery.flightindicators.js"></script>
<script type="text/javascript" src="./js/libraries/semver.js"></script>
<script type="text/javascript" src="./js/port_handler.js"></script>
<script type="text/javascript" src="./js/port_usage.js"></script>
<script type="text/javascript" src="./js/serial.js"></script>
<script type="text/javascript" src="./js/gui.js"></script>
<script type="text/javascript" src="./js/model.js"></script>
<script type="text/javascript" src="./js/request_balancer.js"></script>
<script type="text/javascript" src="./js/serial_backend.js"></script>
<script type="text/javascript" src="./js/data_storage.js"></script>
<script type="text/javascript" src="./js/msp.js"></script>
<script type="text/javascript" src="./js/backup_restore.js"></script>
<script type="text/javascript" src="./js/protocols/stm32.js"></script>
<script type="text/javascript" src="./js/protocols/stm32usbdfu.js"></script>
<script type="text/javascript" src="./js/localization.js"></script>
<script type="text/javascript" src="./js/boards.js"></script>
<script type="text/javascript" src="./main.js"></script>
<script type="text/javascript" src="./tabs/landing.js"></script>
<script type="text/javascript" src="./tabs/setup.js"></script>
<script type="text/javascript" src="./tabs/help.js"></script>
<script type="text/javascript" src="./tabs/ports.js"></script>
<script type="text/javascript" src="./tabs/configuration.js"></script>
<script type="text/javascript" src="./tabs/pid_tuning.js"></script>
<script type="text/javascript" src="./tabs/receiver.js"></script>
<!-- <script type="text/javascript" src="./tabs/modes.js"></script> -->
<script type="text/javascript" src="./tabs/auxiliary.js"></script>
<script type="text/javascript" src="./tabs/adjustments.js"></script>
<script type="text/javascript" src="./tabs/servos.js"></script>
<script type="text/javascript" src="./tabs/gps.js"></script>
<script type="text/javascript" src="./tabs/motors.js"></script>
<script type="text/javascript" src="./tabs/led_strip.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/logging.js"></script>
<script type="text/javascript" src="./tabs/dataflash.js"></script>
<script type="text/javascript" src="./tabs/firmware_flasher.js"></script>
<script type="text/javascript" src="./js/libraries/switchery/dist/switchery.js"></script>
<title></title>
</head>
<body>
<div id="main-wrapper">
<div class="headerbar">
<div id="logo"></div>
<a id="options" href="#" i18n_title="options_title"></a>
<div id="port-picker">
<div class="connect_controls" id="connectbutton">
<div class="connect_b">
<a class="connect" href="#"></a>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="cTn" />
<!--link type="text/css" rel="stylesheet" href="./main2.css" media="all" /-->
<link type="text/css" rel="stylesheet" href="./main.css" media="all" id="default" />
<link type="text/css" rel="stylesheet" href="./js/libraries/jquery.nouislider.min.css" />
<link type="text/css" rel="stylesheet" href="./js/libraries/jquery.nouislider.pips.min.css" />
<link type="text/css" rel="stylesheet" href="./js/libraries/flightindicators.css" />
<link type="text/css" rel="stylesheet" href="./tabs/landing.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/setup.css"media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/help.css"media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/ports.css"media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/configuration.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/pid_tuning.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/receiver.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/servos.css"media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/gps.css"media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/motors.css"media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/led_strip.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/logging.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/dataflash.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/firmware_flasher.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/adjustments.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/auxiliary.css" media="all" />
<link type="text/css" rel="stylesheet" href="./styles/opensans_webfontkit/fonts.css" media="all" />
<link type="text/css" rel="stylesheet" href="./styles/dropdown-lists/css/style_lists.css" media="all" />
<link type="text/css" rel="stylesheet" href="./js/libraries/switchery/dist/switchery.css" media="all" />
<link rel="stylesheet" type="text/css" href="./js/libraries/jbox/jBox.css" />
<script type="text/javascript" src="./js/libraries/q.js"></script>
<script type="text/javascript" src="./js/libraries/google-analytics-bundle.js"></script>
<script type="text/javascript" src="./js/libraries/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./js/libraries/jquery-ui-1.11.4.min.js"></script>
<script type="text/javascript" src="./js/libraries/d3.min.js"></script>
<script type="text/javascript" src="./js/libraries/jquery.nouislider.all.min.js"></script>
<script type="text/javascript" src="./js/libraries/three/three.min.js"></script>
<script type="text/javascript" src="./js/libraries/three/Projector.js"></script>
<script type="text/javascript" src="./js/libraries/three/CanvasRenderer.js"></script>
<script type="text/javascript" src="./js/libraries/jquery.flightindicators.js"></script>
<script type="text/javascript" src="./js/libraries/semver.js"></script>
<script type="text/javascript" src="./js/port_handler.js"></script>
<script type="text/javascript" src="./js/port_usage.js"></script>
<script type="text/javascript" src="./js/serial.js"></script>
<script type="text/javascript" src="./js/gui.js"></script>
<script type="text/javascript" src="./js/model.js"></script>
<script type="text/javascript" src="./js/request_balancer.js"></script>
<script type="text/javascript" src="./js/serial_backend.js"></script>
<script type="text/javascript" src="./js/data_storage.js"></script>
<script type="text/javascript" src="./js/msp.js"></script>
<script type="text/javascript" src="./js/backup_restore.js"></script>
<script type="text/javascript" src="./js/protocols/stm32.js"></script>
<script type="text/javascript" src="./js/protocols/stm32usbdfu.js"></script>
<script type="text/javascript" src="./js/localization.js"></script>
<script type="text/javascript" src="./js/boards.js"></script>
<script type="text/javascript" src="./main.js"></script>
<script type="text/javascript" src="./tabs/landing.js"></script>
<script type="text/javascript" src="./tabs/setup.js"></script>
<script type="text/javascript" src="./tabs/help.js"></script>
<script type="text/javascript" src="./tabs/ports.js"></script>
<script type="text/javascript" src="./tabs/configuration.js"></script>
<script type="text/javascript" src="./tabs/pid_tuning.js"></script>
<script type="text/javascript" src="./tabs/receiver.js"></script>
<script type="text/javascript" src="./tabs/auxiliary.js"></script>
<script type="text/javascript" src="./tabs/adjustments.js"></script>
<script type="text/javascript" src="./tabs/servos.js"></script>
<script type="text/javascript" src="./tabs/gps.js"></script>
<script type="text/javascript" src="./tabs/motors.js"></script>
<script type="text/javascript" src="./tabs/led_strip.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/logging.js"></script>
<script type="text/javascript" src="./tabs/dataflash.js"></script>
<script type="text/javascript" src="./tabs/firmware_flasher.js"></script>
<script type="text/javascript" src="./js/libraries/jbox/jBox.js"></script>
<script type="text/javascript" src="./js/libraries/switchery/dist/switchery.js"></script>
<title></title>
</head>
<body>
<div id="main-wrapper">
<div class="headerbar">
<div id="logo">
<div class="logo_text">
CONFIGURATOR
<div class="version"></div>
</div>
</div>
<a class="connect_state" i18n="connect"></a>
<a id="options" href="#" i18n_title="options_title"></a>
<div id="port-picker">
<div class="connect_controls" id="connectbutton">
<div class="connect_b">
<a class="connect" href="#"></a>
</div>
<a class="connect_state" i18n="connect"></a>
</div>
<div id="portsinput">
<div class="dropdown dropdown-dark" style="margin-bottom:3px;">
<select class="dropdown-select" id="port" title="Port">
<option value="manual">Manual</option>
<!-- port list gets generated here -->
</select>
</div>
<div class="dropdown dropdown-dark" style="margin-bottom:5px;">
<select class="dropdown-select" id="baud" title="Baud Rate">
<option value="115200" selected="selected">115200</option>
<option value="57600">57600</option>
<option value="38400">38400</option>
<option value="28800">28800</option>
<option value="19200">19200</option>
<option value="14400">14400</option>
<option value="9600">9600</option>
<option value="4800">4800</option>
<option value="2400">2400</option>
<option value="1200">1200</option>
</select>
</div>
<div id="port-override-option">
<label for="port-override">Port: <input id="port-override" type="text" value="/dev/rfcomm0"/></label>
</div>
<div>
<label><input class="auto_connect" type="checkbox" id="togglesmall" /><span class="auto_connect" i18n="autoConnect"></span></label>
</div>
</div>
</div>
<div class="header-wrapper">
<div id="sensor-status" class="sensor_state mode-connected">
<ul>
<li class="gyro" title="Gyroscope">
<div class="gyroicon">Gyro</div>
</li>
<li class="accel" title="Accelerometer">
<div class="accicon">Accel</div>
</li>
<li class="mag" title="Magnetometer">
<div class="magicon">Mag</div>
</li>
<li class="baro" title="Barometer">
<div class="baroicon">Baro</div>
</li>
<li class="gps" title="GPS">
<div class="gpsicon">GPS</div>
</li>
<li class="sonar" title="Sonar / Range finder">
<div class="sonaricon">Sonar</div>
</li>
</ul>
</div>
</div>
</div>
<div class="clear-both"></div>
<div id="log">
<div class="logswitch"><a href="#" id="showlog">Show Log</a></div>
<div id="scrollicon"></div>
<div class="wrapper">
</div>
</div>
<div class="tab_container">
<div id="tabs">
<ul class="mode-disconnected">
<li class="tab_landing"><a href="#" i18n="tabLanding" class="tabicon ic_welcome" title="Welcome"></a></li>
<li class="tab_help"><a href="#" i18n="tabHelp" class="tabicon ic_help" title="Documentation & Help"></a></li>
<li class="tab_firmware_flasher"><a href="#" i18n="tabFirmwareFlasher" class="tabicon ic_flasher" title="Firmware Flasher"></a></li>
</ul>
<ul class="mode-connected">
<li class="tab_setup"><a href="#" i18n="tabSetup" class="tabicon ic_setup" title="Setup"></a></li>
<li class="tab_ports"><a href="#" i18n="tabPorts" class="tabicon ic_ports" title="Ports"></a></li>
<li class="tab_configuration"><a href="#" i18n="tabConfiguration" class="tabicon ic_config" title="Configuration"></a></li>
<li class="tab_pid_tuning"><a href="#" i18n="tabPidTuning" class="tabicon ic_pid" title="PID Tuning"></a></li>
<li class="tab_receiver"><a href="#" i18n="tabReceiver" class="tabicon ic_rx" title="Receiver"></a></li>
<li class="tab_auxiliary"><a href="#" i18n="tabAuxiliary" class="tabicon ic_modes" title="Modes"></a></li>
<li class="tab_adjustments"><a href="#" i18n="tabAdjustments" class="tabicon ic_adjust" title="Adjustments"></a></li>
<li class="tab_servos"><a href="#" i18n="tabServos" class="tabicon ic_servo" title="Servos"></a></li>
<li class="tab_gps"><a href="#" i18n="tabGPS" class="tabicon ic_gps" title="GPS"></a></li>
<li class="tab_motors"><a href="#" i18n="tabMotorTesting" class="tabicon ic_motor" title="Motors"></a></li>
<li class="tab_led_strip"><a href="#" i18n="tabLedStrip" class="tabicon ic_led" title="LED Strip"></a></li>
<li class="tab_sensors"><a href="#" i18n="tabRawSensorData" class="tabicon ic_sensors" title="Sensors"></a></li>
<li class="tab_logging"><a href="#" i18n="tabLogging" class="tabicon ic_log" title="Logging"></a></li>
<li class="tab_dataflash"><a href="#" i18n="tabDataflash" class="tabicon ic_data" title="Dataflash"></a></li>
<li class="tab_cli"><a href="#" i18n="tabCLI" class="tabicon ic_cli" title="CLI"></a></li>
<!-- spare icons
<li class=""><a href="#"class="tabicon ic_mission">Mission (spare icon)</a></li>
<li class=""><a href="#"class="tabicon ic_advanced">Advanced (spare icon)</a></li>
<li class=""><a href="#"class="tabicon ic_wizzard">Wizzard (spare icon)</a></li>
-->
</ul>
</div>
<div class="clear-both"></div>
</div>
<div id="content">
</div>
<div id="status-bar">
<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_i2c_error"></span> <span class="i2c-error">0</span>
</div>
<div>
<span i18n="statusbar_cycle_time"></span> <span class="cycle-time">0</span>
</div>
<div class="version">
<!-- configuration version generated here -->
</div>
</div>
<div id="cache">
<div class="data-loading">
<p>Waiting for data ...</p>
</div>
</div>
</div>
<div id="portsinput">
<div class="dropdown dropdown-dark" style="margin-bottom:3px;">
<select class="dropdown-select" id="port" title="Port">
<option value="manual">Manual</option>
<!-- port list gets generated here -->
</select>
</div>
<div class="dropdown dropdown-dark" style="margin-bottom:5px;">
<select class="dropdown-select" id="baud" title="Baud Rate">
<option value="115200" selected="selected">115200</option>
<option value="57600">57600</option>
<option value="38400">38400</option>
<option value="28800">28800</option>
<option value="19200">19200</option>
<option value="14400">14400</option>
<option value="9600">9600</option>
<option value="4800">4800</option>
<option value="2400">2400</option>
<option value="1200">1200</option>
</select>
</div>
<div id="port-override-option">
<label for="port-override">Port: <input id="port-override" type="text" value="/dev/rfcomm0"/></label>
</div>
<div>
<label><input class="auto_connect" type="checkbox" id="togglesmall" /><span class="auto_connect" i18n="autoConnect"></span></label>
</div>
</div>
</div>
<div class="header-wrapper">
<div id="sensor-status" class="sensor_state mode-connected">
<ul>
<li class="gyro" title="Gyroscope">
<div class="gyroicon">Gyro</div>
</li>
<li class="accel" title="Accelerometer">
<div class="accicon">Accel</div>
</li>
<li class="mag" title="Magnetometer">
<div class="magicon">Mag</div>
</li>
<li class="baro" title="Barometer">
<div class="baroicon">Baro</div>
</li>
<li class="gps" title="GPS">
<div class="gpsicon">GPS</div>
</li>
<li class="sonar" title="Sonar / Range finder">
<div class="sonaricon">Sonar</div>
</li>
</ul>
</div>
</div>
</div>
<div class="clear-both"></div>
<div id="log">
<div class="logswitch"><a href="#" id="showlog">Show Log</a></div>
<div id="scrollicon"></div>
<div class="wrapper">
</div>
</div>
<div class="tab_container">
<div id="tabs">
<ul class="mode-disconnected">
<li class="tab_landing"><a href="#" i18n="tabLanding" class="tabicon ic_welcome"></a></li>
<li class="tab_help"><a href="#" i18n="tabHelp" class="tabicon ic_help"></a></li>
<li class="tab_firmware_flasher"><a href="#" i18n="tabFirmwareFlasher" class="tabicon ic_flasher"></a></li>
</ul>
<ul class="mode-connected">
<li class="tab_setup"><a href="#" i18n="tabSetup" class="tabicon ic_setup"></a></li>
<li class="tab_ports"><a href="#" i18n="tabPorts" class="tabicon ic_ports"></a></li>
<li class="tab_configuration"><a href="#" i18n="tabConfiguration" class="tabicon ic_config"></a></li>
<li class="tab_pid_tuning"><a href="#" i18n="tabPidTuning" class="tabicon ic_pid"></a></li>
<li class="tab_receiver"><a href="#" i18n="tabReceiver" class="tabicon ic_rx"></a></li>
<!-- <li class="tab_modes"><a href="#" i18n="tabModeSelection"></a></li> -->
<li class="tab_auxiliary"><a href="#" i18n="tabAuxiliary" class="tabicon ic_modes"></a></li>
<li class="tab_adjustments"><a href="#" i18n="tabAdjustments" class="tabicon ic_adjust"></a></li>
<li class="tab_servos"><a href="#" i18n="tabServos" class="tabicon ic_servo"></a></li>
<li class="tab_gps"><a href="#" i18n="tabGPS" class="tabicon ic_gps"></a></li>
<li class="tab_motors"><a href="#" i18n="tabMotorTesting" class="tabicon ic_motor"></a></li>
<li class="tab_led_strip"><a href="#" i18n="tabLedStrip" class="tabicon ic_led"></a></li>
<li class="tab_sensors"><a href="#" i18n="tabRawSensorData" class="tabicon ic_sensors"></a></li>
<li class="tab_logging"><a href="#" i18n="tabLogging" class="tabicon ic_log"></a></li>
<li class="tab_dataflash"><a href="#" i18n="tabDataflash" class="tabicon ic_data"></a></li>
<li class="tab_cli"><a href="#" i18n="tabCLI" class="tabicon ic_cli"></a></li>
<li class="" style="display:none;"><a href="#"class="tabicon ic_backup">Backup (spare)</a></li>
<li class="" style="display:none;"><a href="#"class="tabicon ic_mission">Mission (spare)</a></li>
<li class="" style="display:none;"><a href="#"class="tabicon ic_advanced">Advanced (spare)</a></li>
<li class="" style="display:none;"><a href="#"class="tabicon ic_wizzard">Wizzard (spare)</a></li>
</ul>
</div>
<div class="clear-both"></div>
</div>
<div id="content">
</div>
<div id="status-bar">
<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_i2c_error"></span> <span class="i2c-error">0</span>
</div>
<div>
<span i18n="statusbar_cycle_time"></span> <span class="cycle-time">0</span>
</div>
<div class="version">
<!-- configuration version generated here -->
</div>
</div>
<div id="cache">
<div class="data-loading">
<p>Waiting for data ...</p>
</div>
</div>
</div>
</body>
</body>
</html>

20
main.js
View file

@ -18,6 +18,7 @@ $(document).ready(function () {
'Configurator: <strong>' + chrome.runtime.getManifest().version + '</strong>');
$('#status-bar .version').text(chrome.runtime.getManifest().version);
$('#logo .version').text(chrome.runtime.getManifest().version);
// notification messages for various operating systems
switch (GUI.operating_system) {
@ -211,7 +212,7 @@ $(document).ready(function () {
googleAnalyticsConfig.setTrackingPermitted(check);
});
// CSS TEST
// CSS switch TEST
var css = $("#default");
$("div#options-window #remove").click(function(){
css.remove();
@ -220,7 +221,9 @@ $("div#options-window #remove").click(function(){
$("div#options-window #restore").click(function(){
$("head").append(css);
});
// CSS TEST END
// CSS switch TEST END
function close_and_cleanup(e) {
@ -400,4 +403,15 @@ $("#showlog").on('click', function() {
});
// loading tooltip
$(document).ready(function() {
$('.cf_tip').jBox('Tooltip', {
delayOpen: 100,
delayClose: 100,
position: {
x: 'right',
y: 'center'
},
outside: 'x'
});
});

122
tabs/adjustments Kopie.css
View file

@ -1,122 +0,0 @@
.tab-adjustments {
}
#tab-adjustments-templates {
display: none;
}
.tab-adjustments .help {
padding: 10px;
background-color: #ffcb18;
margin-bottom: 10px;
}
.tab-adjustments .help p {
padding-bottom: 5px;
}
.tab-adjustments .help li {
list-style-type: decimal;
margin-left: 20px;
}
.tab-adjustments .adjustments {
width: 100%;
border-spacing: 0px;
}
.tab-adjustments .adjustments thead td {
text-align: center;
white-space: nowrap;
padding: 10px 10px;
background-color: #61B665;
}
.tab-adjustments .adjustment {
background-color: #ececec;
}
.tab-adjustments .adjustment:nth-child(odd) {
background-color: #ffffff;
}
.tab-adjustments .adjustment select {
outline: 1px solid silver;
}
.tab-adjustments .adjustment td {
text-align: center;
}
.tab-adjustments .adjustment .info {
width: 5%;
height: 80px;
}
.tab-adjustments .adjustment .info .enabling {
white-space: nowrap;
}
.tab-adjustments .adjustment .channelInfo {
width: 5%;
padding: 0px 10px;
}
.tab-adjustments .adjustment .channelInfo .limits {
padding: 10px 0px;
}
.tab-adjustments .adjustment .range {
width: 65%;
padding: 0px 20px;
}
.tab-adjustments .adjustment .range .channel-slider {
margin-top: -28px;
}
.tab-adjustments .adjustment .range .marker {
position: absolute;
left: 50%;
top: 27px;
height: 13px;
width: 6px;
margin-left: -3px;
background: #ffcb18;
}
.tab-adjustments .adjustment .functionSelection {
width: 5%;
}
.tab-adjustments .adjustment .adjustmentSlot {
width: 5%;
}
.tab-adjustments .adjustment .functionSwitchChannel {
width: 5%;
}
.tab-adjustments > .buttons {
margin-top: 10px;
}
.tab-adjustments > .buttons a {
float: right;
height: 28px;
line-height: 28px;
padding: 0 15px 0 15px;
display: block;
}
.tab-adjustments .buttons a {
text-align: center;
font-weight: bold;
border: 1px solid silver;
background-color: #ececec;
}
.tab-adjustments .buttons a:hover {
background-color: #dedcdc;
}

2
tabs/auxiliary.css
View file

@ -92,7 +92,7 @@
.tab-auxiliary .ranges {
margin: 10px;
padding-right: 2px;
padding-right: 0px;
border-bottom: 5px solid white;
}

10
tabs/cli old.html
View file

@ -1,10 +0,0 @@
<div class="tab-cli">
<p i18n="cliInfo">
</p>
<div class="backdrop">
<div class="window">
<div class="wrapper"></div>
</div>
</div>
<textarea name="commands" i18n_placeholder="cliInputPlaceholder" rows="1" cols="0"></textarea>
</div>

260
tabs/configuration.css
View file

@ -1,42 +1,33 @@
.tab-configuration table {
margin-bottom: 10px;
width:100%;
float:left;
width:100%;
float:left;
}
.tab-configuration table,
.tab-configuration table th,
.tab-configuration table td {
padding: 0px;
padding-left:0px;
text-align:left;
}
}
.tab-configuration table th {
padding-left:3px;
padding: 3px;
border-bottom: 1px solid #ddd;
padding: 3px;
border-bottom: 1px solid #ddd;
}
.tab-configuration table td {
padding-left:5px;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.tab-configuration table tr td:first-child {
text-align: left;
width:55px;
}
.tab-configuration table td {
padding: 5px 3px;
}
@ -48,18 +39,19 @@
.tab-configuration {
position: relative;
}
.tab-configuration .groupTitle {
padding: 0 0 5px 0;
margin: 0 0 10px 0;
font-size: 16px;
border-bottom: 1px solid #dddddd;
}
.tab-configuration .leftWrapper {
float: left;
width: calc(50% - 20px);
}
}
.tab-configuration .rightWrapper {
float: left;
width: calc(50% - 0px);
@ -73,26 +65,28 @@
font-weight: bold;
border: 1px solid silver;
}
.tab-configuration dl.features dt {
float: left;
width: 10px;
height: 18px;
line-height: 18px;
}
.tab-configuration dl.features dt input {
margin-top: 2px;
}
.tab-configuration dl.features dd {
margin: 0 0 0 20px;
height: 18px;
line-height: 18px;
}
.tab-configuration .number {
margin-bottom: 5px;
clear: left;
}
.tab-configuration .number input {
width: 50px;
padding-left: 3px;
@ -115,9 +109,11 @@
.tab-configuration .number span {
margin-left: 0px;
}
.tab-configuration .gps .line {
clear: left;
}
.tab-configuration .gps select {
float: left;
@ -131,12 +127,14 @@
.tab-configuration .gps span {
line-height: 20px;
}
.tab-configuration .serialRX {
width: 100%;
border: 1px solid silver;
margin-bottom: 5px;
}
.tab-configuration .current .checkbox {
margin-top: 0px;
float:left;
@ -146,6 +144,7 @@
float: left;
width: 66px;
}
.tab-configuration .current .checkbox div input {
margin: 0px;
float:left;
@ -157,98 +156,93 @@
margin-top: 2px;
margin-right:5px;
}
.tab-configuration .disarm .checkbox div {
margin-bottom: 0px;
margin-top: 0px;
}
.tab-configuration .disarm .checkbox div input {
margin:0px;
float: left;
}
.tab-configuration .disarm .checkbox span {
margin-left: 0px;
}
.tab-configuration .save {
display: block;
float: right;
height: 28px;
line-height: 28px;
padding: 0 15px 0 15px;
text-align: center;
font-weight: bold;
border: 1px solid silver;
background-color: #ececec;
}
.tab-configuration .save:hover {
background-color: #dedcdc;
}
.tab-configuration .freelabel {
margin-left:10px;
position:relative;
margin-left:10px;
position:relative;
}
.tab-configuration input {
float:left;
float:left;
}
.tab-configuration span {
margin:0px
margin:0px
}
.tab-configuration .disarm .checkbox {
float:left;
padding-left:0px;
margin-top: -5px;
padding-bottom:5px;
border-bottom: 1px solid #ddd;
width:100%;
float:left;
padding-left:0px;
margin-top: -5px;
padding-bottom:5px;
border-bottom: 1px solid #ddd;
width:100%;
}
.tab-configuration .spacer_box {
padding-bottom 10px;
float: left;
width: calc(100% - 20px);
padding-bottom 10px;
float: left;
width: calc(100% - 20px);
}
.tab-configuration .number {
padding-bottom:5px;
border-bottom: 1px solid #ddd;
width:100%;
float: left;
padding-bottom:5px;
border-bottom: 1px solid #ddd;
width:100%;
float: left;
}
.tab-configuration .disarm {
margin-bottom:5px;
float:left;
border-bottom: 1px solid #ddd;
width:100%;
margin-bottom:5px;
float:left;
border-bottom: 1px solid #ddd;
width:100%;
}
.disarmdelay { margin-top: 5px; float:left; width:100%; border-bottom: 1px solid #ddd;
.disarmdelay {
margin-top: 5px;
float:left;
width:100%;
border-bottom: 1px solid #ddd;
}
.tab-configuration .number:last-child {
border-bottom:none;
padding-bottom:0px;
border-bottom:none;
padding-bottom:0px;
margin-bottom:0px;
}
.tab-configuration .gui_box_titlebar {
@ -256,9 +250,9 @@ padding-bottom:0px;
}
.tab-configuration .numberspacer {
float:left;
width:65px;
height:21px;
float:left;
width:65px;
height:21px;
}
.tab-configuration thead {
@ -267,83 +261,68 @@ height:21px;
.tab-configuration .gui_box {
margin-bottom:10px;
float:left;
}
.tab-configuration .rssi td {
border-bottom:none;
padding-bottom:0px;
margin-bottom:0px;
float:left;
}
.tab-configuration .acc .gui_box {
.tab-configuration .rssi td {
border-bottom:none;
padding-bottom:0px;
margin-bottom:0px;
}
.tab-configuration .rssi .gui_box,
.tab-configuration .system .gui_box {
min-height:145px;
float:left;
}
.tab-configuration .mixer .gui_box,
.tab-configuration .motorstop .gui_box {
min-height:290px;
float:left;
}
.tab-configuration .board .gui_box,
.tab-configuration .acc .gui_box {
min-height:137px;
float:left;
}
.tab-configuration .rssi .gui_box {
min-height:140px;
float:left;
float:left;
}
.tab-configuration .mixer .gui_box, .tab-configuration .motorstop .gui_box {
min-height:287px;
float:left;
}
.tab-configuration .mixer .gui_box {
}
.tab-configuration .gps .gui_box,
.tab-configuration .other .gui_box {
min-height:355px;
float:left;
}
.tab-configuration .current .gui_box {
min-height:227px;
min-height:230px;
float:left;
}
}
.tab-configuration .current td:nth-child(2){
.tab-configuration .current td:nth-child(2){
width:30px;
}
}
.tab-configuration .voltage td:nth-child(2){
.tab-configuration .voltage td:nth-child(2){
width:30px;
}
}
.tab-configuration .rssi td:nth-child(2){
.tab-configuration .rssi td:nth-child(2){
width:30px;
}
}
.tab-configuration .rxFailsafe td:nth-child(2){
.tab-configuration .rxFailsafe td:nth-child(2){
width:30px;
}
}
.tab-configuration .gps td:nth-child(2){
.tab-configuration .gps td:nth-child(2){
width:38px;
}
.tab-configuration .gps .gui_box {
min-height:352px;
float:left;
}
.tab-configuration .system .gui_box {
min-height:100px;
}
}
.tab-configuration .other tr:last-child td{
border-bottom:0px;
padding-bottom:0px;
margin-bottom:0px;
}
.tab-configuration .mixerPreview {
@ -353,20 +332,18 @@ height:21px;
float:left;
border-radius:5px;
margin-top:5px;
}
}
.tab-configuration .mixerPreview img {
width: 90%;
height: 90%;
padding:5%;
}
}
.tab-configuration .rxMode tr:last-child td{
border-bottom:0px;
padding-bottom:0px;
margin-bottom:0px;
}
.tab-configuration .gui_box {
@ -380,35 +357,54 @@ height:21px;
line-height:19px;
color:#7d7d7d;
font-size:11px;
}
@media only screen and (max-width: 1055px), only screen and (max-device-width: 1055px) {
.tab-configuration .gui_box span {
line-height:17px;
}
.tab-configuration .leftWrapper {
width: calc(50% - 15px);
}
}
.tab-configuration .rightWrapper {
float: left;
width: calc(50% - 0px);
margin: 0 0 10px 15px;
}
.tab-configuration .gps .gui_box {
min-height: 329px;
}
.tab-configuration .rssi .gui_box,
.tab-configuration .system .gui_box {
min-height:145px;
float:left;
}
.tab-configuration .mixer .gui_box,
.tab-configuration .motorstop .gui_box {
min-height:290px;
float:left;
}
.tab-configuration .board .gui_box,
.tab-configuration .acc .gui_box {
min-height:137px;
float:left;
}
.tab-configuration .gps .gui_box, {
.tab-configuration .other .gui_box
min-height:355px;
float:left;
}
.tab-configuration .current .gui_box {
min-height:214px;
}
min-height:230px;
float:left;
}
}

21
tabs/configuration.html
View file

@ -12,7 +12,6 @@
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="configurationMixer"></div>
<div class="helpicon"></div>
</div>
<div class="spacer_box">
<div class="mixerPreview half">
@ -30,7 +29,6 @@
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="configurationEscFeatures"></div>
<div class="helpicon"></div>
</div>
<div class="spacer_box">
<table cellpadding="0" cellspacing="0">
@ -100,11 +98,10 @@
</div>
</div>
<div class="clear-both"></div>
<div class="leftWrapper">
<div class="leftWrapper board">
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="configurationBoardAlignment"></div>
<div class="helpicon"></div>
</div>
<div class="spacer_box">
<div class="number">
@ -132,7 +129,6 @@
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="configurationAccelTrims"></div>
<div class="helpicon"></div>
</div>
<div class="spacer_box">
<div class="number">
@ -155,7 +151,6 @@
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="configurationReceiver"></div>
<div class="helpicon"></div>
</div>
<div class="spacer_box">
<table cellpadding="0" cellspacing="0">
@ -175,7 +170,6 @@
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="configurationSerialRX"></div>
<div class="helpicon"></div>
</div>
<div class="spacer_box">
<div class="note">
@ -191,7 +185,6 @@
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="configurationFailsafe"></div>
<div class="helpicon"></div>
</div>
<div class="spacer_box">
<table cellpadding="0" cellspacing="0">
@ -219,7 +212,6 @@
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="configurationBatteryVoltage"></div>
<div class="helpicon"></div>
</div>
<div class="spacer_box">
<table cellpadding="0" cellspacing="0">
@ -263,7 +255,6 @@
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="configurationCurrent"></div>
<div class="helpicon"></div>
</div>
<div class="spacer_box">
<table cellpadding="0" cellspacing="0">
@ -306,7 +297,7 @@
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="configurationRSSI"></div>
<div class="helpicon"></div>
<div class="helpicon cf_tip" title="RSSI is a measurement of signal strength and is very handy so you know when your aircraft isw going out of range or if it is suffering RF interference."></div>
</div>
<div class="spacer_box">
<table cellpadding="0" cellspacing="0">
@ -328,7 +319,6 @@
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="configurationSystem"></div>
<div class="helpicon"></div>
</div>
<div class="spacer_box">
<div class="note">
@ -356,7 +346,6 @@
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="configurationGPS"></div>
<div class="helpicon"></div>
</div>
<div class="spacer_box">
<div class="note">
@ -367,7 +356,8 @@
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th i18n="configurationFeatureEnabled"></th>
<th i18n="configurationFeatureEnabled">
</th>
<th i18n="configurationFeatureDescription"></th>
<th i18n="configurationFeatureName"></th>
</tr>
@ -403,11 +393,10 @@
</div>
</div>
</div>
<div class="rightWrapper">
<div class="rightWrapper other">
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="configurationFeatures"></div>
<div class="helpicon"></div>
</div>
<div class="spacer_box">
<table cellpadding="0" cellspacing="0">

21
tabs/configuration.js
View file

@ -72,7 +72,8 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
documentationButton.html("Documentation for "+CONFIG.flightControllerVersion);
documentationButton.attr("href","https://github.com/cleanflight/cleanflight/tree/v{0}/docs".format(CONFIG.flightControllerVersion));
var mixer_list_e = $('select.mixerList');
var mixer_list_e = $('select.mixerList');
for (var i = 0; i < mixerList.length; i++) {
mixer_list_e.append('<option value="' + (i + 1) + '">' + mixerList[i].name + '</option>');
}
@ -97,7 +98,7 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
{bit: 4, group: 'esc', name: 'MOTOR_STOP', description: 'Don\'t spin the motors when armed'},
{bit: 5, group: 'other', name: 'SERVO_TILT', description: 'Servo gimbal'},
{bit: 6, group: 'other', name: 'SOFTSERIAL', description: 'Enable CPU based serial ports'},
{bit: 7, group: 'gps', name: 'GPS', description: 'GPS (configure port scenario first)'},
{bit: 7, group: 'gps', name: 'GPS', description: 'Configure port scenario first<div class="helpicon cf_tip" title="Remember to select port scenario first!"></div>'},
{bit: 8, group: 'rxFailsafe', name: 'FAILSAFE', description: 'Failsafe settings on RX signal loss'},
{bit: 9, group: 'other', name: 'SONAR', description: 'Sonar'},
{bit: 10, group: 'other', name: 'TELEMETRY', description: 'Telemetry output'},
@ -114,7 +115,7 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
if (semver.gte(CONFIG.apiVersion, "1.12.0")) {
features.push(
{bit: 20, group: 'other', name: 'CHANNEL_FORWARDING', description: 'Forward aux channels to remaining servo outputs'}
{bit: 20, group: 'other', name: 'CHANNEL_FORWARDING', description: 'Forward aux channels to servo outputs'}
);
}
@ -376,9 +377,21 @@ elems.forEach(function(html) {
secondaryColor: '#c4c4c4'
});
});
// load switchery END
// loading tooltip
$(document).ready(function() {
$('.cf_tip').jBox('Tooltip', {
delayOpen: 100,
delayClose: 100,
position: {
x: 'right',
y: 'center'
},
outside: 'x'
});
});
$('a.save').click(function () {

45
tabs/gps_old.css
View file

@ -1,45 +0,0 @@
.tab-gps {
}
.tab-gps .GPS_info {
float: left;
display: block;
width: 190px;
border: 1px solid silver;
}
.tab-gps .GPS_info table {
padding: 5px;
line-height: 18px;
}
.tab-gps .GPS_signal_strength {
float: left;
margin-left: 10px;
width: 200px;
border: 1px solid silver;
}
.tab-gps .GPS_signal_strength table {
padding: 5px;
line-height: 18px;
}
.tab-gps .GPS_info .head,
.tab-gps .GPS_signal_strength .head {
display: block;
text-align: center;
line-height: 20px;
font-weight: bold;
border-bottom: 1px solid silver;
background-color: #ececec;
}
.tab-gps a {
font-weight: bold;
}
.tab-gps a:hover {
text-decoration: underline;
}

125
tabs/gps_old.html
View file

@ -1,125 +0,0 @@
<div class="tab-gps">
<div class="GPS_info">
<span class="head" i18n="gpsHead"></span>
<table>
<tr>
<td style="width: 85px" i18n="gps3dFix"></td>
<td class="fix" i18n="gpsFixFalse"></td>
</tr>
<tr>
<td i18n="gpsAltitude"></td>
<td class="alt">0 m</td>
</tr>
<tr>
<td i18n="gpsLat"></td>
<td class="lat"><a href="#" target="_blank">0.0000 deg</a></td>
</tr>
<tr>
<td i18n="gpsLon"></td>
<td class="lon"><a href="#" target="_blank">0.0000 deg</a></td>
</tr>
<tr>
<td i18n="gpsSpeed"></td>
<td class="speed">0 cm/s</td>
</tr>
<tr>
<td i18n="gpsSats"></td>
<td class="sats">0</td>
</tr>
<tr>
<td i18n="gpsDistToHome"></td>
<td class="distToHome"></td>
</tr>
</table>
</div>
<div class="GPS_signal_strength">
<span class="head" i18n="gpsSignalStrHead"></span>
<table>
<tr class="titles">
<td style="width: 40px;">Sat ID</td>
<td style="width: 30px;">Qty</td>
<td i18n="gpsSignalStr">Signal Strength</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td><progress value="0" max="99"></progress></td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td><progress value="0" max="99"></progress></td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td><progress value="0" max="99"></progress></td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td><progress value="0" max="99"></progress></td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td><progress value="0" max="99"></progress></td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td><progress value="0" max="99"></progress></td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td><progress value="0" max="99"></progress></td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td><progress value="0" max="99"></progress></td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td><progress value="0" max="99"></progress></td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td><progress value="0" max="99"></progress></td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td><progress value="0" max="99"></progress></td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td><progress value="0" max="99"></progress></td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td><progress value="0" max="99"></progress></td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td><progress value="0" max="99"></progress></td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td><progress value="0" max="99"></progress></td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td><progress value="0" max="99"></progress></td>
</tr>
</table>
</div>
</div>

80
tabs/gps_old.js
View file

@ -1,80 +0,0 @@
'use strict';
TABS.gps = {};
TABS.gps.initialize = function (callback) {
var self = this;
if (GUI.active_tab != 'gps') {
GUI.active_tab = 'gps';
googleAnalytics.sendAppView('GPS');
}
function load_html() {
$('#content').load("./tabs/gps.html", process_html);
}
MSP.send_message(MSP_codes.MSP_STATUS, false, false, load_html);
function process_html() {
// translate to user-selected language
localize();
function get_raw_gps_data() {
MSP.send_message(MSP_codes.MSP_RAW_GPS, false, false, get_comp_gps_data);
}
function get_comp_gps_data() {
MSP.send_message(MSP_codes.MSP_COMP_GPS, false, false, get_gpsvinfo_data);
}
function get_gpsvinfo_data() {
MSP.send_message(MSP_codes.MSP_GPS_SV_INFO, false, false, update_ui);
}
function update_ui() {
var lat = GPS_DATA.lat / 10000000;
var lon = GPS_DATA.lon / 10000000;
var url = 'https://maps.google.com/?q=' + lat + ',' + lon;
$('.GPS_info td.fix').html((GPS_DATA.fix) ? chrome.i18n.getMessage('gpsFixTrue') : chrome.i18n.getMessage('gpsFixFalse'));
$('.GPS_info td.alt').text(GPS_DATA.alt + ' m');
$('.GPS_info td.lat a').prop('href', url).text(lat.toFixed(4) + ' deg');
$('.GPS_info td.lon a').prop('href', url).text(lon.toFixed(4) + ' deg');
$('.GPS_info td.speed').text(GPS_DATA.speed + ' cm/s');
$('.GPS_info td.sats').text(GPS_DATA.numSat);
$('.GPS_info td.distToHome').text(GPS_DATA.distanceToHome + ' m');
// Update GPS Signal Strengths
var e_ss_table = $('div.GPS_signal_strength table tr:not(.titles)');
for (var i = 0; i < GPS_DATA.chn.length; i++) {
var row = e_ss_table.eq(i);
$('td', row).eq(0).text(GPS_DATA.svid[i]);
$('td', row).eq(1).text(GPS_DATA.quality[i]);
$('td', row).eq(2).find('progress').val(GPS_DATA.cno[i]);
}
}
// enable data pulling
GUI.interval_add('gps_pull', function gps_update() {
// avoid usage of the GPS commands until a GPS sensor is detected for targets that are compiled without GPS support.
if (!have_sensor(CONFIG.activeSensors, 'gps')) {
return;
}
get_raw_gps_data();
}, 75, true);
// status data pulled via separate timer with static speed
GUI.interval_add('status_pull', function status_pull() {
MSP.send_message(MSP_codes.MSP_STATUS);
}, 250, true);
if (callback) callback();
}
};
TABS.gps.cleanup = function (callback) {
if (callback) callback();
};

68
tabs/help.css
View file

@ -1,64 +1,8 @@
.tab-help .left {
width: 60%;
}
.tab-help .right {
float: left;
.tab-help .twothird {
width:calc(67% - 15px);
margin-right:15px;
}
margin-left: 10px;
width: calc(40% - 10px);
}
.tab-landing .section {
margin-bottom: 10px;
}
.left .section:last-child,
.right .section:last-child {
margin-bottom: 0px;
}
.section .title {
line-height: 20px;
text-align: center;
font-weight: bold;
color: white;
border-bottom: 1px solid silver;
background-color: #3f4241;
}
.documentation {
height: 447px;
border: 1px solid silver;
}
.documentation p {
padding: 5px;
}
.documentation p a {
font-weight: bold;
}
.documentation p a:hover {
text-decoration: underline;
}
.support {
height: 447px;
border: 1px solid silver;
}
.support p {
padding: 5px;
}
.support p a {
font-weight: bold;
}
.support p a:hover {
text-decoration: underline;
}
.support .wrapper {
height: 426px;
overflow-y: scroll;
overflow-x: hidden;
.tab-help .gui_box {
min-height:500px;
}

33
tabs/help.html
View file

@ -1,17 +1,22 @@
<div class="tab-help">
<div class="left">
<div class="section documentation">
<div class="title" i18n="defaultDocumentationHead"></div>
<p i18n="defaultDocumentation"></p>
</div>
</div>
<div class="right">
<div class="section support">
<div class="title" i18n="defaultSupportHead"></div>
<div class="wrapper">
<p i18n="defaultSupport"></p>
<div class="cf_column twothird">
<div class="gui_box">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="defaultDocumentationHead"></div>
</div>
</div>
</div>
<div class="spacer">
<p i18n="defaultDocumentation"></p>
</div>
</div>
</div>
<div class="cf_column third_right">
<div class="gui_box">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="defaultSupportHead"></div>
</div>
<div class="spacer">
<p i18n="defaultSupport"></p>
</div>
</div>
</div>
</div>

44
tabs/logging.css
View file

@ -47,32 +47,30 @@
height: 20px;
line-height: 20px;
}
.tab-logging .buttons {
width: calc(100% - 20px);
position: absolute;
bottom: 10px;
.tab-logging .fixed_band {
width: 100%;
bottom: 0px;
}
.tab-logging .buttons a {
display: block;
float: right;
margin-left: 10px;
height: 28px;
line-height: 28px;
padding: 0 15px 0 15px;
text-align: center;
font-weight: bold;
border: 1px solid silver;
background-color: #ececec;
.tab-logging .save_btn a {
line-height: 28px;
}
.tab-logging .buttons a:hover {
background-color: #dedcdc;
@media only screen and (max-width: 1055px), only screen and (max-device-width: 1055px) {
.tab-logging table thead tr:first-child {
font-size: 12px;
height: 22px;
}
.tab-logging .buttons .back {
display: none;
.tab-logging .fixed_band {
width: calc(100% - -5px);
}
.tab-logging .fixed_band .save_btn a {
margin-right:15px;
}
}

13
tabs/logging.html
View file

@ -42,8 +42,11 @@
<dt i18n="loggingLogSize"></dt><dd class="size">0 Bytes</dd>
</dl>
</div>
<div class="buttons">
<a href="#" class="back" i18n="loggingBack"></a>
<a href="#" class="logging" i18n="loggingStart"></a>
<a href="#" class="log_file" i18n="loggingButtonLogFile"></a>
</div>
<div class="fixed_band" style="position:fixed;">
<div class="save_btn">
<a href="#" class="back" i18n="loggingBack"></a>
<a href="#" class="logging" i18n="loggingStart"></a>
<a href="#" class="log_file" i18n="loggingButtonLogFile"></a>
</div>
</div>
</div>

64
tabs/modes Kopie.css
View file

@ -1,64 +0,0 @@
.tab-modes .boxes {
width: 100%;
border-collapse: collapse;
}
.tab-modes .boxes th, .tab-modes .boxes td {
line-height: 22px;
text-align: center;
border: 1px solid #8b8b8b;
}
.tab-modes .boxes .heads {
background-color: #ececec;
}
.tab-modes .boxes .main {
background-color: #ececec;
}
.tab-modes .boxes .name {
text-align: center;
}
.tab-modes .boxes .on {
color: white;
background-color: #0d8b13;
}
.tab-modes .boxes .off {
color: white;
background-color: #be2222;
}
.tab-modes .boxes td input {
position: absolute;
margin-top: -6px;
margin-left: -6px;
}
.tab-modes .boxes .switches:nth-child(odd) {
background-color: #ececec;
}
.tab-modes .boxes .heads th:first-child {
border: 0;
background-color: white;
}
.tab-modes .buttons {
width: calc(100% - 20px);
position: absolute;
bottom: 10px;
}
.tab-modes .update {
display: block;
float: right;
height: 28px;
line-height: 28px;
padding: 0 15px 0 15px;
text-align: center;
font-weight: bold;
border: 1px solid silver;
background-color: #ececec;
}
.tab-modes .update:hover {
background-color: #dedcdc;
}

121
tabs/pid_tuning Kopie.css
View file

@ -1,121 +0,0 @@
.tab-pid_tuning {
}
.tab-pid_tuning input[type="number"]::-webkit-inner-spin-button {
border: 0;
}
.tab-pid_tuning table {
float: left;
margin-bottom: 10px;
border-collapse: collapse;
}
.tab-pid_tuning table,
.tab-pid_tuning table th,
.tab-pid_tuning table td {
padding: 4px;
border: 1px solid #8b8b8b;
}
.tab-pid_tuning table tr td:first-child {
text-align: center;
}
.tab-pid_tuning table td {
padding: 1px;
}
.tab-pid_tuning table tr:nth-child(odd) {
background-color: #ececec;
}
.tab-pid_tuning table input {
display: block;
width: 100%;
height: 20px;
line-height: 20px;
text-align: right;
}
.tab-pid_tuning .controller {
float: left;
width: calc(18% - 2px); /* - border*/
margin-bottom: 10px;
border: 1px solid #8b8b8b;
}
.tab-pid_tuning .controller .head {
display: block;
text-align: center;
line-height: 20px;
font-weight: bold;
border-bottom: 1px solid #8b8b8b;
background-color: #ececec;
}
.tab-pid_tuning .controller select {
width: 100%;
height: 20px;
line-height: 20px;
}
.tab-pid_tuning .profile {
float: left;
width: calc(18% - 2px); /* - border*/
border: 1px solid #8b8b8b;
}
.tab-pid_tuning .profile .head {
display: block;
text-align: center;
line-height: 20px;
font-weight: bold;
border-bottom: 1px solid #8b8b8b;
background-color: #ececec;
}
.tab-pid_tuning .profile select {
width: 100%;
padding-left: calc(100% - 35px);
height: 20px;
line-height: 20px;
}
.tab-pid_tuning .pid_tuning {
width: 60%;
}
.tab-pid_tuning .pid_tuning .name {
width: 30%;
}
.tab-pid_tuning .rate-tpa {
float: right;
width: calc(40% - 10px); /* - ( "virtual" margin) */
}
.tab-pid_tuning .buttons {
width: calc(100% - 20px);
position: absolute;
bottom: 10px;
}
.tab-pid_tuning .update,
.tab-pid_tuning .refresh {
display: block;
float: right;
height: 28px;
line-height: 28px;
padding: 0 15px 0 15px;
text-align: center;
font-weight: bold;
border: 1px solid silver;
background-color: #ececec;
}
.tab-pid_tuning .refresh {
margin-right: 10px;
}
.tab-pid_tuning .update:hover,
.tab-pid_tuning .refresh:hover {
background-color: #dedcdc;
}

117
tabs/pid_tuning Kopie.html
View file

@ -1,117 +0,0 @@
<div id="content-watermark"></div>
<div class="tab-pid_tuning">
<div class="controller">
<span class="head" i18n="pidTuningControllerHead"></span>
<select name="controller">
<option value="0">0 - MultiWii (Old)</option>
<option value="1">1 - MultiWii (rewrite)</option>
<option value="2">2 - LuxFloat</option>
<option value="3">3 - MultiWii (2.3 - latest)</option>
<option value="4">4 - MultiWii (2.3 - hybrid)</option>
<option value="5">5 - Harakiri</option>
</select>
</div>
<div class="clear-both"></div>
<form name="pid-tuning" id="pid-tuning">
<table class="pid_tuning">
<tr>
<th class="name" i18n="pidTuningName"></th>
<th class="proportional" i18n="pidTuningProportional"></th>
<th class="integral" i18n="pidTuningIntegral"></th>
<th class="derivative" i18n="pidTuningDerivative"></th>
</tr>
<tr class="ROLL"><!-- 0 -->
<td></td>
<td><input type="number" name="p" step="0.1" min="0" max="25.5"/></td>
<td><input type="number" name="i" step="0.001" min="0" max="0.255"/></td>
<td><input type="number" name="d" step="1" min="0" max="255"/></td>
</tr>
<tr class="PITCH"><!-- 1 -->
<td></td>
<td><input type="number" name="p" step="0.1" min="0" max="25.5"/></td>
<td><input type="number" name="i" step="0.001" min="0" max="0.255"/></td>
<td><input type="number" name="d" step="1" min="0" max="255"/></td>
</tr>
<tr class="YAW"><!-- 2 -->
<td></td>
<td><input type="number" name="p" step="0.1" min="0" max="25.5"/></td>
<td><input type="number" name="i" step="0.001" min="0" max="0.255"/></td>
<td><input type="number" name="d" step="1" min="0" max="255"/></td>
</tr>
<tr class="ALT"><!-- 3 -->
<td></td>
<td><input type="number" name="p" step="0.1" min="0" max="25.5"/></td>
<td><input type="number" name="i" step="0.001" min="0" max="0.255"/></td>
<td><input type="number" name="d" step="1" min="0" max="255"/></td>
</tr>
<tr class="Vario"><!-- 9 -->
<td></td>
<td><input type="number" name="p" step="0.1" min="0" max="25.5"/></td>
<td><input type="number" name="i" step="0.001" min="0" max="0.255"/></td>
<td><input type="number" name="d" step="1" min="0" max="255"/></td>
</tr>
<tr class="Pos"><!-- 4 -->
<td></td>
<td><input type="number" name="p" step="0.01" min="0" max="2.55"/></td>
<td><input type="number" name="i" step="0.01" min="0" max="2.55"/></td>
</tr>
<tr class="PosR"><!-- 5 -->
<td></td>
<td><input type="number" name="p" step="0.1" min="0" max="25.5"/></td>
<td><input type="number" name="i" step="0.01" min="0" max="2.55"/></td>
<td><input type="number" name="d" step="0.001" min="0" max="0.255"/></td>
</tr>
<tr class="NavR"><!-- 6 -->
<td></td>
<td><input type="number" name="p" step="0.1" min="0" max="25.5"/></td>
<td><input type="number" name="i" step="0.01" min="0" max="2.55"/></td>
<td><input type="number" name="d" step="0.001" min="0" max="0.255"/></td>
</tr>
<tr class="LEVEL"><!-- 7 -->
<td></td>
<td><input type="number" name="p" step="0.1" min="0" max="25.5"/></td>
<td><input type="number" name="i" step="0.001" min="0" max="0.255"/></td>
<td><input type="number" name="d" step="1" min="0" max="255"/></td>
</tr>
<tr class="MAG"><!-- 8 -->
<td></td>
<td><input type="number" name="p" step="0.1" min="0" max="25.5"/></td>
</tr>
</table>
<table class="rate-tpa">
<thead>
<tr>
<th class="roll-pitch" i18n="pidTuningRollPitchRate"></th>
<th class="roll" i18n="pidTuningRollRate"></th>
<th class="pitch" i18n="pidTuningPitchRate"></th>
<th i18n="pidTuningYawRate"></th>
<th i18n="pidTuningTPA"></th>
<th class="tpa-breakpoint" i18n="pidTuningTPABreakPoint"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="roll-pitch" ><input type="number" name="roll-pitch" step="0.01" min="0" max="1.00"/></td>
<td class="roll" ><input type="number" name="roll" step="0.01" min="0" max="1.00"/></td>
<td class="pitch" ><input type="number" name="pitch" step="0.01" min="0" max="1.00"/></td>
<td><input type="number" name="yaw" step="0.01" min="0" max="2.55"/></td>
<td><input type="number" name="tpa" step="0.01" min="0" max="1.00"/></td>
<td class="tpa-breakpoint"><input type="number" name="tpa-breakpoint" step="10" min="1000" max="2000" /></td>
</tr>
</tbody>
</table>
</form>
<div class="clear-both"></div>
<div class="profile">
<span class="head" i18n="pidTuningProfileHead"></span>
<select name="profile">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
</select>
</div>
<div class="buttons">
<a class="update" href="#" i18n="pidTuningButtonSave"></a>
<a class="refresh" href="#" i18n="pidTuningButtonRefresh"></a>
</div>
</div>

374
tabs/pid_tuning Kopie.js
View file

@ -1,374 +0,0 @@
'use strict';
TABS.pid_tuning = {
controllerChanged: true
};
TABS.pid_tuning.initialize = function (callback) {
var self = this;
if (GUI.active_tab != 'pid_tuning') {
GUI.active_tab = 'pid_tuning';
googleAnalytics.sendAppView('PID Tuning');
}
function get_pid_controller() {
if (GUI.canChangePidController) {
MSP.send_message(MSP_codes.MSP_PID_CONTROLLER, false, false, get_pid_names);
} else {
get_pid_names();
}
}
function get_pid_names() {
MSP.send_message(MSP_codes.MSP_PIDNAMES, false, false, get_pid_data);
}
function get_pid_data() {
MSP.send_message(MSP_codes.MSP_PID, false, false, get_rc_tuning_data);
}
function get_rc_tuning_data() {
MSP.send_message(MSP_codes.MSP_RC_TUNING, false, false, load_html);
}
function load_html() {
$('#content').load("./tabs/pid_tuning.html", process_html);
}
// requesting MSP_STATUS manually because it contains CONFIG.profile
MSP.send_message(MSP_codes.MSP_STATUS, false, false, get_pid_controller);
function pid_and_rc_to_form() {
// Fill in the data from PIDs array
var i = 0;
$('.pid_tuning .ROLL input').each(function () {
switch (i) {
case 0:
$(this).val(PIDs[0][i++].toFixed(1));
break;
case 1:
$(this).val(PIDs[0][i++].toFixed(3));
break;
case 2:
$(this).val(PIDs[0][i++].toFixed(0));
break;
}
});
i = 0;
$('.pid_tuning .PITCH input').each(function () {
switch (i) {
case 0:
$(this).val(PIDs[1][i++].toFixed(1));
break;
case 1:
$(this).val(PIDs[1][i++].toFixed(3));
break;
case 2:
$(this).val(PIDs[1][i++].toFixed(0));
break;
}
});
i = 0;
$('.pid_tuning .YAW input').each(function () {
switch (i) {
case 0:
$(this).val(PIDs[2][i++].toFixed(1));
break;
case 1:
$(this).val(PIDs[2][i++].toFixed(3));
break;
case 2:
$(this).val(PIDs[2][i++].toFixed(0));
break;
}
});
i = 0;
$('.pid_tuning .ALT input').each(function () {
switch (i) {
case 0:
$(this).val(PIDs[3][i++].toFixed(1));
break;
case 1:
$(this).val(PIDs[3][i++].toFixed(3));
break;
case 2:
$(this).val(PIDs[3][i++].toFixed(0));
break;
}
});
i = 0;
$('.pid_tuning .Pos input').each(function () {
$(this).val(PIDs[4][i++].toFixed(2));
});
i = 0;
$('.pid_tuning .PosR input').each(function () {
switch (i) {
case 0:
$(this).val(PIDs[5][i++].toFixed(1));
break;
case 1:
$(this).val(PIDs[5][i++].toFixed(2));
break;
case 2:
$(this).val(PIDs[5][i++].toFixed(3));
break;
}
});
i = 0;
$('.pid_tuning .NavR input').each(function () {
switch (i) {
case 0:
$(this).val(PIDs[6][i++].toFixed(1));
break;
case 1:
$(this).val(PIDs[6][i++].toFixed(2));
break;
case 2:
$(this).val(PIDs[6][i++].toFixed(3));
break;
}
});
i = 0;
$('.pid_tuning .LEVEL input').each(function () {
switch (i) {
case 0:
$(this).val(PIDs[7][i++].toFixed(1));
break;
case 1:
$(this).val(PIDs[7][i++].toFixed(3));
break;
case 2:
$(this).val(PIDs[7][i++].toFixed(0));
break;
}
});
i = 0;
$('.pid_tuning .MAG input').each(function () {
$(this).val(PIDs[8][i++].toFixed(1));
});
i = 0;
$('.pid_tuning .Vario input').each(function () {
switch (i) {
case 0:
$(this).val(PIDs[9][i++].toFixed(1));
break;
case 1:
$(this).val(PIDs[9][i++].toFixed(3));
break;
case 2:
$(this).val(PIDs[9][i++].toFixed(0));
break;
}
});
// Fill in data from RC_tuning object
$('.rate-tpa input[name="roll-pitch"]').val(RC_tuning.roll_pitch_rate.toFixed(2));
$('.rate-tpa input[name="roll"]').val(RC_tuning.roll_rate.toFixed(2));
$('.rate-tpa input[name="pitch"]').val(RC_tuning.pitch_rate.toFixed(2));
$('.rate-tpa input[name="yaw"]').val(RC_tuning.yaw_rate.toFixed(2));
$('.rate-tpa input[name="tpa"]').val(RC_tuning.dynamic_THR_PID.toFixed(2));
$('.rate-tpa input[name="tpa-breakpoint"]').val(RC_tuning.dynamic_THR_breakpoint);
}
function form_to_pid_and_rc() {
// Catch all the changes and stuff the inside PIDs array
var i = 0;
$('table.pid_tuning tr.ROLL input').each(function () {
PIDs[0][i++] = parseFloat($(this).val());
});
i = 0;
$('table.pid_tuning tr.PITCH input').each(function () {
PIDs[1][i++] = parseFloat($(this).val());
});
i = 0;
$('table.pid_tuning tr.YAW input').each(function () {
PIDs[2][i++] = parseFloat($(this).val());
});
i = 0;
$('table.pid_tuning tr.ALT input').each(function () {
PIDs[3][i++] = parseFloat($(this).val());
});
i = 0;
$('table.pid_tuning tr.Vario input').each(function () {
PIDs[9][i++] = parseFloat($(this).val());
});
i = 0;
$('table.pid_tuning tr.Pos input').each(function () {
PIDs[4][i++] = parseFloat($(this).val());
});
i = 0;
$('table.pid_tuning tr.PosR input').each(function () {
PIDs[5][i++] = parseFloat($(this).val());
});
i = 0;
$('table.pid_tuning tr.NavR input').each(function () {
PIDs[6][i++] = parseFloat($(this).val());
});
i = 0;
$('table.pid_tuning tr.LEVEL input').each(function () {
PIDs[7][i++] = parseFloat($(this).val());
});
i = 0;
$('table.pid_tuning tr.MAG input').each(function () {
PIDs[8][i++] = parseFloat($(this).val());
});
// catch RC_tuning changes
RC_tuning.roll_pitch_rate = parseFloat($('.rate-tpa input[name="roll-pitch"]').val());
RC_tuning.roll_rate = parseFloat($('.rate-tpa input[name="roll"]').val());
RC_tuning.pitch_rate = parseFloat($('.rate-tpa input[name="pitch"]').val());
RC_tuning.yaw_rate = parseFloat($('.rate-tpa input[name="yaw"]').val());
RC_tuning.dynamic_THR_PID = parseFloat($('.rate-tpa input[name="tpa"]').val());
RC_tuning.dynamic_THR_breakpoint = parseInt($('.rate-tpa input[name="tpa-breakpoint"]').val());
}
function process_html() {
// translate to user-selected language
localize();
// Fill in the names from PID_names array
// this needs to be reworked, but will do for now
$('.pid_tuning tr:eq(1) td:first').text(PID_names[0]);
$('.pid_tuning tr:eq(2) td:first').text(PID_names[1]);
$('.pid_tuning tr:eq(3) td:first').text(PID_names[2]);
$('.pid_tuning tr:eq(4) td:first').text(PID_names[3]);
$('.pid_tuning tr:eq(5) td:first').text(PID_names[9]);
$('.pid_tuning tr:eq(6) td:first').text(PID_names[4]);
$('.pid_tuning tr:eq(7) td:first').text(PID_names[5]);
$('.pid_tuning tr:eq(8) td:first').text(PID_names[6]);
$('.pid_tuning tr:eq(9) td:first').text(PID_names[7]);
$('.pid_tuning tr:eq(10) td:first').text(PID_names[8]);
pid_and_rc_to_form();
var pidController_e = $('select[name="controller"]');
var profile_e = $('select[name="profile"]');
var form_e = $('#pid-tuning');
if (GUI.canChangePidController) {
pidController_e.val(PID.controller);
} else {
GUI.log(chrome.i18n.getMessage('pidTuningUpgradeFirmwareToChangePidController', [CONFIG.apiVersion, CONFIGURATOR.pidControllerChangeMinApiVersion]));
pidController_e.empty();
pidController_e.append('<option value="">Unknown</option>');
pidController_e.prop('disabled', true);
}
if (semver.lt(CONFIG.apiVersion, "1.7.0")) {
$('.rate-tpa .tpa-breakpoint').hide();
$('.rate-tpa .roll').hide();
$('.rate-tpa .pitch').hide();
} else {
$('.rate-tpa .roll-pitch').hide();
}
// Fill in currently selected profile
profile_e.val(CONFIG.profile);
// UI Hooks
profile_e.change(function () {
var profile = parseInt($(this).val());
MSP.send_message(MSP_codes.MSP_SELECT_SETTING, [profile], false, function () {
GUI.log(chrome.i18n.getMessage('pidTuningLoadedProfile', [profile + 1]));
GUI.tab_switch_cleanup(function () {
TABS.pid_tuning.initialize();
});
});
});
$('a.refresh').click(function () {
GUI.tab_switch_cleanup(function () {
GUI.log(chrome.i18n.getMessage('pidTuningDataRefreshed'));
TABS.pid_tuning.initialize();
});
});
form_e.find('input').each(function (k, item) {
$(item).change(function () {
pidController_e.prop("disabled", true);
TABS.pid_tuning.controllerChanged = false;
})
});
pidController_e.change(function () {
if (PID.controller != pidController_e.val()) {
form_e.find('input').each(function (k, item) {
$(item).prop('disabled', true);
TABS.pid_tuning.controllerChanged = true;
});
}
});
// update == save.
$('a.update').click(function () {
form_to_pid_and_rc();
function send_pids() {
if (!TABS.pid_tuning.controllerChanged) {
MSP.send_message(MSP_codes.MSP_SET_PID, MSP.crunch(MSP_codes.MSP_SET_PID), false, send_rc_tuning_changes);
}
}
function send_rc_tuning_changes() {
MSP.send_message(MSP_codes.MSP_SET_RC_TUNING, MSP.crunch(MSP_codes.MSP_SET_RC_TUNING), false, save_to_eeprom);
}
function save_to_eeprom() {
MSP.send_message(MSP_codes.MSP_EEPROM_WRITE, false, false, function () {
GUI.log(chrome.i18n.getMessage('pidTuningEepromSaved'));
});
}
if (GUI.canChangePidController && TABS.pid_tuning.controllerChanged) {
PID.controller = pidController_e.val();
MSP.send_message(MSP_codes.MSP_SET_PID_CONTROLLER, MSP.crunch(MSP_codes.MSP_SET_PID_CONTROLLER), false, function () {
MSP.send_message(MSP_codes.MSP_EEPROM_WRITE, false, false, function () {
GUI.log(chrome.i18n.getMessage('pidTuningEepromSaved'));
});
TABS.pid_tuning.initialize();
});
} else {
send_pids();
}
});
// status data pulled via separate timer with static speed
GUI.interval_add('status_pull', function status_pull() {
MSP.send_message(MSP_codes.MSP_STATUS);
}, 250, true);
if (callback) {
callback();
}
}
};
TABS.pid_tuning.cleanup = function (callback) {
if (callback) {
callback();
}
};

54
tabs/pid_tuning.css
View file

@ -87,7 +87,7 @@
.tab-pid_tuning table input {
display: block;
width: calc(100% - 2px);
width: calc(100% - 0px);
height: 20px;
line-height: 20px;
text-align: right;
@ -185,7 +185,7 @@
.pid_mode {
width: calc(100% - 5px);
height: 20px;
background-color: #ECECEC;
background-color: #D6D6D6;
float: left;
margin: 0px;
padding: 0px;
@ -195,8 +195,31 @@
padding-top: 6px;
font-size: 12px;
border-bottom: 1px solid #ccc;
color: #595D5B;
font-family: 'open_sanslight', Arial;
color: #828282;
font-family: 'open_sans', Arial;
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 10%,
transparent 10%,
transparent 20%,
rgba(255, 255, 255, .2) 20%,
rgba(255, 255, 255, .2) 30%,
transparent 30%,
transparent 40%,
rgba(255, 255, 255, .2) 40%,
rgba(255, 255, 255, .2) 50%,
transparent 50%,
transparent 60%,
rgba(255, 255, 255, .2) 60%,
rgba(255, 255, 255, .2) 70%,
transparent 70%,
transparent 80%,
rgba(255, 255, 255, .2) 80%,
rgba(255, 255, 255, .2) 90%,
transparent 90%,
transparent 100%,
rgba(255, 255, 255, .2) 100%,
transparent );
}
@ -207,7 +230,7 @@
border-top-left-radius:3px;
border-top-right-radius:3px;
height:20px;
}
}
.pid_titlebar td:first-child {
text-align:left;
@ -219,6 +242,27 @@
}
.tab-pid_tuning .helpicon {
margin-top:0px;
}
#content-watermark {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
z-index: -1;
overflow: hidden;
background-image: url("../images/light-wide-2.svg");
background-repeat: no-repeat;
background-position: 95% 20%;
background-size: 430px;
height: 174px;
opacity: 0.25;
}
@media only screen and (max-width: 1055px), only screen and (max-device-width: 1055px) {

3
tabs/pid_tuning.html
View file

@ -1,3 +1,4 @@
<div id="content-watermark"></div>
<div class="tab-pid_tuning">
<div class="tab_title" i18n="tabPidTuning"></div>
<div class="cf_doc_version_bt">
@ -70,7 +71,7 @@
<table id="pid_accel" class="pid_tuning">
<tr>
<th colspan="4">
<div class="pid_mode">Accelerometer/Level</div>
<div class="pid_mode">Accelerometer/Level<div class="helpicon cf_tip" title="The values below change the behaviour of the ANGLE and HORIZON flight modes. Different PID controllers handle the LEVEL values differently. Please check the documentation."></div></div>
</th>
</tr>
<tr class="LEVEL">

13
tabs/pid_tuning.js
View file

@ -269,6 +269,19 @@ TABS.pid_tuning.initialize = function (callback) {
documentationButton.html("Documentation for "+CONFIG.flightControllerVersion);
documentationButton.attr("href","https://github.com/cleanflight/cleanflight/tree/v{0}/docs".format(CONFIG.flightControllerVersion));
// loading tooltip
$(document).ready(function() {
$('.cf_tip').jBox('Tooltip', {
delayOpen: 100,
delayClose: 100,
position: {
x: 'right',
y: 'center'
},
outside: 'x'
});
});
hideUnusedPids(CONFIG.activeSensors);

1
tabs/ports.css
View file

@ -108,7 +108,6 @@
}
.tab-ports .ports td:first-child {
font-weight:bold;
}
.tab-ports .fixed_band .save_btn a {

356
tabs/receiver Kopie.css Normal file
View file

@ -0,0 +1,356 @@
.tab-receiver {
}
.tab-receiver input[type="number"]::-webkit-inner-spin-button {
border: 0;
}
.tab-receiver .help {
padding: 10px;
background-color: #ffcb18;
margin-bottom: 10px;
}
.tab-receiver .bars {
float: left;
width: 45%;
font-weight: bold;
}
.tab-receiver .bars ul {
margin-bottom: 5px;
clear: left;
}
.tab-receiver .bars li {
float: left;
height: 22px;
line-height: 20px;
white-space: nowrap;
}
.tab-receiver .bars .name {
padding: 0 10px 0 0;
width: 50px;
text-align: right;
}
.tab-receiver .bars .meter {
width: calc(100% - 60px);
}
.tab-receiver .bars .meter-bar {
position: relative;
margin-top: 2px;
width: 100%;
height: 15px;
border: 1px solid silver;
background-color: #f4f4f4;
}
.tab-receiver .bars .meter-bar .label {
position: absolute;
width: 50px;
height: 15px;
line-height: 15px;
text-align: center;
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;
}
.tab-receiver .bars ul:nth-of-type(1) .fill {
background-color: #f1453d;
}
.tab-receiver .bars ul:nth-of-type(2) .fill {
background-color: #673fb4;
}
.tab-receiver .bars ul:nth-of-type(3) .fill {
background-color: #2b98f0;
}
.tab-receiver .bars ul:nth-of-type(4) .fill {
background-color: #1fbcd2;
}
.tab-receiver .bars ul:nth-of-type(5) .fill {
background-color: #159588;
}
.tab-receiver .bars ul:nth-of-type(6) .fill {
background-color: #50ae55;
}
.tab-receiver .bars ul:nth-of-type(7) .fill {
background-color: #cdda49;
}
.tab-receiver .bars ul:nth-of-type(8) .fill {
background-color: #fdc02f;
}
.tab-receiver .bars ul:nth-of-type(9) .fill {
background-color: #fc5830;
}
.tab-receiver .bars ul:nth-of-type(10) .fill {
background-color: #785549;
}
.tab-receiver .bars ul:nth-of-type(11) .fill {
background-color: #9e9e9e;
}
.tab-receiver .bars ul:nth-of-type(12) .fill {
background-color: #617d8a;
}
.tab-receiver .bars ul:nth-of-type(13) .fill {
background-color: #cf267d;
}
.tab-receiver .bars ul:nth-of-type(14) .fill {
background-color: #7a1464;
}
.tab-receiver .bars ul:nth-of-type(15) .fill {
background-color: #3a7a14;
}
.tab-receiver .bars ul:nth-of-type(16) .fill {
background-color: #14407a;
}
.tab-receiver .tunings {
float: right;
}
.tab-receiver .tunings table {
border-collapse: collapse;
}
.tab-receiver .tunings .throttle {
margin-bottom: 10px;
}
.tab-receiver .tunings .rate {
margin-bottom: 10px;
}
.tab-receiver .tunings .yaw_rate {
margin-left: 127px;
margin-bottom: 10px;
}
.tab-receiver .tunings table, .tab-receiver .tunings table th, .tab-receiver .tunings table td {
padding: 4px;
border: 1px solid #8b8b8b;
}
.tab-receiver .tunings table th {
width: 118px;
}
.tab-receiver .tunings table td {
padding: 1px;
}
.tab-receiver .tunings table tr:nth-child(odd) {
background-color: #ececec;
}
.tab-receiver .tunings table input {
width: 100%;
height: 20px;
line-height: 20px;
text-align: right;
}
.tab-receiver .rssi_channel_wrapper {
float: right;
margin: 10px 0 0 0;
width: 126px;
border: 1px solid #8b8b8b;
border-left: 0;
}
.tab-receiver .rssi_channel_wrapper .head {
height: 15px;
padding: 4px;
text-align: center;
font-weight: bold;
border-bottom: 1px solid #8b8b8b;
background-color: #ececec;
}
.tab-receiver .rssi_channel_wrapper select {
width: 100%;
height: 22px;
padding-left: 5px;
}
.tab-receiver .rcmap_wrapper {
float: right;
position: relative;
margin: 10px 0 0 0;
width: 126px;
border: 1px solid #8b8b8b;
}
.tab-receiver .rcmap_wrapper .head {
height: 15px;
padding: 4px;
text-align: center;
font-weight: bold;
border-bottom: 1px solid #8b8b8b;
background-color: #ececec;
}
.tab-receiver .rcmap_wrapper .head span {
border-bottom: 1px dashed silver;
}
.tab-receiver .hybrid_element input {
position: absolute;
padding-left: 5px;
width: calc(100% - 24px);
height: 22px;
z-index: 2;
}
.tab-receiver .hybrid_element select {
width: 100%;
height: 22px;
z-index: 1;
}
.tab-receiver .curves {
float: right;
}
.tab-receiver .throttle_curve {
margin: 0 10px 10px 0;
width: 220px;
height: 120px;
border: 1px solid silver;
}
.tab-receiver .pitch_roll_curve {
margin: 0 10px 0 0;
width: 220px;
height: 120px;
border: 1px solid silver;
}
.tab-receiver select[name="rx_refresh_rate"] {
float: right;
border: 1px solid silver;
}
.tab-receiver #RX_plot {
width: 100%;
height: 200px;
}
.tab-receiver #RX_plot .line:nth-child(1) {
stroke: #f1453d;
}
.tab-receiver #RX_plot .line:nth-child(2) {
stroke: #673fb4;
}
.tab-receiver #RX_plot .line:nth-child(3) {
stroke: #2b98f0;
}
.tab-receiver #RX_plot .line:nth-child(4) {
stroke: #1fbcd2;
}
.tab-receiver #RX_plot .line:nth-child(5) {
stroke: #159588;
}
.tab-receiver #RX_plot .line:nth-child(6) {
stroke: #50ae55;
}
.tab-receiver #RX_plot .line:nth-child(7) {
stroke: #cdda49;
}
.tab-receiver #RX_plot .line:nth-child(8) {
stroke: #fdc02f;
}
.tab-receiver #RX_plot .line:nth-child(9) {
stroke: #fc5830;
}
.tab-receiver #RX_plot .line:nth-child(10) {
stroke: #785549;
}
.tab-receiver #RX_plot .line:nth-child(11) {
stroke: #9e9e9e;
}
.tab-receiver #RX_plot .line:nth-child(12) {
stroke: #7a6614;
}
.tab-receiver #RX_plot .line:nth-child(13) {
stroke: #cf267d;
}
.tab-receiver #RX_plot .line:nth-child(14) {
stroke: #7a1464;
}
.tab-receiver #RX_plot .line:nth-child(15) {
stroke: #3a7a14;
}
.tab-receiver #RX_plot .line:nth-child(16) {
stroke: #14407a;
}
.tab-receiver .buttons {
width: calc(100% - 20px);
position: absolute;
bottom: 10px;
}
.tab-receiver .sticks,
.tab-receiver .update,
.tab-receiver .refresh {
display: block;
float: right;
margin-top: 22px;
height: 28px;
line-height: 28px;
padding: 0 15px 0 15px;
text-align: center;
font-weight: bold;
border: 1px solid silver;
background-color: #ececec;
}
.tab-receiver .sticks,
.tab-receiver .refresh {
margin-right: 10px;
}
.tab-receiver .update:hover,
.tab-receiver .refresh:hover {
background-color: #dedcdc;
}
/* SVG classes*/
.tab-receiver .grid .tick {
stroke: silver;
shape-rendering: crispEdges;
}
.tab-receiver .line {
stroke-width: 2px;
fill: none;
}
.tab-receiver .grid path {
stroke-width: 0;
}
.tab-receiver .axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}

83
tabs/sensors.css
View file

@ -2,7 +2,8 @@
}
.tab-sensors .info {
margin-bottom: 10px;
}
margin-top: 8px;
margin-left: 10px;}
.tab-sensors .info input {
vertical-align: middle;
@ -16,61 +17,87 @@
}
.tab-sensors .plot_control {
float: right;
width: 158px;
border: 1px solid silver;
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-sensors .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-sensors .plot_control dl {
padding: 5px 5px 0 5px;
padding: 10px 10px 0 10px;
line-height: 22px;
float:left;
}
.tab-sensors .plot_control dt {
float: left;
width: 60px;
height: 22px;
font-weight: bold;
}
.tab-sensors .plot_control dd {
margin-left: 20px;
height: 22px;
/* margin-left: 20px; */
height: 25px;
float: right;
width: 73px;
}
.tab-sensors .plot_control select {
float: right;
width: 80px;
border: 1px solid silver;
}
.tab-sensors .plot_control .x {
color: #00A8F0;
}
background-color: #00A8F0;
padding:3px;
color: #fff;
height: 12px;
float: right;
border-radius: 3px;
line-height: 12px;
margin-bottom: 2px;
}
.tab-sensors .plot_control .y {
color: #C0D800;
}
background-color: #C0D800;
padding:3px;
color: #fff;
height: 12px;
float: right;
border-radius: 3px;
line-height: 12px;
margin-bottom: 2px;
}
.tab-sensors .plot_control .z {
color: #CB4B4B;
}
background-color: #CB4B4B;
padding:3px;
color: #fff;
height: 12px;
float: right;
border-radius: 3px;
line-height: 12px;
margin-bottom: 2px;
}
.tab-sensors .plot_control .x, .tab-sensors .plot_control .y, .tab-sensors .plot_control .z {
text-align: right;
}
/* SVG classes*/
.tab-sensors svg {
float: left;
width: calc(100% - 168px); /* - (plot control, margin)*/
float: left;
width: calc(100% - 180px);
height: 140px;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
}
.tab-sensors .grid .tick {
stroke: silver;
@ -86,10 +113,16 @@
}
.tab-sensors .axis path, .tab-sensors .axis line {
fill: none;
stroke: #000000;
stroke: #ccc;
stroke-width: 1px;
shape-rendering: crispEdges;
}
.tab-sensors text {
stroke: none;
fill: #828885;
font-size:10px;
}
.tab-sensors .line:nth-child(1) {
stroke: #00A8F0;
}

33
tabs/sensors.html
View file

@ -9,7 +9,7 @@
</p>
</div>
</div>
<div class="gui_box">
<div class="info">
<div class="checkboxes">
<label><input type="checkbox" name="gyro_on" class="first"/>Gyroscope</label>
@ -20,11 +20,11 @@
<label><input type="checkbox" name="debug_on"/>Debug</label>
</div>
</div>
</div>
<div class="wrapper gyro">
<div class="plot_control">
<div class="gui_box grey">
<div class="plot_control">
<div class="title">Gyroscope - deg/s</div>
<dl>
<dt i18n="sensorsRefresh"></dt>
@ -63,8 +63,9 @@
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
</div>
<div class="wrapper accel">
</div></div>
<div class="wrapper accel">
<div class="gui_box grey">
<div class="plot_control">
<div class="title">Accelerometer - g</div>
<dl>
@ -104,7 +105,10 @@
</svg>
<div class="clear-both"></div>
</div>
<div class="wrapper mag">
</div>
<div class="wrapper mag">
<div class="gui_box grey">
<div class="plot_control">
<div class="title">Magnetometer - Ga</div>
<dl>
@ -143,8 +147,10 @@
</svg>
<div class="clear-both"></div>
</div>
</div>
<div class="wrapper baro">
<div class="plot_control">
<div class="gui_box grey">
<div class="plot_control">
<div class="title">Barometer - meters</div>
<dl>
<dt i18n="sensorsRefresh"></dt>
@ -164,6 +170,7 @@
<dt>X:</dt><dd class="x">0</dd>
</dl>
</div>
<svg id="baro">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
@ -172,8 +179,9 @@
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
</div>
</div></div>
<div class="wrapper sonar">
<div class="gui_box grey">
<div class="plot_control">
<div class="title">Sonar - cm</div>
<dl>
@ -202,9 +210,10 @@
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
</div>
</div></div>
<div class="wrapper debug">
<div class="plot_control">
<div class="gui_box grey">
<div class="plot_control">
<div class="title">Debug 0</div>
<dl>
<dt i18n="sensorsRefresh"></dt>
@ -273,4 +282,4 @@
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
</div>
</div></div>

2
tabs/setup.html
View file

@ -83,7 +83,6 @@
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="initialSetupGPSHead"></div>
<div class="helpicon"></div>
</div>
<div class="spacer_box">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table">
@ -113,7 +112,6 @@
<div class="gui_box grey" align="center">
<div class="gui_box_titlebar" align="left">
<div class="spacer_box_title" i18n="initialSetupInstrumentsHead"></div>
<div class="helpicon"></div>
</div>
<span id="attitude"></span>
<span id="heading"></span>

40
testing.html
View file

@ -8,12 +8,15 @@
<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-2.1.3.min.js"></script>
<script type="text/javascript" src="./js/libraries/jquery-ui-1.11.2.min.js"></script>
<script type="text/javascript" src="./js/libraries/switchery/dist/switchery.js"></script>
<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 {
@ -75,10 +78,12 @@ d<br>
<br>
<br>
<br>
d<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>
@ -134,28 +139,23 @@ window.onscroll = function(){
relative_sticky("fixed_band", 200);
}
</script>
<!--
<script>
$(document).ready(function () {
// loading tooltips
jQuery(function($) {
function fixDiv() {
var $cache = $('.fixed_band');
$cache.css({
'position': 'fixed',
'bottom': '20px'
});
}
$(window).scroll(fixDiv);
fixDiv();
$('.cf_tip').jBox('Tooltip', {
delayOpen: 100,
delayClose: 100,
position: {
x: 'right',
y: 'center'
},
outside: 'x'
});
});
</script>
end -->
</body>
</html>