demo/browser/moonradar.html

<!DOCTYPE html>
<html>
    <head>
        <title>Moon Radar Bounce Calculator</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>Moon Radar Bounce Calculator</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>Results</h2>
        <table cellpadding="5" cellspacing="0" id="CalcTable" border="1">
            <tr>
                <th>Variable</th>
                <th>Value</th>
            </tr>

            <tr>
                <td>Moon azimuth</td>
                <td id="Moon_az" class="Numeric"></td>
            </tr>

            <tr>
                <td>Moon altitude</td>
                <td id="Moon_alt" class="Numeric"></td>
            </tr>

            <tr>
                <td>Radar round-trip time</td>
                <td id="Moon_trip" class="Numeric"></td>
            </tr>
        </table>

        <p>
            This is a sample page for the open-source project
            <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(3);
            }

            const MOON_MEAN_RADIUS_KM = 1737.4;
            const MOON_MEAN_RADIUS_AU = MOON_MEAN_RADIUS_KM / Astronomy.KM_PER_AU;
            const C_AUDAY = 173.1446326846693;          // speed of light in AU/day
            const C_AUSEC = C_AUDAY / (24 * 3600);      // speed of light in AU/sec

            function UpdateScreen() {
                const autotime = document.getElementById('AutoTimeCheckBox').checked;
                const timebox = document.getElementById('DateTimeBox');
                const text_latitude = document.getElementById('EditLatitude').value;
                const text_longitude = document.getElementById('EditLongitude').value;
                const 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 = '';

                    const latitude = parseFloat(text_latitude);
                    const longitude = parseFloat(text_longitude);
                    const 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();
                    }
                    const observer = new Astronomy.Observer(latitude, longitude, elevation);

                    // Calculate a vector from the topocentric observer to the center of the Moon.
                    const moon_eqd = Astronomy.Equator(Astronomy.Body.Moon, date, observer, true, false);
                    const hor = Astronomy.Horizon(date, observer, moon_eqd.ra, moon_eqd.dec, 'normal');
                    document.getElementById('Moon_az').innerText = FormatCoord(hor.azimuth);
                    document.getElementById('Moon_alt').innerText = FormatCoord(hor.altitude);

                    // Find the distance from the topocentric observer to the Moon's surface.
                    const dist_au = moon_eqd.vec.Length() - MOON_MEAN_RADIUS_AU;

                    // Calculate the round trip radar pulse time in seconds.
                    const round_trip_sec = (2 * dist_au) / C_AUSEC;
                    document.getElementById('Moon_trip').innerText = FormatCoord(round_trip_sec);
                }

                setTimeout(UpdateScreen, 1000);
            }

            Options = Init();
            UpdateScreen();
        }
    </script>
</html>