diff --git a/POST-6.md b/POST-6.md index 74300f4..a7941db 100644 --- a/POST-6.md +++ b/POST-6.md @@ -120,13 +120,27 @@ Betrieb kennt. Die Zahlen (3, 2, 1) stehen **nicht** in der Quelle; sie ist an dieser Stelle binär. Sie sind die einzigen erfundenen Werte im ganzen Post. -**Die Gruppe trägt zwei überlappende Scheiben und kein Symbol.** In der Quelle -steht dort `FeatherUsers`. Dieses Zwei-Personen-Piktogramm steckt in jeder -zweiten Oberfläche und sieht danach aus. Zwei versetzte Avatare sind das, was -Teams und Linear an derselben Stelle zeigen, und sie sprechen dieselbe Sprache -wie die Kürzelkreise der Direktnachrichten daneben. Ohne Buchstaben, weil die -Mitglieder dieser Gruppe nirgends benannt sind; wie viele es sind, steht in der -Zeile darunter. +**Die Symbole kommen aus Phosphor, nicht aus Feather.** Der Feather-Satz +steckt in so ziemlich jeder Oberfläche der letzten Jahre; man erkennt ihn +sofort wieder, und damit sieht eine Zeichnung aus wie jede andere. Am +deutlichsten war das am Gruppensymbol — zwei Köpfe nebeneinander, das +Piktogramm schlechthin. + +Phosphor ist dieselbe Familie von Strichsymbolen, nur mit eigener Handschrift: +runder, gleichmäßiger, andere Metaphern (`UsersThree` statt `Users`, +`PaperPlaneRight` statt `Send`, `CaretDown` statt `ChevronDown`). Es ist +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 `bold`, Zeichenfläche 256 × 256. Regular war neben +dem Text zu leicht, bold trifft die Strichstärke, die vorher dastand. Anders +als bei Feather sind es gefüllte Formen und keine Striche, `ikon()` färbt +deshalb über `fill` statt über `stroke`. + +Ein Zwischenstand ersetzte nur das eine Gruppensymbol durch zwei überlappende +Scheiben. Das war keine Antwort auf die Frage: die Frage war der Satz, nicht +das einzelne Zeichen. **Slide 4 nennt drei der sechs Einträge, nicht alle.** „Versende mehr als nur Textnachrichten: Dokumente, Fotos, Sprachnachrichten." Drei Beispiele sagen, diff --git a/animation/post6-animChat.mp4 b/animation/post6-animChat.mp4 index 9a03ec6..879163e 100644 Binary files a/animation/post6-animChat.mp4 and b/animation/post6-animChat.mp4 differ diff --git a/post6.html b/post6.html index 5d8e6f1..e4f9c0f 100644 --- a/post6.html +++ b/post6.html @@ -2022,79 +2022,56 @@ if (location.search.indexOf("nur=anim") >= 0) sind beachtet -- die Zahlen standen als x1={6} ohne Anfuehrungszeichen da, und der -Rahmen muss weg, sonst rendert ein einkindriges Zeichen nicht. */ - const FEATHER = { - "hard-hat": " ", - "building": " ", - "briefcase": " ", - "folder-open": "", - "mic": " ", - "paperclip": "", - "phone": "", - "pin": " ", - "plus": " ", - "send": " ", - "tags": " ", - "euro": " ", - "calendar": " ", - "hash": " ", - "circle-dot": " ", - "coins": " ", - "kanban-square": " ", - "lock": " ", - "play-circle": " ", - "flag": " ", - "clock": " ", - "git-pull-request": " ", - "git-merge": " ", - "signpost": " ", - "variable": " ", - "square-check": " ", - "user-pen": " ", - "inbox": " ", - "bell-ring": " ", - "git-branch": " ", - "timer": " ", - "calendar-clock": " ", - "credit-card": " ", - "repeat": " ", - "user-check": " ", - "alert-triangle": '', - "check": '', - "clipboard-list": '', - "columns-3": '', - "file-text": '', - "filter": '', - "folder": '', - "image": '', - "mail": '', - "megaphone": '', - "message-square": '', - "smartphone": '', - "sparkles": '', - "sticky-note": '', - "table": '', - "user": '', - "users": '', - "workflow": '', - "x": '', - "zap": '', - /* Fuer das Menue an der Nachricht, aus dem laufenden Team-Chat. */ - "thumbs-up": '', - "corner-up-left": '', - "pencil": '', - "trash-2": '', - "chevron-down": '', - "rocket": '' + + /* ─── Symbole ──────────────────────────────────────────────────────────── + Phosphor, nicht Feather. Der Feather-Satz steckt in so ziemlich jeder + Oberflaeche, die in den letzten Jahren entstanden ist -- man erkennt ihn + sofort wieder, und damit sieht eine Zeichnung aus wie jede andere. Am + deutlichsten war das am Gruppensymbol: zwei Koepfe nebeneinander, das + Piktogramm schlechthin. + + Phosphor ist dieselbe Familie von Strichsymbolen, nur mit eigener + Handschrift: runder, gleichmaessiger, andere Metaphern (UsersThree statt + Users, PaperPlaneRight statt Send, CaretDown statt ChevronDown). Es ist + dasselbe Paket, das die Website benutzt (@phosphor-icons/react neben + lucide-react in ihrer package.json), also keine dritte Handschrift im + Haus. + + Die Pfade sind direkt aus dem installierten Paket gezogen und nicht + abgeschrieben: Gewichtung "regular", Zeichenflaeche 256 x 256. 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. */ + 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": '', }; - function feather(name, cx, cy, groesse, farbe, staerke) { - const s = groesse / 24; + function ikon(name, cx, cy, groesse, farbe) { + const s = groesse / 256; return '' + FEATHER[name] + ''; + ') scale(' + (Math.round(s * 100000) / 100000) + ')" fill="' + farbe + '">' + + (IKON[name] || "") + ''; } + /* ═══ Die Bausteine des Workflow-Editors ═══════════════════════════════════ Nachbau aus ui/components/NodeWorkflowEngine/NodeWorkflowEngine.tsx des Pitch-Pakets, so wie der Notizzettel in rules.md 6 aus StickyNote.tsx @@ -2205,10 +2182,10 @@ if (location.search.indexOf("nur=anim") >= 0) } /* Eine Kachel mit Zeichen, wie sie im Produkt vor jeder Zeile steht. */ - function uiKachel(x, y, s, ikon, farbe, grund) { + function uiKachel(x, y, s, zeichen, farbe, grund) { return '' + - feather(ikon, x + s / 2, y + s / 2, s * 0.52, farbe, 2.1); + ikon(zeichen, x + s / 2, y + s / 2, s * 0.52, farbe); } const uiText = (x, y, t, gr, gew, farbe, o) => { @@ -2663,30 +2640,12 @@ if (location.search.indexOf("nur=anim") >= 0) '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>' + uiText(mx + 20, my + 6, c.kuerzel, 15, 800, av.text, { anker: "middle" }); } else { - if (c.art === "projekt") { - g += ''; - g += feather("briefcase", mx + 20, my, 20, "#691CD4", 1.9); - } else { - /* Die Gruppe traegt zwei ueberlappende Scheiben und kein Symbol. Das - Zwei-Personen-Piktogramm aus dem Feather-Satz steckt in jeder - zweiten Oberflaeche und sieht danach aus; zwei versetzte Avatare - sind das, was Teams und Linear an derselben Stelle zeigen, und sie - sprechen dieselbe Sprache wie die Kuerzelkreise der - Direktnachrichten daneben. Ohne Buchstaben, weil wir die Mitglieder - dieser Gruppe nicht kennen -- wie viele es sind, steht in der - Zeile darunter. */ - /* Kontur in der Textfarbe des jeweiligen Avatars, nicht in der - allgemeinen Randfarbe: mit CHAT_RAND verschwammen die beiden - Scheiben bei Listengroesse zu einem Fleck. */ - const a1 = AVATAR.blau, a2 = AVATAR.violett; - g += ''; - g += ''; - g += ''; - } + const projekt = c.art === "projekt"; + g += ''; + g += ikon(projekt ? "briefcase" : "users", mx + 20, my, 21, + projekt ? "#691CD4" : CHAT_TEXT3); } const tx = mx + 52, rechts = x + LISTE_B - 16, frei = rechts - tx; @@ -2713,7 +2672,7 @@ if (location.search.indexOf("nur=anim") >= 0) // Zeile 3: die Zuordnung, rechts die Nadel. g += uiText(tx, y + 76, c.meta, 13, 500, "#9C9CA3"); - if (c.pin) g += feather("pin", rechts - 7, y + 71, 13, "#9C9CA3", 1.8); + if (c.pin) g += ikon("pin", rechts - 7, y + 71, 13, "#9C9CA3"); return g; } @@ -2742,14 +2701,14 @@ if (location.search.indexOf("nur=anim") >= 0) umbrechen(a[1], b - 62 - (a[3] ? messen(a[3], 13, 800) + 26 : 0), 15, 600, 2); const anhangHoehe = (a, b) => 54 + (anhangZeilen(a, b).length - 1) * 20; - function anhangKarte(x, y, b, ikon, titel, meta, marke) { - const zeilen = anhangZeilen([ikon, titel, meta, marke], b); + function anhangKarte(x, y, b, zeichen, titel, meta, marke) { + const zeilen = anhangZeilen([zeichen, titel, meta, marke], b); const h = 54 + (zeilen.length - 1) * 20; let g = ''; g += ''; - g += feather(ikon, x + 26, y + 27, 17, CHAT_TEXT2, 1.9); + g += ikon(zeichen, x + 26, y + 27, 17, CHAT_TEXT2); zeilen.forEach((z, i) => { g += uiText(x + 52, y + 24 + i * 20, z, 15, 600, CHAT_TEXT); }); @@ -2798,7 +2757,7 @@ if (location.search.indexOf("nur=anim") >= 0) const tb = messen(z, 15, 500); const versatz = i === 0 ? 12 : 0; g += uiText(mx + versatz, y + 18 + i * 20, z, 15, 500, CHAT_TEXT3, { anker: "middle" }); - if (i === 0) g += feather("square-check", mx - tb / 2 - 4, y + 12, 16, "#148134", 2); + if (i === 0) g += ikon("square-check", mx - tb / 2 - 4, y + 12, 16, "#148134"); }); return g; } @@ -2998,7 +2957,7 @@ if (location.search.indexOf("nur=anim") >= 0) // Die Kopfzeile des offenen Kanals, wie in ChatHeader. g += ''; - g += feather("briefcase", kx + 20, 20, 20, "#691CD4", 1.9); + g += ikon("briefcase", kx + 20, 20, 20, "#691CD4"); 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) const fy = listeH - feldH; g += ''; - g += feather("plus", kx + 20, fy + 34, 21, CHAT_TEXT2, 2); + g += ikon("plus", kx + 20, fy + 34, 21, CHAT_TEXT2); g += ''; g += uiText(kx + 62, fy + 40, "Nachricht schreiben …", 16, 400, "#C9C9CE"); - g += feather("mic", kx + RECHTS - 20, fy + 34, 21, CHAT_TEXT2, 2); + g += ikon("mic", kx + RECHTS - 20, fy + 34, 21, CHAT_TEXT2); /* Erst hier verschieben, nicht mittendrin: ein Zwischenstand hatte diese Zeile weiter oben stehen, und alles, was danach gezeichnet wurde -- Datumsmarke, Blasen, Tippzeile, Eingabefeld -- lag um PAD daneben. Auf @@ -3153,7 +3112,7 @@ if (location.search.indexOf("nur=anim") >= 0) '' + - feather(c.ikon, c.x + 28, c.y + 27, 20, CHAT_TEXT3, 1.9) + + ikon(c.ikon, c.x + 28, c.y + 27, 20, CHAT_TEXT3) + uiText(c.x + 50, c.y + 34, c.text, 19, 700, CHAT_TEXT) + ''; }); @@ -3212,7 +3171,7 @@ if (location.search.indexOf("nur=anim") >= 0) '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>'; y += 13; continue; } - g += feather(e[0], PAD + RAND + 26, y + ZH / 2, 20, CHAT_TEXT2, 1.9); + g += ikon(e[0], PAD + RAND + 26, y + ZH / 2, 20, CHAT_TEXT2); g += uiText(PAD + RAND + 50, y + ZH / 2 + 7, e[1], 19, 500, CHAT_TEXT); y += ZH; } @@ -3260,7 +3219,7 @@ if (location.search.indexOf("nur=anim") >= 0) hinten += uiText(28, 52, "Team Chat", 24, 800, CHAT_TEXT); hinten += ''; - hinten += feather("message-square", 50, 93, 16, CHAT_TEXT3, 1.8); + hinten += ikon("message-square", 50, 93, 16, CHAT_TEXT3); hinten += uiText(66, 99, "Chats durchsuchen …", 15, 400, "#C9C9CE"); CHATS.slice(0, 5).forEach((c, i) => { hinten += chatZeile(16, 128 + i * ZEILE_H, c); }); hinten += ''; @@ -3273,7 +3232,7 @@ if (location.search.indexOf("nur=anim") >= 0) '" height="82" fill="#FFFFFF"/>'; vorn += ''; - vorn += feather("briefcase", kx + 21, VY + 41, 21, "#691CD4", 1.9); + vorn += ikon("briefcase", kx + 21, VY + 41, 21, "#691CD4"); 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) '" height="88" fill="#FFFFFF"/>'; vorn += ''; - vorn += feather("plus", VX + 34, fy + 26, 20, CHAT_TEXT2, 2); + vorn += ikon("plus", VX + 34, fy + 26, 20, CHAT_TEXT2); vorn += ''; @@ -3320,7 +3279,7 @@ if (location.search.indexOf("nur=anim") >= 0) const wb = messen(wort, gr, 800) + gr * 0.16 * wort.length; let bx = bA + 20; while (bx + wb + 40 < bA + bL) { - band += feather("hard-hat", bx + 18, ty + bh / 2, 36, WEB.bandDunkel, 2.6); + band += ikon("hard-hat", bx + 18, ty + bh / 2, 36, WEB.bandDunkel); band += uiText(bx + 44, ty + bh / 2 + 12, wort, gr, 800, WEB.bandDunkel, { sperr: "0.16em" }); bx += wb + 96; @@ -3417,7 +3376,7 @@ if (location.search.indexOf("nur=anim") >= 0) if (nr === hoverNr) g += ''; - g += feather(e[0], x + PAD + 18, yy + ZH / 2, 16, CHAT_TEXT2, 1.9); + g += ikon(e[0], x + PAD + 18, yy + ZH / 2, 16, CHAT_TEXT2); g += uiText(x + PAD + 36, yy + ZH / 2 + 5.5, e[1], 15, 500, CHAT_TEXT); }); @@ -3460,7 +3419,7 @@ if (location.search.indexOf("nur=anim") >= 0) // Kopfzeile des Kanals. g += ''; - g += feather("briefcase", RAND + 20, RAND + 14, 20, "#691CD4", 1.9); + g += ikon("briefcase", RAND + 20, RAND + 14, 20, "#691CD4"); 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 += ''; @@ -3504,7 +3463,7 @@ if (location.search.indexOf("nur=anim") >= 0) const px = bx3 + br3 - 18, py = dritteY + 16; bahn += '' + '' + - feather("chevron-down", px, py + 1, 14, CHAT_TEXT2, 2.2) + ''; + ikon("chevron-down", px, py + 1, 14, CHAT_TEXT2) + ''; } // Was ueber die Bahn hinausragt, wird oben abgeschnitten -- wie im Fenster. @@ -3515,13 +3474,13 @@ if (location.search.indexOf("nur=anim") >= 0) // Das Eingabefeld bleibt ruhig: hier wird nichts geschrieben. const fy = H - FELD; g += ''; - g += feather("plus", RAND + 14, fy + 44, 21, CHAT_TEXT2, 2); + g += ikon("plus", RAND + 14, fy + 44, 21, CHAT_TEXT2); const feldX = RAND + 36, feldB = B - 2 * RAND - 100; g += ''; g += uiText(feldX + 18, fy + 50, "Nachricht schreiben …", 16, 400, "#C9C9CE"); - g += feather("mic", B - RAND - 24, fy + 44, 21, CHAT_TEXT2, 2); + g += ikon("mic", B - RAND - 24, fy + 44, 21, CHAT_TEXT2); /* Das Menue haengt am Pfeil und liegt ueber allem. */ const chevX = bx3 + br3 - 18, chevY = dritteY + 16; diff --git a/state/post3.json b/state/post3.json index 62a3e1e..88b7e86 100644 --- a/state/post3.json +++ b/state/post3.json @@ -10,7 +10,7 @@ "int": "dezent" } ], - "current": 0, + "current": 1, "deck": [ { "ref": "verbinden",