mirror of
https://github.com/cosinekitty/astronomy.git
synced 2025-12-30 11:09:33 -05:00
eac7750fba
In the TypeScript/JavaScript code, the functions MakeObserver and MakeSpherical are no longer needed, because the classes Observer and Spherical are now exported, along with their constructors. I deleted those functions and reworked callers to use the equivalent constructors instead. Also fixed a few breakages in the html/browser examples that crept in recently.
167 lines
6.5 KiB
HTML
167 lines
6.5 KiB
HTML
<!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>
|