-
Notifications
You must be signed in to change notification settings - Fork 73
/
Copy pathriseset.html
166 lines (147 loc) · 6.55 KB
/
riseset.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
<!DOCTYPE html>
<html>
<head>
<title>Rise/Set Times</title>
<meta name="viewport" content="width=device-width,maximum-scale=2">
<link rel="stylesheet" href="astro_demo.css" />
</head>
<body id="main_content_wrap" class="inner">
<h1>Rise/Set Times</h1>
<h2>Observer</h2>
<table cellpadding="5" cellspacing="0" border="1">
<tr>
<td>Date and Time:</td>
<td id="DateTimeBox" class="Numeric"></td>
</tr>
<tr>
<td>Latitude:</td>
<td><input type="text" id="EditLatitude" pattern="[\-\+]?\d+(\.\d*)?" size="10"></td>
</tr>
<tr>
<td>Longitude:</td>
<td><input type="text" id="EditLongitude" pattern="[\-\+]?\d+(\.\d*)?" size="10"></td>
</tr>
<tr>
<td>Elevation (m):</td>
<td><input type="text" id="EditElevation" pattern="[\-\+]?\d+(\.\d*)?" size="10"></td>
</tr>
</table>
<h2>Rise/Set Times</h2>
<table cellpadding="5" cellspacing="0" id="CalcTable" border="1">
<tr>
<td class="NumHeader">Event</td>
<td class="NumHeader">Date/Time</td>
</tr>
<tr>
<td>Sunrise</td>
<td id="Sunrise" class="Numeric"></td>
</tr>
<tr>
<td>Sunset</td>
<td id="Sunset" class="Numeric"></td>
</tr>
<tr>
<td>Moonrise</td>
<td id="Moonrise" class="Numeric"></td>
</tr>
<tr>
<td>Moonset</td>
<td id="Moonset" class="Numeric"></td>
</tr>
</table>
<p>
This is a sample page for the open-source
<a href="https://github.com/cosinekitty/astronomy/">Astronomy Engine</a>.
All of the source code and documentation is available there.
Also, try using your browser's View Source command to look at how this page works.
</p>
</body>
<script src="astronomy.browser.js"></script>
<script>
window.onload = function() {
const StorageKey = 'AstroDemo.Options';
var Options;
function IsValidNumber(s) {
return typeof s === 'string' && /^[\-\+]?\d+(\.\d*)?$/.test(s);
}
function LoadOptions() {
let options;
try {
options = JSON.parse(window.localStorage.getItem(StorageKey));
} catch (e) {
}
if (!options) options = {};
if (!IsValidNumber(options.latitude)) options.latitude = '30';
if (!IsValidNumber(options.longitude)) options.longitude = '-90';
if (!IsValidNumber(options.elevation)) options.elevation = '0';
return options;
}
function SaveOptions() {
try {
window.localStorage.setItem(StorageKey, JSON.stringify(Options));
} catch (e) {
}
}
function Init() {
let options = LoadOptions();
document.getElementById('EditLatitude').value = options.latitude;
document.getElementById('EditLongitude').value = options.longitude;
document.getElementById('EditElevation').value = options.elevation;
return options;
}
function Pad(s, w) {
s = s.toFixed(0);
while (s.length < w) {
s = '0' + s;
}
return s;
}
function FormatDate(date) {
var year = Pad(date.getFullYear(), 4);
var month = Pad(1 + date.getMonth(), 2);
var day = Pad(date.getDate(), 2);
var hour = Pad(date.getHours(), 2);
var minute = Pad(date.getMinutes(), 2);
var second = Pad(date.getSeconds(), 2);
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}
function DisplayEvent(name, evt) {
let text = evt ? FormatDate(evt.date) : '';
document.getElementById(name).innerText = text;
}
function UpdateScreen() {
let text_latitude = document.getElementById('EditLatitude').value;
let text_longitude = document.getElementById('EditLongitude').value;
let text_elevation = document.getElementById('EditElevation').value;
if (!IsValidNumber(text_latitude) || !IsValidNumber(text_longitude) || !IsValidNumber(text_elevation)) {
// Bail out until user corrects problems in the observer coordinates.
// Gray out the whole table so the user knows there is something wrong.
document.getElementById('CalcTable').style.display = 'none';
} else {
let date = new Date();
document.getElementById('DateTimeBox').innerText = FormatDate(date);
document.getElementById('CalcTable').style.display = '';
let latitude = parseFloat(text_latitude);
let longitude = parseFloat(text_longitude);
let elevation = parseFloat(text_elevation);
if (latitude !== Options.latitude || longitude !== Options.longitude || elevation !== Options.elevation) {
Options = { latitude:text_latitude, longitude:text_longitude, elevation:text_elevation };
SaveOptions();
}
let observer = new Astronomy.Observer(latitude, longitude, elevation);
let sunrise = Astronomy.SearchRiseSet('Sun', observer, +1, date, 300);
let sunset = Astronomy.SearchRiseSet('Sun', observer, -1, date, 300);
let moonrise = Astronomy.SearchRiseSet('Moon', observer, +1, date, 300);
let moonset = Astronomy.SearchRiseSet('Moon', observer, -1, date, 300);
DisplayEvent('Sunrise', sunrise);
DisplayEvent('Sunset', sunset);
DisplayEvent('Moonrise', moonrise);
DisplayEvent('Moonset', moonset);
}
setTimeout(UpdateScreen, 1000);
}
Options = Init();
UpdateScreen();
}
</script>
</html>