Further adjustment of theme. Documentation updates.

Author: kshetline

.vscode/settings.json

@@ -3,7 +3,9 @@
     "arya",
     "CREPUSCULUM",
     "EQUISOLSTICE",
+    "habs",
     "inputtext",
+    "Kyiv",
     "NOCTIS",
     "OCCASUS",
     "orloj",
@@ -14,6 +16,8 @@
     "radiobutton",
     "Rafie",
     "Recents",
+    "subzone",
+    "subzones",
     "Tošovský"
   ]
-}
+}

CHANGELOG.md

@@ -0,0 +1,8 @@
+## 1.0.1
+
+* Updated color theme for controls.
+* Minor documentation changes.
+
+## 1.0.0
+
+* Original release

README.md

@@ -1,27 +1,9 @@
-# PragueClock
+# Prague Astronomical Clock Simulator
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.5.
+This is a simulation of the world-famous Prague Astronomical Clock *(Pražský Orloj)*, a medieval astronomical clock first installed in 1410, and still running today (with periods of disrepair and various renovations over that span of time).
 
-## Development server
+The real, physical clock is designed to run at the particular latitude of Prague, which is about 50°N. This simulator, however, can be set for any location on Earth, and you can either show the current time, or set a particular time to see how that time would be displayed.
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+The positioning of the simulator’s clock hands, hour dial, sun, moon, and ecliptic wheel are done using your computer’s clock and modern astronomical calculations, rather than simulating the internal gearing of the mechanical clock.
 
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+The original SVG clock graphics and font used here were originally developed by Jan Tošovský, as found on [this website](https://drifted.in/horologium-app/).

src/app/app.component.html

@@ -30,7 +30,7 @@
     <i class="pi pi-caret-right" (click)="skipToEvent()"></i>
   </div>
   <div class="button-row">
-    <p-checkbox [(ngModel)]="isoFormat" [binary]="true" label="ISO input format"></p-checkbox>
+    <p-checkbox [(ngModel)]="isoFormat" [binary]="true" label="ISO time format"></p-checkbox>
     <p-checkbox [(ngModel)]="disableDst" [binary]="true" label="Disable DST on clock" (onChange)="updateTime(true)"></p-checkbox>
   </div>
   <tze-zone-selector [(ngModel)]="zone" [recents]="recentLocations" (clearItem)='clearItem($event)' (clearRecents)="clearRecents()"
@@ -47,8 +47,6 @@
   </div>
 </div>
 
-<div id="graphics-credit">Original SVG clock graphics by Jan Tošovský</div>
-
 <div id="svg-wrapper">
   <svg viewBox="0 0 600 600" xml:space="preserve">
     <defs>
@@ -168,6 +166,7 @@
           <path id="sunrisePath" [attr.d]="sunriseLabelPath" class="textPath"/>
           <path id="sunsetPath" [attr.d]="sunsetLabelPath" class="textPath"/>
           <path id="solNoctis" [attr.d]="solNoctisPath" class="textPath"/>
+          <!-- cspell:disable -->
           <text>
             <textPath xlink:href="#sunrisePath" [attr.startOffset]="southern ? '40%' : '54%'" class="eventText">
               <tspan [style.font-size]="riseSetFontSize">ɐɑɒɓɔ</tspan><!-- ORTUS -->
@@ -193,6 +192,7 @@
               <tspan dy="-2" [style.font-size]="'12px'">ⓈⓄⓁ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ⓃⓄⒸⓉⒾⓈ</tspan><!-- CREPUSCULUM -->
             </textPath>
           </text>
+          <!-- cspell:enable -->
         </g>
         <g id="time">
           <path id="timeTextPath" d="M0.0 -221.0C122.0 -221.0 221.0 -122.0 221.0 0.0C221.0 122.0 122.0 221.0 0.0 221.0C-122.0 221.0 -221.0 122.0 -221.0 0.0C-221.0 -122.0 -122.0 -221.0 0.0 -221.0" class="textPath"/>
@@ -609,5 +609,7 @@
   </svg>
 </div>
 
+<div id="graphics-credit">Original SVG clock graphics by Jan Tošovský</div>
+
 <p-toast position="center"></p-toast>
 <p-confirmDialog header="Change time"></p-confirmDialog>

src/app/app.component.spec.ts

@@ -15,11 +15,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('prague-clock app is running!');
-  });
 });

src/app/app.component.ts

@@ -3,7 +3,10 @@ import { ConfirmationService, MenuItem, MessageService } from 'primeng/api';
 import { abs, atan2_deg, atan_deg, cos_deg, floor, max, mod, PI, Point, sign, sin_deg, sqrt, tan_deg } from '@tubular/math';
 import { clone, getCssValue, isChromeOS, isEqual, isLikelyMobile, isSafari, processMillis, toMixedCase } from '@tubular/util';
 import { AngleStyle, DateTimeStyle, TimeEditorOptions } from '@tubular/ng-widgets';
-import { AstroEvent, EventFinder, FALL_EQUINOX, FIRST_QUARTER, FULL_MOON, LAST_QUARTER, MOON, NEW_MOON, RISE_EVENT, SET_EVENT, SkyObserver, SolarSystem, SPRING_EQUINOX, SUMMER_SOLSTICE, SUN, TRANSIT_EVENT, WINTER_SOLSTICE } from '@tubular/astronomy';
+import {
+  AstroEvent, EventFinder, FALL_EQUINOX, FIRST_QUARTER, FULL_MOON, LAST_QUARTER, MOON, NEW_MOON, RISE_EVENT, SET_EVENT,
+  SkyObserver, SolarSystem, SPRING_EQUINOX, SUMMER_SOLSTICE, SUN, TRANSIT_EVENT, WINTER_SOLSTICE
+} from '@tubular/astronomy';
 import ttime, { DateTime, utToTdt } from '@tubular/time';
 import julianDay = ttime.julianDay;
 import { TzsLocation } from '../timezone-selector/timezone-selector.component';
@@ -474,7 +477,7 @@ export class AppComponent implements OnInit {
     if (this.zoneFixTimeout)
       clearTimeout(this.zoneFixTimeout);
 
-    this._longitude = location.longitude;
+    this.longitude = location.longitude;
     this.latitude = location.latitude;
     this.placeName = location.name;
     this.updateRecentLocations(location);

src/assets/about.html

@@ -56,15 +56,16 @@ <h2>Animation</h2>
         and the clock will quickly progress through a series of times or locations.
     <h2>Graphic design</h2>
     <p>The original SVG clock graphics and font used here were originally developed by Jan Tošovský, as found on
-      this <a href="https://drifted.in/horologium-app/" target="_blank">web site</a>.</p>
+      <a href="https://drifted.in/horologium-app/" target="_blank">this website</a>.</p>
     <p>The color scheme here has been altered, the graphics have been modified to cover a full range of latitudes,
       and the graphics can now be updated quickly within a web browser, rather than relying on server-based updates.
       A central world map, similar to the one featured in the original Prague clock, has been added.</p>
 
     <h2>Differences between the simulator and the original Prague clock</h2>
     <ul>
       <li>The positioning of the simulator’s clock hands, hour dial, sun, moon, and ecliptic wheel are done using
-        modern astronomical calculations, rather than simulating the internal gearing of the physical clock.</li>
+        your computer’s clock and modern astronomical calculations, rather than simulating the internal gearing of
+        the mechanical clock.</li>
       <li>The original clock shows a map of the world in the center of the clock face, done using a
         <a href="https://en.wikipedia.org/wiki/Stereographic_projection" target="_blank">stereographic projection</a>,
         with the south pole toward the top, centered on Prague. Since this simulation can be set to any location on

src/styles.scss

@@ -64,6 +64,16 @@ body {
   }
 }
 
+input {
+  background-color: #121212;
+  color: #DDD;
+}
+
+::placeholder {
+  color: rgba(255, 255, 255, 0.33);
+  font-style: italic;
+}
+
 .p-checkbox .p-checkbox-box, .p-dropdown, .p-inputtext, .p-radiobutton .p-radiobutton-box {
   border-color: #555;
 }