mirror of
https://github.com/cosinekitty/astronomy.git
synced 2026-05-24 00:35:19 -04:00
Added browser demo for calculating sunrise, sunset, moonrise, moonset.
This commit is contained in:
Don Cross
@@ -29,11 +29,12 @@ Here are some example web pages using Astronomy Engine in a web browser.
|
||||
Determines the Moon's current phase and
|
||||
predicts when the next few quarter phases will occur.
|
||||
|
||||
---
|
||||
|
||||
### [Planet Positions](positions.html)
|
||||
Calculates equatorial and horizontal coordinates of the Sun, Moon, and planets.
|
||||
|
||||
### [Rise/Set](riseset.html)
|
||||
Shows how to calculate sunrise, sunset, moonrise, and moonset times.
|
||||
|
||||
---
|
||||
|
||||
# [API Reference](../../source/js/)
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Calculations</h2>
|
||||
<h2>Body Positions</h2>
|
||||
<table cellpadding="5" cellspacing="0" id="CalcTable">
|
||||
<tr>
|
||||
<td>body</td>
|
||||
@@ -124,7 +124,7 @@
|
||||
<script src="../../source/js/astronomy.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
const StorageKey = 'AstroDemo.Positions.Options';
|
||||
const StorageKey = 'AstroDemo.Options';
|
||||
var Options;
|
||||
|
||||
function IsValidNumber(s) {
|
||||
|
||||
169
demo/browser/riseset.html
Normal file
169
demo/browser/riseset.html
Normal file
@@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Rise/Set Times</title>
|
||||
<meta name="viewport" content="width=device-width,maximum-scale=2">
|
||||
<link rel="stylesheet" href="https://cosinekitty.github.io/astronomy/assets/css/style.css?v=dc7aa5afbbb667af90528a28f566641e207c7a85" />
|
||||
<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">
|
||||
<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*)?"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Longitude:</td>
|
||||
<td><input type="text" id="EditLongitude" pattern="[\-\+]?\d+(\.\d*)?"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elevation (m):</td>
|
||||
<td><input type="text" id="EditElevation" pattern="[\-\+]?\d+(\.\d*)?"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Rise/Set Times</h2>
|
||||
<table cellpadding="5" cellspacing="0" id="CalcTable">
|
||||
<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://cosinekitty.github.io/astronomy/">Astronomy Engine</a>.
|
||||
You can read the documentation there.
|
||||
All the source code is available on the
|
||||
<a href="https://github.com/cosinekitty/astronomy/">GitHub repo</a>.
|
||||
Also, try using your browser's View Source command to look at how this page works.
|
||||
</p>
|
||||
|
||||
</body>
|
||||
|
||||
<script src="../../source/js/astronomy.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 = Astronomy.MakeObserver(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>
|
||||
@@ -21,8 +21,6 @@ Astronomy Engine is completely self-contained, and it always will be.
|
||||
This example shows how to determine the Moon's current phase,
|
||||
and how to predict when the next few quarter phases will occur.
|
||||
|
||||
---
|
||||
|
||||
### [Planet Positions](positions.js)
|
||||
Calculates equatorial and horizontal coordinates of the Sun, Moon, and planets.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user