@fboes/horizontal-situation-indicator
Version:
A Vanilla JavaScript web component which displays a self-contained Horizontal Situation Indicator
134 lines (124 loc) • 4.68 kB
HTML
<html>
<head>
<meta charset="UTF-8" />
<title>Horizontal Situation Indicator - Web Component Demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
body {
font-family: sans-serif;
text-align:center;
}
main {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12.5em, 1fr));
grid-gap: 1em;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding:1em;
}
section > h4 {
min-height: 2.2em;
}
label {
display: block;
margin-bottom: 0.5em;
}
input {
width: 100%;
padding: 0.2em;
}
footer {
padding: 1em;
}
</style>
<script type="module" src="horizontal-situation-indicator.js"></script>
</head>
<body>
<h1>Horizontal Situation Indicator - Web Component Demo</h1>
<main>
<section>
<h4>Simple compass without NAV1 & NAV2</h4>
<horizontal-situation-indicator id="simple-compass" heading="60.0" heading-select="30.0">
</horizontal-situation-indicator>
</section>
<section>
<h4>HSI with NAV1 tuned to NDB</h4>
<horizontal-situation-indicator id="nav1-ndb" heading="60.0"
nav1-label="ADF" nav1-bearing="90.0">
</horizontal-situation-indicator>
</section>
<section>
<h4>HSI with NAV1 tuned to VOR, NAV2 to NDB</h4>
<horizontal-situation-indicator id="nav2-vor" heading="60.0" heading-select="30.0"
nav1-label="VOR1" nav1-course="45.0" nav1-deviation="5.0" nav1-to="-1"
nav2-label="ADF" nav2-bearing="90.0">
</horizontal-situation-indicator>
</section>
<section>
<h4>HSI with NAV1 tuned to VOR with bearing</h4>
<horizontal-situation-indicator id="nav1-vor" heading="60.0" heading-select="30.0"
nav1-label="VOR1" nav1-course="45.0" nav1-bearing="240.0">
</horizontal-situation-indicator>
</section>
<section>
<h4>Rotated HSI with NAV1 tuned to VOR with bearing</h4>
<horizontal-situation-indicator id="nav1-vor-north" heading="60.0" heading-select="30.0"
nav1-label="VOR1" nav1-course="45.0" nav1-bearing="240.0"
fix-north="1">
</horizontal-situation-indicator>
</section>
<section>
<h4>JavaScript Interactivity</h4>
<script>const el = document.getElementById('nav1-vor');</script>
<script>const el3 = document.getElementById('nav1-vor-north');</script>
<label>
Heading
<input type="range" min="0" max="360" value="60" name="heading" oninput="el[this.name] = this.value; el3[this.name] = this.value;" />
</label>
<label>
Heading Select
<input type="range" min="0" max="360" value="30" name="heading-select" oninput="el[this.name] = this.value; el3[this.name] = this.value;" />
</label>
<label>
NAV1 Course
<input type="range" min="0" max="360" value="45" name="nav1-course" oninput="el[this.name] = this.value; el3[this.name] = this.value;" />
</label>
<label>
NAV1 Bearing
<input type="range" min="0" max="360" value="240" name="nav1-bearing" oninput="el[this.name] = this.value; el3[this.name] = this.value;" />
</label>
</section>
<section>
<h4>HSI with NAV1 & NAV2 set to VOR</h4>
<horizontal-situation-indicator id="nav1-vor-deviation" heading="60.0" heading-select="60.0"
nav1-label="⎔HAM" nav1-course="30" nav1-deviation="-5" nav1-to="1"
nav2-label="⎔BNM" nav2-course="90" nav2-deviation="5" nav2-to="-1">
</horizontal-situation-indicator>
</section>
<section>
<h4>CSS Variables</h4>
<script>const el2 = document.getElementById('nav1-vor-deviation');</script>
<label>
Heading Select
<input type="color" value="#00FFFF" name="--heading-select-color" oninput="el2.style.setProperty(this.name, this.value);" />
</label>
<label>
NAV1
<input type="color" value="#FF00FF" name="--nav1-color" oninput="el2.style.setProperty(this.name, this.value);" />
</label>
<label>
NAV2
<input type="color" value="#00FFFF" name="--nav2-color" oninput="el2.style.setProperty(this.name, this.value);" />
</label>
<label>
Stroke width
<input type="range" min="0.1" max="2" step="0.1" value="0.5" name="--stroke-width" oninput="el2.style.setProperty(this.name, this.value);" />
</label>
</section>
</main>
<footer>
See <a href="https://github.com/fboes/webcomponent-hsi">the GitHub documentation for <code>fboes/webcomponent-hsi</code></a>
</footer>
</body>
</html>