mirror of
git://f0xx.org/android_cast
synced 2026-07-29 03:38:52 +03:00
next force snapshot
This commit is contained in:
Anton Afanasyeu
@@ -16,13 +16,22 @@ Browser → apps.f0xx.org (Gentoo FE, TLS)
|
||||
|
||||
On FE, hub and (if you fix it) crashes should both target **`http://artc0.intra.raptor.org:80`**, same as `location /`.
|
||||
|
||||
## 1. `index.html`
|
||||
## 1. `index.html` + hub assets
|
||||
|
||||
```bash
|
||||
cp .../android_cast/examples/app_hub/index.html \
|
||||
.../htdocs/apps/app/androidcast_project/index.html
|
||||
cp .../android_cast/examples/app_hub/hub.css \
|
||||
.../htdocs/apps/app/androidcast_project/hub.css
|
||||
cp .../android_cast/examples/app_hub/assets/overtime-01-alphabet.svg \
|
||||
.../htdocs/apps/app/androidcast_project/assets/
|
||||
# GA4 (optional): set measurementId in analytics.config.js before copy
|
||||
cp .../android_cast/examples/app_hub/assets/analytics.config.js \
|
||||
.../htdocs/apps/app/androidcast_project/assets/
|
||||
```
|
||||
|
||||
Crash console ships `analytics.js` via `deploy-to-be-mount.sh` (under `crashes/assets/js/`).
|
||||
|
||||
## 2. BE nginx
|
||||
|
||||
Edit **`/etc/nginx/conf.d/apps.conf`** on Alpine (sshfs: `tmp/BE_alpine/etc/nginx/...`).
|
||||
|
||||
@@ -19,3 +19,12 @@ Deploy copies/symlink under `.../androidcast_project/` on the VM. Background wat
|
||||
|
||||
See **[DEPLOY.md](DEPLOY.md)** — edit `listen 80` in `tmp/BE_alpine/etc/nginx/conf.d/apps.conf` using
|
||||
`examples/crash_reporter/backend/nginx.apps-port80.fragment`.
|
||||
|
||||
## Google Analytics (optional)
|
||||
|
||||
Shared loader: `../crash_reporter/backend/public/assets/js/analytics.js`
|
||||
|
||||
1. Hub: copy `assets/analytics.config.example.js` → `assets/analytics.config.js` and set `measurementId: 'G-…'`.
|
||||
2. Crash console: in `config/config.php` set `analytics.enabled` and `analytics.measurement_id`.
|
||||
|
||||
Tracks hub page views, nav card clicks, and crash-console views (`console_view` by `data-view`).
|
||||
|
||||
7
examples/app_hub/assets/analytics.config.example.js
Normal file
7
examples/app_hub/assets/analytics.config.example.js
Normal file
@@ -0,0 +1,7 @@
|
||||
/** Copy to analytics.config.js on deploy and set your GA4 measurement ID. */
|
||||
window.ANDROIDCAST_ANALYTICS = {
|
||||
measurementId: 'G-XXXXXXXXXX',
|
||||
platform: 'hub',
|
||||
basePath: '/app/androidcast_project',
|
||||
debug: false
|
||||
};
|
||||
7
examples/app_hub/assets/analytics.config.js
Normal file
7
examples/app_hub/assets/analytics.config.js
Normal file
@@ -0,0 +1,7 @@
|
||||
/** Hub GA4 config — set measurementId to enable (see analytics.config.example.js). */
|
||||
window.ANDROIDCAST_ANALYTICS = {
|
||||
measurementId: '',
|
||||
platform: 'hub',
|
||||
basePath: '/app/androidcast_project',
|
||||
debug: false
|
||||
};
|
||||
366
examples/app_hub/assets/build_lcd_alphabet.py
Normal file
366
examples/app_hub/assets/build_lcd_alphabet.py
Normal file
@@ -0,0 +1,366 @@
|
||||
#!/usr/bin/env python3
|
||||
"""Build full Overtime and Quartz 7-segment LCD SVG symbol sets."""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
from dataclasses import dataclass
|
||||
from pathlib import Path
|
||||
|
||||
# Segment indices: 0=top, 1=UL, 2=UR, 3=mid, 4=LL, 5=LR, 6=bottom
|
||||
PATTERNS: dict[str, list[int]] = {
|
||||
" ": [],
|
||||
"0": [0, 1, 2, 4, 5, 6],
|
||||
"1": [2, 5],
|
||||
"2": [0, 1, 3, 5, 6],
|
||||
"3": [0, 2, 3, 5, 6],
|
||||
"4": [1, 2, 3, 5],
|
||||
"5": [0, 2, 3, 5, 6],
|
||||
"6": [0, 2, 3, 4, 5, 6],
|
||||
"7": [0, 1, 2],
|
||||
"8": [0, 1, 2, 3, 4, 5, 6],
|
||||
"9": [0, 1, 2, 3, 5, 6],
|
||||
"A": [0, 1, 2, 3, 4, 5],
|
||||
"B": [0, 1, 2, 3, 5, 6],
|
||||
"C": [0, 1, 4, 6],
|
||||
"D": [1, 2, 3, 5, 6],
|
||||
"E": [0, 3, 4, 5, 6],
|
||||
"F": [0, 3, 4, 5],
|
||||
"G": [0, 2, 4, 5, 6],
|
||||
"H": [1, 2, 3, 4, 5],
|
||||
"I": [0, 6],
|
||||
"J": [1, 2, 4, 5, 6],
|
||||
"K": [1, 3, 4, 5],
|
||||
"L": [4, 5, 6],
|
||||
"M": [0, 1, 2, 4, 5],
|
||||
"N": [1, 2, 4, 5],
|
||||
"O": [0, 1, 2, 4, 5, 6],
|
||||
"P": [0, 1, 2, 3, 4],
|
||||
"Q": [0, 1, 2, 4, 5, 6],
|
||||
"R": [0, 1, 2, 3, 4, 5],
|
||||
"S": [0, 2, 3, 5, 6],
|
||||
"T": [0, 3, 6],
|
||||
"U": [1, 2, 4, 5, 6],
|
||||
"V": [1, 4, 5],
|
||||
"W": [1, 2, 4, 5, 6],
|
||||
"X": [1, 2, 4, 5],
|
||||
"Y": [1, 2, 3],
|
||||
"Z": [0, 1, 4, 6],
|
||||
}
|
||||
|
||||
EXTRA_RECTS: dict[str, list[tuple]] = {
|
||||
"M": [
|
||||
("7.1", "5", "2.6", "13.2", 'transform="rotate(28 8.4 11.6)"'),
|
||||
("14.3", "5", "2.6", "13.2", 'transform="rotate(-28 15.6 11.6)"'),
|
||||
],
|
||||
"N": [
|
||||
("6.5", "6", "2.4", "12", 'transform="rotate(32 7.7 12)"'),
|
||||
("14.8", "14", "2.4", "12", 'transform="rotate(32 16 20)"'),
|
||||
],
|
||||
"K": [
|
||||
("10", "4", "2.2", "11", 'transform="rotate(-30 11.1 9.5)"'),
|
||||
("10", "17", "2.2", "11", 'transform="rotate(30 11.1 22.5)"'),
|
||||
],
|
||||
"V": [
|
||||
("7", "17", "2.2", "12", 'transform="rotate(24 8.1 23)"'),
|
||||
("12", "17", "2.2", "12", 'transform="rotate(-24 13.1 23)"'),
|
||||
],
|
||||
"W": [
|
||||
("5", "17", "2", "11", 'transform="rotate(18 6 22.5)"'),
|
||||
("9.5", "17", "2", "11", 'transform="rotate(-18 10.5 22.5)"'),
|
||||
("14", "17", "2", "11", 'transform="rotate(18 15 22.5)"'),
|
||||
],
|
||||
"X": [
|
||||
("7", "5", "2.2", "11", 'transform="rotate(32 8.1 10.5)"'),
|
||||
("11", "16", "2.2", "11", 'transform="rotate(-32 12.1 21.5)"'),
|
||||
],
|
||||
"Q": [("14", "18", "2.2", "10", 'transform="rotate(38 15.1 23)"')],
|
||||
"R": [("12", "17", "2.2", "10", 'transform="rotate(38 13.1 22)"')],
|
||||
"/": [
|
||||
("13", "4", "2.2", "10", 'transform="rotate(52 14.1 9)"'),
|
||||
("5", "18", "2.2", "10", 'transform="rotate(52 6.1 23)"'),
|
||||
],
|
||||
":": [("4", "10", "4", "4"), ("4", "20", "4", "4")],
|
||||
"+": [("6", "8", "4", "16"), ("2", "14", "12", "4")],
|
||||
"-": [("2", "14", "12", "4")],
|
||||
}
|
||||
|
||||
# Hand-tuned Overtime Bold shapes (from hub digit geometry).
|
||||
# Hand-tuned glyphs from hub (do not regenerate numerics).
|
||||
OVERTIME_VERBATIM: dict[str, tuple[int, str]] = {
|
||||
"0": (
|
||||
20,
|
||||
'<rect x="3" y="1" width="14" height="3" rx="1"/><rect x="16" y="4" width="3" height="11" rx="1"/>'
|
||||
'<rect x="16" y="17" width="3" height="11" rx="1"/><rect x="3" y="28" width="14" height="3" rx="1"/>'
|
||||
'<rect x="1" y="17" width="3" height="11" rx="1"/><rect x="1" y="4" width="3" height="11" rx="1"/>',
|
||||
),
|
||||
"1": (20, '<rect x="16" y="4" width="3" height="11" rx="1"/><rect x="16" y="17" width="3" height="11" rx="1"/>'),
|
||||
"2": (
|
||||
20,
|
||||
'<rect x="3" y="1" width="14" height="3" rx="1"/><rect x="1" y="4" width="3" height="11" rx="1"/>'
|
||||
'<rect x="3" y="15" width="14" height="3" rx="1"/><rect x="16" y="17" width="3" height="11" rx="1"/>'
|
||||
'<rect x="3" y="28" width="14" height="3" rx="1"/>',
|
||||
),
|
||||
"3": (
|
||||
20,
|
||||
'<rect x="3" y="1" width="14" height="3" rx="1"/><rect x="16" y="4" width="3" height="11" rx="1"/>'
|
||||
'<rect x="3" y="15" width="14" height="3" rx="1"/><rect x="16" y="17" width="3" height="11" rx="1"/>'
|
||||
'<rect x="3" y="28" width="14" height="3" rx="1"/>',
|
||||
),
|
||||
"4": (
|
||||
20,
|
||||
'<rect x="1" y="4" width="3" height="11" rx="1"/><rect x="3" y="15" width="14" height="3" rx="1"/>'
|
||||
'<rect x="16" y="4" width="3" height="11" rx="1"/><rect x="16" y="17" width="3" height="11" rx="1"/>',
|
||||
),
|
||||
"5": (
|
||||
20,
|
||||
'<rect x="3" y="1" width="14" height="3" rx="1"/><rect x="1" y="4" width="3" height="11" rx="1"/>'
|
||||
'<rect x="3" y="15" width="14" height="3" rx="1"/><rect x="16" y="17" width="3" height="11" rx="1"/>'
|
||||
'<rect x="3" y="28" width="14" height="3" rx="1"/>',
|
||||
),
|
||||
"6": (
|
||||
20,
|
||||
'<rect x="3" y="1" width="14" height="3" rx="1"/><rect x="1" y="4" width="3" height="11" rx="1"/>'
|
||||
'<rect x="3" y="15" width="14" height="3" rx="1"/><rect x="1" y="17" width="3" height="11" rx="1"/>'
|
||||
'<rect x="16" y="17" width="3" height="11" rx="1"/><rect x="3" y="28" width="14" height="3" rx="1"/>',
|
||||
),
|
||||
"7": (
|
||||
20,
|
||||
'<rect x="3" y="1" width="14" height="3" rx="1"/><rect x="16" y="4" width="3" height="11" rx="1"/>'
|
||||
'<rect x="16" y="17" width="3" height="11" rx="1"/>',
|
||||
),
|
||||
"8": (
|
||||
20,
|
||||
'<rect x="3" y="1" width="14" height="3" rx="1"/><rect x="1" y="4" width="3" height="11" rx="1"/>'
|
||||
'<rect x="16" y="4" width="3" height="11" rx="1"/><rect x="3" y="15" width="14" height="3" rx="1"/>'
|
||||
'<rect x="1" y="17" width="3" height="11" rx="1"/><rect x="16" y="17" width="3" height="11" rx="1"/>'
|
||||
'<rect x="3" y="28" width="14" height="3" rx="1"/>',
|
||||
),
|
||||
"9": (
|
||||
20,
|
||||
'<rect x="3" y="1" width="14" height="3" rx="1"/><rect x="1" y="4" width="3" height="11" rx="1"/>'
|
||||
'<rect x="3" y="15" width="14" height="3" rx="1"/><rect x="16" y="4" width="3" height="11" rx="1"/>'
|
||||
'<rect x="16" y="17" width="3" height="11" rx="1"/><rect x="3" y="28" width="14" height="3" rx="1"/>',
|
||||
),
|
||||
":": (12, '<rect x="4" y="10" width="4" height="4" rx="1"/><rect x="4" y="20" width="4" height="4" rx="1"/>'),
|
||||
"+": (16, '<rect x="6" y="8" width="4" height="16" rx="1"/><rect x="2" y="14" width="12" height="4" rx="1"/>'),
|
||||
"-": (16, '<rect x="2" y="14" width="12" height="4" rx="1"/>'),
|
||||
" ": (8, ""),
|
||||
"/": (
|
||||
14,
|
||||
'<rect x="11" y="5" width="2.2" height="10" rx="1" transform="rotate(52 12.1 10)"/>'
|
||||
'<rect x="4" y="19" width="2.2" height="10" rx="1" transform="rotate(52 5.1 24)"/>',
|
||||
),
|
||||
}
|
||||
|
||||
OVERTIME_CUSTOM: dict[str, tuple[int, str]] = {
|
||||
"G": (
|
||||
20,
|
||||
'<rect x="3" y="1" width="14" height="3" rx="1"/><rect x="1" y="4" width="3" height="11" rx="1"/>'
|
||||
'<rect x="1" y="17" width="3" height="11" rx="1"/><rect x="3" y="28" width="14" height="3" rx="1"/>'
|
||||
'<rect x="16" y="17" width="3" height="11" rx="1"/><rect x="10" y="15" width="9" height="3" rx="1"/>',
|
||||
),
|
||||
"M": (
|
||||
24,
|
||||
'<rect x="1" y="4" width="3" height="24" rx="1"/><rect x="20" y="4" width="3" height="24" rx="1"/>'
|
||||
'<rect x="7.1" y="5" width="2.6" height="13.2" rx="1" transform="rotate(28 8.4 11.6)"/>'
|
||||
'<rect x="14.3" y="5" width="2.6" height="13.2" rx="1" transform="rotate(-28 15.6 11.6)"/>',
|
||||
),
|
||||
"T": (
|
||||
20,
|
||||
'<rect x="3" y="1" width="14" height="3" rx="1"/><rect x="8" y="4" width="4" height="24" rx="1"/>',
|
||||
),
|
||||
"Y": (
|
||||
20,
|
||||
'<rect x="1" y="4" width="3" height="11" rx="1"/><rect x="16" y="4" width="3" height="11" rx="1"/>'
|
||||
'<rect x="8" y="15" width="4" height="14" rx="1"/>',
|
||||
),
|
||||
}
|
||||
|
||||
|
||||
@dataclass(frozen=True)
|
||||
class FontStyle:
|
||||
prefix: str
|
||||
outfile: str
|
||||
comment: str
|
||||
h_pad: float
|
||||
top_y: float
|
||||
mid_y: float
|
||||
bot_y: float
|
||||
seg_h: float
|
||||
v_w: float
|
||||
v_h: float
|
||||
left_x: float
|
||||
right_x: float
|
||||
seg_w: float
|
||||
|
||||
|
||||
FONTS: dict[str, FontStyle] = {
|
||||
"overtime": FontStyle(
|
||||
prefix="ot",
|
||||
outfile="overtime-01-alphabet.svg",
|
||||
comment="Overtime Bold style 7-segment LCD (full alphabet)",
|
||||
h_pad=3.0,
|
||||
top_y=1.0,
|
||||
mid_y=15.0,
|
||||
bot_y=28.0,
|
||||
seg_h=3.0,
|
||||
v_w=3.0,
|
||||
v_h=11.0,
|
||||
left_x=1.0,
|
||||
right_x=16.0,
|
||||
seg_w=14.0,
|
||||
),
|
||||
"quartz": FontStyle(
|
||||
prefix="qz",
|
||||
outfile="quartz-alphabet.svg",
|
||||
comment="Quartz (TS) style 7-segment LCD (full alphabet)",
|
||||
h_pad=0.0,
|
||||
top_y=0.0,
|
||||
mid_y=0.0,
|
||||
bot_y=0.0,
|
||||
seg_h=0.0,
|
||||
v_w=0.0,
|
||||
v_h=0.0,
|
||||
left_x=0.0,
|
||||
right_x=0.0,
|
||||
seg_w=0.0,
|
||||
),
|
||||
}
|
||||
|
||||
|
||||
def _rect(x, y, width, height, extra: str = "") -> str:
|
||||
attrs = f'x="{x}" y="{y}" width="{width}" height="{height}" rx="1"'
|
||||
if extra:
|
||||
return f"<rect {attrs} {extra}/>"
|
||||
return f"<rect {attrs}/>"
|
||||
|
||||
|
||||
def _seg_defs(style: FontStyle, w: float, h: float) -> list[tuple[float, float, float, float]]:
|
||||
if style.prefix == "qz":
|
||||
h_pad = max(1.0, w * 0.12)
|
||||
top_y = max(1.0, h * 0.04)
|
||||
mid_y = h * 0.47
|
||||
bot_y = h * 0.86
|
||||
seg_w = max(6.0, w - h_pad * 2)
|
||||
seg_h = max(2.0, h * 0.09)
|
||||
v_w = max(2.0, w * 0.14)
|
||||
v_h = max(6.0, h * 0.33)
|
||||
left_x = max(1.0, h_pad * 0.45)
|
||||
right_x = max(left_x + v_w + 1, w - left_x - v_w)
|
||||
upper_y = top_y + seg_h
|
||||
lower_y = mid_y + seg_h * 0.6
|
||||
return [
|
||||
(h_pad, top_y, seg_w, seg_h),
|
||||
(left_x, upper_y, v_w, v_h),
|
||||
(right_x, upper_y, v_w, v_h),
|
||||
(h_pad, mid_y, seg_w, seg_h),
|
||||
(left_x, lower_y, v_w, v_h),
|
||||
(right_x, lower_y, v_w, v_h),
|
||||
(h_pad, bot_y, seg_w, seg_h),
|
||||
]
|
||||
|
||||
upper_y = style.top_y + style.seg_h
|
||||
lower_y = 17.0
|
||||
return [
|
||||
(style.h_pad, style.top_y, style.seg_w, style.seg_h),
|
||||
(style.left_x, upper_y, style.v_w, style.v_h),
|
||||
(style.right_x, upper_y, style.v_w, style.v_h),
|
||||
(style.h_pad, style.mid_y, style.seg_w, style.seg_h),
|
||||
(style.left_x, lower_y, style.v_w, style.v_h),
|
||||
(style.right_x, lower_y, style.v_w, style.v_h),
|
||||
(style.h_pad, style.bot_y, style.seg_w, style.seg_h),
|
||||
]
|
||||
|
||||
|
||||
def _symbol_id(prefix: str, ch: str) -> str:
|
||||
if ch == " ":
|
||||
return f"{prefix}-space"
|
||||
if ch == ":":
|
||||
return f"{prefix}-colon"
|
||||
if ch == "+":
|
||||
return f"{prefix}-plus"
|
||||
if ch == "-":
|
||||
return f"{prefix}-minus"
|
||||
if ch == "/":
|
||||
return f"{prefix}-slash"
|
||||
if len(ch) == 1 and "0" <= ch <= "9":
|
||||
return f"{prefix}-{ch}"
|
||||
if len(ch) == 1 and "A" <= ch <= "Z":
|
||||
return f"{prefix}-{ch}"
|
||||
return f"{prefix}-u{ord(ch):04x}"
|
||||
|
||||
|
||||
def _symbol_body(style: FontStyle, ch: str, width: int) -> str:
|
||||
if style.prefix == "ot" and ch in OVERTIME_VERBATIM:
|
||||
_, body = OVERTIME_VERBATIM[ch]
|
||||
return body
|
||||
if style.prefix == "ot" and ch in OVERTIME_CUSTOM:
|
||||
_, body = OVERTIME_CUSTOM[ch]
|
||||
return body
|
||||
|
||||
h = 32.0
|
||||
w = float(width)
|
||||
segs = PATTERNS.get(ch, [])
|
||||
parts: list[str] = []
|
||||
defs = _seg_defs(style, w, h)
|
||||
for idx in segs:
|
||||
if idx < 7:
|
||||
x, y, rw, rh = defs[idx]
|
||||
parts.append(_rect(f"{x:.2f}", f"{y:.2f}", f"{rw:.2f}", f"{rh:.2f}"))
|
||||
for item in EXTRA_RECTS.get(ch, []):
|
||||
if len(item) == 4:
|
||||
parts.append(_rect(*item))
|
||||
else:
|
||||
parts.append(_rect(item[0], item[1], item[2], item[3], item[4]))
|
||||
return "".join(parts)
|
||||
|
||||
|
||||
def _char_width(ch: str) -> int:
|
||||
if ch in "MWKNQRX":
|
||||
return 24
|
||||
if ch == ":":
|
||||
return 12
|
||||
if ch in "+-":
|
||||
return 16
|
||||
if ch == "/":
|
||||
return 14
|
||||
if ch == " ":
|
||||
return 8
|
||||
if ch in OVERTIME_VERBATIM:
|
||||
return OVERTIME_VERBATIM[ch][0]
|
||||
if ch in OVERTIME_CUSTOM:
|
||||
return OVERTIME_CUSTOM[ch][0]
|
||||
return 20
|
||||
|
||||
|
||||
def build_font(style: FontStyle, out_dir: Path) -> None:
|
||||
chars = (
|
||||
[" "] + [str(d) for d in range(10)] + [chr(c) for c in range(ord("A"), ord("Z") + 1)]
|
||||
+ [":", "+", "-", "/"]
|
||||
)
|
||||
lines = [
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" '
|
||||
'style="position:absolute;width:0;height:0;overflow:hidden">',
|
||||
f" <!-- {style.comment} -->",
|
||||
" <defs>",
|
||||
]
|
||||
for ch in chars:
|
||||
width = _char_width(ch)
|
||||
sid = _symbol_id(style.prefix, ch)
|
||||
body = _symbol_body(style, ch, width)
|
||||
lines.append(f' <symbol id="{sid}" viewBox="0 0 {width} 32">{body}</symbol>')
|
||||
lines.append(" </defs>")
|
||||
lines.append("</svg>")
|
||||
out_path = out_dir / style.outfile
|
||||
out_path.write_text("\n".join(lines) + "\n", encoding="utf-8")
|
||||
print(f"Wrote {out_path} ({len(chars)} symbols)")
|
||||
|
||||
|
||||
def main() -> None:
|
||||
out_dir = Path(__file__).resolve().parent
|
||||
for style in FONTS.values():
|
||||
build_font(style, out_dir)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
195
examples/app_hub/assets/build_quartz_alphabet.py
Normal file
195
examples/app_hub/assets/build_quartz_alphabet.py
Normal file
@@ -0,0 +1,195 @@
|
||||
#!/usr/bin/env python3
|
||||
"""Generate Quartz-style 7-segment LCD symbol set for hub clock rows."""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
# Segment indices: 0=top, 1=upper-left, 2=upper-right, 3=mid, 4=lower-left, 5=lower-right, 6=bottom
|
||||
PATTERNS: dict[str, list[int]] = {
|
||||
" ": [],
|
||||
"0": [0, 1, 2, 4, 5, 6],
|
||||
"1": [2, 5],
|
||||
"2": [0, 1, 3, 4, 6],
|
||||
"3": [0, 1, 2, 3, 6],
|
||||
"4": [1, 2, 3, 5],
|
||||
"5": [0, 2, 3, 5, 6],
|
||||
"6": [0, 2, 3, 4, 5, 6],
|
||||
"7": [0, 1, 2],
|
||||
"8": [0, 1, 2, 3, 4, 5, 6],
|
||||
"9": [0, 1, 2, 3, 5, 6],
|
||||
"A": [0, 1, 2, 3, 4, 5],
|
||||
"B": [0, 1, 2, 3, 5, 6],
|
||||
"C": [0, 1, 4, 6],
|
||||
"D": [1, 2, 3, 5, 6],
|
||||
"E": [0, 3, 4, 5, 6],
|
||||
"F": [0, 3, 4, 5],
|
||||
"G": [0, 2, 4, 5, 6],
|
||||
"H": [1, 2, 3, 4, 5],
|
||||
"I": [0, 6],
|
||||
"J": [1, 2, 4, 5, 6],
|
||||
"K": [1, 3, 4, 5],
|
||||
"L": [4, 5, 6],
|
||||
"M": [0, 1, 2, 4, 5],
|
||||
"N": [1, 2, 4, 5],
|
||||
"O": [0, 1, 2, 4, 5, 6],
|
||||
"P": [0, 1, 2, 3, 4],
|
||||
"Q": [0, 1, 2, 4, 5, 6],
|
||||
"R": [0, 1, 2, 3, 4, 5],
|
||||
"S": [0, 2, 3, 5, 6],
|
||||
"T": [0, 3, 6],
|
||||
"U": [1, 2, 4, 5, 6],
|
||||
"V": [1, 4, 5],
|
||||
"W": [1, 2, 4, 5, 6],
|
||||
"X": [1, 2, 4, 5],
|
||||
"Y": [2, 3, 5, 6],
|
||||
"Z": [0, 1, 4, 6],
|
||||
":": [10, 11],
|
||||
"+": [12, 13],
|
||||
"-": [14],
|
||||
"/": [15, 16],
|
||||
}
|
||||
|
||||
EXTRA_RECTS: dict[str, list[tuple]] = {
|
||||
"M": [
|
||||
("7.1", "5", "2.6", "13.2", 'transform="rotate(28 8.4 11.6)"'),
|
||||
("14.3", "5", "2.6", "13.2", 'transform="rotate(-28 15.6 11.6)"'),
|
||||
],
|
||||
"N": [
|
||||
("6.5", "6", "2.4", "12", 'transform="rotate(32 7.7 12)"'),
|
||||
("14.8", "14", "2.4", "12", 'transform="rotate(32 16 20)"'),
|
||||
],
|
||||
"K": [
|
||||
("10", "4", "2.2", "11", 'transform="rotate(-30 11.1 9.5)"'),
|
||||
("10", "17", "2.2", "11", 'transform="rotate(30 11.1 22.5)"'),
|
||||
],
|
||||
"V": [
|
||||
("7", "17", "2.2", "12", 'transform="rotate(24 8.1 23)"'),
|
||||
("12", "17", "2.2", "12", 'transform="rotate(-24 13.1 23)"'),
|
||||
],
|
||||
"W": [
|
||||
("5", "17", "2", "11", 'transform="rotate(18 6 22.5)"'),
|
||||
("9.5", "17", "2", "11", 'transform="rotate(-18 10.5 22.5)"'),
|
||||
("14", "17", "2", "11", 'transform="rotate(18 15 22.5)"'),
|
||||
],
|
||||
"X": [
|
||||
("7", "5", "2.2", "11", 'transform="rotate(32 8.1 10.5)"'),
|
||||
("11", "16", "2.2", "11", 'transform="rotate(-32 12.1 21.5)"'),
|
||||
],
|
||||
"Q": [
|
||||
("14", "18", "2.2", "10", 'transform="rotate(38 15.1 23)"'),
|
||||
],
|
||||
"R": [
|
||||
("12", "17", "2.2", "10", 'transform="rotate(38 13.1 22)"'),
|
||||
],
|
||||
"/": [
|
||||
("13", "4", "2.2", "10", 'transform="rotate(52 14.1 9)"'),
|
||||
("5", "18", "2.2", "10", 'transform="rotate(52 6.1 23)"'),
|
||||
],
|
||||
":": [
|
||||
("4", "10", "4", "4"),
|
||||
("4", "20", "4", "4"),
|
||||
],
|
||||
"+": [
|
||||
("6", "8", "4", "16"),
|
||||
("2", "14", "12", "4"),
|
||||
],
|
||||
"-": [
|
||||
("2", "14", "12", "4"),
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
def _seg_defs(w: float, h: float) -> list[tuple[float, float, float, float]]:
|
||||
h_pad = max(1.0, w * 0.12)
|
||||
top_y = max(1.0, h * 0.04)
|
||||
mid_y = h * 0.47
|
||||
bot_y = h * 0.86
|
||||
seg_w = max(6.0, w - h_pad * 2)
|
||||
seg_h = max(2.0, h * 0.09)
|
||||
v_w = max(2.0, w * 0.14)
|
||||
v_h = max(6.0, h * 0.33)
|
||||
left_x = max(1.0, h_pad * 0.45)
|
||||
right_x = max(left_x + v_w + 1, w - left_x - v_w)
|
||||
upper_y = top_y + seg_h
|
||||
lower_y = mid_y + seg_h * 0.6
|
||||
return [
|
||||
(h_pad, top_y, seg_w, seg_h),
|
||||
(left_x, upper_y, v_w, v_h),
|
||||
(right_x, upper_y, v_w, v_h),
|
||||
(h_pad, mid_y, seg_w, seg_h),
|
||||
(left_x, lower_y, v_w, v_h),
|
||||
(right_x, lower_y, v_w, v_h),
|
||||
(h_pad, bot_y, seg_w, seg_h),
|
||||
]
|
||||
|
||||
|
||||
def _rect(x, y, width, height, extra: str = "") -> str:
|
||||
attrs = f'x="{x}" y="{y}" width="{width}" height="{height}" rx="1"'
|
||||
if extra:
|
||||
return f"<rect {attrs} {extra}/>"
|
||||
return f"<rect {attrs}/>"
|
||||
|
||||
|
||||
def symbol_body(ch: str, width: int = 20) -> str:
|
||||
h = 32.0
|
||||
w = float(width)
|
||||
segs = PATTERNS.get(ch, [])
|
||||
parts: list[str] = []
|
||||
defs = _seg_defs(w, h)
|
||||
for idx in segs:
|
||||
if idx < 7:
|
||||
x, y, rw, rh = defs[idx]
|
||||
parts.append(_rect(f"{x:.2f}", f"{y:.2f}", f"{rw:.2f}", f"{rh:.2f}"))
|
||||
for item in EXTRA_RECTS.get(ch, []):
|
||||
if len(item) == 4:
|
||||
parts.append(_rect(*item))
|
||||
else:
|
||||
parts.append(_rect(item[0], item[1], item[2], item[3], item[4]))
|
||||
return "".join(parts)
|
||||
|
||||
|
||||
def symbol_id(ch: str) -> str:
|
||||
if ch == " ":
|
||||
return "qz-space"
|
||||
if ch == ":":
|
||||
return "qz-colon"
|
||||
if ch == "+":
|
||||
return "qz-plus"
|
||||
if ch == "-":
|
||||
return "qz-minus"
|
||||
if ch == "/":
|
||||
return "qz-slash"
|
||||
if len(ch) == 1 and "0" <= ch <= "9":
|
||||
return f"qz-{ch}"
|
||||
if len(ch) == 1 and "A" <= ch <= "Z":
|
||||
return f"qz-{ch}"
|
||||
return f"qz-u{ord(ch):04x}"
|
||||
|
||||
|
||||
def main() -> None:
|
||||
chars = (
|
||||
[" "] + [str(d) for d in range(10)] + [chr(c) for c in range(ord("A"), ord("Z") + 1)]
|
||||
+ [":", "+", "-", "/"]
|
||||
)
|
||||
wide = set("MWKNQRX")
|
||||
lines = [
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" '
|
||||
'style="position:absolute;width:0;height:0;overflow:hidden">',
|
||||
" <!-- Quartz (TS) style 7-segment LCD glyphs for hub timezone/date rows -->",
|
||||
" <defs>",
|
||||
]
|
||||
for ch in chars:
|
||||
width = 24 if ch in wide else (12 if ch == ":" else (16 if ch in "+-" else (14 if ch == "/" else (8 if ch == " " else 20))))
|
||||
sid = symbol_id(ch)
|
||||
body = symbol_body(ch, width)
|
||||
lines.append(f' <symbol id="{sid}" viewBox="0 0 {width} 32">{body}</symbol>')
|
||||
lines.append(" </defs>")
|
||||
lines.append("</svg>")
|
||||
out = "\n".join(lines) + "\n"
|
||||
path = __file__.replace("build_quartz_alphabet.py", "quartz-alphabet.svg")
|
||||
with open(path, "w", encoding="utf-8") as fh:
|
||||
fh.write(out)
|
||||
print(f"Wrote {path} ({len(chars)} symbols)")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
@@ -1,9 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden">
|
||||
<!-- Overtime 01 alphabet: 7-segment LCD glyphs for hub primary clock -->
|
||||
<!-- Overtime Bold style 7-segment LCD (full alphabet) -->
|
||||
<defs>
|
||||
<symbol id="ot-space" viewBox="0 0 8 32"></symbol>
|
||||
<symbol id="ot-0" viewBox="0 0 20 32"><rect x="3" y="1" width="14" height="3" rx="1"/><rect x="16" y="4" width="3" height="11" rx="1"/><rect x="16" y="17" width="3" height="11" rx="1"/><rect x="3" y="28" width="14" height="3" rx="1"/><rect x="1" y="17" width="3" height="11" rx="1"/><rect x="1" y="4" width="3" height="11" rx="1"/></symbol>
|
||||
<symbol id="ot-1" viewBox="0 0 20 32"><rect x="16" y="4" width="3" height="11" rx="1"/><rect x="16" y="17" width="3" height="11" rx="1"/></symbol>
|
||||
<symbol id="ot-2" viewBox="0 0 20 32"><rect x="3" y="1" width="14" height="3" rx="1"/><rect x="16" y="4" width="3" height="11" rx="1"/><rect x="3" y="15" width="14" height="3" rx="1"/><rect x="1" y="17" width="3" height="11" rx="1"/><rect x="3" y="28" width="14" height="3" rx="1"/></symbol>
|
||||
<symbol id="ot-2" viewBox="0 0 20 32"><rect x="3" y="1" width="14" height="3" rx="1"/><rect x="1" y="4" width="3" height="11" rx="1"/><rect x="3" y="15" width="14" height="3" rx="1"/><rect x="16" y="17" width="3" height="11" rx="1"/><rect x="3" y="28" width="14" height="3" rx="1"/></symbol>
|
||||
<symbol id="ot-3" viewBox="0 0 20 32"><rect x="3" y="1" width="14" height="3" rx="1"/><rect x="16" y="4" width="3" height="11" rx="1"/><rect x="3" y="15" width="14" height="3" rx="1"/><rect x="16" y="17" width="3" height="11" rx="1"/><rect x="3" y="28" width="14" height="3" rx="1"/></symbol>
|
||||
<symbol id="ot-4" viewBox="0 0 20 32"><rect x="1" y="4" width="3" height="11" rx="1"/><rect x="3" y="15" width="14" height="3" rx="1"/><rect x="16" y="4" width="3" height="11" rx="1"/><rect x="16" y="17" width="3" height="11" rx="1"/></symbol>
|
||||
<symbol id="ot-5" viewBox="0 0 20 32"><rect x="3" y="1" width="14" height="3" rx="1"/><rect x="1" y="4" width="3" height="11" rx="1"/><rect x="3" y="15" width="14" height="3" rx="1"/><rect x="16" y="17" width="3" height="11" rx="1"/><rect x="3" y="28" width="14" height="3" rx="1"/></symbol>
|
||||
@@ -11,12 +12,35 @@
|
||||
<symbol id="ot-7" viewBox="0 0 20 32"><rect x="3" y="1" width="14" height="3" rx="1"/><rect x="16" y="4" width="3" height="11" rx="1"/><rect x="16" y="17" width="3" height="11" rx="1"/></symbol>
|
||||
<symbol id="ot-8" viewBox="0 0 20 32"><rect x="3" y="1" width="14" height="3" rx="1"/><rect x="1" y="4" width="3" height="11" rx="1"/><rect x="16" y="4" width="3" height="11" rx="1"/><rect x="3" y="15" width="14" height="3" rx="1"/><rect x="1" y="17" width="3" height="11" rx="1"/><rect x="16" y="17" width="3" height="11" rx="1"/><rect x="3" y="28" width="14" height="3" rx="1"/></symbol>
|
||||
<symbol id="ot-9" viewBox="0 0 20 32"><rect x="3" y="1" width="14" height="3" rx="1"/><rect x="1" y="4" width="3" height="11" rx="1"/><rect x="3" y="15" width="14" height="3" rx="1"/><rect x="16" y="4" width="3" height="11" rx="1"/><rect x="16" y="17" width="3" height="11" rx="1"/><rect x="3" y="28" width="14" height="3" rx="1"/></symbol>
|
||||
<symbol id="ot-A" viewBox="0 0 20 32"><rect x="3.00" y="1.00" width="14.00" height="3.00" rx="1"/><rect x="1.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="15.00" width="14.00" height="3.00" rx="1"/><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/></symbol>
|
||||
<symbol id="ot-B" viewBox="0 0 20 32"><rect x="3.00" y="1.00" width="14.00" height="3.00" rx="1"/><rect x="1.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="15.00" width="14.00" height="3.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="28.00" width="14.00" height="3.00" rx="1"/></symbol>
|
||||
<symbol id="ot-C" viewBox="0 0 20 32"><rect x="3.00" y="1.00" width="14.00" height="3.00" rx="1"/><rect x="1.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="28.00" width="14.00" height="3.00" rx="1"/></symbol>
|
||||
<symbol id="ot-D" viewBox="0 0 20 32"><rect x="1.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="15.00" width="14.00" height="3.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="28.00" width="14.00" height="3.00" rx="1"/></symbol>
|
||||
<symbol id="ot-E" viewBox="0 0 20 32"><rect x="3.00" y="1.00" width="14.00" height="3.00" rx="1"/><rect x="3.00" y="15.00" width="14.00" height="3.00" rx="1"/><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="28.00" width="14.00" height="3.00" rx="1"/></symbol>
|
||||
<symbol id="ot-F" viewBox="0 0 20 32"><rect x="3.00" y="1.00" width="14.00" height="3.00" rx="1"/><rect x="3.00" y="15.00" width="14.00" height="3.00" rx="1"/><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/></symbol>
|
||||
<symbol id="ot-G" viewBox="0 0 20 32"><rect x="3" y="1" width="14" height="3" rx="1"/><rect x="1" y="4" width="3" height="11" rx="1"/><rect x="1" y="17" width="3" height="11" rx="1"/><rect x="3" y="28" width="14" height="3" rx="1"/><rect x="16" y="17" width="3" height="11" rx="1"/><rect x="10" y="15" width="9" height="3" rx="1"/></symbol>
|
||||
<symbol id="ot-H" viewBox="0 0 20 32"><rect x="1.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="15.00" width="14.00" height="3.00" rx="1"/><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/></symbol>
|
||||
<symbol id="ot-I" viewBox="0 0 20 32"><rect x="3.00" y="1.00" width="14.00" height="3.00" rx="1"/><rect x="3.00" y="28.00" width="14.00" height="3.00" rx="1"/></symbol>
|
||||
<symbol id="ot-J" viewBox="0 0 20 32"><rect x="1.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="28.00" width="14.00" height="3.00" rx="1"/></symbol>
|
||||
<symbol id="ot-K" viewBox="0 0 24 32"><rect x="1.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="15.00" width="14.00" height="3.00" rx="1"/><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="10" y="4" width="2.2" height="11" rx="1" transform="rotate(-30 11.1 9.5)"/><rect x="10" y="17" width="2.2" height="11" rx="1" transform="rotate(30 11.1 22.5)"/></symbol>
|
||||
<symbol id="ot-L" viewBox="0 0 20 32"><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="28.00" width="14.00" height="3.00" rx="1"/></symbol>
|
||||
<symbol id="ot-M" viewBox="0 0 24 32"><rect x="1" y="4" width="3" height="24" rx="1"/><rect x="20" y="4" width="3" height="24" rx="1"/><rect x="7.1" y="5" width="2.6" height="13.2" rx="1" transform="rotate(28 8.4 11.6)"/><rect x="14.3" y="5" width="2.6" height="13.2" rx="1" transform="rotate(-28 15.6 11.6)"/></symbol>
|
||||
<symbol id="ot-N" viewBox="0 0 24 32"><rect x="1.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="6.5" y="6" width="2.4" height="12" rx="1" transform="rotate(32 7.7 12)"/><rect x="14.8" y="14" width="2.4" height="12" rx="1" transform="rotate(32 16 20)"/></symbol>
|
||||
<symbol id="ot-O" viewBox="0 0 20 32"><rect x="3.00" y="1.00" width="14.00" height="3.00" rx="1"/><rect x="1.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="28.00" width="14.00" height="3.00" rx="1"/></symbol>
|
||||
<symbol id="ot-P" viewBox="0 0 20 32"><rect x="3.00" y="1.00" width="14.00" height="3.00" rx="1"/><rect x="1.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="15.00" width="14.00" height="3.00" rx="1"/><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/></symbol>
|
||||
<symbol id="ot-Q" viewBox="0 0 24 32"><rect x="3.00" y="1.00" width="14.00" height="3.00" rx="1"/><rect x="1.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="28.00" width="14.00" height="3.00" rx="1"/><rect x="14" y="18" width="2.2" height="10" rx="1" transform="rotate(38 15.1 23)"/></symbol>
|
||||
<symbol id="ot-R" viewBox="0 0 24 32"><rect x="3.00" y="1.00" width="14.00" height="3.00" rx="1"/><rect x="1.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="15.00" width="14.00" height="3.00" rx="1"/><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="12" y="17" width="2.2" height="10" rx="1" transform="rotate(38 13.1 22)"/></symbol>
|
||||
<symbol id="ot-S" viewBox="0 0 20 32"><rect x="3.00" y="1.00" width="14.00" height="3.00" rx="1"/><rect x="16.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="15.00" width="14.00" height="3.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="28.00" width="14.00" height="3.00" rx="1"/></symbol>
|
||||
<symbol id="ot-T" viewBox="0 0 20 32"><rect x="3" y="1" width="14" height="3" rx="1"/><rect x="8" y="4" width="4" height="24" rx="1"/></symbol>
|
||||
<symbol id="ot-U" viewBox="0 0 20 32"><rect x="1.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="28.00" width="14.00" height="3.00" rx="1"/></symbol>
|
||||
<symbol id="ot-V" viewBox="0 0 20 32"><rect x="1.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="7" y="17" width="2.2" height="12" rx="1" transform="rotate(24 8.1 23)"/><rect x="12" y="17" width="2.2" height="12" rx="1" transform="rotate(-24 13.1 23)"/></symbol>
|
||||
<symbol id="ot-W" viewBox="0 0 24 32"><rect x="1.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="28.00" width="14.00" height="3.00" rx="1"/><rect x="5" y="17" width="2" height="11" rx="1" transform="rotate(18 6 22.5)"/><rect x="9.5" y="17" width="2" height="11" rx="1" transform="rotate(-18 10.5 22.5)"/><rect x="14" y="17" width="2" height="11" rx="1" transform="rotate(18 15 22.5)"/></symbol>
|
||||
<symbol id="ot-X" viewBox="0 0 24 32"><rect x="1.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="16.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="7" y="5" width="2.2" height="11" rx="1" transform="rotate(32 8.1 10.5)"/><rect x="11" y="16" width="2.2" height="11" rx="1" transform="rotate(-32 12.1 21.5)"/></symbol>
|
||||
<symbol id="ot-Y" viewBox="0 0 20 32"><rect x="1" y="4" width="3" height="11" rx="1"/><rect x="16" y="4" width="3" height="11" rx="1"/><rect x="8" y="15" width="4" height="14" rx="1"/></symbol>
|
||||
<symbol id="ot-Z" viewBox="0 0 20 32"><rect x="3.00" y="1.00" width="14.00" height="3.00" rx="1"/><rect x="1.00" y="4.00" width="3.00" height="11.00" rx="1"/><rect x="1.00" y="17.00" width="3.00" height="11.00" rx="1"/><rect x="3.00" y="28.00" width="14.00" height="3.00" rx="1"/></symbol>
|
||||
<symbol id="ot-colon" viewBox="0 0 12 32"><rect x="4" y="10" width="4" height="4" rx="1"/><rect x="4" y="20" width="4" height="4" rx="1"/></symbol>
|
||||
<symbol id="ot-plus" viewBox="0 0 16 32"><rect x="6" y="8" width="4" height="16" rx="1"/><rect x="2" y="14" width="12" height="4" rx="1"/></symbol>
|
||||
<symbol id="ot-minus" viewBox="0 0 16 32"><rect x="2" y="14" width="12" height="4" rx="1"/></symbol>
|
||||
<symbol id="ot-space" viewBox="0 0 8 32"></symbol>
|
||||
<symbol id="ot-G" viewBox="0 0 20 32"><rect x="3" y="1" width="14" height="3" rx="1"/><rect x="1" y="4" width="3" height="11" rx="1"/><rect x="1" y="17" width="3" height="11" rx="1"/><rect x="3" y="28" width="14" height="3" rx="1"/><rect x="16" y="17" width="3" height="11" rx="1"/><rect x="10" y="15" width="9" height="3" rx="1"/></symbol>
|
||||
<symbol id="ot-M" viewBox="0 0 24 32"><rect x="1" y="4" width="3" height="24" rx="1"/><rect x="20" y="4" width="3" height="24" rx="1"/><rect x="7.1" y="5" width="2.6" height="13.2" rx="1" transform="rotate(28 8.4 11.6)"/><rect x="14.3" y="5" width="2.6" height="13.2" rx="1" transform="rotate(-28 15.6 11.6)"/></symbol>
|
||||
<symbol id="ot-T" viewBox="0 0 20 32"><rect x="3" y="1" width="14" height="3" rx="1"/><rect x="8" y="4" width="4" height="24" rx="1"/></symbol>
|
||||
<symbol id="ot-slash" viewBox="0 0 14 32"><rect x="11" y="5" width="2.2" height="10" rx="1" transform="rotate(52 12.1 10)"/><rect x="4" y="19" width="2.2" height="10" rx="1" transform="rotate(52 5.1 24)"/></symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 13 KiB |
46
examples/app_hub/assets/quartz-alphabet.svg
Normal file
46
examples/app_hub/assets/quartz-alphabet.svg
Normal file
@@ -0,0 +1,46 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden">
|
||||
<!-- Quartz (TS) style 7-segment LCD (full alphabet) -->
|
||||
<defs>
|
||||
<symbol id="qz-space" viewBox="0 0 8 32"></symbol>
|
||||
<symbol id="qz-0" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="1.08" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-1" viewBox="0 0 20 32"><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/></symbol>
|
||||
<symbol id="qz-2" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="15.04" width="15.20" height="2.88" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-3" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="15.04" width="15.20" height="2.88" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-4" viewBox="0 0 20 32"><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="15.04" width="15.20" height="2.88" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/></symbol>
|
||||
<symbol id="qz-5" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="15.04" width="15.20" height="2.88" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-6" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="15.04" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-7" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/></symbol>
|
||||
<symbol id="qz-8" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="15.04" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-9" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="15.04" width="15.20" height="2.88" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-A" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="15.04" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/></symbol>
|
||||
<symbol id="qz-B" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="15.04" width="15.20" height="2.88" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-C" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="1.08" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-D" viewBox="0 0 20 32"><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="15.04" width="15.20" height="2.88" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-E" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="2.40" y="15.04" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-F" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="2.40" y="15.04" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/></symbol>
|
||||
<symbol id="qz-G" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="1.08" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-H" viewBox="0 0 20 32"><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="15.04" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/></symbol>
|
||||
<symbol id="qz-I" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-J" viewBox="0 0 20 32"><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="1.08" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-K" viewBox="0 0 24 32"><rect x="1.30" y="4.16" width="3.36" height="10.56" rx="1"/><rect x="2.88" y="15.04" width="18.24" height="2.88" rx="1"/><rect x="1.30" y="16.77" width="3.36" height="10.56" rx="1"/><rect x="19.34" y="16.77" width="3.36" height="10.56" rx="1"/><rect x="10" y="4" width="2.2" height="11" rx="1" transform="rotate(-30 11.1 9.5)"/><rect x="10" y="17" width="2.2" height="11" rx="1" transform="rotate(30 11.1 22.5)"/></symbol>
|
||||
<symbol id="qz-L" viewBox="0 0 20 32"><rect x="1.08" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-M" viewBox="0 0 24 32"><rect x="2.88" y="1.28" width="18.24" height="2.88" rx="1"/><rect x="1.30" y="4.16" width="3.36" height="10.56" rx="1"/><rect x="19.34" y="4.16" width="3.36" height="10.56" rx="1"/><rect x="1.30" y="16.77" width="3.36" height="10.56" rx="1"/><rect x="19.34" y="16.77" width="3.36" height="10.56" rx="1"/><rect x="7.1" y="5" width="2.6" height="13.2" rx="1" transform="rotate(28 8.4 11.6)"/><rect x="14.3" y="5" width="2.6" height="13.2" rx="1" transform="rotate(-28 15.6 11.6)"/></symbol>
|
||||
<symbol id="qz-N" viewBox="0 0 24 32"><rect x="1.30" y="4.16" width="3.36" height="10.56" rx="1"/><rect x="19.34" y="4.16" width="3.36" height="10.56" rx="1"/><rect x="1.30" y="16.77" width="3.36" height="10.56" rx="1"/><rect x="19.34" y="16.77" width="3.36" height="10.56" rx="1"/><rect x="6.5" y="6" width="2.4" height="12" rx="1" transform="rotate(32 7.7 12)"/><rect x="14.8" y="14" width="2.4" height="12" rx="1" transform="rotate(32 16 20)"/></symbol>
|
||||
<symbol id="qz-O" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="1.08" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-P" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="15.04" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="16.77" width="2.80" height="10.56" rx="1"/></symbol>
|
||||
<symbol id="qz-Q" viewBox="0 0 24 32"><rect x="2.88" y="1.28" width="18.24" height="2.88" rx="1"/><rect x="1.30" y="4.16" width="3.36" height="10.56" rx="1"/><rect x="19.34" y="4.16" width="3.36" height="10.56" rx="1"/><rect x="1.30" y="16.77" width="3.36" height="10.56" rx="1"/><rect x="19.34" y="16.77" width="3.36" height="10.56" rx="1"/><rect x="2.88" y="27.52" width="18.24" height="2.88" rx="1"/><rect x="14" y="18" width="2.2" height="10" rx="1" transform="rotate(38 15.1 23)"/></symbol>
|
||||
<symbol id="qz-R" viewBox="0 0 24 32"><rect x="2.88" y="1.28" width="18.24" height="2.88" rx="1"/><rect x="1.30" y="4.16" width="3.36" height="10.56" rx="1"/><rect x="19.34" y="4.16" width="3.36" height="10.56" rx="1"/><rect x="2.88" y="15.04" width="18.24" height="2.88" rx="1"/><rect x="1.30" y="16.77" width="3.36" height="10.56" rx="1"/><rect x="19.34" y="16.77" width="3.36" height="10.56" rx="1"/><rect x="12" y="17" width="2.2" height="10" rx="1" transform="rotate(38 13.1 22)"/></symbol>
|
||||
<symbol id="qz-S" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="15.04" width="15.20" height="2.88" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-T" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="2.40" y="15.04" width="15.20" height="2.88" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-U" viewBox="0 0 20 32"><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="1.08" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-V" viewBox="0 0 20 32"><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="1.08" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="7" y="17" width="2.2" height="12" rx="1" transform="rotate(24 8.1 23)"/><rect x="12" y="17" width="2.2" height="12" rx="1" transform="rotate(-24 13.1 23)"/></symbol>
|
||||
<symbol id="qz-W" viewBox="0 0 24 32"><rect x="1.30" y="4.16" width="3.36" height="10.56" rx="1"/><rect x="19.34" y="4.16" width="3.36" height="10.56" rx="1"/><rect x="1.30" y="16.77" width="3.36" height="10.56" rx="1"/><rect x="19.34" y="16.77" width="3.36" height="10.56" rx="1"/><rect x="2.88" y="27.52" width="18.24" height="2.88" rx="1"/><rect x="5" y="17" width="2" height="11" rx="1" transform="rotate(18 6 22.5)"/><rect x="9.5" y="17" width="2" height="11" rx="1" transform="rotate(-18 10.5 22.5)"/><rect x="14" y="17" width="2" height="11" rx="1" transform="rotate(18 15 22.5)"/></symbol>
|
||||
<symbol id="qz-X" viewBox="0 0 24 32"><rect x="1.30" y="4.16" width="3.36" height="10.56" rx="1"/><rect x="19.34" y="4.16" width="3.36" height="10.56" rx="1"/><rect x="1.30" y="16.77" width="3.36" height="10.56" rx="1"/><rect x="19.34" y="16.77" width="3.36" height="10.56" rx="1"/><rect x="7" y="5" width="2.2" height="11" rx="1" transform="rotate(32 8.1 10.5)"/><rect x="11" y="16" width="2.2" height="11" rx="1" transform="rotate(-32 12.1 21.5)"/></symbol>
|
||||
<symbol id="qz-Y" viewBox="0 0 20 32"><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="16.12" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="15.04" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-Z" viewBox="0 0 20 32"><rect x="2.40" y="1.28" width="15.20" height="2.88" rx="1"/><rect x="1.08" y="4.16" width="2.80" height="10.56" rx="1"/><rect x="1.08" y="16.77" width="2.80" height="10.56" rx="1"/><rect x="2.40" y="27.52" width="15.20" height="2.88" rx="1"/></symbol>
|
||||
<symbol id="qz-colon" viewBox="0 0 12 32"><rect x="4" y="10" width="4" height="4" rx="1"/><rect x="4" y="20" width="4" height="4" rx="1"/></symbol>
|
||||
<symbol id="qz-plus" viewBox="0 0 16 32"><rect x="6" y="8" width="4" height="16" rx="1"/><rect x="2" y="14" width="12" height="4" rx="1"/></symbol>
|
||||
<symbol id="qz-minus" viewBox="0 0 16 32"><rect x="2" y="14" width="12" height="4" rx="1"/></symbol>
|
||||
<symbol id="qz-slash" viewBox="0 0 14 32"><rect x="13" y="4" width="2.2" height="10" rx="1" transform="rotate(52 14.1 9)"/><rect x="5" y="18" width="2.2" height="10" rx="1" transform="rotate(52 6.1 23)"/></symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
@@ -188,11 +188,12 @@
|
||||
}
|
||||
|
||||
.hub-clock-widget {
|
||||
--cw-lcd-x: 24px;
|
||||
position: fixed;
|
||||
right: 24px;
|
||||
top: 24px;
|
||||
left: auto;
|
||||
width: 420px;
|
||||
width: 567px;
|
||||
z-index: 3;
|
||||
border: 1px solid rgba(255, 255, 255, 0.72);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.48);
|
||||
@@ -204,7 +205,7 @@
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
padding: 60px;
|
||||
padding: 40px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -246,7 +247,9 @@
|
||||
.cw-primary-block {
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, minmax(0, 1fr));
|
||||
grid-template-rows: auto auto auto;
|
||||
align-content: start;
|
||||
row-gap: 0;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 180, 80, 0.35);
|
||||
}
|
||||
@@ -263,7 +266,7 @@
|
||||
align-items: end;
|
||||
overflow: hidden;
|
||||
container-type: inline-size;
|
||||
padding: 16px 0 6px;
|
||||
padding: 12px 0 4px;
|
||||
}
|
||||
|
||||
.cw-line-time .cw-time-main {
|
||||
@@ -273,15 +276,19 @@
|
||||
.cw-row-tz,
|
||||
.cw-row-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
min-height: 0;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cw-time-main {
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto;
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
column-gap: 6px;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
width: fit-content;
|
||||
@@ -296,54 +303,57 @@
|
||||
.ot-lcd-line {
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.ot-lcd-bold .ot-glyph-wrap--bold {
|
||||
transform: scale(1.08, 1.12);
|
||||
transform-origin: bottom center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
#cw-hm-lcd .ot-glyph {
|
||||
height: 136px;
|
||||
height: calc(var(--cw-lcd-x) * 2);
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#cw-colon-lcd .ot-glyph,
|
||||
.ot-lcd-sec .ot-glyph,
|
||||
.ot-lcd-tz .ot-glyph {
|
||||
height: var(--cw-lcd-x);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@container (max-width: 300px) {
|
||||
#cw-hm-lcd .ot-glyph {
|
||||
height: 108px;
|
||||
}
|
||||
|
||||
.ot-lcd-sec .ot-glyph {
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.ot-lcd-tz .ot-glyph {
|
||||
height: 24px;
|
||||
.hub-clock-widget {
|
||||
--cw-lcd-x: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.ot-lcd-sec {
|
||||
margin-left: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.ot-lcd-sec .ot-glyph-wrap:first-child {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.ot-lcd-sec .ot-glyph {
|
||||
height: 32px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.ot-lcd-tz .ot-glyph {
|
||||
height: 30px;
|
||||
width: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ot-lcd-tz {
|
||||
margin-left: 14px;
|
||||
margin-left: calc(var(--cw-lcd-x) * 2);
|
||||
}
|
||||
|
||||
.ot-lcd-subline {
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cw-line-region.ot-lcd-subline .ot-glyph {
|
||||
height: calc(var(--cw-lcd-x) * 0.5);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.cw-line-date.ot-lcd-subline .ot-glyph {
|
||||
height: var(--cw-lcd-x);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.ot-glyph-wrap {
|
||||
@@ -362,6 +372,23 @@
|
||||
filter: drop-shadow(0 0 5px rgba(190, 240, 150, 0.38));
|
||||
}
|
||||
|
||||
.ot-fallback-char {
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
min-width: 0.62em;
|
||||
color: #d8f6b8;
|
||||
font-family: "Consolas", "Menlo", "Monaco", monospace;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.02em;
|
||||
text-shadow: 0 0 5px rgba(190, 240, 150, 0.42);
|
||||
}
|
||||
|
||||
.ot-fallback-char--bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ot-glyph .ot-grid rect {
|
||||
fill: rgba(20, 30, 24, 0.85);
|
||||
filter: drop-shadow(0 0 1.4px rgba(135, 205, 255, 0.5));
|
||||
@@ -377,7 +404,7 @@
|
||||
|
||||
.cw-line-region {
|
||||
color: #b8c2d4;
|
||||
font-size: 10px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.16em;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
@@ -385,7 +412,7 @@
|
||||
|
||||
.cw-line-date {
|
||||
color: #c5d0e2;
|
||||
font-size: 10px;
|
||||
font-size: 24px;
|
||||
letter-spacing: 0.12em;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
@@ -752,7 +779,7 @@
|
||||
left: auto;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: min(94vw, 420px);
|
||||
width: min(94vw, 567px);
|
||||
min-width: 0;
|
||||
}
|
||||
.hub-cards {
|
||||
|
||||
@@ -11,33 +11,32 @@
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="/app/androidcast_project/crashes/assets/css/app.css">
|
||||
<link rel="stylesheet" href="hub.css?v=20260527v">
|
||||
<link rel="stylesheet" href="hub.css?v=20260529a">
|
||||
<link rel="stylesheet" href="hub-logo-layers.css">
|
||||
<script src="assets/analytics.config.js"></script>
|
||||
<script src="/app/androidcast_project/crashes/assets/js/analytics.js" defer></script>
|
||||
</head>
|
||||
<body class="hub-page">
|
||||
<div id="overtime-alphabet-host" hidden aria-hidden="true"></div>
|
||||
<div id="quartz-alphabet-host" hidden aria-hidden="true"></div>
|
||||
<div id="hub-logo-stage" class="hub-logo-stage" hidden aria-hidden="true"></div>
|
||||
<section class="hub-clock-widget" id="hub-clock-widget" aria-label="World clock widget">
|
||||
<div class="cw-row cw-row-main">
|
||||
<div class="cw-cell cw-main-cell">
|
||||
<div class="cw-line cw-line-time">
|
||||
<div class="cw-clock-inner">
|
||||
<div class="cw-primary-block">
|
||||
<div class="cw-line cw-row cw-row-clock cw-line-time">
|
||||
<strong class="cw-time-main">
|
||||
<span id="cw-hm-lcd" class="ot-lcd-line ot-lcd-bold" aria-label="Hours and minutes"></span>
|
||||
<span id="cw-ss-lcd" class="ot-lcd-line ot-lcd-sec ot-lcd-bold" aria-label="Seconds"></span>
|
||||
<span id="cw-tz-text" class="ot-lcd-line ot-lcd-tz ot-lcd-bold" aria-label="Timezone offset"></span>
|
||||
<span id="cw-hm-lcd" class="ot-lcd-line ot-lcd-bold cw-col-hm" aria-label="Hours and minutes"></span>
|
||||
<span id="cw-colon-lcd" class="ot-lcd-line ot-lcd-colon cw-colon-blink" aria-label="Separator"></span>
|
||||
<span id="cw-ss-lcd" class="ot-lcd-line ot-lcd-sec cw-col-ss" aria-label="Seconds"></span>
|
||||
<span id="cw-tz-text" class="ot-lcd-line ot-lcd-tz cw-col-tz" aria-label="Timezone offset"></span>
|
||||
</strong>
|
||||
</div>
|
||||
<div class="cw-line cw-line-region" id="cw-region">EUROPE/WARSAW</div>
|
||||
<div class="cw-line cw-line-date" id="cw-date-line">WED 27 MAY 2026</div>
|
||||
<div class="cw-line cw-row cw-row-tz cw-line-region ot-lcd-subline" id="cw-region">EUROPE/WARSAW</div>
|
||||
<div class="cw-line cw-row cw-row-date cw-line-date ot-lcd-subline" id="cw-date-line">WED 27 MAY 2026</div>
|
||||
</div>
|
||||
<div class="cw-separator" aria-hidden="true"></div>
|
||||
<div class="cw-world-section" id="cw-world-row"></div>
|
||||
</div>
|
||||
<div class="cw-row cw-row-mid">
|
||||
<div class="cw-cell"></div>
|
||||
<div class="cw-cell"></div>
|
||||
<div class="cw-cell"></div>
|
||||
<div class="cw-cell"></div>
|
||||
</div>
|
||||
<div class="cw-row cw-row-world" id="cw-world-row"></div>
|
||||
</section>
|
||||
<div id="hub-docs-modal" class="hub-docs-modal" hidden aria-hidden="true">
|
||||
<div class="hub-docs-backdrop" data-close-docs></div>
|
||||
@@ -59,7 +58,10 @@
|
||||
<header class="hub-header">
|
||||
<div class="hub-brand">
|
||||
<img class="hub-logo-mark" src="assets/hub-logo-transparent.svg" alt="" width="112" height="84" decoding="async">
|
||||
<h1 class="hub-title">Android Cast</h1>
|
||||
<div class="hub-title-with-thunder">
|
||||
<h1 class="hub-title">Android Cast</h1>
|
||||
<img class="hub-thunder" src="assets/hub-thunder.svg?v=20260527z" alt="" decoding="async">
|
||||
</div>
|
||||
</div>
|
||||
<p class="muted hub-subtitle">Project hub</p>
|
||||
<label class="toolbar-select hub-theme">
|
||||
@@ -114,7 +116,7 @@
|
||||
var supportsLayout = !!(window.CSS && CSS.supports && CSS.supports('object-fit', 'cover'));
|
||||
if (!supportsSvg || !supportsLayout) return;
|
||||
|
||||
var logoBuild = '20260527s';
|
||||
var logoBuild = '20260529a';
|
||||
var fragments = {
|
||||
space: 'assets/hub-logo-fragment-space.svg',
|
||||
globe: 'assets/hub-logo-fragment-globe.svg',
|
||||
@@ -464,12 +466,15 @@
|
||||
|
||||
var overtimeReady = false;
|
||||
var overtimeSymbolIds = {};
|
||||
var quartzReady = false;
|
||||
var quartzSymbolIds = {};
|
||||
|
||||
function overtimeSymbolId(ch) {
|
||||
if (ch >= '0' && ch <= '9') return 'ot-' + ch;
|
||||
if (ch === ':') return 'ot-colon';
|
||||
if (ch === '+') return 'ot-plus';
|
||||
if (ch === '-') return 'ot-minus';
|
||||
if (ch === '/') return 'ot-slash';
|
||||
if (ch === ' ') return 'ot-space';
|
||||
if (ch >= 'A' && ch <= 'Z') return 'ot-' + ch;
|
||||
return null;
|
||||
@@ -491,60 +496,96 @@
|
||||
.catch(function () { done(false); });
|
||||
}
|
||||
|
||||
function buildGlyphGrid(svg, vb) {
|
||||
function quartzSymbolId(ch) {
|
||||
if (ch >= '0' && ch <= '9') return 'qz-' + ch;
|
||||
if (ch === ':') return 'qz-colon';
|
||||
if (ch === '+') return 'qz-plus';
|
||||
if (ch === '-') return 'qz-minus';
|
||||
if (ch === '/') return 'qz-slash';
|
||||
if (ch === ' ') return 'qz-space';
|
||||
if (ch >= 'A' && ch <= 'Z') return 'qz-' + ch;
|
||||
return null;
|
||||
}
|
||||
|
||||
function loadQuartzAlphabet(done) {
|
||||
var host = document.getElementById('quartz-alphabet-host');
|
||||
if (!host) { done(false); return; }
|
||||
fetch('assets/quartz-alphabet.svg?v=' + logoBuild)
|
||||
.then(function (res) { return res.text(); })
|
||||
.then(function (svgText) {
|
||||
host.innerHTML = svgText;
|
||||
host.querySelectorAll('symbol').forEach(function (sym) {
|
||||
if (sym.id) quartzSymbolIds[sym.id] = sym;
|
||||
});
|
||||
quartzReady = true;
|
||||
done(true);
|
||||
})
|
||||
.catch(function () { done(false); });
|
||||
}
|
||||
|
||||
var OVERTIME_SEG_GRID = [
|
||||
[3, 1, 14, 3], [1, 4, 3, 11], [16, 4, 3, 11],
|
||||
[3, 15, 14, 3], [1, 17, 3, 11], [16, 17, 3, 11],
|
||||
[3, 28, 14, 3]
|
||||
];
|
||||
|
||||
function parseOvertimeRects(sym) {
|
||||
var rects = [];
|
||||
sym.querySelectorAll('rect').forEach(function (node) {
|
||||
rects.push({
|
||||
x: parseFloat(node.getAttribute('x') || 0),
|
||||
y: parseFloat(node.getAttribute('y') || 0),
|
||||
w: parseFloat(node.getAttribute('width') || 0),
|
||||
h: parseFloat(node.getAttribute('height') || 0)
|
||||
});
|
||||
});
|
||||
return rects;
|
||||
}
|
||||
|
||||
function overtimeSegMatchesRect(seg, rect) {
|
||||
var eps = 1.25;
|
||||
return Math.abs(rect.x - seg[0]) <= eps
|
||||
&& Math.abs(rect.y - seg[1]) <= eps
|
||||
&& Math.abs(rect.w - seg[2]) <= eps
|
||||
&& Math.abs(rect.h - seg[3]) <= eps;
|
||||
}
|
||||
|
||||
function overtimeSegIsLit(seg, activeRects) {
|
||||
for (var i = 0; i < activeRects.length; i++) {
|
||||
if (overtimeSegMatchesRect(seg, activeRects[i])) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function buildOvertimeInactiveGrid(svg, sym, glyphW) {
|
||||
if (glyphW === 12 || glyphW === 8 || glyphW === 16) return;
|
||||
if (glyphW !== 20 && glyphW < 22) return;
|
||||
var activeRects = parseOvertimeRects(sym);
|
||||
var seg = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||
seg.setAttribute('class', 'ot-grid');
|
||||
var w = vb.width || 20;
|
||||
var h = vb.height || 32;
|
||||
var hPad = Math.max(1, w * 0.12);
|
||||
var topY = Math.max(1, h * 0.04);
|
||||
var midY = h * 0.47;
|
||||
var botY = h * 0.86;
|
||||
var segW = Math.max(6, w - hPad * 2);
|
||||
var segH = Math.max(2, h * 0.09);
|
||||
var vW = Math.max(2, w * 0.14);
|
||||
var vH = Math.max(6, h * 0.33);
|
||||
var leftX = Math.max(1, hPad * 0.45);
|
||||
var rightX = Math.max(leftX + vW + 1, w - leftX - vW);
|
||||
var upperY = topY + segH;
|
||||
var lowerY = midY + segH * 0.6;
|
||||
var defs = [
|
||||
[hPad, topY, segW, segH],
|
||||
[leftX, upperY, vW, vH],
|
||||
[rightX, upperY, vW, vH],
|
||||
[hPad, midY, segW, segH],
|
||||
[leftX, lowerY, vW, vH],
|
||||
[rightX, lowerY, vW, vH],
|
||||
[hPad, botY, segW, segH]
|
||||
];
|
||||
defs.forEach(function (d) {
|
||||
OVERTIME_SEG_GRID.forEach(function (d) {
|
||||
if (overtimeSegIsLit(d, activeRects)) return;
|
||||
var r = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
||||
r.setAttribute('x', d[0].toFixed(2));
|
||||
r.setAttribute('y', d[1].toFixed(2));
|
||||
r.setAttribute('width', d[2].toFixed(2));
|
||||
r.setAttribute('height', d[3].toFixed(2));
|
||||
r.setAttribute('x', String(d[0]));
|
||||
r.setAttribute('y', String(d[1]));
|
||||
r.setAttribute('width', String(d[2]));
|
||||
r.setAttribute('height', String(d[3]));
|
||||
r.setAttribute('rx', '1');
|
||||
seg.appendChild(r);
|
||||
});
|
||||
if (w >= 22) {
|
||||
var d1 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
||||
d1.setAttribute('x', (w * 0.34).toFixed(2));
|
||||
d1.setAttribute('y', (h * 0.15).toFixed(2));
|
||||
d1.setAttribute('width', Math.max(2, w * 0.10).toFixed(2));
|
||||
d1.setAttribute('height', Math.max(6, h * 0.34).toFixed(2));
|
||||
d1.setAttribute('rx', '1');
|
||||
d1.setAttribute('transform', 'rotate(22 ' + (w * 0.39).toFixed(2) + ' ' + (h * 0.32).toFixed(2) + ')');
|
||||
seg.appendChild(d1);
|
||||
var d2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
||||
d2.setAttribute('x', (w * 0.56).toFixed(2));
|
||||
d2.setAttribute('y', (h * 0.15).toFixed(2));
|
||||
d2.setAttribute('width', Math.max(2, w * 0.10).toFixed(2));
|
||||
d2.setAttribute('height', Math.max(6, h * 0.34).toFixed(2));
|
||||
d2.setAttribute('rx', '1');
|
||||
d2.setAttribute('transform', 'rotate(-22 ' + (w * 0.61).toFixed(2) + ' ' + (h * 0.32).toFixed(2) + ')');
|
||||
seg.appendChild(d2);
|
||||
}
|
||||
svg.appendChild(seg);
|
||||
if (seg.childNodes.length) svg.appendChild(seg);
|
||||
}
|
||||
|
||||
function cloneOvertimeSymbol(svg, sym) {
|
||||
sym.querySelectorAll('rect').forEach(function (node) {
|
||||
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
||||
['x', 'y', 'width', 'height', 'rx', 'transform'].forEach(function (attr) {
|
||||
var val = node.getAttribute(attr);
|
||||
if (val != null) rect.setAttribute(attr, val);
|
||||
});
|
||||
rect.setAttribute('class', 'ot-active');
|
||||
svg.appendChild(rect);
|
||||
});
|
||||
}
|
||||
|
||||
function renderOvertimeText(el, text, opts) {
|
||||
@@ -556,8 +597,21 @@
|
||||
return;
|
||||
}
|
||||
String(text).toUpperCase().split('').forEach(function (ch) {
|
||||
if (opts.forceFallback) {
|
||||
var forced = document.createElement('span');
|
||||
forced.className = 'ot-fallback-char' + (opts.bold ? ' ot-fallback-char--bold' : '');
|
||||
forced.textContent = ch === ' ' ? '\u00A0' : ch;
|
||||
el.appendChild(forced);
|
||||
return;
|
||||
}
|
||||
var sid = overtimeSymbolId(ch);
|
||||
if (!sid || !overtimeSymbolIds[sid]) return;
|
||||
if (!sid || !overtimeSymbolIds[sid]) {
|
||||
var fb = document.createElement('span');
|
||||
fb.className = 'ot-fallback-char' + (opts.bold ? ' ot-fallback-char--bold' : '');
|
||||
fb.textContent = ch === ' ' ? '\u00A0' : ch;
|
||||
el.appendChild(fb);
|
||||
return;
|
||||
}
|
||||
var wrap = document.createElement('span');
|
||||
wrap.className = 'ot-glyph-wrap' + (opts.bold ? ' ot-glyph-wrap--bold' : '');
|
||||
if (opts.blinkColon && ch === ':') wrap.className += ' ot-colon-blink';
|
||||
@@ -566,19 +620,82 @@
|
||||
var viewBox = sym.getAttribute('viewBox') || '0 0 20 32';
|
||||
svg.setAttribute('viewBox', viewBox);
|
||||
svg.setAttribute('class', 'ot-glyph');
|
||||
svg.setAttribute('aria-hidden', 'true');
|
||||
var vb = viewBox.split(/\s+/).map(function (v) { return Number(v) || 0; });
|
||||
buildGlyphGrid(svg, { width: vb[2] || 20, height: vb[3] || 32 });
|
||||
var glyphW = vb[2] || 20;
|
||||
if (opts.ghost !== false) buildOvertimeInactiveGrid(svg, sym, glyphW);
|
||||
cloneOvertimeSymbol(svg, sym);
|
||||
wrap.appendChild(svg);
|
||||
el.appendChild(wrap);
|
||||
});
|
||||
}
|
||||
|
||||
/* Clock digits: original Overtime path (<use> only, no ghost grid). */
|
||||
function renderOvertimeDigits(el, text, blinkColon, bold) {
|
||||
if (!el) return;
|
||||
el.innerHTML = '';
|
||||
if (!overtimeReady) {
|
||||
el.textContent = text;
|
||||
return;
|
||||
}
|
||||
text.split('').forEach(function (ch) {
|
||||
var sid = overtimeSymbolId(ch);
|
||||
if (!sid || !overtimeSymbolIds[sid]) {
|
||||
el.appendChild(document.createTextNode(ch));
|
||||
return;
|
||||
}
|
||||
var wrap = document.createElement('span');
|
||||
wrap.className = 'ot-glyph-wrap' + (bold ? ' ot-glyph-wrap--bold' : '');
|
||||
if (blinkColon && ch === ':') wrap.className += ' ot-colon-blink';
|
||||
var sym = overtimeSymbolIds[sid];
|
||||
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
svg.setAttribute('viewBox', sym.getAttribute('viewBox') || '0 0 20 32');
|
||||
svg.setAttribute('class', 'ot-glyph');
|
||||
var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
|
||||
use.setAttribute('href', '#' + sid);
|
||||
use.setAttribute('class', 'ot-active');
|
||||
svg.appendChild(use);
|
||||
wrap.appendChild(svg);
|
||||
el.appendChild(wrap);
|
||||
});
|
||||
}
|
||||
|
||||
function renderOvertimeDigits(el, text, blinkColon, bold) {
|
||||
renderOvertimeText(el, text, { blinkColon: blinkColon, bold: bold });
|
||||
function renderQuartzText(el, text, opts) {
|
||||
opts = opts || {};
|
||||
if (!el) return;
|
||||
el.innerHTML = '';
|
||||
if (!quartzReady) {
|
||||
el.textContent = text;
|
||||
return;
|
||||
}
|
||||
String(text).toUpperCase().split('').forEach(function (ch) {
|
||||
var sid = quartzSymbolId(ch);
|
||||
if (!sid || !quartzSymbolIds[sid]) {
|
||||
var fb = document.createElement('span');
|
||||
fb.className = 'qz-fallback-char' + (opts.bold ? ' qz-fallback-char--bold' : '');
|
||||
fb.textContent = ch === ' ' ? '\u00A0' : ch;
|
||||
el.appendChild(fb);
|
||||
return;
|
||||
}
|
||||
var wrap = document.createElement('span');
|
||||
wrap.className = 'qz-glyph-wrap' + (opts.bold ? ' qz-glyph-wrap--bold' : '');
|
||||
if (opts.blinkColon && ch === ':') wrap.className += ' qz-colon-blink';
|
||||
var sym = quartzSymbolIds[sid];
|
||||
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
var viewBox = sym.getAttribute('viewBox') || '0 0 20 32';
|
||||
svg.setAttribute('viewBox', viewBox);
|
||||
svg.setAttribute('class', 'qz-glyph');
|
||||
var vb = viewBox.split(/\s+/).map(function (v) { return Number(v) || 0; });
|
||||
var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
|
||||
use.setAttribute('href', '#' + sid);
|
||||
use.setAttribute('class', 'qz-active');
|
||||
svg.appendChild(use);
|
||||
wrap.appendChild(svg);
|
||||
el.appendChild(wrap);
|
||||
});
|
||||
}
|
||||
|
||||
function renderQuartzDigits(el, text, blinkColon, bold) {
|
||||
renderQuartzText(el, text, { blinkColon: blinkColon, bold: bold });
|
||||
}
|
||||
|
||||
function regionLabel(tz) {
|
||||
@@ -623,11 +740,12 @@
|
||||
function updateClockWidget() {
|
||||
var now = new Date();
|
||||
var p = timeParts(now, primaryTz);
|
||||
renderOvertimeDigits(document.getElementById('cw-hm-lcd'), p.hh + ':' + p.mm, false, true);
|
||||
renderOvertimeDigits(document.getElementById('cw-ss-lcd'), ':' + p.ss, true, true);
|
||||
renderOvertimeText(document.getElementById('cw-tz-text'), gmtOffsetLabel(now, primaryTz), { bold: true });
|
||||
document.getElementById('cw-region').textContent = regionLabel(primaryTz);
|
||||
document.getElementById('cw-date-line').textContent = formatDateLine(now, primaryTz);
|
||||
renderOvertimeDigits(document.getElementById('cw-hm-lcd'), p.hh + p.mm, false, false);
|
||||
renderOvertimeDigits(document.getElementById('cw-colon-lcd'), ':', false, false);
|
||||
renderOvertimeDigits(document.getElementById('cw-ss-lcd'), p.ss, false, false);
|
||||
renderOvertimeText(document.getElementById('cw-tz-text'), gmtOffsetLabel(now, primaryTz), { bold: false });
|
||||
renderOvertimeText(document.getElementById('cw-region'), regionLabel(primaryTz), { bold: false });
|
||||
renderOvertimeText(document.getElementById('cw-date-line'), formatDateLine(now, primaryTz), { bold: false });
|
||||
|
||||
secondary.forEach(function (clock) {
|
||||
var t = timeParts(now, clock.tz);
|
||||
@@ -651,12 +769,15 @@
|
||||
h.className = 'cw-resize-handle cw-resize-' + pos;
|
||||
h.dataset.resize = pos;
|
||||
h.setAttribute('aria-hidden', 'true');
|
||||
var visual = document.createElement('span');
|
||||
visual.className = 'cw-resize-handle-visual';
|
||||
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
svg.setAttribute('viewBox', '0 0 45.279 45.279');
|
||||
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||
path.setAttribute('d', arrowPath);
|
||||
svg.appendChild(path);
|
||||
h.appendChild(svg);
|
||||
visual.appendChild(svg);
|
||||
h.appendChild(visual);
|
||||
widget.appendChild(h);
|
||||
});
|
||||
|
||||
@@ -687,7 +808,7 @@
|
||||
widget.style.left = Math.max(0, ev.clientX - drag.dx) + 'px';
|
||||
widget.style.top = Math.max(0, ev.clientY - drag.dy) + 'px';
|
||||
} else {
|
||||
var minW = 1, minH = 1;
|
||||
var minW = 280, minH = 210;
|
||||
var dx = ev.clientX - drag.x;
|
||||
var dy = ev.clientY - drag.y;
|
||||
var left = drag.left, top = drag.top, width = drag.width, height = drag.height;
|
||||
@@ -704,7 +825,7 @@
|
||||
widget.style.left = Math.max(0, left) + 'px';
|
||||
widget.style.top = Math.max(0, top) + 'px';
|
||||
widget.style.width = width + 'px';
|
||||
widget.style.minWidth = '';
|
||||
widget.style.minWidth = width + 'px';
|
||||
widget.style.transform = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
@@ -41,6 +41,23 @@ php -S 127.0.0.1:8080 -t public
|
||||
|
||||
Open http://127.0.0.1:8080/ — login **admin** / **admin**.
|
||||
|
||||
## Google Analytics 4 (optional)
|
||||
|
||||
In `config/config.php`:
|
||||
|
||||
```php
|
||||
'analytics' => [
|
||||
'enabled' => true,
|
||||
'measurement_id' => 'G-XXXXXXXXXX',
|
||||
'debug' => false,
|
||||
],
|
||||
```
|
||||
|
||||
Loads `public/assets/js/analytics.js` from `layout.php` and `login.php`. The project hub at
|
||||
`/app/androidcast_project/` uses the same script; configure `examples/app_hub/assets/analytics.config.js`.
|
||||
|
||||
Events include `page_view`, `console_view` (home, tickets, reports, …), and hub `hub_nav_click` / `hub_open_docs`.
|
||||
|
||||
## RBAC (phase 1)
|
||||
|
||||
Multi-tenant foundation (no admin UI yet):
|
||||
|
||||
@@ -37,4 +37,10 @@ return [
|
||||
'default_company_slug' => 'default',
|
||||
'default_company_id' => 1,
|
||||
],
|
||||
// Google Analytics 4 (hub + crash console share public/assets/js/analytics.js)
|
||||
'analytics' => [
|
||||
'enabled' => false,
|
||||
'measurement_id' => '', // e.g. G-XXXXXXXXXX
|
||||
'debug' => false,
|
||||
],
|
||||
];
|
||||
|
||||
145
examples/crash_reporter/backend/public/assets/js/analytics.js
Normal file
145
examples/crash_reporter/backend/public/assets/js/analytics.js
Normal file
@@ -0,0 +1,145 @@
|
||||
/**
|
||||
* Google Analytics 4 for Android Cast web platform (hub + crash console).
|
||||
* Set window.ANDROIDCAST_ANALYTICS before this script loads:
|
||||
* { measurementId: 'G-XXXXXXXX', platform: 'hub'|'crashes', debug: false }
|
||||
*/
|
||||
(function (global) {
|
||||
'use strict';
|
||||
|
||||
var cfg = global.ANDROIDCAST_ANALYTICS || {};
|
||||
var measurementId = (cfg.measurementId || '').trim();
|
||||
var platform = cfg.platform || 'web';
|
||||
var debug = !!cfg.debug;
|
||||
|
||||
function log() {
|
||||
if (debug && global.console) {
|
||||
global.console.log.apply(global.console, ['[analytics]'].concat([].slice.call(arguments)));
|
||||
}
|
||||
}
|
||||
|
||||
function enabled() {
|
||||
return measurementId.length > 0 && /^G-[A-Z0-9]+$/i.test(measurementId);
|
||||
}
|
||||
|
||||
function ensureGtag(cb) {
|
||||
if (!enabled()) {
|
||||
return;
|
||||
}
|
||||
global.dataLayer = global.dataLayer || [];
|
||||
if (!global.gtag) {
|
||||
global.gtag = function () {
|
||||
global.dataLayer.push(arguments);
|
||||
};
|
||||
}
|
||||
if (global.__acAnalyticsLoaded) {
|
||||
if (cb) cb();
|
||||
return;
|
||||
}
|
||||
var s = document.createElement('script');
|
||||
s.async = true;
|
||||
s.src = 'https://www.googletagmanager.com/gtag/js?id=' + encodeURIComponent(measurementId);
|
||||
s.onload = function () {
|
||||
global.__acAnalyticsLoaded = true;
|
||||
global.gtag('js', new Date());
|
||||
global.gtag('config', measurementId, {
|
||||
send_page_view: false,
|
||||
anonymize_ip: true
|
||||
});
|
||||
log('loaded', measurementId);
|
||||
if (cb) cb();
|
||||
};
|
||||
document.head.appendChild(s);
|
||||
}
|
||||
|
||||
function pagePath() {
|
||||
var base = (cfg.basePath || '').replace(/\/$/, '');
|
||||
var path = global.location.pathname || '/';
|
||||
if (base && path.indexOf(base) === 0) {
|
||||
path = path.slice(base.length) || '/';
|
||||
}
|
||||
return path;
|
||||
}
|
||||
|
||||
function pageView(extra) {
|
||||
if (!enabled()) return;
|
||||
ensureGtag(function () {
|
||||
var params = {
|
||||
page_title: document.title || '',
|
||||
page_location: global.location.href,
|
||||
page_path: pagePath(),
|
||||
platform: platform
|
||||
};
|
||||
if (extra) {
|
||||
for (var k in extra) {
|
||||
if (Object.prototype.hasOwnProperty.call(extra, k)) params[k] = extra[k];
|
||||
}
|
||||
}
|
||||
global.gtag('event', 'page_view', params);
|
||||
log('page_view', params);
|
||||
});
|
||||
}
|
||||
|
||||
function trackEvent(name, params) {
|
||||
if (!enabled() || !name) return;
|
||||
ensureGtag(function () {
|
||||
var payload = params || {};
|
||||
payload.platform = platform;
|
||||
global.gtag('event', name, payload);
|
||||
log('event', name, payload);
|
||||
});
|
||||
}
|
||||
|
||||
function bindConsoleView() {
|
||||
var body = document.body;
|
||||
if (!body) return;
|
||||
var view = body.getAttribute('data-view');
|
||||
if (view) {
|
||||
trackEvent('console_view', { view_name: view });
|
||||
}
|
||||
}
|
||||
|
||||
function bindHubInteractions() {
|
||||
document.addEventListener('click', function (ev) {
|
||||
var t = ev.target;
|
||||
if (!(t instanceof Element)) return;
|
||||
var card = t.closest('.hub-card, .hub-card-link');
|
||||
if (card) {
|
||||
var label = card.getAttribute('data-analytics-label')
|
||||
|| (card.textContent || '').trim().slice(0, 64);
|
||||
trackEvent('hub_nav_click', { link_text: label });
|
||||
return;
|
||||
}
|
||||
if (t.closest('[data-open-docs], #hub-compass-layer, .hub-logo-layer--compass')) {
|
||||
trackEvent('hub_open_docs', { source: 'compass' });
|
||||
}
|
||||
if (t.closest('[data-close-docs]')) {
|
||||
trackEvent('hub_close_docs', {});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function init() {
|
||||
if (!enabled()) {
|
||||
log('disabled (no measurement id)');
|
||||
return;
|
||||
}
|
||||
pageView();
|
||||
if (platform === 'crashes') {
|
||||
bindConsoleView();
|
||||
} else if (platform === 'hub') {
|
||||
bindHubInteractions();
|
||||
}
|
||||
}
|
||||
|
||||
global.AndroidCastAnalytics = {
|
||||
enabled: enabled,
|
||||
pageView: pageView,
|
||||
trackEvent: trackEvent
|
||||
};
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})(typeof window !== 'undefined' ? window : this);
|
||||
26
examples/crash_reporter/backend/src/AnalyticsHead.php
Normal file
26
examples/crash_reporter/backend/src/AnalyticsHead.php
Normal file
@@ -0,0 +1,26 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
/** Emits GA4 config + shared analytics.js for PHP views. */
|
||||
final class AnalyticsHead {
|
||||
public static function render(string $platform = 'crashes'): void {
|
||||
$enabled = (bool) cfg('analytics.enabled', false);
|
||||
$measurementId = trim((string) cfg('analytics.measurement_id', ''));
|
||||
if (!$enabled || $measurementId === '') {
|
||||
return;
|
||||
}
|
||||
$basePath = Auth::basePath();
|
||||
$config = [
|
||||
'measurementId' => $measurementId,
|
||||
'platform' => $platform,
|
||||
'basePath' => $basePath,
|
||||
'debug' => (bool) cfg('analytics.debug', false),
|
||||
];
|
||||
$json = json_encode($config, JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP);
|
||||
if ($json === false) {
|
||||
return;
|
||||
}
|
||||
echo '<script>window.ANDROIDCAST_ANALYTICS=', $json, ';</script>', "\n";
|
||||
echo '<script src="', h($basePath), '/assets/js/analytics.js" defer></script>', "\n";
|
||||
}
|
||||
}
|
||||
@@ -44,6 +44,7 @@ require_once __DIR__ . '/TicketAttachmentRepository.php';
|
||||
require_once __DIR__ . '/TicketCommentRepository.php';
|
||||
require_once __DIR__ . '/UserRepository.php';
|
||||
require_once __DIR__ . '/TicketRepository.php';
|
||||
require_once __DIR__ . '/AnalyticsHead.php';
|
||||
|
||||
function cfg(string $key, $default = null) {
|
||||
global $config;
|
||||
|
||||
@@ -31,6 +31,7 @@
|
||||
<?php if (in_array($view ?? '', ['tickets', 'ticket'], true)): ?>
|
||||
<script src="<?= h(Auth::basePath()) ?>/assets/js/tickets.js" defer></script>
|
||||
<?php endif; ?>
|
||||
<?php AnalyticsHead::render('crashes'); ?>
|
||||
</head>
|
||||
<body data-base-path="<?= h(Auth::basePath()) ?>"
|
||||
data-view="<?= h($view ?? 'home') ?>"
|
||||
|
||||
@@ -26,6 +26,7 @@ $bp = Auth::basePath();
|
||||
</script>
|
||||
<link rel="stylesheet" href="<?= h($bp) ?>/assets/css/app.css">
|
||||
<script src="<?= h($bp) ?>/assets/js/i18n.js" defer></script>
|
||||
<?php AnalyticsHead::render('crashes_login'); ?>
|
||||
</head>
|
||||
<body class="login-page" data-base-path="<?= h($bp) ?>">
|
||||
<div class="login-locale">
|
||||
|
||||
Reference in New Issue
Block a user