From b80bb78db558bc3405fcc3c5784b3cd0657ca21e Mon Sep 17 00:00:00 2001
From: Don Cross <cosinekitty@gmail.com>
Date: Wed, 15 May 2019 20:18:21 -0400
Subject: [PATCH] Browser demo positions.html now shows altitude and azimuth.

---
 demo/browser/astro_demo.css |  2 +-
 demo/browser/positions.html | 27 ++++++++++++++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/demo/browser/astro_demo.css b/demo/browser/astro_demo.css
index 5189c5ba..702e29f0 100644
--- a/demo/browser/astro_demo.css
+++ b/demo/browser/astro_demo.css
@@ -3,7 +3,7 @@
 */
 
 .NumHeader {
-    text-align: right;
+    text-align: center;
 }
 
 .Numeric { 
diff --git a/demo/browser/positions.html b/demo/browser/positions.html
index 00bcb712..24b6f762 100644
--- a/demo/browser/positions.html
+++ b/demo/browser/positions.html
@@ -30,61 +30,83 @@
         </table>
 
         <h2>Calculations</h2>
-        <table border="1" cellpadding="5" cellspacing="0">
+        <table cellpadding="5" cellspacing="0">
             <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>
 
@@ -140,8 +162,11 @@
                     if (body !== 'Earth') {
                         let gv = Astronomy.GeoVector(body, date);
                         let sky = Astronomy.SkyPos(gv, observer);
+                        let hor = Astronomy.Horizon(date, observer, sky.ofdate.ra, sky.ofdate.dec);
                         document.getElementById(`${body}_ra`).innerText = FormatCoord(sky.j2000.ra);
                         document.getElementById(`${body}_dec`).innerText = FormatCoord(sky.j2000.dec);
+                        document.getElementById(`${body}_az`).innerText = FormatCoord(hor.azimuth);
+                        document.getElementById(`${body}_alt`).innerText = FormatCoord(hor.altitude);
                     }
                 }