Die Zeichen bekommen eine Flaeche -- aus Konturen werden Piktogramme
"ich will die symbole in den kacheln noch viel krasser und geiler."
Bis eben war jedes Zeichen eine reine Kontur. Sauber, aber neutral --
siebzehn gleich starke Umrisse nebeneinander, wie aus jedem
Symbolbaukasten.
Jetzt besteht jedes aus ZWEI Teilen:
FUELLUNG eine gefuellte Grundform, gedeckt hinterlegt
LINIE die scharfe Zeichnung darueber, mit dem Verlauf von gestern
Das ist der Unterschied zwischen einem Symbol und einem Piktogramm.
Sobald ein Teil FLAECHE hat, bekommt das Zeichen ein Vorn und ein
Hinten, und das Auge erkennt es, ohne es zu lesen.
Gefuellt wird immer das, WORUM ES GEHT -- nie alles:
Kalender der Kopf des Blattes (daran erkennt man ihn aus drei Metern)
Aufgaben die mittlere Spalte -- "in Arbeit", dort passiert etwas
Dashboard zwei der vier Felder ueber Eck, das gibt Rhythmus
Ordner der Korpus ohne die Lasche, damit die Stufe sichtbar bleibt
Berichte aus drei Strichen werden drei SAEULEN (ein Balkendiagramm
hat Balken)
Start-Check nur der Haken -- ein gefuelltes Klemmbrett waere ein Kasten
Personen der Kopf; bei zwei Personen nur der VORDERE, daraus
entsteht die Tiefe
Buch die linke Seite -- eine im Licht, eine im Schatten
Technik die drei Griffe
LIVE der Sender in der Mitte; gefuellte Wellen saehen aus wie
ein Auge
Trichter nur der obere Teil, sonst kippt das Zeichen nach unten
20 % Deckkraft sind gemessen, nicht geraten: darueber wird das Zeichen
zum Fleck und die Linie darin unsichtbar, darunter sieht man die Flaeche
gar nicht. Beim Ueberfahren geht sie auf 30 %, als kaeme Licht dazu.
WARUM NICHT EINFACH DICKER -- der Unterschied zum gescheiterten Versuch
von gestern: Der legte eine dicke, WEICHGEZEICHNETE KOPIE DER LINIE
darunter und hat damit jede Luecke zugeschmiert (aus dem Kalender wurde
ein leerer Kasten). Eine Flaeche ist etwas anderes als ein aufgeblasener
Strich: Sie liegt INNERHALB der Kontur und laesst die Zwischenraeume
unberuehrt. Genau deshalb funktioniert es jetzt.
Im Wasserzeichen und im Kontrastmodus bleibt die Flaeche aus -- dort
wuerde sie den Text hinterlegen bzw. zu einem massiven Block werden.
GEPRUEFT: Buehne 38 (Textkontrast an echten Bildpunkten -- die Flaeche
darf die Lesbarkeit nicht antasten), Startansicht 133, Rollen 97,
Handy 50, Team 30, Grosscheck 15, Lesbarkeit 14. Alle gruen.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+158
-59
@@ -16,59 +16,149 @@
|
||||
|
||||
/* ---------- Zeichen ------------------------------------------------------
|
||||
|
||||
Alle im selben Raster (24×24), alle nur aus Linien -- gefüllte Zeichen
|
||||
wirken neben Text wie Flecken. Eigene statt einer Fremdbibliothek:
|
||||
siebzehn Pfade sind kleiner als jede Schriftart und kosten keine
|
||||
zusätzliche Lieferkette. */
|
||||
Alle im selben Raster (24×24). Seit dem 03.09.2026 besteht jedes
|
||||
Zeichen aus ZWEI Teilen:
|
||||
|
||||
fuellung eine gefüllte Grundform -- der Gegenstand selbst,
|
||||
gedeckt hinterlegt
|
||||
linien die scharfe Zeichnung darüber
|
||||
|
||||
Das ist der Unterschied zwischen einem Symbol und einem Piktogramm.
|
||||
Eine reine Kontur ist neutral; sobald ein Teil FLÄCHE hat, bekommt
|
||||
das Zeichen ein Vorn und ein Hinten, und das Auge erkennt es, ohne
|
||||
es zu lesen. Gefüllt wird immer das, worum es geht: beim Kalender
|
||||
der Kopf, beim Ordner der Korpus, bei einer Person der Kopf, beim
|
||||
Regler die Griffe.
|
||||
|
||||
WARUM NICHT EINFACH DICKER: Ein früherer Versuch legte eine dicke,
|
||||
weichgezeichnete Kopie der LINIE darunter. Das hat die feinen
|
||||
Lücken zugeschmiert -- aus dem Kalender wurde ein leerer Kasten
|
||||
(siehe start.css). Eine Fläche ist etwas anderes als ein
|
||||
aufgeblasener Strich: Sie liegt INNERHALB der Kontur und lässt die
|
||||
Zwischenräume unberührt.
|
||||
|
||||
Eigene Pfade statt einer Fremdbibliothek: siebzehn Zeichen sind
|
||||
kleiner als jede Schriftart und kosten keine Lieferkette. */
|
||||
|
||||
const ZEICHEN = {
|
||||
/* Vier Felder mit deutlicher Fuge. Die Fuge ist die eigentliche
|
||||
Aussage des Zeichens ("mehrere Bereiche nebeneinander") -- ist sie
|
||||
zu schmal, sieht man nur einen Kasten. */
|
||||
dashboard: ['M4 4.5h6.4v6.4H4z', 'M13.6 4.5h6.4v4.2h-6.4z',
|
||||
'M13.6 11.6h6.4v7.9h-6.4z', 'M4 13.7h6.4v5.8H4z'],
|
||||
aufgaben: ['M4.5 5h4v14h-4z', 'M10 5h4v9h-4z', 'M15.5 5h4v11.5h-4z'],
|
||||
/* Der Kasten beginnt tiefer, die Querlinie sitzt weiter unten und
|
||||
die beiden Beine stehen weiter aussen. Bei 25 px Groesse
|
||||
verschmelzen Linien, die naeher als vier Einheiten beieinander
|
||||
liegen, zu einer Flaeche -- vorher sah der Kalender deshalb aus
|
||||
wie ein leerer Kasten. */
|
||||
kalender: ['M3.5 7h17v12.5h-17z', 'M3.5 11.5h17', 'M7.5 4v4.6', 'M16.5 4v4.6'],
|
||||
calls: ['M3.5 7h11v10h-11z', 'M14.5 11l6-3.5v9l-6-3.5z'],
|
||||
dateien: ['M3.5 6.5h5.5l2 2h9.5v11h-17z'],
|
||||
/* Der Steckbrief: eine Person IN einer Karte -- unterscheidbar vom
|
||||
Profil-Zeichen (nur die Person), damit die beiden Kacheln nicht
|
||||
gleich aussehen. */
|
||||
steckbrief: ['M3.5 5.5h17v13h-17z', 'M8.5 11.2a1.9 1.9 0 1 0 0-3.8 1.9 1.9 0 0 0 0 3.8z',
|
||||
'M5.6 16.2c0-1.7 1.3-3 2.9-3s2.9 1.3 2.9 3', 'M14.5 9.5h4', 'M14.5 13h4'],
|
||||
profil: ['M12 7a3.2 3.2 0 1 0 0 6.4A3.2 3.2 0 0 0 12 7z',
|
||||
'M5.5 20c.7-3.3 3.3-5.3 6.5-5.3s5.8 2 6.5 5.3'],
|
||||
startcheck: ['M6 4.5h12v15H6z', 'M9.2 9.6l1.7 1.7 3.6-3.7', 'M9.2 15.2h5.6'],
|
||||
live: ['M12 10.2a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6z',
|
||||
'M8.2 8.2a5.4 5.4 0 0 0 0 7.6', 'M15.8 15.8a5.4 5.4 0 0 0 0-7.6',
|
||||
'M5.4 5.4a9.4 9.4 0 0 0 0 13.2', 'M18.6 18.6a9.4 9.4 0 0 0 0-13.2'],
|
||||
content: ['M3.5 6h17v13h-17z', 'M3.5 10h17', 'M8 6l-1.4 4', 'M13 6l-1.4 4', 'M18 6l-1.4 4'],
|
||||
/* Drei Regler mit ihren Griffen. Die Griffe waren bis zum
|
||||
03.09.2026 unbrauchbare Pfade ("a1.4 1.4 0 1 0 0-.02z" -- ein
|
||||
Bogen der Laenge null): Sie wurden schlicht nicht gezeichnet, und
|
||||
uebrig blieben drei nackte Striche, die aussahen wie ein
|
||||
Menue-Symbol. Jetzt sind es echte Kreise. */
|
||||
technik: ['M4 7.5h16', 'M4 12h16', 'M4 16.5h16',
|
||||
'M9 5.9a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2z',
|
||||
dashboard: {
|
||||
/* Zwei der vier Felder gefüllt, über Eck -- das gibt dem Zeichen
|
||||
einen Rhythmus. Alle vier zu füllen wäre ein Klotz. */
|
||||
fuellung: ['M4 4.5h6.4v6.4H4z', 'M13.6 11.6h6.4v7.9h-6.4z'],
|
||||
linien: ['M4 4.5h6.4v6.4H4z', 'M13.6 4.5h6.4v4.2h-6.4z',
|
||||
'M13.6 11.6h6.4v7.9h-6.4z', 'M4 13.7h6.4v5.8H4z'],
|
||||
},
|
||||
aufgaben: {
|
||||
/* Die mittlere Spalte -- "in Arbeit". Das Brett hat drei Spalten,
|
||||
und die mittlere ist die, in der gerade etwas passiert. */
|
||||
fuellung: ['M10 5h4v9h-4z'],
|
||||
linien: ['M4.5 5h4v14h-4z', 'M10 5h4v9h-4z', 'M15.5 5h4v11.5h-4z'],
|
||||
},
|
||||
kalender: {
|
||||
/* Der Kopf des Blattes. Genau der Streifen, an dem man einen
|
||||
Kalender auch aus drei Metern erkennt. */
|
||||
fuellung: ['M3.5 7h17v4.5h-17z'],
|
||||
linien: ['M3.5 7h17v12.5h-17z', 'M3.5 11.5h17', 'M7.5 4v4.6', 'M16.5 4v4.6'],
|
||||
},
|
||||
calls: {
|
||||
/* Das Objektiv. Der Kasten bleibt offen, sonst wird das Zeichen
|
||||
schwer. */
|
||||
fuellung: ['M14.5 11l6-3.5v9l-6-3.5z'],
|
||||
linien: ['M3.5 7h11v10h-11z', 'M14.5 11l6-3.5v9l-6-3.5z'],
|
||||
},
|
||||
dateien: {
|
||||
/* Der Korpus ohne die Lasche -- so bleibt die Stufe oben sichtbar,
|
||||
die den Ordner ausmacht. */
|
||||
fuellung: ['M3.5 10h17v9.5h-17z'],
|
||||
linien: ['M3.5 6.5h5.5l2 2h9.5v11h-17z', 'M3.5 10h17'],
|
||||
},
|
||||
steckbrief: {
|
||||
/* Kopf und Schultern der Person IN der Karte -- unterscheidbar vom
|
||||
Profil-Zeichen (nur die Person), damit die beiden Kacheln nicht
|
||||
gleich aussehen. */
|
||||
fuellung: ['M8.5 11.2a1.9 1.9 0 1 0 0-3.8 1.9 1.9 0 0 0 0 3.8z'],
|
||||
linien: ['M3.5 5.5h17v13h-17z', 'M8.5 11.2a1.9 1.9 0 1 0 0-3.8 1.9 1.9 0 0 0 0 3.8z',
|
||||
'M5.6 16.2c0-1.7 1.3-3 2.9-3s2.9 1.3 2.9 3', 'M14.5 9.5h4', 'M14.5 13h4'],
|
||||
},
|
||||
profil: {
|
||||
fuellung: ['M12 7a3.2 3.2 0 1 0 0 6.4A3.2 3.2 0 0 0 12 7z'],
|
||||
linien: ['M12 7a3.2 3.2 0 1 0 0 6.4A3.2 3.2 0 0 0 12 7z',
|
||||
'M5.5 20c.7-3.3 3.3-5.3 6.5-5.3s5.8 2 6.5 5.3'],
|
||||
},
|
||||
startcheck: {
|
||||
/* Nur der Haken ist gefüllt -- er ist die Aussage des Zeichens.
|
||||
Ein gefülltes Klemmbrett wäre ein Kasten. */
|
||||
fuellung: ['M9.2 9.6l1.7 1.7 3.6-3.7 1 1-4.6 4.7-2.7-2.7z'],
|
||||
linien: ['M6 4.5h12v15H6z', 'M9.2 9.6l1.7 1.7 3.6-3.7', 'M9.2 15.2h5.6'],
|
||||
},
|
||||
live: {
|
||||
/* Der Sender in der Mitte. Die Wellen bleiben Linien -- gefüllte
|
||||
Wellen sähen aus wie ein Auge. */
|
||||
fuellung: ['M12 10.2a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6z'],
|
||||
linien: ['M12 10.2a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6z',
|
||||
'M8.2 8.2a5.4 5.4 0 0 0 0 7.6', 'M15.8 15.8a5.4 5.4 0 0 0 0-7.6',
|
||||
'M5.4 5.4a9.4 9.4 0 0 0 0 13.2', 'M18.6 18.6a9.4 9.4 0 0 0 0-13.2'],
|
||||
},
|
||||
content: {
|
||||
/* Die Klappe der Filmklappe. */
|
||||
fuellung: ['M3.5 6h17v4h-17z'],
|
||||
linien: ['M3.5 6h17v13h-17z', 'M3.5 10h17', 'M8 6l-1.4 4', 'M13 6l-1.4 4', 'M18 6l-1.4 4'],
|
||||
},
|
||||
technik: {
|
||||
/* Die drei Griffe. Sie waren bis zum 03.09.2026 Bögen der Länge
|
||||
null und wurden nie gezeichnet -- übrig blieben drei nackte
|
||||
Striche, die aussahen wie ein Menü-Symbol. */
|
||||
fuellung: ['M9 5.9a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2z',
|
||||
'M15 10.4a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2z',
|
||||
'M7.5 14.9a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2z'],
|
||||
community: ['M9 8.6a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4z',
|
||||
'M3.5 19.5c.6-2.8 2.8-4.5 5.5-4.5s4.9 1.7 5.5 4.5',
|
||||
'M16 8.8a2.4 2.4 0 1 1 1.6 4.3', 'M17 15.2c2 .5 3.3 2 3.7 4.3'],
|
||||
schutz: ['M12 3.6 5.6 6.3v5.1c0 3.8 2.6 7.2 6.4 8.4 3.8-1.2 6.4-4.6 6.4-8.4V6.3z',
|
||||
'M9.4 11.8l1.9 1.9 3.4-3.6'],
|
||||
reports: ['M4 19.5h16', 'M7.5 16.5V9.5', 'M12 16.5V5.5', 'M16.5 16.5v-5'],
|
||||
personen: ['M14.4 6.2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z', 'M11.6 12.2 4 19.8',
|
||||
'M6.4 17.4l2 2', 'M8.6 15.2l2 2'],
|
||||
scouting: ['M3.5 5.5h17l-6.6 7.6v6.4l-3.8-2.1v-4.3z'],
|
||||
wissen: ['M4 5h6.4c.9 0 1.6.7 1.6 1.6V19c0-.9-.7-1.6-1.6-1.6H4z',
|
||||
'M20 5h-6.4c-.9 0-1.6.7-1.6 1.6V19c0-.9.7-1.6 1.6-1.6H20z'],
|
||||
automation: ['M13.2 3.2 6 13.4h5.2l-.8 7.4 7.6-10.6h-5.2z'],
|
||||
linien: ['M4 7.5h16', 'M4 12h16', 'M4 16.5h16',
|
||||
'M9 5.9a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2z',
|
||||
'M15 10.4a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2z',
|
||||
'M7.5 14.9a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2z'],
|
||||
},
|
||||
community: {
|
||||
/* Der vordere Kopf. Der hintere bleibt Kontur -- dadurch entsteht
|
||||
die Tiefe, um die es bei zwei Personen geht. */
|
||||
fuellung: ['M9 8.6a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4z'],
|
||||
linien: ['M9 8.6a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4z',
|
||||
'M3.5 19.5c.6-2.8 2.8-4.5 5.5-4.5s4.9 1.7 5.5 4.5',
|
||||
'M16 8.8a2.4 2.4 0 1 1 1.6 4.3', 'M17 15.2c2 .5 3.3 2 3.7 4.3'],
|
||||
},
|
||||
schutz: {
|
||||
fuellung: ['M12 3.6 5.6 6.3v5.1c0 3.8 2.6 7.2 6.4 8.4 3.8-1.2 6.4-4.6 6.4-8.4V6.3z'],
|
||||
linien: ['M12 3.6 5.6 6.3v5.1c0 3.8 2.6 7.2 6.4 8.4 3.8-1.2 6.4-4.6 6.4-8.4V6.3z',
|
||||
'M9.4 11.8l1.9 1.9 3.4-3.6'],
|
||||
},
|
||||
reports: {
|
||||
/* Aus drei Strichen werden drei Säulen -- ein Balkendiagramm hat
|
||||
Balken, keine Striche. */
|
||||
fuellung: ['M6.6 9.5h1.8v7h-1.8z', 'M11.1 5.5h1.8v11h-1.8z', 'M15.6 11.5h1.8v5h-1.8z'],
|
||||
linien: ['M4 19.5h16', 'M6.6 9.5h1.8v7h-1.8z', 'M11.1 5.5h1.8v11h-1.8z',
|
||||
'M15.6 11.5h1.8v5h-1.8z'],
|
||||
},
|
||||
personen: {
|
||||
/* Der Bart des Schlüssels bleibt Linie, der Kopf wird Fläche. */
|
||||
fuellung: ['M14.4 6.2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'],
|
||||
linien: ['M14.4 6.2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z', 'M11.6 12.2 4 19.8',
|
||||
'M6.4 17.4l2 2', 'M8.6 15.2l2 2'],
|
||||
},
|
||||
scouting: {
|
||||
/* Der Trichter, aber nur der obere Teil -- der Stiel bleibt offen,
|
||||
sonst kippt das Zeichen optisch nach unten. */
|
||||
fuellung: ['M3.5 5.5h17l-6.6 7.6h-3.8z'],
|
||||
linien: ['M3.5 5.5h17l-6.6 7.6v6.4l-3.8-2.1v-4.3z'],
|
||||
},
|
||||
wissen: {
|
||||
/* Die linke Seite gefüllt: ein aufgeschlagenes Buch hat eine
|
||||
Seite im Licht und eine im Schatten. */
|
||||
fuellung: ['M4 5h6.4c.9 0 1.6.7 1.6 1.6V19c0-.9-.7-1.6-1.6-1.6H4z'],
|
||||
linien: ['M4 5h6.4c.9 0 1.6.7 1.6 1.6V19c0-.9-.7-1.6-1.6-1.6H4z',
|
||||
'M20 5h-6.4c-.9 0-1.6.7-1.6 1.6V19c0-.9.7-1.6 1.6-1.6H20z'],
|
||||
},
|
||||
automation: {
|
||||
fuellung: ['M13.2 3.2 6 13.4h5.2l-.8 7.4 7.6-10.6h-5.2z'],
|
||||
linien: ['M13.2 3.2 6 13.4h5.2l-.8 7.4 7.6-10.6h-5.2z'],
|
||||
},
|
||||
};
|
||||
|
||||
/* ---------- Die Bereiche -------------------------------------------------
|
||||
@@ -296,17 +386,26 @@
|
||||
svg.setAttribute('aria-hidden', 'true');
|
||||
svg.setAttribute('class', klasse);
|
||||
|
||||
/* EINE Lage. Ein zweiter, weichgezeichneter Unterbau stand hier
|
||||
kurzzeitig und hat die feinen Lücken zugeschmiert -- siehe die
|
||||
ausführliche Begründung in start.css. */
|
||||
const g = document.createElementNS(NS, 'g');
|
||||
g.setAttribute('class', 'zeichen__linie');
|
||||
for (const d of (ZEICHEN[name] || [])) {
|
||||
const pfad = document.createElementNS(NS, 'path');
|
||||
pfad.setAttribute('d', d);
|
||||
g.append(pfad);
|
||||
/* Erst die Fläche, dann die Linie -- in dieser Reihenfolge liegt
|
||||
die Zeichnung oben. Ein Zeichen ohne Füllung (ältere Einträge,
|
||||
die noch ein reines Feld sind) bekommt einfach keine. */
|
||||
const eintrag = ZEICHEN[name] || {};
|
||||
const teile = Array.isArray(eintrag)
|
||||
? [['zeichen__linie', eintrag]]
|
||||
: [['zeichen__fuellung', eintrag.fuellung || []],
|
||||
['zeichen__linie', eintrag.linien || []]];
|
||||
|
||||
for (const [lage, pfade] of teile) {
|
||||
if (!pfade.length) continue;
|
||||
const g = document.createElementNS(NS, 'g');
|
||||
g.setAttribute('class', lage);
|
||||
for (const d of pfade) {
|
||||
const pfad = document.createElementNS(NS, 'path');
|
||||
pfad.setAttribute('d', d);
|
||||
g.append(pfad);
|
||||
}
|
||||
svg.append(g);
|
||||
}
|
||||
svg.append(g);
|
||||
return svg;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user