diff --git a/POST-6.md b/POST-6.md
index d6af104..789574a 100644
--- a/POST-6.md
+++ b/POST-6.md
@@ -109,6 +109,14 @@ dem Gewerk: Wärmepumpe Müller, Montagetermin, Baustellenfotos.
## 4. Wo bewusst abgewichen wird
+**Alles, was einen Chat kennzeichnet, ist grün.** Projektkanal, Gruppe und
+Direktnachricht tragen dieselbe Marke (`MARKE`, Fläche `#DCFCE4`, Rand
+`#B7EDC6`, Zeichen `#148134`) — in der Liste wie im Verlauf. Vorher trug der
+Projektkanal Lila, die Gruppe Grau und jede Person ihre eigene Farbe: vier
+Familien in einer Liste, und keine davon sagte etwas, das die Zeile nicht schon
+sagt. Die Kürzel unterscheiden die Personen, dafür braucht es keine vier
+Farbtöne.
+
**Die Plakette für Ungelesenes trägt eine Zahl und ist grün.** In der Quelle
ist `unread` ein Wahrheitswert und der Punkt violett. Beides ist geändert:
violett ist im Produkt die Farbe der Projekte, das Kanalsymbol in derselben
@@ -133,14 +141,24 @@ dasselbe Paket, das die Website benutzt — `@phosphor-icons/react` steht neben
`lucide-react` in ihrer `package.json` — also keine dritte Handschrift im Haus.
Die Pfade sind **direkt aus dem installierten Paket gezogen**, nicht
-abgeschrieben: Gewichtung `regular`, Zeichenfläche 256 × 256. Anders als bei
+abgeschrieben: Gewichtung `bold`, Zeichenfläche 256 × 256. Anders als bei
Feather sind es gefüllte Formen und keine Striche, `ikon()` färbt deshalb über
`fill` statt über `stroke`.
-**Getauscht sind nur die Formen, kein einziger Farbwert.** Ein Zwischenstand
-nahm `bold` — gefüllte fette Formen lesen sich neben demselben Text dunkler als
-dünne Striche, und das sah aus, als hätte sich die Farbe geändert. Sie hat sich
-nie geändert; `regular` trifft die optische Stärke, die Feather dort hatte.
+**Die Gewichtung ist gemessen, nicht geschätzt.** Kein Farbwert hat sich beim
+Tausch geändert — trotzdem sah es anders aus, und das zu Recht: ein Symbol aus
+dünneren Formen hat weniger voll gedeckte Pixel und mehr angeschnittene, es
+liest sich blasser, obwohl derselbe Hexwert darinsteht. Im Kanalsymbol,
+Ausschnitt 44 × 44:
+
+| | volle Pixel | Deckung |
+|---|---|---|
+| Feather, wie es vorher war | 59 | 180 |
+| Phosphor `regular` | 23 | 151 (16 % zu blass) |
+| Phosphor `bold` | 62 | 192 (6 % darüber) |
+
+Ein Zwischenstand hatte `regular`, weil es „im Menü leichter aussah". Geschätzt
+statt gemessen, und daneben. Wer eine optische Stärke beurteilt, zählt Pixel.
Ein Zwischenstand ersetzte nur das eine Gruppensymbol durch zwei überlappende
Scheiben. Das war keine Antwort auf die Frage: die Frage war der Satz, nicht
diff --git a/animation/post6-animChat.mp4 b/animation/post6-animChat.mp4
index 0139edc..24096eb 100644
Binary files a/animation/post6-animChat.mp4 and b/animation/post6-animChat.mp4 differ
diff --git a/post6.html b/post6.html
index 0c6724f..e175768 100644
--- a/post6.html
+++ b/post6.html
@@ -2038,35 +2038,43 @@ if (location.search.indexOf("nur=anim") >= 0)
Haus.
Die Pfade sind direkt aus dem installierten Paket gezogen und nicht
- abgeschrieben: Gewichtung "regular", Zeichenflaeche 256 x 256. Ein
- Zwischenstand nahm "bold" -- gefuellte fette Formen lesen sich neben
- demselben Text dunkler als duenne Striche, und das sah aus, als haette
- sich die Farbe geaendert. Sie hat sich nie geaendert; getauscht sind nur
- die Formen, und "regular" trifft die optische Staerke, die Feather dort
- hatte. Anders als
- bei Feather sind es gefuellte Formen und keine Striche -- die Strichdicke
- steckt in der Form. ikon() faerbt deshalb ueber fill und nicht ueber
- stroke, und der Parameter fuer die Staerke faellt weg. */
+ abgeschrieben: Gewichtung "bold", Zeichenflaeche 256 x 256.
+
+ Die Gewichtung ist gemessen und nicht geschaetzt. Kein Farbwert hat sich
+ geaendert, aber ein Symbol aus duenneren Formen hat weniger voll gedeckte
+ Pixel und mehr angeschnittene -- es liest sich blasser, obwohl derselbe
+ Hexwert darinsteht. Im Kanalsymbol, Ausschnitt 44 x 44:
+
+ Feather, wie es vorher war 59 volle Pixel, Deckung 180
+ Phosphor regular 23 volle Pixel, Deckung 151 (16 % zu blass)
+ Phosphor bold 62 volle Pixel, Deckung 192 ( 6 % darueber)
+
+ Also bold. Ein Zwischenstand hatte regular, weil es "im Menue leichter
+ aussah" -- geschaetzt, nicht gemessen, und daneben.
+
+ Anders als bei Feather sind es gefuellte Formen und keine Striche, die
+ Strichdicke steckt also in der Form. ikon() faerbt deshalb ueber fill und
+ nicht ueber stroke, und der Parameter fuer die Staerke faellt weg. */
const IKON = {
- "briefcase": '',
- "users": '',
- "pin": '',
- "file-text": '',
- "image": '',
- "mic": '',
- "phone": '',
- "calendar": '',
- "square-check": '',
- "plus": '',
- "send": '',
- "message-square": '',
- "chevron-down": '',
- "thumbs-up": '',
- "corner-up-left": '',
- "pencil": '',
- "trash-2": '',
- "hard-hat": '',
- "check": '',
+ "briefcase": '',
+ "users": '',
+ "pin": '',
+ "file-text": '',
+ "image": '',
+ "mic": '',
+ "phone": '',
+ "calendar": '',
+ "square-check": '',
+ "plus": '',
+ "send": '',
+ "message-square": '',
+ "chevron-down": '',
+ "thumbs-up": '',
+ "corner-up-left": '',
+ "pencil": '',
+ "trash-2": '',
+ "hard-hat": '',
+ "check": '',
};
function ikon(name, cx, cy, groesse, farbe) {
@@ -2588,6 +2596,13 @@ if (location.search.indexOf("nur=anim") >= 0)
const FL_GRUND = "#F5F4F4", FL_SPALTE = "#F0F0F0", FL_KARTE = "#FFFFFF";
const CHAT_RAND = "#E5E5E5";
+ /* Eine Farbe fuer alles, was einen Chat kennzeichnet: Projektkanal,
+ Gruppe, Direktnachricht. Vorher trug der Projektkanal Lila, die Gruppe
+ Grau und jede Person ihre eigene Farbe -- vier Familien in einer Liste,
+ und keine davon sagte etwas, das die Zeile nicht schon sagt. Gruen ist
+ ohnehin die Farbe der Plakette daneben. */
+ const MARKE = { flaeche: "#DCFCE4", rand: "#B7EDC6", zeichen: "#148134" };
+
/* Die Chatliste links. type steuert das Sinnbild davor: ein Projekt bekommt
den Aktenkoffer auf farbigem Grund, eine Gruppe die Personen, eine
Direktnachricht das Kuerzel des Menschen -- so macht es ChatAvatar. */
@@ -2640,17 +2655,13 @@ if (location.search.indexOf("nur=anim") >= 0)
}
const mx = x + 16, my = y + ZEILE_H / 2;
if (c.art === "direkt") {
- const av = AVATAR[c.farbe] || AVATAR.violett;
- g += '' +
- uiText(mx + 20, my + 6, c.kuerzel, 15, 800, av.text, { anker: "middle" });
+ g += '' +
+ uiText(mx + 20, my + 6, c.kuerzel, 15, 800, MARKE.zeichen, { anker: "middle" });
} else {
- const projekt = c.art === "projekt";
- g += '';
- g += ikon(projekt ? "briefcase" : "users", mx + 20, my, 21,
- projekt ? "#691CD4" : CHAT_TEXT3);
+ g += '';
+ g += ikon(c.art === "projekt" ? "briefcase" : "users", mx + 20, my, 21, MARKE.zeichen);
}
const tx = mx + 52, rechts = x + LISTE_B - 16, frei = rechts - tx;
@@ -2770,10 +2781,9 @@ if (location.search.indexOf("nur=anim") >= 0)
const bx = m.mein ? x + b - ma.breite : x + 52;
let g = "";
if (!m.mein) {
- const av = AVATAR[m.farbe] || AVATAR.blau;
- g += '' +
- uiText(x + 20, y + 28, m.kuerzel, 15, 800, av.text, { anker: "middle" });
+ g += '' +
+ uiText(x + 20, y + 28, m.kuerzel, 15, 800, MARKE.zeichen, { anker: "middle" });
}
const kontur = rundRechteck(bx, y, ma.breite, ma.hoehe, 14);
g += '= 0)
'" stroke-width="1.2"/>';
// Die Kopfzeile des offenen Kanals, wie in ChatHeader.
- g += '';
- g += ikon("briefcase", kx + 20, 20, 20, "#691CD4");
+ g += '';
+ g += ikon("briefcase", kx + 20, 20, 20, MARKE.zeichen);
g += uiText(kx + 52, 17, CHATS[0].titel, 19, 800, CHAT_TEXT);
g += uiText(kx + 52, 38, CHATS[0].meta + " · 8 Mitglieder · aktiv", 14, 500, CHAT_TEXT3);
g += '= 0)
vorn += '';
vorn += '';
- vorn += ikon("briefcase", kx + 21, VY + 41, 21, "#691CD4");
+ 'fill="' + MARKE.flaeche + '" stroke="' + MARKE.rand + '" stroke-width="1.2"/>';
+ vorn += ikon("briefcase", kx + 21, VY + 41, 21, MARKE.zeichen);
vorn += uiText(kx + 54, VY + 36, "# waermepumpe-mueller", 19, 800, CHAT_TEXT);
vorn += uiText(kx + 54, VY + 58, "P-2026-0042 · 8 Mitglieder", 15, 500, CHAT_TEXT3);
vorn += '= 0)
// Kopfzeile des Kanals.
g += '';
- g += ikon("briefcase", RAND + 20, RAND + 14, 20, "#691CD4");
+ 'fill="' + MARKE.flaeche + '" stroke="' + MARKE.rand + '" stroke-width="1.2"/>';
+ g += ikon("briefcase", RAND + 20, RAND + 14, 20, MARKE.zeichen);
g += uiText(RAND + 52, RAND + 8, "# waermepumpe-mueller", 20, 800, CHAT_TEXT);
g += uiText(RAND + 52, RAND + 30, "P-2026-0042 · 8 Mitglieder · aktiv", 15, 500, CHAT_TEXT3);
g += '';