fly/fgdata
1
0
Fork 0
Code Activity

Phi: better layout for holding pattern simulator

Browse source
This commit is contained in:
Torsten Dreyer 2015-02-26 14:21:59 +01:00
parent 076e437e58
commit 12eb1c1e5f
1 changed files with 36 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
webgui/topics/Tools/Holding.html
View file

@ -37,33 +37,55 @@
stroke-linejoin: miter; stroke-linejoin: miter;
stroke-dasharray: 2, 3; stroke-dasharray: 2, 3;
} }
.holding-deginput {
width: 2em;
}
</style> </style>
<fieldset> <fieldset>
<legend>Holding Pattern</legend> <legend>Holding Pattern</legend>
<table> <table style="display: inline; float: left;">
<tbody> <tbody>
<tr> <tr>
<td>Inbound Track</td> <td>Inbound Track</td>
<td><input data-bind="spinner: { value: inboundTrack, spin: inboundTrackSpin }"></td> <td><input maxlength="3" class="holding-deginput"
<td rowspan="3"> data-bind="spinner: { value: inboundTrack, spin: inboundTrackSpin }"></td>
<div style="width: 300px; height: 300px; padding-left: 5em;"> </tr>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" <tr>
preserveAspectRatio="xMinYMin meet"> <td>Heading</td>
<td><input maxlength="3" class="holding-deginput"
data-bind="spinner: { value: heading, spin: headingSpin }"></td>
</tr>
<tr>
<td colspan="2"><input id="holding-type-nonstandard" type="radio" name="holdingtype"
data-bind="button: {}, event: { change: setNonStandard }"> <label for="holding-type-nonstandard">Non-Std<br />
(Left)</label> <input id="holding-type-standard" type="radio" name="holdingtype" checked="checked"
data-bind="button: {}, event: { change: setStandard }"> <label for="holding-type-standard">Standard<br />
(Right)</label></td>
</tr>
</tbody>
</table>
<div style="display: inline; float: left; width: 300px; height: 300px;">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"
preserveAspectRatio="xMinYMin meet">
<g data-bind="attr: { transform: holdingTransform }"> <g data-bind="attr: { transform: holdingTransform }">
<path d="M50,50 l37.58770483143634,13.680805733026748 A40,40, 0 0,1 12.41229516856366,36.31919426697327 z" <path d="M50,50 l37.58770483143634,13.680805733026748 A40,40, 0 0,1 12.41229516856366,36.31919426697327 z"
class="holding-pattern-direct" /> class="holding-pattern-direct" />
<path d="M50,50 l-37.587704831436334,-13.680805733026759 A40,40, 0 0,1 49.99999999999999,10 z" <path d="M50,50 l-37.587704831436334,-13.680805733026759 A40,40, 0 0,1 49.99999999999999,10 z"
class="holding-pattern-teardrop" /> class="holding-pattern-teardrop" />
<path d="M50,50 l-9.797174393178826e-15,-40 A40,40, 0 0,1 87.58770483143635,63.68080573302672 z" <path d="M50,50 l-9.797174393178826e-15,-40 A40,40, 0 0,1 87.58770483143635,63.68080573302672 z"
class="holding-pattern-parallel" /> class="holding-pattern-parallel" />
<path d="M 50 50 a 7.5 7.5 0 0 1 15 0 v30 a 7.5 7.5 0 0 1 -15 0 z M50 55 l 2 5 h -4 z M65 75 l -2 -5 h4 z" class="holding-pattern-racetrack" /> <path d="M 50 50 a 7.5 7.5 0 0 1 15 0 v30 a 7.5 7.5 0 0 1 -15 0 z M50 55 l 2 5 h -4 z M65 75 l -2 -5 h4 z"
class="holding-pattern-racetrack" />
</g> </g>
<g data-bind="attr: { transform: holdingTransform }, visible: nonStandard"> <g data-bind="attr: { transform: holdingTransform }, visible: nonStandard">
<path d="M50,50 l37.58770483143634,-13.680805733026748 A40,40, 0 0,1 12.41229516856366,63.6808057331 z" <path d="M50,50 l37.58770483143634,-13.680805733026748 A40,40, 0 0,1 12.41229516856366,63.6808057331 z"
class="holding-pattern-direct" /> class="holding-pattern-direct" />
<path d="M50,50 l0,-40 A40,40, 0 0,1 87.58770483143635,36.31919426697327 z" class="holding-pattern-teardrop" /> <path d="M50,50 l0,-40 A40,40, 0 0,1 87.58770483143635,36.31919426697327 z" class="holding-pattern-teardrop" />
<path d="M50,50 l-37.587704831436334,13.680805733026759 A40,40, 0 0,1 50,10 z" class="holding-pattern-parallel" /> <path d="M50,50 l-37.587704831436334,13.680805733026759 A40,40, 0 0,1 50,10 z" class="holding-pattern-parallel" />
<path d="M 50 50 a 7.5 7.5 0 0 0 -15 0 v 30 a 7.5 7.5 0 0 0 15 0 z M50 55 l 2 5 h -4 z M35 75 l -2 -5 h4 z" class="holding-pattern-racetrack" /> <path d="M 50 50 a 7.5 7.5 0 0 0 -15 0 v 30 a 7.5 7.5 0 0 0 15 0 z M50 55 l 2 5 h -4 z M35 75 l -2 -5 h4 z"
class="holding-pattern-racetrack" />
</g> </g>
<circle cx="50" cy="50" r="2.5" class="holding-patter-navaid" /> <circle cx="50" cy="50" r="2.5" class="holding-patter-navaid" />
@ -79,26 +101,10 @@
<rect x="70" y="92" rx="2" ry="2" width="30" height="8" class="holding-pattern-parallel" /> <rect x="70" y="92" rx="2" ry="2" width="30" height="8" class="holding-pattern-parallel" />
<text x="85" y="98" class="holding-pattern-legend">parallel</text> <text x="85" y="98" class="holding-pattern-legend">parallel</text>
</svg> </svg>
</div> </div>
</td>
</tr>
<tr>
<td>Heading</td>
<td><input data-bind="spinner: { value: heading, spin: headingSpin }"></td>
</tr>
<tr>
<td colspan="2"><input id="holding-type-nonstandard" type="radio" name="holdingtype"
data-bind="button: {}, event: { change: setNonStandard }"> <label for="holding-type-nonstandard">Non
Standard (Left)</label> <input id="holding-type-standard" type="radio" name="holdingtype" checked="checked"
data-bind="button: {}, event: { change: setStandard }"> <label for="holding-type-standard">Standard
(Right)</label></td>
</tr>
</tbody>
</table>
</fieldset> </fieldset>
<!-- <!--
<div data-bind="text: entry"></div> <div data-bind="text: entry"></div>
<div data-bind="text: ko.toJSON($data)"></div> <div data-bind="text: ko.toJSON($data)"></div>
--> -->