mirror of
https://github.com/cosinekitty/astronomy.git
synced 2026-01-01 12:10:48 -05:00
279 lines
11 KiB
HTML
279 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Celestial Body Positions</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>Celestial Body Positions</h1>
|
|
|
|
<h2>Observer</h2>
|
|
<table cellpadding="5" cellspacing="0" border="1">
|
|
<tr>
|
|
<td>
|
|
<div>Date and Time:</div>
|
|
<div>
|
|
<input type="checkbox" id="AutoTimeCheckBox" onchange="OnToggleAutoTime()">
|
|
<label for="AutoTimeCheckBox">Automatic</label>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<input type="datetime" id="DateTimeBox" size="30">
|
|
</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>Body Positions</h2>
|
|
<table cellpadding="5" cellspacing="0" id="CalcTable" border="1">
|
|
<tr>
|
|
<td>body</td>
|
|
<td class="NumHeader">RA</td>
|
|
<td class="NumHeader">DEC</td>
|
|
<td class="NumHeader">Az</td>
|
|
<td class="NumHeader">Alt</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Sun</td>
|
|
<td id="Sun_ra" class="Numeric"></td>
|
|
<td id="Sun_dec" class="Numeric"></td>
|
|
<td id="Sun_az" class="Numeric"></td>
|
|
<td id="Sun_alt" class="Numeric"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Moon</td>
|
|
<td id="Moon_ra" class="Numeric"></td>
|
|
<td id="Moon_dec" class="Numeric"></td>
|
|
<td id="Moon_az" class="Numeric"></td>
|
|
<td id="Moon_alt" class="Numeric"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Mercury</td>
|
|
<td id="Mercury_ra" class="Numeric"></td>
|
|
<td id="Mercury_dec" class="Numeric"></td>
|
|
<td id="Mercury_az" class="Numeric"></td>
|
|
<td id="Mercury_alt" class="Numeric"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Venus</td>
|
|
<td id="Venus_ra" class="Numeric"></td>
|
|
<td id="Venus_dec" class="Numeric"></td>
|
|
<td id="Venus_az" class="Numeric"></td>
|
|
<td id="Venus_alt" class="Numeric"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Mars</td>
|
|
<td id="Mars_ra" class="Numeric"></td>
|
|
<td id="Mars_dec" class="Numeric"></td>
|
|
<td id="Mars_az" class="Numeric"></td>
|
|
<td id="Mars_alt" class="Numeric"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Jupiter</td>
|
|
<td id="Jupiter_ra" class="Numeric"></td>
|
|
<td id="Jupiter_dec" class="Numeric"></td>
|
|
<td id="Jupiter_az" class="Numeric"></td>
|
|
<td id="Jupiter_alt" class="Numeric"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Saturn</td>
|
|
<td id="Saturn_ra" class="Numeric"></td>
|
|
<td id="Saturn_dec" class="Numeric"></td>
|
|
<td id="Saturn_az" class="Numeric"></td>
|
|
<td id="Saturn_alt" class="Numeric"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Uranus</td>
|
|
<td id="Uranus_ra" class="Numeric"></td>
|
|
<td id="Uranus_dec" class="Numeric"></td>
|
|
<td id="Uranus_az" class="Numeric"></td>
|
|
<td id="Uranus_alt" class="Numeric"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Neptune</td>
|
|
<td id="Neptune_ra" class="Numeric"></td>
|
|
<td id="Neptune_dec" class="Numeric"></td>
|
|
<td id="Neptune_az" class="Numeric"></td>
|
|
<td id="Neptune_alt" class="Numeric"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Pluto</td>
|
|
<td id="Pluto_ra" class="Numeric"></td>
|
|
<td id="Pluto_dec" class="Numeric"></td>
|
|
<td id="Pluto_az" class="Numeric"></td>
|
|
<td id="Pluto_alt" 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>
|
|
function OnToggleAutoTime() {
|
|
const checkbox = document.getElementById('AutoTimeCheckBox');
|
|
const editbox = document.getElementById('DateTimeBox');
|
|
if (checkbox.checked) {
|
|
editbox.setAttribute('readonly', true);
|
|
} else {
|
|
editbox.removeAttribute('readonly');
|
|
}
|
|
}
|
|
|
|
window.onload = function() {
|
|
const StorageKey = 'AstroDemo.Options';
|
|
var Options;
|
|
|
|
function ParseDate(s) {
|
|
return new Date((s || '').replace(' ', 'T')); // Safari doesn't like the space character
|
|
}
|
|
|
|
function IsValidNumber(s) {
|
|
return typeof s === 'string' && /^[\-\+]?\d+(\.\d*)?$/.test(s);
|
|
}
|
|
|
|
function IsValidDate(s) {
|
|
const d = ParseDate(s);
|
|
return Number.isFinite(d.getTime());
|
|
}
|
|
|
|
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';
|
|
if (typeof options.automatic !== 'boolean') options.automatic = true;
|
|
if (!IsValidDate(options.date)) options.date = FormatDate(new Date());
|
|
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;
|
|
document.getElementById('DateTimeBox').value = options.date;
|
|
let checkbox = document.getElementById('AutoTimeCheckBox');
|
|
checkbox.checked = options.automatic;
|
|
OnToggleAutoTime();
|
|
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 FormatCoord(x) {
|
|
return x.toFixed(2);
|
|
}
|
|
|
|
const BodyList = [
|
|
'Sun', 'Moon', 'Mercury', 'Venus', 'Mars',
|
|
'Jupiter', 'Saturn', 'Uranus', 'Neptune', 'Pluto'
|
|
];
|
|
|
|
function UpdateScreen() {
|
|
const autotime = document.getElementById('AutoTimeCheckBox').checked;
|
|
const timebox = document.getElementById('DateTimeBox');
|
|
let text_latitude = document.getElementById('EditLatitude').value;
|
|
let text_longitude = document.getElementById('EditLongitude').value;
|
|
let text_elevation = document.getElementById('EditElevation').value;
|
|
let date;
|
|
|
|
if (autotime) {
|
|
// Automatically update the date/time every second, using the computer's clock.
|
|
date = new Date();
|
|
timebox.value = FormatDate(date);
|
|
} else {
|
|
// Try to parse a date/time from the user's input.
|
|
date = ParseDate(timebox.value);
|
|
}
|
|
|
|
if (!IsValidDate(timebox.value) || !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 {
|
|
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.automatic !== autotime) {
|
|
Options = {
|
|
latitude: text_latitude,
|
|
longitude: text_longitude,
|
|
elevation: text_elevation,
|
|
automatic: autotime,
|
|
date: timebox.value
|
|
};
|
|
SaveOptions();
|
|
}
|
|
let observer = new Astronomy.Observer(latitude, longitude, elevation);
|
|
|
|
for (let body of BodyList) {
|
|
let equ_2000 = Astronomy.Equator(body, date, observer, false, true);
|
|
let equ_ofdate = Astronomy.Equator(body, date, observer, true, true);
|
|
let hor = Astronomy.Horizon(date, observer, equ_ofdate.ra, equ_ofdate.dec, 'normal');
|
|
document.getElementById(`${body}_ra`).innerText = FormatCoord(equ_2000.ra);
|
|
document.getElementById(`${body}_dec`).innerText = FormatCoord(equ_2000.dec);
|
|
document.getElementById(`${body}_az`).innerText = FormatCoord(hor.azimuth);
|
|
document.getElementById(`${body}_alt`).innerText = FormatCoord(hor.altitude);
|
|
}
|
|
|
|
}
|
|
|
|
setTimeout(UpdateScreen, 1000);
|
|
}
|
|
|
|
Options = Init();
|
|
UpdateScreen();
|
|
}
|
|
</script>
|
|
</html>
|