Add rise/set time indicator arcs for planets. Add option to debug time at accelerated rate.

Author: kshetline

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-clock",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "license": "MIT",
   "author": "Kerry Shetline <kerry@shetline.com>",
   "scripts": {
@@ -19,6 +19,7 @@
     "js-cookie": "^2.2.0",
     "ks-astronomy": "^1.0.1",
     "ks-date-time-zone": "^1.4.0",
+    "ks-math": "^1.1.1",
     "ks-util": "^1.2.0",
     "rxjs": "^6.2.1"
   },

package.json

@@ -2,6 +2,7 @@ import { Settings } from './settings';
 
 export interface AppService {
   getCurrentTime(): number;
+  isTimeAccelerated(): boolean;
   updateTime(hour: number, minute: number, forceRefresh: boolean): void;
   updateSettings(newSettings: Settings);
   forecastHasBeenUpdated(): void;

src/app.service.ts

@@ -125,8 +125,10 @@ export class Clock {
     const textRadius = 33.5;
     const constellationRadius = 24;
     const center = 50;
+    const centerStr = center.toString();
     const clock = document.getElementById('clock');
     const planetTracks = document.getElementById('planet-tracks');
+    const risenTracks = document.getElementById('risen-tracks');
 
     for (let i = 0; i < 360; i += 6) {
       const x1 = center + radius * Math.cos(Math.PI * i / 180);
@@ -166,13 +168,15 @@ export class Clock {
       }
     }
 
-    const planetSymbols = [0x263C, 0x263D, 0x0263F, 0x2640, 0x2642, 0x2643, 0x2644]; // Sun, Moon, Mercury, Venus, Mars, Jupiter, Saturn
+    const planetSymbols = [0x263C, 0x263D, 0x0263F, 0x2640, 0x2642, 0x2643, 0x2644];
+    const planetIds = ['sun', 'moon', 'mercury', 'venus', 'mars', 'jupiter', 'saturn'];
 
     planetSymbols.forEach((planet, index) => {
       const x = center + 10 + index * 2;
       const dy = 0.75 + (index % 2) * 2;
       const rect = document.createElementNS(SVG_NAMESPACE, 'rect');
       const text = document.createElementNS(SVG_NAMESPACE, 'text');
+      const path = document.createElementNS(SVG_NAMESPACE, 'path');
 
       rect.setAttributeNS(null, 'x', (x - 0.9).toString());
       rect.setAttributeNS(null, 'y', (center + dy - 2).toString());
@@ -182,11 +186,17 @@ export class Clock {
       planetTracks.appendChild(rect);
 
       text.setAttributeNS(null, 'x', x.toString());
-      text.setAttributeNS(null, 'y', center.toString());
+      text.setAttributeNS(null, 'y', centerStr);
       text.setAttributeNS(null, 'dy', dy.toString());
       text.classList.add('constellation');
       text.textContent = String.fromCodePoint(planet);
       planetTracks.appendChild(text);
+
+      path.setAttributeNS(null, 'fill', 'none');
+      path.setAttributeNS(null, 'visibility', 'inherited');
+      path.classList.add('risen-track');
+      path.id = `risen-${planetIds[index]}`;
+      risenTracks.appendChild(path);
     });
   }
 
@@ -210,7 +220,8 @@ export class Clock {
       this.sweep.beginElement();
     };
 
-    const doMechanicalSecondHandEffect = this.hasBeginElement && (!isRaspbian() || !this.hasCompletingAnimation);
+    const doMechanicalSecondHandEffect = this.hasBeginElement && !this.appService.isTimeAccelerated() &&
+            (!isRaspbian() || !this.hasCompletingAnimation);
     const animationTime = (doMechanicalSecondHandEffect ? SECOND_HAND_ANIMATION_TIME : 0);
     const now = this.appService.getCurrentTime() + animationTime;
     const date = new KsDateTime(now, this.timezone);

src/clock.ts

@@ -23,9 +23,10 @@ import {
 } from 'ks-astronomy';
 import { getDateFromDayNumber_SGC, KsDateTime, KsTimeZone } from 'ks-date-time-zone';
 import * as $ from 'jquery';
-import { setSvgHref } from './util';
+import { describeArc, setSvgHref } from './util';
 import { AppService } from './app.service';
 import { padLeft } from 'ks-util';
+import { mod } from 'ks-math';
 
 const solarSystem = new SolarSystem();
 const eventFinder = new EventFinder();
@@ -55,6 +56,7 @@ function formatTime(date: KsDateTime, amPm: boolean) {
 export class Ephemeris {
   private planetTracks: JQuery;
   private planetSymbols: JQuery;
+  private risenTracks: JQuery;
   private sunrises: JQuery[] = [];
   private sunsets: JQuery[] = [];
   private moons: JQuery[] = [];
@@ -70,6 +72,7 @@ export class Ephemeris {
 
     this.planetTracks = $('#planet-tracks');
     this.planetSymbols = $('#planets');
+    this.risenTracks = $('#risen-tracks');
 
     for (let i = 0; i < 4; ++i) {
       this.sunrises[i] = $('#day' + i + '-sunrise');
@@ -87,10 +90,12 @@ export class Ephemeris {
       if (newValue) {
         this.planetTracks.css('visibility', 'hidden');
         this.planetSymbols.css('visibility', 'hidden');
+        this.risenTracks.css('visibility', 'hidden');
       }
       else {
         this.planetTracks.css('visibility', 'visible');
         this.planetSymbols.css('visibility', 'visible');
+        this.risenTracks.css('visibility', 'visible');
       }
     }
   }
@@ -118,7 +123,32 @@ export class Ephemeris {
         targetAltitude -= AVG_SUN_MOON_RADIUS;
 
       rotate(elem, -eclipticLongitude);
-      elem.css('stroke-width', altitude < targetAltitude ? '0.5' : '0');
+      elem.css('stroke-width', altitude < targetAltitude ? '0.25' : '0');
+      elem[0].setAttributeNS(null, 'r', altitude < targetAltitude ? '0.625' : '0.75');
+
+      const risenTrack = $('#risen-' + planetIds[index]);
+      const rise = eventFinder.findEvent(planet, RISE_EVENT, time_JDU + 5 / 1400, observer, timezone, null, true);
+      const set = eventFinder.findEvent(planet, SET_EVENT, time_JDU - 5 / 1440, observer, timezone);
+
+      if (rise && rise.ut > time_JDU - 1.1 && set && set.ut < time_JDU + 1.1) {
+        const currentAngle = mod(-eclipticLongitude, 360);
+        const radius = 10 + index * 2;
+        let riseAngle = currentAngle + (time_JDU - rise.ut) * 360;
+        let setAngle = currentAngle + (time_JDU - set.ut) * 360;
+
+        while (setAngle + 360 < riseAngle)
+          setAngle += 360;
+
+        while (riseAngle < setAngle)
+          riseAngle += 360;
+
+        const arc = describeArc(50, 50, radius, setAngle, riseAngle);
+
+        risenTrack[0].setAttributeNS(null, 'd', arc);
+        risenTrack.css('visibility', 'inherited');
+      }
+      else
+        risenTrack.css('visibility', 'hidden');
     });
 
     eventFinder.getRiseAndSetEvents(SUN, wallTime.y, wallTime.m, wallTime.d, 4, observer, timezone).then(daysOfEvents => {

src/ephemeris.ts

@@ -53,6 +53,7 @@
                               repeatCount="1"/>
           </line>
         </g>
+        <g id="risen-tracks"></g>
         <g id="planets">
           <circle id="saturn"  cx="72" cy="50" r="0.75" stroke="black" stroke-width="0" fill="#FF8"/>
           <circle id="jupiter" cx="70" cy="50" r="0.75" stroke="black" stroke-width="0" fill="orange"/>
@@ -193,7 +194,7 @@
           </div>
         </div>
         <div class="dialog-buttons">
-          <span class="version-number">1.0.5</span>
+          <span class="version-number">1.0.6</span>
           <button id="settings-reload">Reload</button>
           <span>&bull;</span>
           <button id="settings-cancel">Cancel</button>

src/index.html

@@ -32,7 +32,8 @@ import { Indoor } from './indoor';
 initTimeZoneSmall();
 
 const baseTime = Date.now();
-const debugTime = 0; // +new Date(2018, 5, 25, 5, 8, 40, 0);
+const debugTime = 0; // +new Date(2018, 6, 2, 22, 30, 0, 0);
+const debugTimeRate = 60;
 
 function parseTime(s: string): number {
   const parts = s.split(':');
@@ -111,11 +112,15 @@ export class AwClockApp implements AppService {
 
   getCurrentTime(): number {
     if (debugTime)
-      return debugTime + Date.now() - baseTime;
+      return debugTime + (Date.now() - baseTime) * debugTimeRate;
     else
       return Date.now();
   }
 
+  isTimeAccelerated(): boolean {
+    return (!!debugTime && debugTimeRate > 1);
+  }
+
   public start() {
     this.clock.start();
   }
@@ -139,7 +144,11 @@ export class AwClockApp implements AppService {
 
     this.lastHour = hour;
 
-    const interval = (this.frequent ? 5 : 15);
+    let interval = (this.frequent ? 5 : 15);
+
+    if (this.isTimeAccelerated())
+      interval *= debugTimeRate;
+
     const runningLate = (this.lastForecast + interval * 60000 <= now);
     const minuteOffset = (this.frequent ? 0 : this.pollingMinute);
     const millisOffset = (this.frequent || forceRefresh || runningLate ? 0 : this.pollingMillis);

src/main.ts

@@ -4,6 +4,7 @@ $constellation-font: "Apple Symbols", "Arial Unicode MS", "MS Gothic", sans-seri
 $dialog-font: Arial, sans-serif;
 $planet-grid: #369;
 $clock-border: #69C;
+$risen-track: rgba(102, 204, 153, 0.5);
 
 html {
   width: 100%;
@@ -361,6 +362,11 @@ input, button, select, textarea, optgroup, option { // Ignored by macOS Chrome f
   fill: none;
 }
 
+.risen-track {
+  stroke: $risen-track;
+  stroke-width: 0.5;
+}
+
 .constellation {
   font-family: $constellation-font;
   font-size: 2.5px;

src/styles.scss

@@ -19,6 +19,7 @@
 
 import * as $ from 'jquery';
 import { isEdge, isSafari } from 'ks-util';
+import { cos_deg, Point, sin_deg } from 'ks-math';
 
 export type KeyListener = (KeyboardEvent) => void;
 
@@ -94,3 +95,21 @@ export function setSvgHref(elem: JQuery, href: string) {
     });
   }
 }
+
+export function polarToRectangular(cx: number, cy: number, radius: number, angleInDegrees: number): Point {
+  return {
+    x: cx + radius * cos_deg(angleInDegrees),
+    y: cy + radius * sin_deg(angleInDegrees)
+  };
+}
+
+export function describeArc(x: number, y: number, radius: number, startAngle: number, endAngle: number): string {
+  const start = polarToRectangular(x, y, radius, startAngle);
+  const end = polarToRectangular(x, y, radius, endAngle);
+  const largeArcFlag = (endAngle - startAngle <= 180 ? 0 : 1);
+
+  return [
+    'M', start.x, start.y,
+    'A', radius, radius, 0, largeArcFlag, 1, end.x, end.y
+  ].join(' ');
+}

src/util.ts

@@ -70,7 +70,7 @@
     "no-trailing-whitespace": true,
     "no-unnecessary-initializer": true,
     "no-unused-expression": true,
-    "no-use-before-declare": true,
+    "no-use-before-declare": false,
     "no-var-keyword": true,
     "object-literal-sort-keys": false,
     "one-line": [