Receiver Tab rework
skaman82
parent
448c1cfeb4
commit
aee05ab86d
Binary file not shown.
|
After Width: | Height: | Size: 838 KiB |
|
|
@ -1,8 +1,16 @@
|
|||
.tab-receiver {
|
||||
}
|
||||
|
||||
.tab-receiver .spacer {
|
||||
padding-left: 10px;
|
||||
padding-right: 9px;
|
||||
width: calc(100% - 18px);
|
||||
}
|
||||
|
||||
.tab-receiver input[type="number"]::-webkit-inner-spin-button {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.tab-receiver .help {
|
||||
padding: 10px;
|
||||
background-color: #ffcb18;
|
||||
|
|
@ -11,63 +19,61 @@
|
|||
|
||||
.tab-receiver .bars {
|
||||
float: left;
|
||||
width: 45%;
|
||||
|
||||
width:calc(50% - 20px);
|
||||
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%;
|
||||
width: calc(100% - 2px);
|
||||
height: 15px;
|
||||
|
||||
border: 1px solid silver;
|
||||
background-color: #f4f4f4;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
border-radius:2px;
|
||||
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;
|
||||
|
||||
|
|
@ -118,195 +124,279 @@
|
|||
.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;
|
||||
width: 45%;
|
||||
|
||||
}
|
||||
|
||||
.tab-receiver .tunings table {
|
||||
border-collapse: collapse;
|
||||
width:calc(100% - 2px);
|
||||
}
|
||||
|
||||
.tab-receiver .tunings .throttle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tab-receiver .tunings .rate {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tab-receiver .tunings .yaw_rate {
|
||||
margin-left: 127px;
|
||||
margin-left: 0px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tab-receiver .tunings table, .tab-receiver .tunings table th, .tab-receiver .tunings table td {
|
||||
padding: 4px;
|
||||
border: 1px solid #8b8b8b;
|
||||
text-align: left;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.tab-receiver .tunings table th {
|
||||
width: 118px;
|
||||
background: #8b8b8b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.tab-receiver .tunings table th:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
|
||||
.tab-receiver .tunings table th:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
.tab-receiver .tunings table td {
|
||||
background: #DEDEDE;
|
||||
}
|
||||
|
||||
.tab-receiver .tunings table td:first-child {
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
.tab-receiver .tunings table td:last-child {
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.tab-receiver .tunings table input {
|
||||
width: calc(100% - 8px);
|
||||
border:1px solid silver;
|
||||
border-radius:3px;
|
||||
height: 20px;
|
||||
margin:3px;
|
||||
line-height: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.tab-receiver .rssi_channel_wrapper {
|
||||
float: right;
|
||||
margin: 0px 0px 10px 0;
|
||||
border-left: 0;
|
||||
width:30%;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
background-color:#DEDEDE;
|
||||
|
||||
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: left;
|
||||
padding-left: 6px;
|
||||
font-weight: bold;
|
||||
background: #8b8b8b;
|
||||
color: white;
|
||||
border-top-right-radius: 5px;
|
||||
|
||||
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;
|
||||
border: 1px solid silver;
|
||||
margin:4px;
|
||||
width: calc(100% - 8px);
|
||||
|
||||
}
|
||||
|
||||
.tab-receiver .rcmap_wrapper {
|
||||
float: right;
|
||||
position: relative;
|
||||
margin: 0px 0px 10px 0;
|
||||
width:calc(70% - 3px);
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
background-color:#DEDEDE;
|
||||
|
||||
margin: 10px 0 0 0;
|
||||
|
||||
width: 126px;
|
||||
|
||||
border: 1px solid #8b8b8b;
|
||||
}
|
||||
|
||||
.tab-receiver .rcmap_wrapper .head {
|
||||
height: 15px;
|
||||
padding: 4px;
|
||||
text-align: left;
|
||||
padding-left: 6px;
|
||||
font-weight: bold;
|
||||
background: #8b8b8b;
|
||||
color: white;
|
||||
border-top-left-radius: 5px;
|
||||
|
||||
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;
|
||||
|
||||
width: calc(100% - 36px);
|
||||
height: 20px;
|
||||
z-index: 2;
|
||||
border-radius:0px;
|
||||
border: 1px solid silver;
|
||||
margin:4px;
|
||||
|
||||
}
|
||||
|
||||
.tab-receiver .hybrid_element select {
|
||||
width: 100%;
|
||||
height: 22px;
|
||||
|
||||
z-index: 1;
|
||||
border: 1px solid silver;
|
||||
margin:4px;
|
||||
width: calc(100% - 10px);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.tab-receiver .curves {
|
||||
float: right;
|
||||
float: left;
|
||||
margin-right:10px;
|
||||
}
|
||||
|
||||
.tab-receiver .throttle_curve {
|
||||
margin: 0 10px 10px 0;
|
||||
|
||||
width: 220px;
|
||||
height: 120px;
|
||||
|
||||
margin: 0 0px 0px 0;
|
||||
width: 200px;
|
||||
height: 117px;
|
||||
border: 1px solid silver;
|
||||
border-radius: 3px;
|
||||
background-image:url(../images/paper.jpg);
|
||||
background-size:200%;
|
||||
background-position:center;
|
||||
}
|
||||
|
||||
.tab-receiver .pitch_roll_curve {
|
||||
margin: 0 10px 0 0;
|
||||
|
||||
width: 220px;
|
||||
height: 120px;
|
||||
|
||||
margin: 0 0px 0px 0;
|
||||
width: 200px;
|
||||
height: 117px;
|
||||
border: 1px solid silver;
|
||||
border-radius: 3px;
|
||||
background-image:url(../images/paper.jpg);
|
||||
background-size:200%;
|
||||
background-position:center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -314,17 +404,28 @@
|
|||
/* SVG classes*/
|
||||
.tab-receiver .grid .tick {
|
||||
stroke: silver;
|
||||
stroke-width: 1px;
|
||||
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;
|
||||
stroke: #ccc;
|
||||
stroke-width: 1px;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.tab-receiver text {
|
||||
stroke: none;
|
||||
fill: #828885;
|
||||
font-size:10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,97 +1,115 @@
|
|||
<div class="tab-receiver toolbar_fixed_bottom">
|
||||
<div class="content_wrapper">
|
||||
<div class="tab_title" i18n="tabReceiver"></div>
|
||||
<div class="cf_doc_version_bt">
|
||||
<a id="button-documentation" href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a>
|
||||
</div>
|
||||
<div class="note" style="margin-bottom:20px;">
|
||||
<div class="note_spacer">
|
||||
<p i18n="receiverHelp"></p>
|
||||
<div class="content_wrapper">
|
||||
<div class="tab_title" i18n="tabReceiver"></div>
|
||||
<div class="cf_doc_version_bt">
|
||||
<a id="button-documentation" href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bars">
|
||||
</div>
|
||||
<div class="tunings">
|
||||
<table class="throttle">
|
||||
<tr>
|
||||
<th i18n="receiverThrottleMid"></th>
|
||||
<th i18n="receiverThrottleExpo"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="number" name="mid" step="0.01" min="0" max="1" /></td>
|
||||
<td><input type="number" name="expo" step="0.01" min="0" max="1" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="rate">
|
||||
<tr>
|
||||
<th i18n="receiverRcRate"></th>
|
||||
<th i18n="receiverRcExpo"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="number" name="rate" step="0.01" min="0" max="2.5" /></td>
|
||||
<td><input type="number" name="expo" step="0.01" min="0" max="1" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="yaw_rate">
|
||||
<tr>
|
||||
<th i18n="receiverRcYawExpo"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="number" name="yaw_expo" step="0.01" min="0" max="1" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="rssi_channel_wrapper">
|
||||
<div class="note" style="margin-bottom:20px;">
|
||||
<div class="note_spacer">
|
||||
<p i18n="receiverHelp"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="rssi_channel_wrapper">
|
||||
<div class="head" i18n="receiverRssiChannel"></div>
|
||||
<select name="rssi_channel">
|
||||
<!-- list generated here -->
|
||||
<!-- list generated here -->
|
||||
</select>
|
||||
</div>
|
||||
<div class="rcmap_wrapper">
|
||||
</div>
|
||||
<div class="rcmap_wrapper">
|
||||
<div class="head">
|
||||
<span i18n="receiverChannelMap" i18n_title="receiverChannelMapTitle"></span>
|
||||
<span i18n="receiverChannelMap" i18n_title="receiverChannelMapTitle"></span>
|
||||
</div>
|
||||
<div class="hybrid_element">
|
||||
<input type="text" name="rcmap" spellcheck="false" />
|
||||
<select class="hybrid_helper" name="rcmap_helper">
|
||||
<option value="AETR1234">Default</option>
|
||||
<option value="AETR1234">Futaba / Hitec</option>
|
||||
<option value="TAER1234">JR / Spektrum / Graupner</option>
|
||||
</select>
|
||||
<input type="text" name="rcmap" spellcheck="false" />
|
||||
<select class="hybrid_helper" name="rcmap_helper">
|
||||
<option value="AETR1234">Default</option>
|
||||
<option value="AETR1234">Futaba / Hitec</option>
|
||||
<option value="TAER1234">JR / Spektrum / Graupner</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="curves">
|
||||
<div class="throttle_curve">
|
||||
<canvas width="220" height="120"></canvas>
|
||||
</div>
|
||||
<div class="pitch_roll_curve">
|
||||
<canvas width="220" height="120"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear-both"></div>
|
||||
<select name="rx_refresh_rate" i18n_title="receiverRefreshRateTitle">
|
||||
<option value="10">10 ms</option>
|
||||
<option value="20">20 ms</option>
|
||||
<option value="30">30 ms</option>
|
||||
<option value="40">40 ms</option>
|
||||
<option value="50" selected="selected">50 ms</option>
|
||||
<option value="100">100 ms</option>
|
||||
<option value="250">250 ms</option>
|
||||
<option value="500">500 ms</option>
|
||||
<option value="1000">1000 ms</option>
|
||||
</select>
|
||||
<div class="clear-both"></div>
|
||||
<svg id="RX_plot">
|
||||
<g class="grid x" transform="translate(40, 180)"></g>
|
||||
<g class="grid y" transform="translate(40, 10)"></g>
|
||||
<g class="data" transform="translate(41, 1)"></g>
|
||||
<g class="axis x" transform="translate(40, 180)"></g>
|
||||
<g class="axis y" transform="translate(40, 10)"></g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="content_toolbar">
|
||||
<div class="btn update_btn"><a class="update" href="#" i18n="receiverButtonSave"></a></div>
|
||||
<div class="btn refresh_btn"><a class="refresh" href="#" i18n="receiverButtonRefresh"></a></div>
|
||||
<div class="btn sticks_btn"><a class="sticks" href="#" i18n="receiverButtonSticks"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fc_column half" style="margin-left: 20px;">
|
||||
<div class="gui_box grey" style="float: right;">
|
||||
<div class="spacer" style="margin-top:10px; margin-bottom:10px;">
|
||||
<div class="cf_column curves" style="width:calc(55% - 10px); min-width:200px;" >
|
||||
<div class="throttle_curve">
|
||||
<canvas width="200" height="117"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fc_column half tunings">
|
||||
<table class="throttle">
|
||||
<tr>
|
||||
<th i18n="receiverThrottleMid"></th>
|
||||
<th i18n="receiverThrottleExpo"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="number" name="mid" step="0.01" min="0" max="1" /></td>
|
||||
<td><input type="number" name="expo" step="0.01" min="0" max="1" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gui_box grey" style="float: right;">
|
||||
<div class="spacer" style="margin-top:10px; margin-bottom:10px;">
|
||||
<div class="cf_column curves" style="width:calc(50% - 10px);" >
|
||||
<div class="pitch_roll_curve">
|
||||
<canvas width="200" height="117"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fc_column half tunings">
|
||||
<table class="rate">
|
||||
<tr>
|
||||
<th i18n="receiverRcRate"></th>
|
||||
<th i18n="receiverRcExpo"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="number" name="rate" step="0.01" min="0" max="2.5" /></td>
|
||||
<td><input type="number" name="expo" step="0.01" min="0" max="1" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="yaw_rate" style="margin-bottom:0px;">
|
||||
<tr>
|
||||
<th i18n="receiverRcYawExpo"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="number" name="yaw_expo" step="0.01" min="0" max="1" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear-both"></div>
|
||||
<div class="gui_box grey" style="padding-top:10px; padding-bottom:10px; margin-top:20px;">
|
||||
<div class="spacer">
|
||||
<select name="rx_refresh_rate" i18n_title="receiverRefreshRateTitle">
|
||||
<option value="10">10 ms</option>
|
||||
<option value="20">20 ms</option>
|
||||
<option value="30">30 ms</option>
|
||||
<option value="40">40 ms</option>
|
||||
<option value="50" selected="selected">50 ms</option>
|
||||
<option value="100">100 ms</option>
|
||||
<option value="250">250 ms</option>
|
||||
<option value="500">500 ms</option>
|
||||
<option value="1000">1000 ms</option>
|
||||
</select>
|
||||
<div class="clear-both"></div>
|
||||
<svg id="RX_plot">
|
||||
<g class="grid x" transform="translate(40, 180)"></g>
|
||||
<g class="grid y" transform="translate(40, 10)"></g>
|
||||
<g class="data" transform="translate(41, 1)"></g>
|
||||
<g class="axis x" transform="translate(40, 180)"></g>
|
||||
<g class="axis y" transform="translate(40, 10)"></g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_toolbar">
|
||||
<div class="btn update_btn"><a class="update" href="#" i18n="receiverButtonSave"></a></div>
|
||||
<div class="btn refresh_btn"><a class="refresh" href="#" i18n="receiverButtonRefresh"></a></div>
|
||||
<div class="btn sticks_btn"><a class="sticks" href="#" i18n="receiverButtonSticks"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
TABS.receiver = {
|
||||
rateChartHeight: 120
|
||||
rateChartHeight: 117
|
||||
};
|
||||
|
||||
TABS.receiver.initialize = function (callback) {
|
||||
|
|
@ -219,21 +219,22 @@ TABS.receiver.initialize = function (callback) {
|
|||
}
|
||||
|
||||
// math magic by englishman
|
||||
var midx = 220 * mid,
|
||||
var midx = 200 * mid,
|
||||
midxl = midx * 0.5,
|
||||
midxr = (((220 - midx) * 0.5) + midx),
|
||||
midy = rateHeight - (midx * (rateHeight / 220)),
|
||||
midxr = (((200 - midx) * 0.5) + midx),
|
||||
midy = rateHeight - (midx * (rateHeight / 200)),
|
||||
midyl = rateHeight - ((rateHeight - midy) * 0.5 *(expo + 1)),
|
||||
midyr = (midy / 2) * (expo + 1);
|
||||
|
||||
// draw
|
||||
context.clearRect(0, 0, 220, rateHeight);
|
||||
context.clearRect(0, 0, 200, rateHeight);
|
||||
context.beginPath();
|
||||
context.moveTo(0, rateHeight);
|
||||
context.quadraticCurveTo(midxl, midyl, midx, midy);
|
||||
context.moveTo(midx, midy);
|
||||
context.quadraticCurveTo(midxr, midyr, 220, 0);
|
||||
context.quadraticCurveTo(midxr, midyr, 200, 0);
|
||||
context.lineWidth = 2;
|
||||
context.strokeStyle = '#59aa29';
|
||||
context.stroke();
|
||||
}, 0);
|
||||
}).trigger('input');
|
||||
|
|
@ -261,11 +262,12 @@ TABS.receiver.initialize = function (callback) {
|
|||
var ratey = rateHeight * rate;
|
||||
|
||||
// draw
|
||||
context.clearRect(0, 0, 220, rateHeight);
|
||||
context.clearRect(0, 0, 200, rateHeight);
|
||||
context.beginPath();
|
||||
context.moveTo(0, rateHeight);
|
||||
context.quadraticCurveTo(110, rateHeight - ((ratey / 2) * (1 - expo)), 220, rateHeight - ratey);
|
||||
context.quadraticCurveTo(110, rateHeight - ((ratey / 2) * (1 - expo)), 200, rateHeight - ratey);
|
||||
context.lineWidth = 2;
|
||||
context.strokeStyle = '#59aa29';
|
||||
context.stroke();
|
||||
}, 0);
|
||||
}).trigger('input');
|
||||
|
|
|
|||
|
|
@ -1,19 +1,11 @@
|
|||
|
||||
|
||||
.tab_setup .model-and-info {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tab_setup .default_btn {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#interactive_block {
|
||||
position: absolute;
|
||||
width: calc(75% - 30px);
|
||||
|
|
@ -35,13 +27,10 @@ margin-bottom:10px;
|
|||
color: #616161;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.attitude_info dl {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
|
||||
.attitude_info dt {
|
||||
width:50%;
|
||||
float:left;
|
||||
|
|
@ -75,12 +64,16 @@ margin-bottom:10px;
|
|||
#interactive_block a.reset:hover {
|
||||
background-color: #dedcdc;
|
||||
}
|
||||
|
||||
#canvas_wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-image:url(../images/paper.jpg);
|
||||
background-size:100%;
|
||||
background-position:center;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue