advancedwind
Version:
A plugin that calculates true wind and ground wind optionally correcting for vessel motion, upwash, leeway and mast height.
114 lines (80 loc) • 3.01 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced wind</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="menu-bar">
<!-- Speed Unit Selection -->
<div class="menu-item dropdown">
<label for="speed-unit">Speed:</label>
<select id="speed-unit" onchange="handleSpeedUnitChange(this.value)">
<option value="ms">m/s</option>
<option value="knots" selected>knots</option>
<option value="kmh">km/h</option>
</select>
</div>
<!-- Angle Unit Selection -->
<div class="menu-item dropdown">
<label for="angle-unit">Angle:</label>
<select id="angle-unit" onchange="handleAngleUnitChange(this.value)">
<option value="radians">radians</option>
<option value="degrees" selected>degrees</option>
</select>
</div>
<!-- Table style Selection -->
<div class="menu-item dropdown">
<label for="table-style">Table style:</label>
<select id="table-style" onchange="handleTableStyleChange(this.value)">
<option value="cartesian" selected>cartesian</option>
<option value="polar" >polar</option>
</select>
</div>
<!-- Pause Button -->
<button id="toggle-updates" class="menu-item" onclick="toggleUpdates()">Pause</button>
<!-- messages -->
<div id="message">
</div>
</header>
<!-- Content below the fixed menu -->
<main class="content">
<section class="graph">
<svg height="300px" width="300px" xmlns="http://www.w3.org/2000/svg" viewbox="-100 -100 200 200" id="canvas">
<!-- Draw the paths -->
<path id="hull" d="M -45 10 Q 15 25 30 0 Q 15 -25 -45 -10 z" stroke="black" fill="none" stroke-width="1"
transform="rotate(-90), scale(1, 1)" />
<line id="mast" x1="0" y1="0" x2="1" y2="8" stroke="brown" stroke-width="2" transform="rotate(-90)" />
Sorry, your browser does not support inline SVG.
</svg>
</section>
<section class=" data ">
<h2>Deltas</h2>
<div id="delta-container">
<!-- Speeds table will be populated here -->
</div>
</section>
<section class="data ">
<h2>Vectors</h2>
<div id="speeds-container">
<!-- Vectors table will be populated here -->
</div>
</section>
<section class="data ">
<h2>Attitude</h2>
<div id="attitude-container">
<!-- attitude table will be populated here -->
</div>
</section>
<section class="data ">
<div id="table-container">
<!-- Steps table will be populated here -->
</div>
</section>
</main>
<script type="module" src="app.js"></script>
<script type="module" src="vectors.js"></script>
</body>
</html>