Sechs Wuensche: Hintergruende, Knopfverteilung, Universum, Uhrkoepfe, Knallrot
--- screen3 + screen1: die Hintergruende draengeln nicht mehr --- "die hintergrunde sollen ueberall so sein dass die sich nicht in den vordergrund draengeln." / "mach den hintergrund von dieser kachel dunkler, so dass die die kacheln drin viel mehr auffallen." `--raster` stand auf .26 Deckkraft -- auf dunkler Flaeche kein Hauch mehr, sondern ein gezeichnetes Gitter. Im Tagdialog lief es sichtbar durch die Ueberschrift, in den Sammelkacheln stand es VOR den Karten darin. Jetzt .09: Man sieht eine Struktur, man zaehlt keine Linien. Eine Zahl fuer das ganze Haus -- sie steht einmal in module.css und wird an fuenf Stellen benutzt. Die Anlasskachel im Kalender lag mit rgba(19,26,38,.88) auf demselben Helligkeitsniveau wie die Karten darin: keine Vitrine, sondern eine dritte Flaeche gleicher Lautstaerke. Jetzt fast schwarz. An den Karten musste dafuer nichts geaendert werden -- der Abstand entsteht von selbst. --- screen2: ein Knopf wandert nach links --- "eins von diesen buttons soll links bei dem anderen kreis sein." Die GLOCKE geht nach links zum Ring, der WECKER bleibt rechts bei der Uhr. Das ist nicht ausgewuerfelt: Der Wecker ist eine Uhrzeit. Die Glocke entscheidet, ob man ueberhaupt etwas ueber sein Team erfaehrt -- und der Ring links zeigt genau das. Die Kachel ist damit spiegelsymmetrisch belegt: 48 px Knopf + 14 px Abstand + 248 px Instrument auf beiden Seiten. Genau das rechnet `--spalte`. Die Zentrierung des Rings ist weggefallen -- sie war noetig, solange er allein in einer fuer Instrument PLUS Knopf bemessenen Spalte stand. Der reservierte Platz schrumpft von 104 auf 48 px je Seite; die Begruendung fuer das Reservieren bleibt: Ein Platz, der erst mit der Antwort entsteht, laesst die Zeile springen. --- screen4: zwei Chilis und zwei Huskys dazu --- "setz in den hintergrund noch 1-2 peperonis und dan das logo von dogfather, also nur den husky." DER HUSKY IST EINE MASKE, KEIN BILD. Die Datei ist schwarz-weiss und freigestellt (nachgemessen: 49 % durchsichtig). Als Hintergrundbild bei 15 % verschwaenden die schwarzen Flaechen im dunklen Grund und uebrig blieben die hellen -- ein zerrissener Umriss, kein Hund. Als Maske ueber einer Farbflaeche wird daraus eine geschlossene Silhouette in DogFathers Babyblau. Im Universum schweben jetzt beide Marken in ihren beiden Farben: sieben Chilis rot, zwei Huskys blau. --- screen5: die Punkte sind ersetzt, das letzte Glied leuchtet --- "ich will dass du die punkte ersetzt und immer der letzte soll mehr strahlen oder so." / "alles ist mega ausser die stunden muss du noch perfektionnieren." DIE DREI UMLAUFENDEN PERLEN SIND WEG -- samt 60 Zeilen Rechnung. Sie waren ein zweites Ding an einer zweiten Stelle: eigene Uhr ab dem ersten Takt (weil die volle Unixzeit `rotate(1.07333e+10deg)` ergab), eigener Startwinkel je Bahn, drei Winkel, die die kleineren Einheiten anteilig mittragen mussten. All das war noetig, WEIL der Kopf neben der Reihe herlief statt Teil von ihr zu sein. Genau deshalb trugen sie am 08.09. noch die alten Farben, als die Bahnen getauscht wurden. Jetzt zeichnet eine zweite SVG-Lage genau EIN Glied heller -- dasselbe, das die Reihe darunter zuletzt gesetzt hat, aus denselben Zahlen. Sie kann gar nicht danebenstehen. Heller statt groesser: Waere der Kopf groesser, waere er ein Fremdkoerper in der Reihe. DIE STUNDEN WAREN BREITER ALS LANG -- 5,5 lang bei 7 breit, also 0,79:1. Ein Segment, das breiter ist als lang, liest sich als Klotz quer auf der Bahn statt als Balken entlang. Und weil die Kantenlage nur 0,4 versetzt ist, lief der 0,9 breite Lichtstrich MITTEN DURCH jeden Balken statt an seiner Kante. Jetzt 10 lang bei 5,8 breit (1,7:1), und der Kantenversatz ist nach Bandbreite gestaffelt: (Breite - 0,9) / 2, also 0,75 / 1,65 / 2,05 zusaetzlich zur Gruppe. --- screen6: die Scout-Pipeline wird knallrot --- "die farbe von dieser kategorie soll knall rot sein." Die anderen zwanzig Kachelfarben sind gerechnet (OKLab, groesstmoeglicher Abstand). Diese eine ist gewuenscht -- und wurde deshalb GEGEN den Satz geprueft statt eingetragen: Der engste vorhandene Abstand liegt bei 0,0973. #ff1f2e kommt seinem naechsten Nachbarn auf 0,1228 nahe, ist also weiter entfernt als das engste vorhandene Paar. Kontrast 5,01:1 (noetig 4,5). Von sechs geprueften Rottoenen der mit dem groessten Abstand UND genug Kontrast. tools/kachel-farben.mjs weiss jetzt davon: Ein kuenftiger Lauf wuerde wieder Rosa vorschlagen, und das waere eine stille Ruecknahme einer ausdruecklichen Entscheidung. --- Ein Messfehler, der festgehalten gehoert --- Beim Pruefen von screen4 meldete meine Foto-Methode vier Beschriftungen unter 4,5:1 -- bei einem Verlust von 0,00 bis 0,15 durch das Universum. Dass die Ursache nicht das Universum sein konnte, stand damit schon in den Zahlen. Exakt gerechnet (Vordergrundfarbe gegen die tatsaechliche Flaeche darunter) liegen dieselben Texte bei 9,13:1 bis 10,76:1. Die Foto-Methode mittelt ueber alle helleren Bildpunkte, und bei duenner Grossbuchstabenschrift ist die Haelfte davon halb ausgeleuchtete Kantenpunkte. Fuer grosse Schrift taugt sie, fuer kleine Versalien meldet sie systematisch zu wenig. Haette ich ihr geglaubt, haette ich vier Farben "repariert", die in Ordnung sind. Geprueft: pruef-start-ansicht, pruef-css-klassen, pruef-kalender, pruef-buehne, pruef-handy, pruef-workspace-seiten, pruef-tagesruf -- alle in Ordnung. Dazu Ring und Uhr auf 248/248 nachgemessen, die Kopf-Muster gegen die Uhrzeit nachgerechnet (01:24:59 -> Sekunde bei 281,115, Minute bei 96,76, Stunde bei 16,493) und die Kachelfarbe gegen alle zwanzig anderen in OKLab geprueft. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -189,7 +189,21 @@
|
||||
einer umgezogen ist, wäre keine Verbesserung. Und weil die
|
||||
Kopfleiste am 06.09. schon einmal an einem sechsten Element
|
||||
zerbrochen ist, wird sie hier nebenbei um eines leichter. */
|
||||
const platz = document.getElementById('glocke-platz');
|
||||
/* SEIT DEM 09.09.2026 GIBT ES ZWEI PLAETZE (screen2).
|
||||
|
||||
Die Glocke geht nach LINKS neben den Ring, der Tagesruf bleibt
|
||||
rechts neben der Uhr. Welcher wohin, folgt der Bedeutung: Der
|
||||
Wecker ist eine Uhrzeit und gehoert zur Uhr; die Glocke
|
||||
entscheidet, ob man ueberhaupt etwas ueber sein Team erfaehrt --
|
||||
und der Ring links zeigt genau das.
|
||||
|
||||
Gibt es den linken Platz nicht (jede Seite ausser der
|
||||
Startseite), faellt die Glocke wie bisher auf den rechten
|
||||
zurueck und von dort auf die Kopfleiste. Zwei Rueckfaelle, kein
|
||||
Sonderfall: Ein Knopf, der auf zwoelf Seiten verschwindet, weil
|
||||
er auf einer umgezogen ist, waere keine Verbesserung. */
|
||||
const platzLinks = document.getElementById('glocke-platz-links');
|
||||
const platz = platzLinks || document.getElementById('glocke-platz');
|
||||
const kopf = platz || document.querySelector('.kopfleiste__rechts');
|
||||
if (!kopf || document.getElementById('glocke')) return;
|
||||
|
||||
@@ -245,7 +259,11 @@
|
||||
}
|
||||
zeichnen();
|
||||
|
||||
if (platz) await tagesrufBauen(platz);
|
||||
/* Der Tagesruf gehoert IMMER an den rechten Platz -- auch wenn die
|
||||
Glocke links sitzt. `platz` zeigt jetzt auf den linken, deshalb
|
||||
wird der rechte hier eigens geholt. */
|
||||
const platzRechts = document.getElementById('glocke-platz');
|
||||
if (platzRechts) await tagesrufBauen(platzRechts);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
|
||||
@@ -375,9 +375,10 @@
|
||||
`data-ring`; einzeln gepflegte Verweise waeren drei Stellen, an
|
||||
denen man eine vergessen kann -- und ein Schatten, der stehen
|
||||
bleibt, sieht sofort kaputt aus. */
|
||||
const lagen = {};
|
||||
const lagen = {}, koepfe = {};
|
||||
for (const welcher of ['sekunde', 'minute', 'stunde']) {
|
||||
lagen[welcher] = [...document.querySelectorAll(`[data-ring="${welcher}"]`)];
|
||||
koepfe[welcher] = document.querySelector(`[data-kopf="${welcher}"]`);
|
||||
}
|
||||
|
||||
/* DIE SEKUNDE IST EINE PUNKTREIHE (08.09.2026).
|
||||
@@ -402,7 +403,26 @@
|
||||
und Stunde BALKEN -- je langsamer, desto laenger das Glied. So
|
||||
liest man die drei auch ohne Farbe auseinander. */
|
||||
const GLIEDER = { sekunde: 60, minute: 60, stunde: 12 };
|
||||
const GLIED_LAENGE = { sekunde: 0.01, minute: 1.7, stunde: 5.5 };
|
||||
/* DIE STUNDE WAR BREITER ALS LANG (behoben 09.09.2026, screen5).
|
||||
|
||||
Filipe: "alles ist mega ausser die stunden muss du noch
|
||||
perfektionnieren."
|
||||
|
||||
Nachgemessen war das der Grund: Ein Stundenglied war 5,5 lang
|
||||
und 7 breit. Ein Segment, das breiter ist als lang, liest sich
|
||||
nicht als Balken auf einer Bahn, sondern als Klotz quer darauf --
|
||||
und weil die Kantenlage 0,4 nach oben versetzt ist, lief
|
||||
zusaetzlich ein heller Strich mitten hindurch statt an der
|
||||
Oberkante entlang.
|
||||
|
||||
Jetzt 10 lang bei 5,8 breit. Das Verhaeltnis ist damit 1,7:1
|
||||
statt 0,79:1 -- aus dem Klotz wird ein Balken, und der helle
|
||||
Strich sitzt wieder da, wo er hingehoert: auf der Kante.
|
||||
|
||||
Die Staffelung bleibt eindeutig: Punkt (0,01), kurzer Balken
|
||||
(1,7), langer Balken (10). Je langsamer die Bahn, desto laenger
|
||||
das Glied. */
|
||||
const GLIED_LAENGE = { sekunde: 0.01, minute: 1.7, stunde: 10 };
|
||||
|
||||
const punktMuster = (U, n, gesamt, laenge) => {
|
||||
const schritt = U / gesamt;
|
||||
@@ -467,10 +487,32 @@
|
||||
el.style.strokeDashoffset = '0';
|
||||
}
|
||||
|
||||
};
|
||||
/* DAS LETZTE GLIED, EINZELN (09.09.2026, screen5).
|
||||
|
||||
/* Der Nullpunkt der eigenen Uhr -- siehe unten bei den Koepfen. */
|
||||
let nullpunkt = null, startWinkel = 0, minStart = 0, stdStart = 0, sekStart = 0;
|
||||
Filipe: "immer der letzte soll mehr strahlen oder so."
|
||||
|
||||
Vorher liefen dafuer drei HTML-Perlen auf eigenen Bahnen -- mit
|
||||
einer EIGENEN Winkelrechnung. Zwei Rechnungen fuer denselben
|
||||
Ort sind zwei Gelegenheiten auseinanderzulaufen, und genau das
|
||||
ist am 08.09. passiert: Die Bahnen tauschten die Farben, die
|
||||
Perlen nicht.
|
||||
|
||||
Jetzt zeichnet eine zweite Lage GENAU EIN Glied, aus denselben
|
||||
Zahlen wie die Reihe darunter: Laenge unveraendert, alles
|
||||
andere Luecke, Anfang um (n-1) Schritte verschoben.
|
||||
|
||||
`dashoffset` ist NEGATIV, und das ist keine Willkuer: Ein
|
||||
positiver Wert schiebt das Muster rueckwaerts, der Strich
|
||||
erschiene frueher. Um ihn bei p BEGINNEN zu lassen, braucht es
|
||||
-p. */
|
||||
const kopf = koepfe[welcher];
|
||||
if (kopf) {
|
||||
const schritt = U / gesamt;
|
||||
const laenge = GLIED_LAENGE[welcher];
|
||||
kopf.style.strokeDasharray = `${laenge} ${(U - laenge).toFixed(3)}`;
|
||||
kopf.style.strokeDashoffset = `-${((n - 1) * schritt).toFixed(3)}`;
|
||||
}
|
||||
};
|
||||
|
||||
const takt = () => {
|
||||
const j = new Date();
|
||||
@@ -490,65 +532,27 @@
|
||||
Die Stunde ueber ZWOELF, nicht ueber 24: Ein Zifferblatt hat
|
||||
zwoelf Stunden, und der Ring soll sich wie eines lesen. */
|
||||
setze('sekunde', sk / 60);
|
||||
/* Die Perle sitzt auf dem Kopf des Sekundenbogens. Sechs Grad je
|
||||
Sekunde, im selben Takt wie die Anzeige -- sie springt also
|
||||
mit, statt weich zu gleiten. Das ist ehrlicher (die Anzeige ist
|
||||
digital) und kostet EINE Bildberechnung je Sekunde statt
|
||||
sechzig. Auf einer Seite, die stundenlang offen steht, ist das
|
||||
der Unterschied zwischen einem warmen und einem kalten
|
||||
Rechner. */
|
||||
/* DIE KOEPFE ZAEHLEN WEITER, STATT ZURUECKZUSPRINGEN.
|
||||
|
||||
Sie gleiten jetzt (Ueberblendung in heim.css) statt zu
|
||||
springen. Damit das funktioniert, darf der Winkel bei 59 -> 0
|
||||
Sekunden NICHT von 354 auf 0 fallen -- die Ueberblendung liefe
|
||||
sonst einmal je Minute rueckwaerts durch das ganze
|
||||
Zifferblatt. Gerechnet wird deshalb mit der fortlaufenden Zeit:
|
||||
Der Winkel waechst immer weiter, und 366 Grad sieht genauso aus
|
||||
wie 6, nur dass der Weg dorthin vorwaerts fuehrt.
|
||||
/* HIER STAND DIE PERLENRECHNUNG -- 60 Zeilen, und sie ist mit den
|
||||
Perlen zusammen weggefallen (09.09.2026, screen5).
|
||||
|
||||
Die Anzeige selbst rechnet weiterhin nur einmal je Sekunde --
|
||||
die Bewegung dazwischen macht der Browser, nicht das Skript. */
|
||||
/* SEIT DEM ERSTEN TAKT, NICHT SEIT 1970.
|
||||
Sie war ein Lehrstueck fuer sich: eine eigene Uhr ab dem ersten
|
||||
Takt, weil die volle Unixzeit `rotate(1.07333e+10deg)` ergab und
|
||||
die Nachkommastellen verlor; ein Startwinkel je Bahn; drei
|
||||
Winkel, die die kleineren Einheiten anteilig mittragen mussten,
|
||||
damit kein Kopf neben dem Ende seines Bogens steht.
|
||||
|
||||
Der erste Versuch rechnete mit der vollen Unixzeit. Ergebnis im
|
||||
Bildschirmfoto: `rotate(1.07333e+10deg)` -- eine Zahl in
|
||||
Exponentialschreibweise, bei der die Nachkommastellen laengst
|
||||
weg sind. Die Perlen standen sichtbar NEBEN dem Ende ihrer
|
||||
Boegen, die rote sogar auf der anderen Seite des Zifferblatts.
|
||||
Gerechnet war es richtig, darstellbar nicht.
|
||||
All das war noetig, WEIL der Kopf ein zweites Ding an einer
|
||||
zweiten Stelle war. Er ist jetzt das letzte Glied der Bahn
|
||||
selbst und wird von derselben Funktion aus denselben Zahlen
|
||||
gesetzt (siehe `setze`). Damit kann er gar nicht mehr
|
||||
danebenstehen -- nicht weil die Rechnung besser ist, sondern
|
||||
weil es nur noch eine gibt.
|
||||
|
||||
Jetzt zaehlt eine eigene Uhr ab dem ersten Takt: Startwinkel ist
|
||||
der echte Stand beim Laden, danach kommen 6 Grad je Sekunde
|
||||
dazu. Die Zahl bleibt klein (ein Tag sind 518 400 Grad), waechst
|
||||
aber weiter -- und nur das braucht die Ueberblendung, damit sie
|
||||
nie rueckwaerts laeuft. */
|
||||
if (nullpunkt === null) {
|
||||
nullpunkt = Math.floor(j.getTime() / 1000);
|
||||
startWinkel = sk * 6;
|
||||
minStart = min; stdStart = std; sekStart = sk;
|
||||
}
|
||||
const seit = Math.floor(j.getTime() / 1000) - nullpunkt;
|
||||
const winkelSek = startWinkel + seit * 6;
|
||||
const perle = $('uhr-perle');
|
||||
if (perle) perle.style.transform = `rotate(${winkelSek.toFixed(2)}deg)`;
|
||||
/* Die beiden anderen Koepfe laufen mit IHREN Ringen -- die Minute
|
||||
nimmt die Sekunden anteilig mit, die Stunde die Minuten. Sonst
|
||||
staende der Kopf neben dem Ende seines Bogens, und genau das
|
||||
sieht man sofort. */
|
||||
/* Minute und Stunde ebenso: Startstand plus das, was seither
|
||||
vergangen ist. Sie tragen die kleineren Einheiten anteilig mit,
|
||||
damit ihr Kopf nie neben dem Ende ihres Bogens steht. */
|
||||
const perleMin = $('uhr-perle-minute');
|
||||
if (perleMin) {
|
||||
const start = (minStart + sekStart / 60) * 6;
|
||||
perleMin.style.transform = `rotate(${(start + seit * 0.1).toFixed(3)}deg)`;
|
||||
}
|
||||
const perleStd = $('uhr-perle-stunde');
|
||||
if (perleStd) {
|
||||
const start = ((stdStart % 12) + minStart / 60) * 30;
|
||||
perleStd.style.transform = `rotate(${(start + seit / 120).toFixed(4)}deg)`;
|
||||
}
|
||||
Der Rest, der hier stand (nullpunkt, startWinkel, minStart,
|
||||
stdStart, sekStart), wird nirgends sonst gebraucht und ist
|
||||
ebenfalls weg. Eine Variable, die nur noch gepflegt wird, ist
|
||||
eine Falle fuer den naechsten Leser. */
|
||||
setze('minute', (min + sk / 60) / 60);
|
||||
setze('stunde', ((std % 12) + min / 60) / 12);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user