/* =================================================================== Baut den Hintergrund des Workspace aus den Marken-Bildern. ZWEITER ANLAUF (01.09.2026). Der erste war schlecht, und Filipe hatte recht: Ich hatte einen fremden Neon-Husky aus dem alten Bilderordner genommen -- nicht DogFather. Ausserdem klebten zwei Bilder in den Ecken, ohne dass daraus ein Bild geworden waere. Jetzt richtig, aus den echten Marken-Bildern: 1. Eine BUEHNE ueber die ganze Flaeche: das Studio, in dem HasiDog und DogFather stehen. Warum genau dieses von den fuenf: Die beiden stehen weit aussen, die MITTE ist dunkel -- und dort steht der Inhalt. Ein Bild mit Figuren in der Mitte waere hinter dem Text gelandet. 2. Die beiden Figuren zusaetzlich freigestellt in den unteren Ecken, aus den Einzelbildern. Sie stehen VOR der Buehne und sind das, was man wiedererkennt. Behandlung in beiden Faellen: * stark abgedunkelt -- eine Buehne, kein Poster * Mitte zusaetzlich verdunkelt (Vignette), dort steht der Text * weiche Raender eingerechnet statt als Maske im Browser: eine Maske ueber ein grosses Bild kostet bei jedem Bildaufbau Zeit * WebP statt PNG -- aus 1,9 MB werden rund 60 KB Gerechnet mit dem Browser, der ohnehin fuer die Pruefungen da ist. Kein Bildprogramm, keine neue Abhaengigkeit, 0 EUR. Aufrufen mit: node tools/buehne-bauen.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 QUELLE = join(WURZEL, "assets", "img", "marke"); const ZIEL = join(WURZEL, "workspace", "assets", "img"); if (!existsSync(ZIEL)) mkdirSync(ZIEL, { recursive: true }); /* --------------------------------------------------------------------- NEUN SZENEN, NICHT EINE. Bis zum 01.09.2026 wurde aus den Bildern, die Filipe geschickt hat, genau eines benutzt (das Studio) -- die uebrigen acht lagen unbenutzt im Ordner. Zu Recht beanstandet: Er hatte sie ausdruecklich geschickt, damit es VERSCHIEDENE Hintergruende gibt. Jetzt wird aus jeder Szene eine Buehne, breit und schmal, und jede Seite bekommt die, die zu ihr passt (Zuordnung in bereiche.js): studio Startseite -- der neutrale Ort, alles beginnt hier showbuehne Dashboard -- die grosse Buehne, alles im Blick garage Aufgaben -- Werkstatt, hier wird gearbeitet skyline Kalender -- Nacht ueber der Stadt, Zeit lounge Calls -- Sitzecke, hier wird geredet arena Dateien/Wissen -- Archiv hinter dem Portal halle Profil/Personen -- die Halle, in der jemand steht wald Start-Check/Scouting -- der Weg, den man erst sucht portal Content/Reports -- Durchgang, hier entsteht etwas Alle bekommen dieselbe Behandlung: abgedunkelt, Vignette in der Mitte (dort steht der Text), oben ausgeblendet (dort sitzt die Kopfleiste). Dadurch sehen sie verschieden aus und verhalten sich doch gleich -- was der eigentliche Punkt ist. Eine Buehne, die je Seite anders hell ist, waere Unruhe statt Vielfalt. --------------------------------------------------------------------- */ const SZENEN = [ /* [Name, Ausschnitt breit, Ausschnitt schmal] Der schmale Ausschnitt ist je Szene ein anderer: Ein auf 9:16 gequetschtes Breitbild zeigt nur noch Wand. Gewaehlt wird jeweils der Bereich, in dem die Figuren stehen. */ ["studio", [0, 0, 1, 1], [0.17, 0, 0.66, 1]], ["showbuehne", [0, 0, 1, 1], [0.20, 0, 0.62, 1]], ["garage", [0, 0, 1, 1], [0.02, 0, 0.60, 1]], ["skyline", [0, 0, 1, 1], [0.00, 0, 0.58, 1]], ["lounge", [0, 0, 1, 1], [0.15, 0, 0.68, 1]], ["arena", [0, 0, 1, 1], [0.20, 0, 0.62, 1]], ["halle", [0, 0, 1, 1], [0.24, 0, 0.60, 1]], ["wald", [0, 0, 1, 1], [0.30, 0, 0.62, 1]], ["portal", [0, 0, 1, 1], [0.20, 0, 0.62, 1]], ]; const AUFTRAEGE = [ ...SZENEN.flatMap(([name, breitA, schmalA]) => [ { quelle: `szene-${name}.png`, ziel: `buehne-${name}-breit.webp`, breite: 1800, hoehe: 1013, ausschnitt: breitA, /* 01.09.2026 deutlich aufgehellt: von 0.42 auf 0.66, Farbe von 0.95 auf 1.08. Vorher war von den Bildern kaum etwas zu sehen -- "zu dunkel und sieht ganz komisch aus" traf es genau: Man sah Schemen, nicht die Szene. Jetzt kommt sie durch. Moeglich wird das nur, weil die Kacheln und Karten im selben Zug DICHTER geworden sind (siehe --glas in gate.css). Der Text steht dadurch auf eigener Flaeche statt direkt auf dem Bild -- das Bild darf hell sein, ohne die Lesbarkeit anzugreifen. */ /* Dritter Anlauf am 01.09.2026, und diesmal deutlich: 0.42 -> 0.66 war noch zu wenig. Jetzt 0.88 mit mehr Kontrast und Farbe -- die Szene ist ein BILD, kein Nebel. Tragen kann sie das, weil aller Text auf eigenen, deckenden Flaechen steht (--flaeche). */ helligkeit: 0.88, saettigung: 1.16, kontrast: 1.1, /* Kein dunkler Fleck mehr in der Mitte -- stattdessen laufen die RAENDER weich ins Dunkle. Siehe die Begruendung weiter unten. */ randvignette: { beginn: 0.5, staerke: 0.78 }, /* Oben ausblenden: dort sitzt die Kopfleiste. */ verlauf: [{ von: [0, 0], nach: [0, 0.14], stopps: [[0, 0.55], [1, 0]] }], guete: 0.72, }, { quelle: `szene-${name}.png`, ziel: `buehne-${name}-schmal.webp`, breite: 800, hoehe: 1400, ausschnitt: schmalA, /* Auf dem Handy etwas zurueckhaltender als am Rechner: Der Text nimmt dort fast die ganze Flaeche ein, das Bild traegt weniger. */ helligkeit: 0.74, saettigung: 1.1, kontrast: 1.06, randvignette: { beginn: 0.42, staerke: 0.8 }, verlauf: [{ von: [0, 0], nach: [0, 0.12], stopps: [[0, 0.55], [1, 0]] }], guete: 0.68, }, ]), { /* DogFather selbst -- der RICHTIGE Husky, im blauen Hoodie. Steht unten rechts. */ quelle: "dogfather-husky.png", ziel: "figur-dogfather.webp", breite: 620, hoehe: 1120, ausschnitt: [0.04, 0.06, 0.92, 0.92], helligkeit: 0.72, saettigung: 1.0, kontrast: 1.03, /* Nach unten und zur Seite offen lassen, oben und innen ausblenden -- so waechst er aus der Ecke heraus, statt als Ausschnitt zu kleben. */ verlauf: [ { von: [0, 0], nach: [0, 0.3], stopps: [[0, 1], [1, 0]] }, { von: [0.55, 0], nach: [0, 0], stopps: [[0, 0], [1, 0.9]] }, ], guete: 0.78, }, { /* HasiDog. Unten links. */ quelle: "hasidog-hase.png", ziel: "figur-hasidog.webp", breite: 560, hoehe: 1120, ausschnitt: [0.05, 0.05, 0.9, 0.93], helligkeit: 0.66, saettigung: 0.95, kontrast: 1.03, verlauf: [ { von: [0, 0], nach: [0, 0.3], stopps: [[0, 1], [1, 0]] }, { von: [0.45, 0], nach: [1, 0], stopps: [[0, 0], [1, 0.9]] }, ], guete: 0.78, }, { /* Der Kopf aus dem DogFather-Logo -- als MASKE, nicht als Bild. Die Vorlage liegt schwarz auf weiss; hier wird die Dunkelheit zur Deckkraft. Ergebnis: eine Form, die sich im Stil beliebig einfaerben laesst (mask-image + background). Ein fertig eingefaerbtes Bild muesste man fuer jede Farbe neu bauen. */ quelle: "logo.png", ziel: "marke-husky.webp", breite: 96, hoehe: 96, ausschnitt: [0.14, 0.03, 0.72, 0.68], alsMaske: true, guete: 0.9, }, ]; const { chromium } = await import( "file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs"); const browser = await chromium.launch(); const seite = await browser.newPage(); await seite.setContent(""); for (const a of AUFTRAEGE) { const roh = readFileSync(join(QUELLE, a.quelle)); const daten = `data:image/png;base64,${roh.toString("base64")}`; const webp = await seite.evaluate(async ({ daten, a }) => { const bild = new Image(); bild.src = daten; await bild.decode(); const c = document.createElement("canvas"); c.width = a.breite; c.height = a.hoehe; const g = c.getContext("2d"); const [ax, ay, aw, ah] = a.ausschnitt; /* Als Maske: schwarz auf weiss wird zu Form auf durchsichtig. Fuer jeden Bildpunkt wird die Helligkeit zur Durchsichtigkeit -- weiss verschwindet, schwarz bleibt stehen. */ if (a.alsMaske) { g.drawImage(bild, bild.naturalWidth * ax, bild.naturalHeight * ay, bild.naturalWidth * aw, bild.naturalHeight * ah, 0, 0, a.breite, a.hoehe); const d2 = g.getImageData(0, 0, a.breite, a.hoehe); for (let i = 0; i < d2.data.length; i += 4) { const hell = (d2.data[i] * 0.299 + d2.data[i + 1] * 0.587 + d2.data[i + 2] * 0.114) / 255; d2.data[i] = d2.data[i + 1] = d2.data[i + 2] = 255; d2.data[i + 3] = Math.round((1 - hell) * 255); } g.putImageData(d2, 0, 0); return c.toDataURL("image/webp", a.guete); } g.filter = `brightness(${a.helligkeit}) saturate(${a.saettigung}) contrast(${a.kontrast})`; g.drawImage(bild, bild.naturalWidth * ax, bild.naturalHeight * ay, bild.naturalWidth * aw, bild.naturalHeight * ah, 0, 0, a.breite, a.hoehe); g.filter = "none"; /* Vignette: dunkler Fleck in der Mitte. Er wird DRAUFGEMALT (nicht ausradiert), damit dort, wo der Text steht, wirklich Ruhe ist. */ /* DIE VIGNETTE LIEGT AUSSEN, NICHT IN DER MITTE. Bis zum 01.09.2026 wurde die MITTE abgedunkelt -- also genau der Teil, in dem die Szene steht. Ergebnis: Man sah nur die Raender des Bildes, und die Mitte war ein grauer Fleck. Genau das meinte Filipe mit "sieht ganz komisch aus". Richtig herum ist es andersherum, so wie in der Fotografie: Die Raender laufen weich ins Dunkle, die MITTE bleibt hell und klar. Das Bild bekommt dadurch Tiefe statt Nebel. Moeglich ist das, seit der Text auf eigenen Flaechen steht (--flaeche) und nicht mehr direkt auf dem Bild liegt. */ if (a.randvignette) { const v = a.randvignette; g.save(); g.translate(0.5 * a.breite, 0.5 * a.hoehe); /* Ueber die Diagonale skaliert, damit die Ecken wirklich erfasst werden -- bei einem Kreis ueber die Breite blieben sie hell. */ g.scale(a.breite * 0.78, a.hoehe * 0.78); const gr = g.createRadialGradient(0, 0, 0, 0, 0, 1); gr.addColorStop(0, "rgba(5,7,13,0)"); gr.addColorStop(v.beginn ?? 0.55, "rgba(5,7,13,0)"); gr.addColorStop(1, `rgba(5,7,13,${v.staerke})`); g.fillStyle = gr; g.fillRect(-1.4, -1.4, 2.8, 2.8); g.restore(); } if (a.vignette) { const v = a.vignette; g.save(); g.translate(v.x * a.breite, v.y * a.hoehe); g.scale(v.rx * a.breite, v.ry * a.hoehe); const gr = g.createRadialGradient(0, 0, 0, 0, 0, 1); gr.addColorStop(0, `rgba(5,7,13,${v.staerke})`); gr.addColorStop(0.62, `rgba(5,7,13,${v.staerke * 0.72})`); gr.addColorStop(1, "rgba(5,7,13,0)"); g.fillStyle = gr; g.fillRect(-1.6, -1.6, 3.2, 3.2); g.restore(); } /* Weiche Raender: destination-out radiert dort, wo der Verlauf deckend ist. */ g.globalCompositeOperation = "destination-out"; for (const v of (a.verlauf || [])) { const gr = g.createLinearGradient( v.von[0] * a.breite, v.von[1] * a.hoehe, v.nach[0] * a.breite, v.nach[1] * a.hoehe); for (const [pos, deckung] of v.stopps) gr.addColorStop(pos, `rgba(0,0,0,${deckung})`); g.fillStyle = gr; g.fillRect(0, 0, a.breite, a.hoehe); } g.globalCompositeOperation = "source-over"; return c.toDataURL("image/webp", a.guete); }, { daten, a }); const puffer = Buffer.from(webp.split(",")[1], "base64"); writeFileSync(join(ZIEL, a.ziel), puffer); console.log(`${a.ziel.padEnd(24)} ${String(Math.round(roh.length / 1024)).padStart(5)} KB` + ` -> ${String(Math.round(puffer.length / 1024)).padStart(4)} KB`); } await browser.close(); console.log("\nFertig. Die Dateien liegen in workspace/assets/img/.");