-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathy-astronomy.html
264 lines (251 loc) · 16.1 KB
/
y-astronomy.html
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<head>
<title>YAS-Sun calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.plot.ly/plotly-2.35.2.min.js" charset="utf-8"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
crossorigin="anonymous"
defer></script>
<script src="static/shading.js"></script>
<script src="static/earth_model.js"></script>
<script src="static/moon_model.js"></script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Lucida Sans', sans-serif;
padding: 1rem;
}
.section-title {
color: blue;
font-size: 1.1rem;
font-weight: 800;
border-bottom: dashed black;
padding: 0.5rem 0;
margin-top: 5px;
margin-bottom: 2px;
cursor: pointer;
}
.clickable {
cursor: pointer;
background-color: skyblue;
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
}
.form-group {
margin-bottom: 1.5rem;
}
table {
margin-bottom: 1rem;
border-collapse: collapse;
}
th,td {
border: 1px solid cornflowerblue;
padding: 0.5rem;
font-size: 0.9rem;
}
input[type="number"],
input[type="date"],
input[type="time"] {
padding: 0.5rem;
border: 1px solid gray;
border-radius: 4px;
}
input[type="checkbox"],
input[type="radio"] {
width: 1.2rem;
height: 1.2rem;
vertical-align: middle;
}
button {
background-color: skyblue;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
margin-top: 0.5rem;
}
textarea {
font-size: large;
background-color: lightgray;
color: blue;
width: 18em;
height: 4em;
padding: 0.5rem;
border-radius: 4px;
}
canvas {
max-width: 100%;
height: auto;
}
/* Responsive layout */
@media screen and (min-width: 768px) {
button {
width: auto;
}
}
</style>
</head>
<body style="background-color: azure;">
<h2 style="background-color: skyblue"><a href="https://yingyan797.github.io/no-backend">Home page</a> | Y-Astronomy Sun calculator & graphics |
<button style="font-size: large; color: blueviolet;" onclick="vis_switch()"><b id="mode">3D Visualization page >></b></button></h2>
<br><div id="calculator" style="display: block;">
<i style="font-size: larger; background-color: lightgoldenrodyellow;">[ Sun calculator ] -- Select one or more of the functions -- </i>
<p class="section-title" onclick="hide_show('func_1')">1. Sunrise/Sunset time and direction, Daylight hours</p>
<div style="display: none;" id="func_1">
<table><tr><th>Longitude</th><td><input type="number" id="lon_1" min="-180" max="180" step="0.01" value="120"></td></tr>
<tr><th>Latitude</th><td><input type="number" id="lat_1" min="-90" max="90" step="0.01" value="35"></td> </tr>
<tr><th>Time zone</th><td><input type="number" id="tz_1" min="-12" max="12" value="8"></td> </tr>
<tr><th>Date</th><td><input type="date" id="date_1" value="2024-05-18"></td></tr><tr>
<td colspan="2"><button onclick="process_form(1)">Calculate</button></td></tr>
</table> -- Results --
<table style="display: none;" id="res_1">
<tr><th>Sunrise</th><th>Direction</th><th>Sunset</th><th>Direction</th>
<th>Daylight</th></tr>
<tr style="color: black;"><td id="_1_sr"></td><td id="_1_rd"></td><td id="_1_ss"></td><td id="_1_sd"></td><td id="_1_dl"></td></tr>
</table></div>
<p class="section-title" onclick="hide_show('func_2')">2. Sun height and direction at any time of the day</p>
<div style="display: none;" id="func_2">
<table><tr><th>Longitude</th><td><input type="number" id="lon_2" min="-180" max="180" step="0.01" value="116"></td> </tr>
<tr><th>Latitude</th><td><input type="number" id="lat_2" min="-90" max="90" step="0.01" value="40"></td></tr>
<tr><th>Time zone</th><td><input type="number" id="tz_2" min="-12" max="12" value="8"></td> </tr>
<tr><th>Date</th><td><input type="date" id="date_2" value="2024-10-15"></td></tr>
<tr><th>Time</th><td><input type="time" id="time_2" value="17:05"></td><td><button onclick="process_form(2)">Calculate</button></td></tr>
</table> <div id="res_2" style="display: none; color: cornflowerblue;">
Sun height: <b id="_2_sh" style="color: black;"></b>; <br> Direction: <b id="_2_sd" style="color: black;"></b> <br>
Sun trajectory of the day: <button type="submit" id="plot_2" value="draw">Draw >></button>
</div></div>
<p class="section-title" onclick="hide_show('func_3')">3. Time(s) of the day when Sun reaches a certain height / direction</p>
<div style="display: none;" id="func_3">
<table>
<tr><th>Longitude</th><td><input type="number" id="lon_3" min="-180" max="180" step="0.01" value="107"></td> </tr>
<tr><th>Latitude</th><td><input type="number" id="lat_3" min="-90" max="90" step="0.01" value="25"></td></tr>
<tr><th>Time zone</th><td><input type="number" id="tz_3" min="-12" max="12" value="8"></td> </tr>
<tr><th>Date</th><td><input type="date" id="date_3" value="2024-08-07"></td> </tr>
<tr><th><input type="radio" name="angmode_3" oninput="input_ang('ht',3)"><label for="angmode_3" id="ht_lab_3">Sun height</label></th>
<td rowspan="2"><input type="number" id="ang_3" value="30" min="-90" max="360" step="0.01"> (degree)</td></tr>
<tr><th><input type="radio" name="angmode_3"oninput="input_ang('drn',3)"><label for="angmode_3" id="drn_lab_3">Direction</label></th></tr>
</table> <button onclick="process_form(3)" id="calc_3" disabled>Calculate >></button>
<i id="ctrl_3" style="display: block; color: lightsalmon;">(must choose either height or direction to continue)</i>
<div id="res_3" style="display: none;"></div>
</div>
<p class="section-title" onclick="hide_show('func_4')">4. Dates of the year when Sun appears in a certain position at a given time</p>
<div style="display: none;" id="func_4">
<table>
<tr><th>Longitude</th><td><input type="number" id="lon_4" min="-180" max="180" step="0.01" value="0"></td> </tr>
<tr><th>Latitude</th><td><input type="number" id="lat_4" min="-90" max="90" step="0.01" value="52"></td></tr>
<tr><th>Year</th><td><input type="number" id="year_4" min="1" max="9900" step="1" value="2024"></td> </tr>
<tr><th>Time zone</th><td><input type="number" id="tz_4" min="-12" max="12" value="1"></td> </tr>
<tr><th>Time</th><td><input type="time" id="time_4" value="17:05"></td></tr>
<tr><th><input type="radio" name="angmode_4" oninput="input_ang('ht',4)"><label for="angmode_4" id="ht_lab_4">Sun height</label></th>
<td rowspan="2"><input type="number" id="ang_4" value="250" min="-90" max="360" step="0.01"> (degree)</td></tr>
<tr><th><input type="radio" name="angmode_4" oninput="input_ang('drn',4)"><label for="angmode_4" id="drn_lab_4">Direction</label></th></tr>
</tr></table> <i style="color: gray; font-size: 15;">Optional condition: narrow down the date range (for Daylight daving time, etc.)
<input type="checkbox" onclick="hide_show('opt_4')"></i> <span id="opt_4" style="display: none;">
<b>Date from:</b> <input id="dfrom_4" type="date" value="2024-04-01">;
<b>Date to: </b><input id="dto_4" type="date" value="2024-10-15"> <i style="font-size: small;">(make sure GMT time zone is the same over this period)</i></span>
<button onclick="process_form(4)" id="calc_4" disabled>Calculate >></button>
<i id="ctrl_4" style="display: block; color: lightsalmon;">(must choose either height or direction to continue)</i>
<div id="res_4" style="display: none; width: 85%; background-color: cornflowerblue;"></div>
</div>
<br><i style="background-color: lightgoldenrodyellow;">Other calculators</i><br>
<p class="section-title" onclick="hide_show('func_a1')">1. The distance between any two locations on Earth</p>
<div style="display: none;" id="func_a1"><table>
<tr><td>Locations</td><th>Longitude</th><th>Latitude</th></tr>
<tr><th>1</th><td><input type="number" id="lon_a1_1" min="-180" max="180" step="0.01" value="120"></td>
<td><input type="number" id="lat_a1_1" min="-90" max="90" step="0.01" value="35"></td></tr>
<tr><th>2</th><td><input type="number" id="lon_a1_2" min="-180" max="180" step="0.01" value="25"></td>
<td><input type="number" id="lat_a1_2" min="-90" max="90" step="0.01" value="45"></td></tr>
</table>Earth radius (km): <input type="number" id="radius_a1" value="6371" min="0" max="9e10"><br>
Distance: <button onclick="process_form('a1')">Calculate >></button><br><textarea readonly id="res_a1"></textarea>
</div><p class="section-title" onclick="hide_show('func_a2')">2. The distance to an object in the sky observed at a certain angle </p>
<p class="section-title" onclick="hide_show('func_s3')">3. Maximum observable distance to horizon standing at a given altitude</p>
</div>
<div id="visual3d" style="display: none;">
<h3 style="color: blueviolet;">1. Draw sun trajectory of a day</h3>
<table><tr><th>Longitude: <input type="number" id="lon_vis" min="-180" max="180" step="0.01" value="116"></th>
<td rowspan="5"><div id="vis_traj"></div></td></tr>
<tr><th>Latitude: <input type="number" id="lat_vis" min="-90" max="90" step="0.01" value="40"></th></tr>
<tr><th>Time zone: <input type="number" id="tz_vis" min="-12" max="12" value="8"></th> </tr>
<tr><th><input type="radio" name="sundirect_mode" checked id="sdr_date"> Date: <input type="date" id="date_vis" value="2024-10-15"> Or
<input type="radio" name="sundirect_mode" id="sdr_date"> Sun latitude: <input type="number" id="sunlat_vis" min="-90" max="90" step="0.01" value="40"></th>
</tr><tr><td><button onclick="process_form('traj')">Click to view sun trajectory</button>
<b class="clickable" onclick="hide_show('traj_comment')">About plot...</b><br>
<textarea id="traj_comment" style="height: 170px; width: 95%; display: none;" readonly>3D Solar trajectory displayed on the right hand side >>>
- [Red] segment represents daylight when Sun is above horizon, and
- [Black] represents night when sun is below horizon.
- The 4 connections to the center represent midnight, sunrise, noon, sunset respectively. </textarea></td></tr> </table>
<h3 style="color: blueviolet;">2. Sunlight-shaded earth view and Moon phase</h3>
<table><tr style="background-color: lightgoldenrodyellow;"><th colspan="3">
Set Date: <b class="clickable" onclick="shad_setdate(-30)"><30</b>|<b class="clickable" onclick="shad_setdate(-1)"><1</b>
<input type="date" id="date_shad" value="2024-10-15" oninput="process_form('shad')">
<b class="clickable" onclick="shad_setdate(1)">1></b>|<b class="clickable" onclick="shad_setdate(30)">30></b></th>
<td rowspan="7">
<div class="clickable" onclick="hide_show('earth_shad')">Earth view (hide/show)</div>
<canvas id="earth_shad" style="width: 350px; height: 300px;"></canvas><br>
<div class="clickable" onclick="hide_show('moon_shad')">Moon phase (hide/show)</div>
<canvas id="moon_shad" style="width: 350px; height: 270px;"></canvas>
<div id="moon_shad_info" style="width: 350px;" rows="1"></div>
</td></tr>
<tr><th>Adjust time</th><td id="time_shad_v" ></td><td><input type="range" id="time_shad" min="0" max="86400" step="300" value="0" oninput="process_form('shad')"></td></tr>
<tr><th>Longitude</th><td id="lon_shad_v"></td><td> <input type="range" id="lon_shad" min="-180" max="180" step="1" value="90" oninput="process_form('shad')"></td>
<tr><th>Latitude</th><td id="lat_shad_v"></td><td><input type="range" id="lat_shad" min="-90" max="90" step="1" value="0" oninput="process_form('shad')"></td></tr>
<tr><th>Altitude</th><td id="radius_shad_v"></td><td> <input type="range" id="radius_shad" min="3" max="11" step="0.2" value="5.4" oninput="process_form('shad')"></td>
<tr style="color: gray;"><th>Rotate scene</th> <td><i id="up_shad_v"></i>
<b class="clickable" onclick="shad_upright(1)">Reset</b></td><td>
<input type="range" id="up_shad" min="-180" max="180" step="3" value="0" oninput="process_form('shad')">
</th></tr></td> <tr><td colspan="3"><textarea style="height: 150px;" readonly>3D graphics on the right hand side >>>
Note, the graphics may not display on portrait with a mobile device. Turn the screen 90 degree to landscape for better view.
Adjust the altitude bar to the right if the scene is too close.
</textarea></td></tr></table>
</div>
<script type="text/javascript" src="static/sun_calc.js"></script>
<script>
// Form processing main functions
function input_ang(aname, num) {
const field = "ang_"+num;
document.getElementById("calc_"+num).disabled = false;
document.getElementById("ctrl_"+num).style.display = "none";
switch (aname) {
case "ht":
document.getElementById(field).min = -90;
document.getElementById(field).max = 90;
document.getElementById("ht_lab_"+num).style.color = "blueviolet";
document.getElementById("ht_lab_"+num).style.fontSize = "large";
document.getElementById("drn_lab_"+num).style.color = "gray";
document.getElementById("drn_lab_"+num).style.fontSize = "small";
break;
case "drn":
document.getElementById(field).min = 0;
document.getElementById(field).max = 360;
document.getElementById("ht_lab_"+num).style.color = "gray";
document.getElementById("ht_lab_"+num).style.fontSize = "small";
document.getElementById("drn_lab_"+num).style.color = "blueviolet";
document.getElementById("drn_lab_"+num).style.fontSize = "large";
break;
}
}
function hide_show(sec_id) {
if (document.getElementById(sec_id).style.display == "none") {
document.getElementById(sec_id).style.display = "block";
} else {
document.getElementById(sec_id).style.display = "none";
}
} function vis_switch() {
hide_show("calculator");
hide_show("visual3d");
if (document.getElementById("mode").innerText === "3D Visualization page >>") {
document.getElementById("mode").innerText = "<< Back to sun calculator";
view_earth();
view_moon();
} else {
document.getElementById("mode").innerText = "3D Visualization page >>";
}
}
</script>
</body>