From 480a7d44f1fadd1cb57fafa835e91c8dff6693d0 Mon Sep 17 00:00:00 2001
From: Don Cross <cosinekitty@gmail.com>
Date: Sat, 15 Jun 2019 15:12:28 -0400
Subject: [PATCH] Added browser demo for calculating sunrise, sunset, moonrise,
 moonset.

---
 demo/browser/README.md      |   5 +-
 demo/browser/positions.html |   4 +-
 demo/browser/riseset.html   | 169 ++++++++++++++++++++++++++++++++++++
 demo/nodejs/README.md       |   2 -
 4 files changed, 174 insertions(+), 6 deletions(-)
 create mode 100644 demo/browser/riseset.html
diff --git a/demo/browser/README.md b/demo/browser/README.md
index 1f6fe859..71438e6f 100644
--- a/demo/browser/README.md
+++ b/demo/browser/README.md
@@ -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/)
diff --git a/demo/browser/positions.html b/demo/browser/positions.html
index 1acf0c8f..9d0db734 100644
--- a/demo/browser/positions.html
+++ b/demo/browser/positions.html
@@ -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) {
diff --git a/demo/browser/riseset.html b/demo/browser/riseset.html
new file mode 100644
index 00000000..b8711cc1
--- /dev/null
+++ b/demo/browser/riseset.html
@@ -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>
diff --git a/demo/nodejs/README.md b/demo/nodejs/README.md
index c6ce2c41..7a953e41 100644
--- a/demo/nodejs/README.md
+++ b/demo/nodejs/README.md
@@ -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.
 
