/* =================================================================== Das App-Symbol des Workspace: Husky UND Chili in einem Zeichen. Filipe (08.09.2026): "ich will dass du da eine geile mischung machst von diesen zwei logo ... mach was ultra krass geiles draus bitte." DIE AUFGABE IST NICHT "zwei Bilder nebeneinander". Ein App-Symbol steht bei 32 px im Browserreiter und bei 192 px auf dem Startbildschirm. Zwei vollstaendige Logos nebeneinander ergeben dort zwei unlesbare Haelften. Gebraucht wird EINE Form, in der beide vorkommen. DIE LOESUNG: Der Husky ist das Zeichen, die Chili seine Farbe. Er steht gross und mittig, sie liegt klein darunter -- ein Hauptmotiv und ein Beiklang, nicht zwei gleich laute Stimmen. ÜBERARBEITET AM 09.09.2026 (Filipe: "kannst du bitte das logo wenn man es installiert auf pc oder handy ... noch perfektionnieren. ich finde es könnte noch besser aussehen"). Was falsch war und warum: 1. DER HUSKY WAR EIN FLECK. Er lag als Maske auf einer Silberflaeche. Von einer Maske zaehlt nur der Alphakanal, und die Vorlage ist rundum freigestellt -- also war das Ergebnis eine geschlossene Flaeche in Hundeform: kein Auge, keine Schnauze, kein Ohrinneres. Jetzt liegt die Originalzeichnung im Mischmodus "screen" ueber einer stahlblauen Silhouette. Das Fell bleibt dunkel, das Gesicht kommt heraus. Aus dem Fleck wird wieder ein Hund. 2. DIE CHILI LIEF UEBER DEN FANG. Als Bogen unten herum gedreht kreuzte ihr Stiel die Schnauze. Jetzt ist sie gespiegelt (Stiel nach rechts, weg vom Kopf), deutlich kleiner und liegt hinter dem Hals. 3. DER HALS ENDETE IN EINER GERADEN KANTE. Die Vorlage ist unten angeschnitten; als Symbol sah das nach Fehler aus. Eine zweite Maske blendet ihn nach unten aus, statt ihn abzuschneiden. 4. DER GRUND WAR MATSCHIG. Rot und Blau trafen sich diagonal genau in der Mitte -- dort, wo der Kopf steht. Jetzt liegt das kalte Licht oben (beim Kopf), das warme unten (bei der Chili), und dazwischen ist ruhiges Nachtblau. MASKABLE: Android schneidet bis zu 20 % ringsum weg. Dafuer wird genau EINE Zahl kleiner -- die Groesse der Gruppe, in der Kopf und Chili in Prozent sitzen. Nicht sechs einzelne Werte, die auseinanderlaufen. Aufrufen mit: node tools/workspace-symbol.mjs =================================================================== */ import { readFileSync, writeFileSync, existsSync, mkdirSync } from "node:fs"; import { join, dirname } from "node:path"; import { fileURLToPath } from "node:url"; const WURZEL = join(dirname(fileURLToPath(import.meta.url)), ".."); const HUSKY = join(WURZEL, "workspace", "assets", "img", "marke-husky.webp"); const CHILI = join(WURZEL, "workspace", "assets", "img", "marke-spicy.webp"); /* Das Ziel ist umlenkbar (SYMBOL_ZIEL=/tmp/probe). Ein Symbol beurteilt man nicht aus dem Quelltext, sondern indem man es ansieht -- und dafuer darf man die sechs echten Dateien nicht bei jedem Versuch ueberschreiben. Ohne die Variable bleibt alles wie bisher. */ const ZIEL = process.env.SYMBOL_ZIEL || join(WURZEL, "assets", "img", "app-symbole"); for (const q of [HUSKY, CHILI]) { if (!existsSync(q)) { console.error(`Fehlt: ${q}`); process.exit(1); } } const alsDaten = (p) => "data:image/webp;base64," + readFileSync(p).toString("base64"); /* Die Groessen, die Manifest und HTML tatsaechlich anfordern. */ const GROESSEN = [ { n: 512, endung: "512" }, { n: 192, endung: "192" }, { n: 512, endung: "512-maskable", maskable: true }, { n: 192, endung: "192-maskable", maskable: true }, { n: 180, endung: "180" }, { n: 32, endung: "32" }, ]; /* `weglassen` ist NUR fuer die Gegenprobe da: "zeichnung" oder "chili" blendet genau einen Bestandteil aus. Verglichen wird danach das erzeugte Bild mit und ohne -- sind beide gleich, war der Bestandteil nie zu sehen. Eine Pruefung, die nur "es steht etwas drauf" sagt, haette den Fleck von gestern anstandslos durchgewunken. */ function html(n, maskable, husky, chili, weglassen = "") { /* KLEIN = alles unter 64 px. Dort faellt die GESICHTSZEICHNUNG weg, nicht die Chili. Achtfach vergroessert nebeneinandergelegt: Mit Zeichnung ist der Kopf bei 32 px ein dunkler Fleck, als reine Silhouette ist er eindeutig ein Hund. Die Chili dagegen ist gerade klein am nuetzlichsten -- im Reiterband erkennt man ein Zeichen zuerst an der Farbe, und Rot hat sonst nichts hier. */ const klein = n < 64; const rand = Math.round(n * 0.22); /* ALLES STECKT IN EINER GRUPPE. Kopf und Chili sitzen darin in Prozent. Fuer die maskable-Fassung wird deshalb genau EINE Zahl kleiner -- nicht sechs einzelne, die auseinanderlaufen koennen. 0,72 ist nachgemessen (mit eingezeichnetem Kreis angesehen): Damit liegt alles Wesentliche im Sicherheitskreis mit 80 % Durchmesser, den Android als einziges garantiert. */ const g = Math.round(n * (maskable ? 0.72 : 0.94)); const ecke = maskable ? "" : `border-radius:${rand}px;`; /* ALLE REGELN TRAGEN DENSELBEN VORSATZ `.gruppe > i`. Nicht aus Ordnungsliebe: Waehrend des Bauens stand hier `.chili` ohne Vorsatz -- und `.gruppe > i` (Klasse + Typ) ist spezifischer als `.chili` (nur Klasse). Die Drehung der Chili wurde dadurch stillschweigend von der allgemeinen Regel ueberschrieben. Zwei Regeln fuer dieselbe Eigenschaft, die spaetere verliert trotzdem: genau der Fehler, der im Haus schon mehrfach Zeit gekostet hat. Gleicher Vorsatz ueberall heisst: die Reihenfolge entscheidet, und die ist sichtbar. */ return `
`; } const { chromium } = await import( "file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs"); const browser = await chromium.launch(); const seite = await (await browser.newContext({ deviceScaleFactor: 1 })).newPage(); if (!existsSync(ZIEL)) mkdirSync(ZIEL, { recursive: true }); const husky = alsDaten(HUSKY), chili = alsDaten(CHILI); let gebaut = 0; const maengel = []; /* Eine Fassung aufnehmen. `weglassen` steuert die Gegenprobe. */ async function aufnehmen(n, maskable, weglassen = "") { await seite.setViewportSize({ width: n, height: n }); await seite.setContent(html(n, maskable, husky, chili, weglassen), { waitUntil: "networkidle" }); return await seite.screenshot({ omitBackground: false }); } /* Streuung der Helligkeit: Ein leeres Feld hat keine. Das beweist, dass ueberhaupt etwas draufsteht -- mehr nicht. Die Bytezahl beweist auch das nicht, ein einfarbiges PNG ist genauso gross wie ein volles. */ async function streuungVon(bild) { return await seite.evaluate(async (b64) => { const b = new Image(); b.src = "data:image/png;base64," + b64; await b.decode(); const c = document.createElement("canvas"); c.width = b.width; c.height = b.height; const g2 = c.getContext("2d"); g2.drawImage(b, 0, 0); const d = g2.getImageData(0, 0, c.width, c.height).data; let s = 0, s2 = 0, m = 0; for (let i = 0; i < d.length; i += 4) { const h = 0.2126 * d[i] + 0.7152 * d[i + 1] + 0.0722 * d[i + 2]; s += h; s2 += h * h; m++; } return Math.sqrt(s2 / m - (s / m) ** 2); }, bild.toString("base64")); } /* Anteil der Bildpunkte, die sich zwischen zwei Aufnahmen sichtbar unterscheiden. Acht Stufen Abstand, damit Kantenglaettung allein den Wert nicht hochtreibt. */ async function unterschied(a, b) { return await seite.evaluate(async ([x, y]) => { const laden = async (b64) => { const b = new Image(); b.src = "data:image/png;base64," + b64; await b.decode(); const c = document.createElement("canvas"); c.width = b.width; c.height = b.height; c.getContext("2d").drawImage(b, 0, 0); return c.getContext("2d").getImageData(0, 0, c.width, c.height).data; }; const [p, q] = [await laden(x), await laden(y)]; let anders = 0, m = 0; for (let i = 0; i < p.length; i += 4) { const w = Math.max(Math.abs(p[i] - q[i]), Math.abs(p[i + 1] - q[i + 1]), Math.abs(p[i + 2] - q[i + 2]), Math.abs(p[i + 3] - q[i + 3])); if (w > 8) anders++; m++; } return anders / m; }, [a.toString("base64"), b.toString("base64")]); } for (const g of GROESSEN) { const bild = await aufnehmen(g.n, !!g.maskable); writeFileSync(join(ZIEL, `workspace-${g.endung}.png`), bild); gebaut++; const streuung = await streuungVon(bild); if (streuung < 12) maengel.push(`${g.endung}: kaum Zeichnung (Streuung ${streuung.toFixed(1)})`); /* DIE ZWEI GEGENPROBEN. Beide messen nicht "sieht gut aus", sondern "ist ueberhaupt da": Wenn das Bild ohne die Zeichnung genauso aussieht wie mit ihr, dann war die Zeichnung nie zu sehen -- und genau das war der Fehler der alten Fassung, die trotzdem gruen war. */ const klein = g.n < 64; const ohneZeichnung = await unterschied(bild, await aufnehmen(g.n, !!g.maskable, "zeichnung")); const ohneChili = await unterschied(bild, await aufnehmen(g.n, !!g.maskable, "chili")); if (klein) { /* Unter 64 px ist die schlichte Silhouette Absicht. Geprueft wird, dass sie es auch bleibt -- sonst waere die Regel bloss ein Kommentar, der beim naechsten Umbau stillschweigend kippt. */ if (ohneZeichnung > 0.001) maengel.push( `${g.endung}: klein soll ohne Gesichtszeichnung sein`); } else { /* Das Gesicht bedeckt gemessen rund ein Siebtel der Flaeche; 4 % ist der Boden, unter den es nur durch einen Fehler faellt. */ if (ohneZeichnung < 0.04) maengel.push( `${g.endung}: das Gesicht kommt nicht durch (${(ohneZeichnung * 100).toFixed(1)} %)`); } /* Die Chili gehoert in JEDE Fassung, gerade in die kleine. Sie nimmt gemessen 4 bis 7 % ein; 1 % ist der Boden. */ if (ohneChili < 0.01) maengel.push( `${g.endung}: die Chili fehlt (${(ohneChili * 100).toFixed(1)} %)`); console.log(` workspace-${g.endung}.png`.padEnd(32) + `${(bild.length / 1024).toFixed(1)} KB · Streuung ${streuung.toFixed(1)}` + ` · Gesicht ${(ohneZeichnung * 100).toFixed(1)} %` + ` · Chili ${(ohneChili * 100).toFixed(1)} %`); } await browser.close(); /* Die Zahlen gehoeren in die Bedingung, nicht nur in den Bericht. */ if (gebaut !== GROESSEN.length) { console.error(`\nFEHLER: ${gebaut} von ${GROESSEN.length} erzeugt.`); process.exit(1); } if (maengel.length) { console.error("\nFEHLER:\n " + maengel.join("\n ")); process.exit(1); } console.log(`\n${gebaut} Symbole erzeugt. Husky-Gesicht und Chili sind in jeder` + ` grossen Fassung nachweisbar sichtbar, die kleine bleibt bewusst schlicht.`);