Die Kachelzeichen komplett neu -- Plaketten statt getoenter Quadrate
Rueckmeldung: "ich will dass die viel krasser aussehen, du veraenderst
immer nur minimal." Berechtigt. Drei Durchgaenge lang habe ich an
Details gedreht (Verlauf, dann Fuellung) -- jeder fuer sich richtig, in
der Summe kaum sichtbar. Das hier ist der Umbau.
DIE PLAKETTE war ein leicht getoentes Quadrat mit duennem Rand. Sie ist
jetzt ein KOERPER:
* 58 statt 52 px (gross: 70 statt 62)
* Verlauf ueber die Diagonale statt flacher Toenung
* Lichtkante oben INNEN, Schattenkante unten innen -- zusammen eine
Woelbung, das Feld wirkt gepraegt statt gemalt
* ein Hof in der eigenen Farbe darunter
* ein Glanzbogen darueber, der von links oben einfaellt
DAS ZEICHEN war eine duenne Kontur. Es besteht jetzt aus DREI Lagen mit
je eigenem Verlauf:
KOERPER gefuellte Grundform, oben satt, unten fast weg -- eine
gleichmaessig gefuellte Form ist ein Aufkleber, eine
auslaufende ist ein Koerper
GLANZ schmaler heller Streifen quer ueber die obere Haelfte,
genau auf dem Koerper. Die Spiegelung.
KONTUR oben fast WEISS, unten im Farbton. So sieht Metall aus, auf
das Licht von oben faellt -- das ist der Grund, warum die
Zeichen jetzt plastisch wirken statt gezeichnet.
Dazu 29 statt 25 px und Strichstaerke 2,05 statt 1,65: Die Zeichen
sollen TRAGEN, nicht andeuten. Zaghaft war genau das Problem.
Alle drei Verlaeufe stehen EINMAL im Dokument und arbeiten mit
currentColor -- sie nehmen den Ton jeder der siebzehn Kacheln an. Drei
Verlaeufe statt einundfuenfzig.
Alles bleibt gedeckt: Ein leuchtender Kasten waere in einer dunklen
Oberflaeche eine Lampe, und Lampen schaut man nicht stundenlang an.
Im Wasserzeichen hinter dem Kacheltext und im Kontrastmodus bleiben
Koerper und Glanz aus.
GEPRUEFT: Buehne 38 (Textkontrast an echten Bildpunkten -- die
kraeftigeren Plaketten duerfen die Lesbarkeit nicht antasten),
Startansicht 133, Rollen 97, Handy 50, Grosscheck 15, Lesbarkeit 14.
Alle gruen.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -329,52 +329,80 @@
|
||||
entsteht aus den Pfaden, die ohnehin schon da waren. */
|
||||
|
||||
const NS = 'http://www.w3.org/2000/svg';
|
||||
const VERLAUF_ID = 'zeichen-verlauf';
|
||||
const VERLAUF_ID = 'zeichen-verlaeufe';
|
||||
|
||||
/** Legt den gemeinsamen Verlauf einmal ins Dokument. Alle Zeichen
|
||||
* verweisen darauf; ein zweiter Aufruf tut nichts. */
|
||||
/* ---------- Die drei Verläufe ------------------------------------------
|
||||
|
||||
Ein Zeichen wird aus drei Lagen aufgebaut, und jede hat ihren
|
||||
eigenen Verlauf. Alle drei stehen EINMAL im Dokument und arbeiten
|
||||
mit currentColor -- dadurch nehmen sie den Ton jeder der siebzehn
|
||||
Kacheln an, ohne dass es einundfünfzig Verläufe braucht.
|
||||
|
||||
flaeche die gefüllte Grundform: oben kräftig, unten fast weg.
|
||||
Das ist der Körper des Gegenstands.
|
||||
linie die Kontur: oben fast WEISS, unten im Farbton. Genau so
|
||||
sieht Metall aus, auf das Licht von oben fällt -- und
|
||||
genau das lässt ein Zeichen plastisch wirken statt
|
||||
gezeichnet.
|
||||
glanz ein schmaler heller Streifen quer über die obere Hälfte.
|
||||
Die Spiegelung. Sie ist der Unterschied zwischen "gut
|
||||
gemacht" und "das will ich anfassen".
|
||||
|
||||
ALLE in Benutzerkoordinaten (userSpaceOnUse) über die festen 24
|
||||
Einheiten des Rasters. In Objektkoordinaten -- der Vorgabe -- würde
|
||||
der Verlauf auf den Umriss JEDES einzelnen Pfades gerechnet, und
|
||||
eine waagerechte Linie hat die Höhe null: Der Verlauf wäre entartet
|
||||
und der Browser zeichnete den Pfad gar nicht. Genau daran sind am
|
||||
03.09.2026 die Querlinie im Kalender, die Regler in Technik und die
|
||||
Grundlinie der Berichte verschwunden. */
|
||||
function verlaufSicherstellen() {
|
||||
if (document.getElementById(VERLAUF_ID)) return;
|
||||
const svg = document.createElementNS(NS, 'svg');
|
||||
svg.setAttribute('id', VERLAUF_ID);
|
||||
svg.setAttribute('aria-hidden', 'true');
|
||||
svg.setAttribute('width', '0');
|
||||
svg.setAttribute('height', '0');
|
||||
svg.style.position = 'absolute';
|
||||
const defs = document.createElementNS(NS, 'defs');
|
||||
const lg = document.createElementNS(NS, 'linearGradient');
|
||||
lg.setAttribute('id', VERLAUF_ID);
|
||||
/* userSpaceOnUse, NICHT die Vorgabe objectBoundingBox -- und das ist
|
||||
kein Detail, sondern der Unterschied zwischen "sieht toll aus" und
|
||||
"die Hälfte des Zeichens fehlt".
|
||||
|
||||
Ein Verlauf in Objektkoordinaten wird auf den Umriss JEDES
|
||||
einzelnen Pfades gerechnet. Eine waagerechte Linie (M4 12h16) hat
|
||||
aber eine Höhe von null: Der Verlauf ist damit entartet, und der
|
||||
Browser zeichnet den Pfad einfach GAR NICHT.
|
||||
const bauen = (id, stops, x2 = '0', y1 = '2', y2 = '22') => {
|
||||
const lg = document.createElementNS(NS, 'linearGradient');
|
||||
lg.setAttribute('id', id);
|
||||
lg.setAttribute('gradientUnits', 'userSpaceOnUse');
|
||||
lg.setAttribute('x1', '0'); lg.setAttribute('y1', y1);
|
||||
lg.setAttribute('x2', x2); lg.setAttribute('y2', y2);
|
||||
for (const [pos, farbe, deck] of stops) {
|
||||
const st = document.createElementNS(NS, 'stop');
|
||||
st.setAttribute('offset', pos);
|
||||
st.setAttribute('stop-color', farbe);
|
||||
st.setAttribute('stop-opacity', deck);
|
||||
lg.append(st);
|
||||
}
|
||||
defs.append(lg);
|
||||
};
|
||||
|
||||
Genau das ist passiert: Beim Kalender verschwand die Querlinie,
|
||||
beim Technik-Zeichen alle drei Regler-Striche, bei den Berichten
|
||||
die Grundlinie. Zurück blieb ein leerer Kasten und drei Punkte --
|
||||
und es sah aus, als sei die Idee mit dem Verlauf schuld.
|
||||
/* Der Körper: oben satt, unten fast durchsichtig. */
|
||||
bauen('zeichen-flaeche', [
|
||||
['0', 'currentColor', '0.62'],
|
||||
['0.5', 'currentColor', '0.34'],
|
||||
['1', 'currentColor', '0.1'],
|
||||
]);
|
||||
|
||||
/* Die Kontur: Licht von oben. Oben fast weiss, unten im Farbton --
|
||||
das ist der Trick, der die Zeichen aus der Fläche hebt. */
|
||||
bauen('zeichen-linie', [
|
||||
['0', '#ffffff', '0.96'],
|
||||
['0.42', '#ffffff', '0.72'],
|
||||
['1', 'currentColor', '0.9'],
|
||||
]);
|
||||
|
||||
/* Die Spiegelung, diagonal von links oben nach rechts unten. */
|
||||
bauen('zeichen-glanz', [
|
||||
['0', '#ffffff', '0.55'],
|
||||
['0.45', '#ffffff', '0.12'],
|
||||
['0.7', '#ffffff', '0'],
|
||||
], '18', '0', '20');
|
||||
|
||||
In Benutzerkoordinaten läuft der Verlauf über die festen 24
|
||||
Einheiten des Rasters, unabhängig davon, wie hoch oder flach der
|
||||
einzelne Pfad ist. Damit bekommt jede Linie den Farbwert, der
|
||||
ihrer Höhe im Zeichen entspricht -- was ohnehin richtiger ist:
|
||||
Das Licht kommt von oben, nicht von jedem Strich einzeln. */
|
||||
lg.setAttribute('gradientUnits', 'userSpaceOnUse');
|
||||
lg.setAttribute('x1', '0'); lg.setAttribute('y1', '2');
|
||||
lg.setAttribute('x2', '0'); lg.setAttribute('y2', '22');
|
||||
/* currentColor statt einer festen Farbe: Der Verlauf erbt damit den
|
||||
Ton der Kachel, auf der er gerade liegt. */
|
||||
for (const [pos, deck] of [['0', '1'], ['0.55', '0.92'], ['1', '0.6']]) {
|
||||
const s = document.createElementNS(NS, 'stop');
|
||||
s.setAttribute('offset', pos);
|
||||
s.setAttribute('stop-color', 'currentColor');
|
||||
s.setAttribute('stop-opacity', deck);
|
||||
lg.append(s);
|
||||
}
|
||||
defs.append(lg);
|
||||
svg.append(defs);
|
||||
document.body.append(svg);
|
||||
}
|
||||
@@ -390,9 +418,13 @@
|
||||
die Zeichnung oben. Ein Zeichen ohne Füllung (ältere Einträge,
|
||||
die noch ein reines Feld sind) bekommt einfach keine. */
|
||||
const eintrag = ZEICHEN[name] || {};
|
||||
/* Drei Lagen, von hinten nach vorn: Körper, Spiegelung auf dem
|
||||
Körper, dann die Kontur. Die Spiegelung benutzt dieselben Pfade
|
||||
wie der Körper -- sie liegt also GENAU auf ihm und nicht daneben. */
|
||||
const teile = Array.isArray(eintrag)
|
||||
? [['zeichen__linie', eintrag]]
|
||||
: [['zeichen__fuellung', eintrag.fuellung || []],
|
||||
['zeichen__glanz', eintrag.fuellung || []],
|
||||
['zeichen__linie', eintrag.linien || []]];
|
||||
|
||||
for (const [lage, pfade] of teile) {
|
||||
|
||||
Reference in New Issue
Block a user