380"
+ [class.extra-short]="lastHeight <= 380"
+ [class.collapsed]="collapsed">
+
380"
- [class.extra-short]="lastHeight <= 380"
- [class.collapsed]="collapsed">
-
-
-
-
-
-
- {{placeName}}
- No name provided
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{timeText}}
-
-
-
-
+
-
-
-
-
-
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 556ddad..41e1924 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,14 +1,22 @@
@import "../colors";
-:host {
+.wrapper {
box-sizing: border-box;
display: grid;
font-family: Horologium, NoEmojiAstronomy, sans-serif;
gap: 12px;
- grid-template-columns: 1fr auto;
+ grid-template-columns: 1fr 400px;
min-height: var(--mfvh);
place-items: center;
padding: 8px;
+
+ &.collapsed {
+ grid-template-columns: 1fr 160px;
+ }
+
+ &.narrow {
+ grid-template-columns: 1fr auto;
+ }
}
p-toast, p-confirmDialog {
@@ -25,6 +33,7 @@ p-toast, p-confirmDialog {
font: 14px Arial, sans-serif;
gap: 4px;
grid-area: 1 / 2;
+ justify-self: end;
min-height: 400px;
min-width: 400px;
padding: 1em 0.5em;
@@ -134,17 +143,40 @@ p-toast, p-confirmDialog {
}
i.pi-info-circle {
+ background: inherit;
bottom: 0;
cursor: pointer;
+ display: block;
padding: 0.5em;
position: absolute;
right: 0;
- opacity: 1;
- transition: opacity 0.5s ease-in-out;
&.collapsed {
- opacity: 0;
- pointer-events: none;
+ padding: 0.5em 0 0.5em 0.5em;
+ right: 1.5em;
+ top: 0;
+ width: 2em;
+ }
+ }
+
+ .time-text {
+ background: inherit;
+ bottom: 0;
+ display: none;
+ font: 14px Verdana, sans-serif;
+ font-variant-numeric: tabular-nums;
+ padding: 0.5em 0 0.5em 0.5em;
+ position: absolute;
+ right: 4em;
+ top: 0;
+ white-space: nowrap;
+
+ &.collapsed {
+ display: block;
+ }
+
+ &.track-time {
+ color: #0A0;
}
}
@@ -176,27 +208,6 @@ p-toast, p-confirmDialog {
margin: 0.5em 0;
}
- .time-text {
- background: inherit;
- bottom: 0;
- display: none;
- font: 14px Verdana, sans-serif;
- font-variant-numeric: tabular-nums;
- padding: 0.5em 0 0.5em 0.5em;
- position: absolute;
- right: 2em;
- top: 0;
- white-space: nowrap;
-
- &.collapsed {
- display: block;
- }
-
- &.track-time {
- color: #0A0;
- }
- }
-
#now {
margin: -4px 0;
}
@@ -235,11 +246,23 @@ svg {
&.controls-collapsed {
height: calc(max(var(--mfvh) - 16px, 320px));
width: calc(min(max(var(--mfvh) - 16px, 320px), calc(100vw - 28px)));
+
+ &.show-info-panel {
+ height: calc(min(max(var(--mfvh) - 16px, 320px), calc(100vw - 200px)));
+ width: calc(min(max(var(--mfvh) - 16px, 320px), calc(100vw - 200px)));
+ }
}
}
#svg-wrapper {
+ align-self: start;
+ justify-self: start;
position: relative;
+
+ &.wide {
+ align-self: center;
+ justify-self: center;
+ }
}
.svg-overlay {
@@ -250,12 +273,24 @@ svg {
top: 0;
}
+.info-panel-overlay {
+ font-size: calc(14px * var(--font-scaler));
+ position: static;
+
+ &.expanded {
+ bottom: 0.5em;
+ position: fixed;
+ right: 0.5em;
+ }
+}
+
.info-panel {
background-color: $controls-background;
border: 1px solid #999;
box-sizing: border-box;
color: $controls-text;
- font: 14px NoEmojiAstronomy, Arial, sans-serif;
+ font-size: 1em;
+ font-family: NoEmojiAstronomy, Arial, sans-serif;
max-width: 400px;
padding: 0.5em 2.5em 0.5em 0.5em;
position: relative;
@@ -274,19 +309,19 @@ svg {
.num {
color: #64B5F6;
- font: 12.5px NoEmojiAstronomy, Verdana, sans-serif;
- min-width: 52px;
+ font: 0.9em NoEmojiAstronomy, Verdana, sans-serif;
+ min-width: 4.2em;
white-space: nowrap;
}
.diff {
color: #F63;
- font: 12.5px Verdana, sans-serif;
+ font: 0.9em Verdana, sans-serif;
white-space: nowrap;
}
.wide {
- min-width: 125px;
+ min-width: 10.5em;
}
.recalibration {
@@ -308,12 +343,6 @@ svg {
}
}
-.svg-info-overlay {
- bottom: 8px;
- position: fixed;
- right: 8px;
-}
-
.below-control-panel {
position: absolute;
right: 0;
@@ -342,14 +371,9 @@ svg {
margin: -2px;
}
}
-
- .info-panel {
- margin: -20px 13px;
- transform: scale(0.9);
- }
}
-@media screen and (max-height: 820px) {
+@media screen and (max-height: 600px) {
.info-panel {
bottom: 8px;
left: unset;
@@ -368,22 +392,27 @@ svg {
margin: -4px -40px;
}
}
-
- .info-panel {
- margin: -40px 26px;
- transform: scale(0.8);
- }
}
@media screen and (orientation: portrait) {
- :host {
+ .wrapper {
grid-template-columns: auto;
- grid-template-rows: auto 1fr;
+ grid-template-rows: auto 1fr auto;
overflow: auto;
+
+ &.collapsed, &.narrow {
+ grid-template-columns: auto;
+ }
+ }
+
+ #svg-wrapper {
+ align-self: center;
+ justify-self: center;
}
.controls {
grid-area: unset;
+ justify-self: center;
&.collapsed {
margin-left: 0;
@@ -405,12 +434,17 @@ svg {
svg {
grid-area: unset;
- height: calc(min(calc(100vw - 16px), calc(var(--mfvh) - 428px)));
- width: calc(min(calc(100vw - 16px), calc(var(--mfvh) - 428px)));
+ height: calc(min(calc(100vw - 16px), calc(var(--mfvh) - 440px)));
+ width: calc(min(calc(100vw - 16px), calc(var(--mfvh) - 440px)));
&.controls-collapsed {
height: calc(max(min(var(--mfvh) - 28px - 2.25em, 100vw - 16px), 320px));
width: calc(max(min(var(--mfvh) - 28px - 2.25em, 100vw - 16px), 320px));
+
+ &.show-info-panel {
+ height: calc(max(min(var(--mfvh) - 40px - calc(260px * var(--font-scaler)) - 2.25em, 100vw - 16px), 320px));
+ width: calc(max(min(var(--mfvh) - 40px - calc(260px * var(--font-scaler)) - 2.25em, 100vw - 16px), 320px));
+ }
}
}
@@ -420,8 +454,17 @@ svg {
}
@media screen and (orientation: landscape) {
- .svg-info-overlay {
- display: none;
+ .info-panel-overlay {
+ bottom: 0.5em;
+ position: fixed;
+ right: 0.5em;
+ }
+}
+
+@media screen and (orientation: landscape) and (min-width: 740px) {
+ #svg-wrapper {
+ align-self: center;
+ justify-self: center;
}
}
@@ -808,7 +851,7 @@ svg {
}
.handSymbol {
- fill: #DCC393;
+ fill: #D6BD90;
}
.eclipticSymbol,
@@ -820,7 +863,7 @@ svg {
.sunBeamLargeSymbol,
.sunBeamSmallSymbol {
- fill: #DFC388;
+ fill: #D9BD88;
}
.baseCircle,
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 0b5f64e..5940724 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -2,7 +2,8 @@ import { Component, OnInit, ViewChild } from '@angular/core';
import { ConfirmationService, MenuItem, MessageService, PrimeNGConfig } from 'primeng/api';
import { abs, floor, max, min, mod, mod2 } from '@tubular/math';
import {
- clone, extendDelimited, forEach, getCssValue, isEqual, isLikelyMobile, isObject, isSafari, processMillis
+ clone, extendDelimited, forEach, getCssValue, isAndroid, isEqual, isIOS, isLikelyMobile, isMacOS, isObject, isSafari,
+ processMillis
} from '@tubular/util';
import { AngleStyle, DateTimeStyle, TimeEditorOptions } from '@tubular/ng-widgets';
import {
@@ -18,16 +19,18 @@ import { faForward, faPlay, faStop } from '@fortawesome/free-solid-svg-icons';
import { AdvancedOptionsComponent, Appearance, SettingsHolder, Timing }
from '../advanced-options/advanced-options.component';
import {
- adjustForEclipticWheel, BasicPositions, calculateBasicPositions, calculateMechanicalPositions, MILLIS_PER_DAY,
+ adjustForEclipticWheel, AngleTriplet, BasicPositions, calculateBasicPositions, calculateMechanicalPositions, MILLIS_PER_DAY,
solarSystem, ZeroAngles
} from 'src/math/math';
import { adjustGraphicsForLatitude, initSvgHost, sunlitMoonPath, SvgHost } from 'src/svg/svg';
+import { sizeChanges } from '../main';
const { DATE, DATETIME_LOCAL, julianDay, TIME } = ttime;
const RESUME_FILTERING_DELAY = 1000;
-const START_FILTERING_DELAY = 500;
-const STOP_FILTERING_DELAY = isSafari() ? 1000 : 3000;
+const SIMPLE_FILTER_IS_SLOW_TOO = isAndroid() || (isSafari() && isMacOS());
+const STOP_FILTERING_DELAY = SIMPLE_FILTER_IS_SLOW_TOO ? 1000 : 3000;
+const START_FILTERING_DELAY = SIMPLE_FILTER_IS_SLOW_TOO ? 1000 : 500;
const RECOMPUTED_WHEN_NEEDED: null = null;
enum EventType { EQUISOLSTICE, MOON_PHASE, RISE_SET }
@@ -176,6 +179,7 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
private playTimeBase: number;
private playTimeProcessBase: number;
private _realPositionMarkers = false;
+ private _showInfoPanel = false;
private sunsetA: AstroEvent = null;
private sunsetB: AstroEvent = null;
private _suppressOsKeyboard = false;
@@ -260,7 +264,6 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
saturnAngle = ZeroAngles;
showAllErrors = false;
showErrors = false;
- showInfoPanel = false;
showLanguageMenu = false;
showRecalibration = false;
siderealAngle = 0;
@@ -292,7 +295,8 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
}
get filterRelief(): string {
- return this.fasterGraphics && (!this.svgFilteringOn || this.playing) ? null : 'url("#filterRelief")';
+ return this.fasterGraphics && (!this.svgFilteringOn || this.playing) ?
+ (SIMPLE_FILTER_IS_SLOW_TOO ? null : 'url("#filterReliefSimple")') : 'url("#filterRelief")';
}
constructor(
@@ -304,7 +308,7 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
let settings: any;
- if (isLikelyMobile()) {
+ if (isLikelyMobile() || isIOS()) {
this.menuItems.push({ separator: true });
this.menuItems.push({ label: $localize`Suppress onscreen keyboard`, icon: 'pi pi-circle', id: 'sok',
command: (): boolean => this.suppressOsKeyboard = !this.suppressOsKeyboard });
@@ -326,6 +330,7 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
}
delete settings.hideMap;
+ delete settings.equatorialPositionMarkers;
}
catch {
settings = null;
@@ -369,6 +374,7 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
docElem.style.setProperty('--mfvh', height + 'px');
docElem.style.setProperty('--mvh', (height * 0.01) + 'px');
+ this.adjustFontScaling();
if (disallowScroll && (docElem.scrollTop !== 0 || docElem.scrollLeft !== 0)) {
docElem.scrollTo(0, 0);
@@ -382,24 +388,7 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
});
};
- let lastW = window.innerWidth;
- let lastH = window.innerHeight;
-
- const poll = (): void => {
- const w = window.innerWidth;
- const h = window.innerHeight;
- const disallowScroll = docElem.style.overflow === 'hidden';
-
- if (lastW !== w || lastH !== h || (disallowScroll && (docElem.scrollTop !== 0 || docElem.scrollLeft !== 0))) {
- lastW = w;
- lastH = h;
- doResize();
- }
-
- setTimeout(poll, 100);
- };
-
- poll();
+ sizeChanges.subscribe(() => doResize());
doResize();
setTimeout(() => document.getElementById('graphics-credit').style.opacity = '0', 15000);
@@ -461,6 +450,7 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
if ((document.activeElement as any)?.blur)
(document.activeElement as any).blur();
+ this.adjustFontScaling();
this.graphicsRateChangeCheck(true);
this.saveSettings();
}
@@ -471,6 +461,19 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
}
}
+ get showInfoPanel(): boolean { return this._showInfoPanel; }
+ set showInfoPanel(value: boolean) {
+ if (this._showInfoPanel !== value) {
+ this._showInfoPanel = value;
+
+ if (this.initDone && this.collapsed) {
+ this.adjustFontScaling();
+ this.graphicsRateChangeCheck(true);
+ this.saveSettings();
+ }
+ }
+ }
+
get appearance(): Appearance { return this._appearance; }
set appearance(value: Appearance) {
if (this.appearance !== value) {
@@ -516,6 +519,19 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
}
}
+ private adjustFontScaling(): void {
+ let fontScaler: number;
+
+ if (window.innerHeight > window.innerWidth)
+ fontScaler = max(min(window.innerHeight / 1100, 1), 0.75);
+ else if (this.collapsed && window.innerWidth > 1100)
+ fontScaler = max(min(window.innerWidth / 600, window.innerHeight / 500, 1), 0.75);
+ else
+ fontScaler = max(min((window.innerWidth - 500) / 600, (window.innerHeight - 400) / 400, 1), 0.75);
+
+ document.documentElement.style.setProperty('--font-scaler', fontScaler.toPrecision(3));
+ }
+
private clearTimingReferenceIfNeeded(): void {
if (this.timing !== Timing.MODERN)
this.timingReference = RECOMPUTED_WHEN_NEEDED;
@@ -975,7 +991,11 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
}
rotate(angle: number): string {
- return `rotate(${angle})`;
+ return `rotate(${angle * this.rotateSign})`;
+ }
+
+ reorient(angle: AngleTriplet): string {
+ return isSafari() ? null : `rotate(${(90 - angle.orig - angle.oe) * this.rotateSign})`;
}
sunlitMoonPath(): string {
@@ -1107,7 +1127,7 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
detail: $localize`Event outside of ${this.MIN_YEAR}-${this.MAX_YEAR} year range.` });
else {
this.time = evt.eventTime.utcMillis;
- this.messageService.add({ severity: 'info', summary: $localize`Event`, detail: eventText });
+ this.messageService.add({ severity: 'info', summary: $localize`Event`, detail: eventText, life: 1000 });
}
}
}
diff --git a/src/assets/AppleZodiac.ttf b/src/assets/AppleZodiac.ttf
new file mode 100644
index 0000000..3296598
Binary files /dev/null and b/src/assets/AppleZodiac.ttf differ
diff --git a/src/locales/messages.cs.xlf b/src/locales/messages.cs.xlf
index ca9be4f..3236443 100644
--- a/src/locales/messages.cs.xlf
+++ b/src/locales/messages.cs.xlf
@@ -130,12 +130,60 @@
39
+
+
+ Nebylo uvedeno žádné jméno
+
+ src/app/app.component.html
+ 13
+
+
+
+
+ Chcete-li čas upravit, zrušte zaškrtnutí políčka „Sledujte aktuální čas“.
+
+ src/app/app.component.html
+ 30
+
+
+
+
+ Formát času ISO
+
+ src/app/app.component.html
+ 42
+
+
+
+
+ Zakázat letní čas na orloji
+
+ src/app/app.component.html
+ 44
+
+
+
+
+ Sledujte aktuální čas
+
+ src/app/app.component.html
+ 50
+
+
+
+
+ Nyní
+
+ src/app/app.component.html
+ 51
+
+
Místní střední čas:
src/app/app.component.html
- 7
+ 612
@@ -143,7 +191,7 @@
Místní sluneční čas:
src/app/app.component.html
- 9
+ 614
@@ -151,7 +199,7 @@
Hvězdný čas:
src/app/app.component.html
- 11
+ 616
@@ -159,7 +207,7 @@
Staročeský čas:
src/app/app.component.html
- 13
+ 618
@@ -167,7 +215,7 @@
Východ/západ slunce
src/app/app.component.html
- 15
+ 620
@@ -175,7 +223,7 @@
Východ/západ Měsíce:
src/app/app.component.html
- 17
+ 622
@@ -183,7 +231,7 @@
Poslední virtuální rekalibrace:
src/app/app.component.html
- 21
+ 626
@@ -191,7 +239,7 @@
Skutečný
src/app/app.component.html
- 27
+ 632
@@ -199,7 +247,7 @@
Slunce λ
src/app/app.component.html
- 33
+ 638
@@ -207,7 +255,7 @@
minut
src/app/app.component.html
- 38
+ 643
@@ -215,7 +263,7 @@
Měsíc λ
src/app/app.component.html
- 42
+ 647
@@ -223,11 +271,11 @@
dní
src/app/app.component.html
- 47
+ 652
src/app/app.component.html
- 56
+ 661
@@ -235,55 +283,7 @@
Fáze Měsíce
src/app/app.component.html
- 51
-
-
-
-
- Nebylo uvedeno žádné jméno
-
- src/app/app.component.html
- 74
-
-
-
-
- Chcete-li čas upravit, zrušte zaškrtnutí políčka „Sledujte aktuální čas“.
-
- src/app/app.component.html
- 91
-
-
-
-
- Formát času ISO
-
- src/app/app.component.html
- 103
-
-
-
-
- Zakázat letní čas na orloji
-
- src/app/app.component.html
- 105
-
-
-
-
- Sledujte aktuální čas
-
- src/app/app.component.html
- 111
-
-
-
-
- Nyní
-
- src/app/app.component.html
- 112
+ 656
@@ -291,7 +291,7 @@
Originální grafika orloje SVG od Jana Tošovského
src/app/app.component.html
- 663
+ 668
@@ -299,7 +299,7 @@
Změňte čas
src/app/app.component.html
- 666
+ 671
@@ -307,7 +307,7 @@
Praha, CZE
src/app/app.component.ts
- 38
+ 41
@@ -315,7 +315,7 @@
Výchozí
src/app/app.component.ts
- 113
+ 116
@@ -323,7 +323,7 @@
↔ Rovnodennost/slunovrat
src/app/app.component.ts
- 191
+ 195
@@ -331,7 +331,7 @@
↔ Fáze Měsíce
src/app/app.component.ts
- 193
+ 197
@@ -339,7 +339,7 @@
↔ Východ/kulminace/západ slunce
src/app/app.component.ts
- 195
+ 199
@@ -347,7 +347,7 @@
Pokročilé možnosti...
src/app/app.component.ts
- 198
+ 202
@@ -355,7 +355,7 @@
Jazyk / Language
src/app/app.component.ts
- 202
+ 206
@@ -363,7 +363,7 @@
Kód na GitHubu
src/app/app.component.ts
- 206
+ 210
@@ -371,7 +371,7 @@
Stránky Českého spolku horologického
src/app/app.component.ts
- 208
+ 212
@@ -379,7 +379,7 @@
O skutečném orloji
src/app/app.component.ts
- 210
+ 214
@@ -387,7 +387,7 @@
https://cs.wikipedia.org/wiki/Staroměstský_orloj
src/app/app.component.ts
- 211
+ 215
Language-specific Wikipedia URL
@@ -396,7 +396,7 @@
O tomto simulátoru
src/app/app.component.ts
- 213
+ 217
@@ -404,7 +404,7 @@
Potlačit klávesnici na obrazovce
src/app/app.component.ts
- 309
+ 313
@@ -412,7 +412,7 @@
Ano
src/app/app.component.ts
- 345
+ 350
for dialog button
@@ -421,7 +421,7 @@
Ne
src/app/app.component.ts
- 346
+ 351
for dialog button
@@ -430,7 +430,7 @@
Vypnout "Sledujte aktuální čas", abyste mohli upravovat čas?
src/app/app.component.ts
- 990
+ 1010
@@ -438,7 +438,7 @@
Vypnout "Sledujte aktuální čas" a změnit čas?
src/app/app.component.ts
- 1065
+ 1085
@@ -446,11 +446,11 @@
Událos
src/app/app.component.ts
- 1106
+ 1126
src/app/app.component.ts
- 1110
+ 1130
@@ -458,7 +458,7 @@
Událost mimo rozsah let -.
src/app/app.component.ts
- 1107
+ 1127
@@ -466,7 +466,7 @@
Východ slunce
src/app/app.component.ts
- 1117
+ 1137
@@ -474,7 +474,7 @@
Západ slunce
src/app/app.component.ts
- 1119
+ 1139
@@ -482,7 +482,7 @@
Kulminace
src/app/app.component.ts
- 1121
+ 1141
@@ -490,7 +490,7 @@
Jarní rovnodennost
src/app/app.component.ts
- 1123
+ 1143
@@ -498,7 +498,7 @@
Letní slunovrat
src/app/app.component.ts
- 1125
+ 1145
@@ -506,7 +506,7 @@
Podzimní rovnodennost
src/app/app.component.ts
- 1127
+ 1147
@@ -514,7 +514,7 @@
Zimní slunovrat
src/app/app.component.ts
- 1129
+ 1149
@@ -522,7 +522,7 @@
Nový měsíc
src/app/app.component.ts
- 1131
+ 1151
@@ -530,7 +530,7 @@
První čtvrt měsíc*
src/app/app.component.ts
- 1133
+ 1153
@@ -538,7 +538,7 @@
Úplněk
src/app/app.component.ts
- 1135
+ 1155
@@ -546,7 +546,7 @@
Třetí čtvrt měsíce
src/app/app.component.ts
- 1137
+ 1157
@@ -766,4 +766,4 @@