binary-orbits/index.html at main · ryan-tock/binary-orbits · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Binary Orbits</title>
    <script src="/desmos-calculator.js"></script>
    <script type="module" src="main.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Binary Orbit 3D Visualizer</h1>
     <section>
      <label for="sample-data">
        <input type="checkbox" id="sample-data" checked />
        Use sample data
      </label>
      <br />
      <label for="file-input">Load JSON File:</label>
      <input type="file" id="file-input" accept=".json" />
      <label for="key-dropdown">Select an Orbit:</label>
      <select id="key-dropdown" disabled>
        <option value="">Select an Orbit</option>
      </select>
      <button id="optimize" disabled>Optimize Orbit!</button>
    </section>

    <section>
      <label>Period Bound:</label>
      <input type="text" id="period-low" value="2" size="4" aria-label="Lower period bound (years)" /> yr -
      <input type="text" id="period-high" value="40" size="4" aria-label="Upper period bound (years)" /> yr
    </section>

    <section>
      <fieldset>
        <legend>On Click</legend>
        <label><input type="radio" id="retain-point" name="point-manip" checked /> Do Nothing</label>
        <label><input type="radio" id="remove-point" name="point-manip" /> Remove Point</label>
        <label><input type="radio" id="highlight-point" name="point-manip" /> Highlight Point</label>
        <label><input type="radio" id="flip-x" name="point-manip" /> Negate RA</label>
        <label><input type="radio" id="flip-y" name="point-manip" /> Negate Dec</label>
        <label><input type="radio" id="flip-xy" name="point-manip" /> Negate RA and Dec</label>
      </fieldset>
    </section>

    <div class="aspect-ratio-container">
        <div class="calculator" id="calculator"></div>
    </div>

    <br>
    R Squared of the Fit: <div id="r_squared">0</div>

    <br>
    <button id="download">Download updated data file</button>

    <h3>Orbital Parameters</h3>
    <input type="checkbox" id="using-passage">Use Periapsis Passage (T) over Mean Anomaly at Epoch (M0) <br><br>

    <label for="semi-major" class="parameter-label">Semi Major Axis:</label>
    <input type="text" class="parameter" id="semi-major" value="0"> arcseconds <br>

    <label for="eccentricity" class="parameter-label">Eccentricity:</label>
    <input type="text" class="parameter" id="eccentricity" value="0"> <br>

    <label for="inclination" class="parameter-label">Inclination:</label>
    <input type="text" class="parameter" id="inclination" value="0"> degrees <br>

    <label for="node" class="parameter-label">Longitude of the Ascending Node:</label>
    <input type="text" class="parameter" id="node" value="0"> degrees <br>

    <label for="periapsis" class="parameter-label">Argument of Periapsis:</label>
    <input type="text" class="parameter" id="periapsis" value="0"> degrees <br>

    <div>
      <label for="mean-anomaly" class="parameter-label">Mean Anomaly at Epoch:</label>
      <input type="text" class="parameter" id="mean-anomaly" value="0"> degrees <br>
    </div>

    <div hidden>
      <label for="passage" class="parameter-label">Periapsis Passage:</label>
      <input type="text" class="parameter" id="passage" value="0"> years <br>
    </div>

    <label for="period" class="parameter-label">Period:</label>
    <input type="text" class="parameter" id="period" value="0"> years <br>
</body>
</html>