Display equinoxes and solstices.

README.md

@@ -2,7 +2,7 @@
 
 This project is designed to create a desktop clock which provides weather and astronomical information. While primarily designed to run on a Raspberry Pi, the code will create a Node.js server and client web app that can be run on other computers and operating systems, albeit without the Raspberry Pi’s hardware-level support for wired and wireless temperature/humidity sensors.
 
-The clock displays the time and date in both analog and digital form, in 12- or 24-hour format (with a special display mode for the occasional leap second). The clock also displays current weather conditions, a four-day forecast, sunrise and sunset times, moon phases, and the positions of the Sun, Moon, and major planets along the ecliptic.
+The clock displays the time and date in both analog and digital form, in 12- or 24-hour format (with a special display mode for the occasional leap second). The clock also displays current weather conditions, a four-day forecast, sunrise and sunset times, moon phases, equinoxes, solstices, and the positions of the Sun, Moon, and major planets along the ecliptic.
 
 ### Getting started
 
@@ -17,15 +17,15 @@ While it’s typical to do `npm install` upon first cloning a project, this proj
 
 To build and run this project you can use the following commands:
    - “`npm run build` [-- [`--acu`] [`--dht`] [ `--pt`] [`--sd`]]” to build (with optional support for wired and/or wireless temperature/humidity sensors).
-   - “`npm run start-server`” to start the data server for this project (not on Windows).
-   - “`npm run start-server-win`” to start the data server for this project (on Windows).
-   - “`npm start`” to serve the web client using webpack-dev-server.
+   - “`npm run start-server`” to start the data server for this project (not for Windows) on `localhost:4201`.
+   - “`npm run start-server-win`” to start the data server for this project (for Windows) on `localhost:4201`.
+   - “`npm start`” to serve the web client using webpack-dev-server on `localhost:4200`. _(Note that for development and testing, two different ports are used, but that when the server is deployed, all content and data is served on one port, by default 8080.)_
 
 > Note: A dependency on `node-sass` sometimes causes build problems. It often helps to delete the top level `node_modules` directory, and then do `npm install` over again. I’ve also found that using `LIBSASS_EXT=”no” npm install` helped.
 
 The server requires a Dark Sky API key for weather data. Use the environment variable `AWC_DARK_SKY_API_KEY` to set the key. (See https://darksky.net/ for further details.)
 
-By default the server uses `pool.ntp.org` as an NTP time server. Use the environment variable `AWC_NTP_SERVER` to change the time server. Do not use a Google time server, or any other NTP server that implements “leap second smearing” if you want the Astronomy/Weather Clock to be able to display leap seconds.
+By default the server uses `pool.ntp.org` as an NTP time server. Use the environment variable `AWC_NTP_SERVER` to change the time server. Do not use a Google time server, or any other NTP server that implements “leap second smearing”, if you want the Astronomy/Weather Clock to be able to display leap seconds.
 
 ![Hypothetical leap second](https://shetline.com/misc/moment_of_leap_second.jpg)
 
@@ -39,7 +39,7 @@ To build the server along with the web client, use `npm run build` (possibly fol
 | `npm run build -- --dht` |     Server/client with wired indoor sensor support. |
 | `npm run build -- --dht --acu` |     Server/client with both wired and wireless sensor support. |
 
-This `--pt` option is for “plain text”, meaning the console colors and progress animation are disabled.
+This `--pt` option is for “plain text”, meaning that console colors and progress animation are disabled.
 
 The Raspberry Pi-only option `--sd` deploys the app to the default `~/weather` directory (typically `/home/pi/weather`).
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-clock",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "license": "MIT",
   "author": "Kerry Shetline <kerry@shetline.com>",
   "scripts": {

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-clock-server",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "license": "MIT",
   "author": "Kerry Shetline <kerry@shetline.com>",
   "private": true,

src/ephemeris.ts

@@ -62,6 +62,7 @@ export class Ephemeris {
   private sunsets: JQuery[] = [];
   private moons: JQuery[] = [];
   private phaseTimes: JQuery[] = [];
+  private esTimes: JQuery[] = [];
   private planetElems: JQuery[] = [];
 
   private _hidePlanets = false;
@@ -80,6 +81,7 @@ export class Ephemeris {
       this.sunsets[i] = $('#day' + i + '-sunset');
       this.moons[i] = $('#day' + i + '-moon');
       this.phaseTimes[i] = $('#day' + i + '-phase-time');
+      this.esTimes[i] = $('#day' + i + '-equisolstice');
     }
   }
 
@@ -202,10 +204,13 @@ export class Ephemeris {
       const noon_JDU = KsDateTime.julianDay(noon.utcTimeMillis);
       const noon_JDE = UT_to_TDB(noon_JDU);
       const phase = solarSystem.getLunarPhase(noon_JDE);
-      const event = eventFinder.getLunarPhaseEvent(date.y, date.m, date.d, timezone);
+      const lpEvent = eventFinder.getLunarPhaseEvent(date.y, date.m, date.d, timezone);
+      const esEvent = eventFinder.getEquinoxSolsticeEvent(date.y, date.m, date.d, timezone);
 
       setSvgHref(this.moons[dayIndex], getMoonPhaseIcon(phase));
-      this.phaseTimes[dayIndex].text(event ? formatTime(event.eventTime, amPm) : '');
+      this.phaseTimes[dayIndex].text(lpEvent ? formatTime(lpEvent.eventTime, amPm) : '');
+      this.esTimes[dayIndex].text(esEvent ? (date.m === 3 || date.m === 9 ? 'E•' : 'S•') +
+          formatTime(esEvent.eventTime, amPm) : '');
     }
   }
 }

src/index.html

@@ -136,6 +136,7 @@
         <text id="day0-sunset" x="115" y="88" class="small-caption" text-anchor="middle">--:--</text>
         <image id="day0-moon" href="assets/empty.svg" x="110" y="89" width="10" height="10"/>
         <text id="day0-phase-time" x="115" y="101.75" class="small-caption" text-anchor="middle"></text>
+        <text id="day0-equisolstice" x="115" y="104.25" class="small-caption equisolstice" text-anchor="middle"></text>
 
         <text x="128" y="59" class="small-caption forecast-day-header" text-anchor="middle">Tomorrow</text>
         <image id="day1-icon" href="assets/unknown.svg" x="122" y="60" width="12" height="12"/>
@@ -146,6 +147,7 @@
         <text id="day1-sunset" x="128" y="88" class="small-caption" text-anchor="middle">--:--</text>
         <image id="day1-moon" href="assets/empty.svg" x="123" y="89" width="10" height="10"/>
         <text id="day1-phase-time" x="128" y="101.75" class="small-caption" text-anchor="middle"></text>
+        <text id="day1-equisolstice" x="128" y="104.25" class="small-caption equisolstice" text-anchor="middle"></text>
 
         <text id="day2-caption" x="141" y="59" class="small-caption forecast-day-header" text-anchor="middle">---</text>
         <image id="day2-icon" href="assets/unknown.svg" x="135" y="60" width="12" height="12"/>
@@ -156,6 +158,7 @@
         <text id="day2-sunset" x="141" y="88" class="small-caption" text-anchor="middle">--:--</text>
         <image id="day2-moon" href="assets/empty.svg" x="136" y="89" width="10" height="10"/>
         <text id="day2-phase-time" x="141" y="101.75" class="small-caption" text-anchor="middle"></text>
+        <text id="day2-equisolstice" x="141" y="104.25" class="small-caption equisolstice" text-anchor="middle"></text>
 
         <text id="day3-caption" x="154" y="59" class="small-caption forecast-day-header" text-anchor="middle">---</text>
         <image id="day3-icon" href="assets/unknown.svg" x="148" y="60" width="12" height="12"/>
@@ -166,6 +169,7 @@
         <text id="day3-sunset" x="154" y="88" class="small-caption" text-anchor="middle">--:--</text>
         <image id="day3-moon" href="assets/empty.svg" x="149" y="89" width="10" height="10"/>
         <text id="day3-phase-time" x="154" y="101.75" class="small-caption" text-anchor="middle"></text>
+        <text id="day3-equisolstice" x="154" y="104.25" class="small-caption equisolstice" text-anchor="middle"></text>
 
         <image id="current-icon" xlink:href="assets/sunrise.svg" href="assets/sunrise.svg" x="103" y="83.5" width="6" height="6"/>
       </svg>
@@ -256,7 +260,7 @@
           </div>
         </div>
         <div class="dialog-buttons">
-          <span class="version-number">2.0.3</span>
+          <span class="version-number">2.0.4</span>
           <button id="settings-reload">Reload</button>
           <span>&bull;</span>
           <button id="settings-cancel">Cancel</button>

src/styles.scss

@@ -612,3 +612,7 @@ input, button, select, textarea, optgroup, option { // Ignored by macOS Chrome f
 .meter-tint {
   filter: url(#meter-tint);
 }
+
+.equisolstice {
+  fill: #FA0;
+}