DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e9709a5aa8ed0a70bf373b98c9d07aae68beb3af
dogfather-universe/tools/app-symbole.mjs
T
DogFatherGitandClaude Opus 5 e9709a5aa8 Maskable-Symbole: das ganze Symbol verkleinern, nicht nur das Logo 
Gemeldet von Filipe: "die symbole sehen aber auf meinem pc nicht aus
wie auf dem browser mit diesen geilen farben." Er hatte recht -- die
maskable-Fassungen sahen aus wie eine schlechte Kopie: blass, das
Medaillon riesig, der Doppelring ueber den Rand hinaus. Und genau die
nimmt das Betriebssystem fuer installierte Apps.

Der erste Entwurf verkleinerte nur das LOGO (52 statt 68 Prozent) und
liess den Hintergrund unveraendert. Das geht bei einer glatten Flaeche
gut und bei allem anderen schief: Medaillon, Doppelring, Raster und
Eckband rechnen ihre Kreise in Prozent der FLAECHE. Wird aussen ein
Fuenftel weggeschnitten, sitzt der Ring nicht mehr, wo er hingehoert.

Jetzt wird das fertige Symbol als Ganzes auf 78 Prozent verkleinert und
in eine Huelle aus dem dunkelsten Ton der App gesetzt. Damit bleibt
jedes Verhaeltnis erhalten -- Ring zu Flaeche, Logo zu Ring, Verlauf zu
Kante. Weggeschnitten wird nur ruhige Randfarbe.

Nachgeprueft mit einer Vorschau, die den Zuschnitt nachstellt: rund
(Android) und abgerundetes Quadrat (Windows/iOS). Beide sehen jetzt
praktisch aus wie die Fassung im Browser.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-05 12:12:54 +02:00

651 lines
31 KiB
JavaScript
Raw Blame History

/* ===================================================================
DIE APP-SYMBOLE: ein Logo, zehn Farben, ein Stil.
Wunsch Filipe (04.09.2026): "alle sollen mein Logo drauf haben, aber
alle so, dass sie anders aussehen durch Farbänderung ... und die
sollen alle extrem speziell aussehen."
ZWEI AUFGABEN IN EINER DATEI:
node tools/app-symbole.mjs entwurf rendert alle Stile nebeneinander
als EIN Übersichtsbild zum Wählen
node tools/app-symbole.mjs bauen erzeugt die echten Symbole im
gewählten Stil, in allen Größen
WARUM ERST ENTWERFEN, DANN BAUEN. Genau so ist in diesem Haus das
Knopf-System entstanden ("von Filipe aus drei gerenderten Entwürfen
gewählt"). Die Notiz dazu sagt: *Raten hilft hier nicht.* Vierzig
Symbole zu erzeugen, bevor jemand den Stil gesehen hat, hieße vierzig
Symbole zweimal zu erzeugen.
DIE FARBEN WERDEN GERECHNET, NICHT GEWÄHLT — dieselbe Regel wie bei
den 17 Kachelfarben (tools/kachel-farben.mjs). Zehn Töne gleichmäßig
über den Farbkreis in OKLCH: Dort sind gleiche Abstände auch für das
Auge gleich groß. Frei gewählte Farben ergeben regelmäßig Paare, die
praktisch gleich aussehen — das wirkt nach Zufall, nicht nach Absicht.
AUGENSCHONEND, dauerhafte Hausregel: gedeckte Töne statt Neon,
dunkler Grund, keine blendenden Kontraste. Die Symbole liegen auf
einem Startbildschirm und werden hundertmal am Tag angesehen.
Gerechnet im Browser, der für die Prüfungen ohnehin da ist — kein
Bildprogramm, keine neue Abhängigkeit, 0 EUR.
=================================================================== */
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 LOGO = join(WURZEL, "assets", "img", "marke", "logo-kopf-frei.png");
if (!existsSync(LOGO)) {
console.error(`Der freigestellte Logokopf fehlt: ${LOGO}`);
console.error("Erst node tools/logo-freistellen.mjs laufen lassen.");
process.exit(1);
}
/* ---------------------------------------------------------------------
DIE APPS. Alles, was an dogfather-universe.com hängt -- ohne
safeaddress (ausdrücklich ausgenommen) und ohne die beiden Seiten,
die VanVan gehören (andere Domain).
Die Reihenfolge ist die Reihenfolge auf dem Farbkreis: Nachbarn in
dieser Liste bekommen weit auseinanderliegende Töne, damit zwei
Symbole nebeneinander nie ähnlich aussehen.
------------------------------------------------------------------ */
export const APPS = [
{ schluessel: "universe", name: "Dogfather Universe", kurz: "Universe", wo: "dogfather-universe.com" },
{ schluessel: "workspace", name: "Creator Workspace", kurz: "Workspace", wo: "/workspace" },
{ schluessel: "webdesign", name: "Dogfather Webdesign", kurz: "Webdesign", wo: "/webdesign" },
{ schluessel: "portal", name: "Kundenportal", kurz: "Portal", wo: "/webdesign/portal.html" },
{ schluessel: "wdverwalt", name: "Webdesign-Verwaltung", kurz: "WD-Verw.", wo: "/webdesign/verwaltung.html" },
{ schluessel: "verwaltung", name: "DogiCrew-Verwaltung", kurz: "Verwaltung", wo: "/verwaltung.html" },
{ schluessel: "zocker", name: "Dogi's ZockerAnstalt", kurz: "Zocker", wo: "zockeranstalt." },
{ schluessel: "analyse", name: "DogFather Analyse", kurz: "Analyse", wo: "analyse." },
{ schluessel: "git", name: "DogFather Git", kurz: "Git", wo: "git." },
{ schluessel: "cloud", name: "DogFather Cloud", kurz: "Cloud", wo: "cloud." },
];
/* ---------------------------------------------------------------------
FARBEN IN OKLCH -- übernommen aus tools/kachel-farben.mjs, damit im
Haus nur eine Rechenweise existiert.
------------------------------------------------------------------ */
function oklchZuRgb(L, C, hGrad) {
const h = hGrad * Math.PI / 180;
const a = C * Math.cos(h), b = C * Math.sin(h);
const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
const l = l_ ** 3, m = m_ ** 3, s = s_ ** 3;
const r = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
const g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
const bl = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s;
const gam = (v) => (v <= 0.0031308 ? 12.92 * v : 1.055 * Math.pow(v, 1 / 2.4) - 0.055);
return [gam(r), gam(g), gam(bl)];
}
const imRaum = (rgb) => rgb.every((v) => v >= -0.001 && v <= 1.001);
const hex = (rgb) => "#" + rgb.map((v) =>
Math.round(Math.min(1, Math.max(0, v)) * 255).toString(16).padStart(2, "0")).join("");
/** Ein Ton bei gegebener Helligkeit -- die Farbstärke wird so weit
* gesenkt, bis sie darstellbar ist (Gelb und Grün verlassen den Raum
* früher als Blau). */
function ton(hGrad, L, cWunsch) {
let C = cWunsch;
while (C > 0.01 && !imRaum(oklchZuRgb(L, C, hGrad))) C -= 0.004;
return hex(oklchZuRgb(L, C, hGrad));
}
/* Startwinkel so gelegt, dass Universe das Blau der Marke behält.
0,655 Helligkeit und 0,148 Farbstärke sind die Hauswerte aus den
Kachelfarben -- kräftig genug zum Unterscheiden, weit weg von Neon. */
const START = 232;
export const FARBEN = APPS.map((app, i) => {
const h = (START + (360 / APPS.length) * i) % 360;
return {
...app,
winkel: Math.round(h),
hell: ton(h, 0.78, 0.115), // Lichtkante, Schein
mittel: ton(h, 0.655, 0.148), // die Kennfarbe
tief: ton(h, 0.42, 0.115), // Verlauf nach unten
dunkel: ton(h, 0.26, 0.075), // Grundfläche
};
});
/* ---------------------------------------------------------------------
DIE STILE — einer je App, nicht einer für alle.
Filipe, nachdem er die ersten vier Entwürfe gesehen hatte
(04.09.2026): *"sie sollen alle alle alle alle unterschiedlich sein,
also benutz die alle und du wirst noch mehr brauchen. alle
verknüpfungen sollen unterschiedlich sein und alle apps von meiner
domain."*
Damit ist die Aufgabe eine andere als zuerst gedacht: nicht ein Stil
in zehn Farben, sondern ZEHN STILE in zehn Farben. Jedes Symbol ist
damit in Farbe UND Form einmalig.
WAS DIE FAMILIE ZUSAMMENHÄLT, wenn alles verschieden ist: dreierlei,
und das ist überall gleich:
* dasselbe Logo, immer mittig, in derselben Größe
* dieselbe Rundung der Ecken (22,4 %, die Apple-Rundung)
* gedeckte Töne aus einer gerechneten Reihe, nie Neon
Ohne diesen Anker wären es zehn fremde Symbole statt einer Familie.
HELL ODER DUNKEL — daran hängt, ob das Logo gedreht werden muss. Der
Kopf ist überwiegend schwarz: Auf hellem Grund bleibt er wie er ist,
auf dunklem wird er per `invert` umgekehrt (die Zeichnung bleibt
dabei erhalten, anders als bei einer flachen Weißfärbung).
------------------------------------------------------------------ */
export const STILE = {
glut: {
name: "A · Glut",
beschreibung: "Farbverlauf von oben, dunkler Fuß, feine Lichtkante obenauf — "
+ "dieselbe Sprache wie das Knopf-System „Geschliffen“.",
grund: (f) => `linear-gradient(160deg, ${f.mittel} 0%, ${f.tief} 52%, ${f.dunkel} 100%)`,
zusatz: (f) => `
.rand { box-shadow: inset 0 0 0 var(--r2) ${f.hell}55,
inset 0 var(--r3) var(--r6) ${f.hell}30; }
.glanz { background: linear-gradient(180deg, #ffffff38, transparent 46%); }`,
logo: "filter: drop-shadow(0 var(--r2) var(--r4) #0009);",
},
ring: {
name: "B · Neonring",
beschreibung: "Fast schwarzer Grund, ein leuchtender Ring in der Kennfarbe. "
+ "Am stärksten unterscheidbar, weil die Farbe als Form auftritt.",
grund: () => "radial-gradient(circle at 50% 42%, #141a24 0%, #0a0e15 70%, #070a10 100%)",
zusatz: (f) => `
.rand { box-shadow: inset 0 0 0 var(--r5) ${f.mittel},
inset 0 0 var(--r10) ${f.hell}66,
0 0 var(--r6) ${f.mittel}44; }
.glanz { background: radial-gradient(circle at 50% 30%, ${f.mittel}22, transparent 62%); }`,
/* UMGEKEHRT. Der Logokopf ist ueberwiegend schwarz; auf dem fast
schwarzen Grund dieses Stils verschwand er im ersten Entwurf
nahezu vollstaendig -- sichtbar blieb ein Ring um ein dunkles
Nichts. `invert` dreht nur die Helligkeit um: Aus dem schwarzen
Fell wird helles, die Zeichnung (Augen, Schnauze, Ohren) bleibt
vollstaendig erhalten. Eine reine Weissfaerbung haette daraus
eine flache Silhouette gemacht. */
logo: "filter: invert(1) drop-shadow(0 0 var(--r5) #000c);",
},
schraeg: {
name: "C · Schräg geteilt",
beschreibung: "Zwei Töne derselben Farbe, diagonal getrennt — ruhig, "
+ "modern, auf kleinen Symbolen gut auseinanderzuhalten.",
grund: (f) => `linear-gradient(118deg, ${f.mittel} 0%, ${f.mittel} 48%, `
+ `${f.tief} 48%, ${f.dunkel} 100%)`,
zusatz: (f) => `
.rand { box-shadow: inset 0 0 0 var(--r2) #ffffff1f; }
.glanz { background: linear-gradient(118deg, transparent 46%, ${f.hell}18 48%, transparent 56%); }`,
logo: "filter: drop-shadow(0 var(--r2) var(--r3) #0008);",
},
aura: {
name: "D · Aura",
beschreibung: "Dunkler Grund, ein weicher Schein hinter dem Kopf. "
+ "Das Logo steht frei, die Farbe atmet dahinter.",
grund: (f) => `radial-gradient(circle at 50% 52%, ${f.tief} 0%, `
+ `${f.dunkel} 55%, #080b11 100%)`,
zusatz: (f) => `
.rand { box-shadow: inset 0 0 0 var(--r2) ${f.mittel}4d; }
.glanz { background: radial-gradient(circle at 50% 50%, ${f.hell}30, transparent 58%); }`,
/* Ebenfalls umgekehrt -- gleicher Grund wie bei B: dunkler Grund,
dunkles Logo. Der farbige Schein liegt dahinter und traegt den
jetzt hellen Kopf. */
logo: (f) => `filter: invert(1) drop-shadow(0 0 var(--r8) ${f.mittel}) drop-shadow(0 var(--r2) var(--r4) #000a);`,
},
/* ---- ab hier die sechs weiteren, damit jede App ihren eigenen bekommt ---- */
medaillon: {
name: "E · Medaillon",
beschreibung: "Heller Farbring auf dunklem Grund, der Kopf sitzt in einer "
+ "runden Scheibe — offiziell, wie ein Siegel.",
grund: (f) => `radial-gradient(circle at 50% 50%, ${f.hell} 0%, ${f.hell} 33%, `
+ `${f.mittel} 33.5%, ${f.tief} 55%, ${f.dunkel} 56%, ${f.dunkel} 100%)`,
zusatz: (f) => `
.rand { box-shadow: inset 0 0 0 var(--r3) ${f.mittel}88,
inset 0 0 var(--r8) #0007; }
.glanz { background: linear-gradient(180deg, #ffffff22, transparent 40%); }`,
logo: "filter: drop-shadow(0 var(--r2) var(--r3) #0007);",
},
streifen: {
name: "F · Streifen",
beschreibung: "Feine Schrägstreifen in zwei Tönen — technisch, ruhig, "
+ "erkennbar auch wenn das Symbol sehr klein ist.",
grund: (f) => `repeating-linear-gradient(126deg, ${f.mittel} 0 8%, ${f.tief} 8% 16%)`,
zusatz: (f) => `
.rand { box-shadow: inset 0 0 0 var(--r2) ${f.hell}44,
inset 0 0 var(--r10) #0006; }
.glanz { background: radial-gradient(circle at 50% 38%, #ffffff26, transparent 60%); }`,
logo: "filter: drop-shadow(0 var(--r2) var(--r4) #000b);",
},
praegung: {
name: "G · Prägung",
beschreibung: "Der Kopf wirkt in die Fläche eingedrückt — Licht von oben, "
+ "Schatten darunter. Plastisch, ohne bunt zu werden.",
grund: (f) => `linear-gradient(180deg, ${f.tief} 0%, ${f.mittel} 48%, ${f.tief} 100%)`,
zusatz: (f) => `
.rand { box-shadow: inset 0 var(--r3) var(--r6) ${f.hell}55,
inset 0 calc(-1 * var(--r3)) var(--r6) #0008,
inset 0 0 0 var(--r2) #ffffff1a; }
.glanz { background: linear-gradient(180deg, #ffffff2e, transparent 34%); }`,
logo: "filter: drop-shadow(0 calc(-1 * var(--r2)) 0 #ffffff55) "
+ "drop-shadow(0 var(--r2) var(--r2) #0009);",
},
ecke: {
name: "H · Eckband",
beschreibung: "Ein breites Farbband über die untere Ecke, darüber ruhiger "
+ "Grund — wie eine Schärpe.",
grund: (f) => `linear-gradient(315deg, ${f.mittel} 0 34%, ${f.tief} 34% 41%, `
+ `${f.dunkel} 41% 100%)`,
zusatz: (f) => `
.rand { box-shadow: inset 0 0 0 var(--r2) ${f.mittel}55; }
.glanz { background: radial-gradient(circle at 50% 40%, ${f.hell}1f, transparent 62%); }`,
logo: "filter: invert(1) drop-shadow(0 var(--r2) var(--r4) #000b);",
},
raster: {
name: "I · Raster",
beschreibung: "Ein feines Gitter aus Punkten in der Kennfarbe — für alles, "
+ "wo es um Zahlen und Daten geht.",
grund: (f) => `radial-gradient(${f.mittel} 22%, transparent 23%) 0 0 / 12% 12%, `
+ `linear-gradient(160deg, ${f.dunkel}, #080b11)`,
zusatz: (f) => `
.rand { box-shadow: inset 0 0 0 var(--r3) ${f.mittel}77,
inset 0 0 var(--r10) #000a; }
/* Die Beruhigung gehört HINTER den Kopf, nicht darüber -- sonst
verdeckt sie genau das, was sie lesbar machen soll. */
.unterlage { background: radial-gradient(circle at 50% 48%,
#070a10ee 0%, #070a10cc 34%, transparent 62%); }
.glanz { background: radial-gradient(circle at 50% 26%, ${f.hell}14, transparent 58%); }`,
logo: (f) => `filter: invert(1) drop-shadow(0 0 var(--r5) #000c) `
+ `drop-shadow(0 var(--r2) var(--r3) #000b);`,
},
doppelring: {
name: "J · Doppelring",
beschreibung: "Zwei Ringe ineinander, außen kräftig, innen fein — "
+ "wirkt wie ein Abzeichen.",
grund: (f) => `radial-gradient(circle at 50% 50%, ${f.dunkel} 0 40%, `
+ `${f.mittel} 40.5% 45%, ${f.dunkel} 45.5% 52%, ${f.tief} 52.5% 100%)`,
zusatz: (f) => `
.rand { box-shadow: inset 0 0 0 var(--r4) ${f.mittel},
inset 0 0 0 var(--r6) ${f.dunkel},
inset 0 0 var(--r8) ${f.hell}33; }
.glanz { background: linear-gradient(200deg, #ffffff1c, transparent 44%); }`,
logo: (f) => `filter: invert(1) drop-shadow(0 0 var(--r5) ${f.dunkel}) `
+ `drop-shadow(0 var(--r2) var(--r3) #000a);`,
},
};
/* WER BEKOMMT WELCHEN. Nicht ausgewürfelt, sondern nach dem, was die
App ist: Das Spiel bekommt den Neonring, die Datenauswertung das
Raster, die Verwaltung das Abzeichen, das Kundenportal das Siegel.
So trägt die Form dieselbe Aussage wie die Farbe. */
export const STIL_JE_APP = {
universe: "glut", // die Hauptmarke: edel, Verlauf, Lichtkante
workspace: "aura", // Arbeitsplatz: ruhig, das Logo steht frei
webdesign: "schraeg", // Design: die klare, moderne Teilung
portal: "medaillon", // Kundenseite: offiziell wie ein Siegel
wdverwalt: "praegung", // technische Verwaltung: plastisch, sachlich
verwaltung: "doppelring", // DogiCrew-Verwaltung: Abzeichen
zocker: "ring", // Spielhalle: Neon, das Auffälligste
analyse: "raster", // Zahlen und Daten: das Gitter
git: "streifen", // Technik: Schrägstreifen
cloud: "ecke", // Ablage: das ruhige Eckband
};
/* ---------------------------------------------------------------------
Ein einzelnes Symbol als HTML. Alle Maße hängen an der Kantenlänge,
damit 192 und 512 wirklich dasselbe Bild ergeben und nicht zwei
verschieden proportionierte.
------------------------------------------------------------------ */
/** Nur der Bauteil (CSS + Markup) eines Symbols, mit EIGENER Klasse.
*
* ERSTER ENTWURF WAR FALSCH: Er gab je Symbol ein vollständiges
* Dokument mit den Klassen `.symbol`, `.rand`, `.glanz` zurück. In der
* Übersicht landeten dadurch vierzig gleichnamige Regelsätze in einem
* Dokument -- der letzte gewann, und alle vierzig Symbole sahen
* identisch blau aus. Die Farben waren gerechnet, kamen aber nie an.
*
* Jede Kachel bekommt deshalb einen eigenen Namen aus Stil und App.
* Damit lässt sich beliebig viel davon in ein Dokument legen, ohne
* dass sich zwei ins Gehege kommen. */
export function symbolTeil(f, stilName, n, { maskable = false, logoDaten } = {}) {
const stil = STILE[stilName];
const logoFilter = typeof stil.logo === "function" ? stil.logo(f) : stil.logo;
/* MASKABLE: DAS GANZE SYMBOL VERKLEINERN, nicht nur das Logo.
BEFUND 05.09.2026, von Filipe gemeldet: *"die symbole sehen aber auf
meinem pc nicht aus wie auf dem browser mit diesen geilen farben."*
Und er hatte recht -- die maskable-Fassungen sahen aus wie eine
schlechte Kopie: blass, das Medaillon riesig, der Doppelring über
den Rand hinaus.
Der erste Entwurf verkleinerte nur das LOGO (52 % statt 68 %) und
liess den Hintergrund unveraendert. Das geht bei einer glatten
Flaeche gut und bei allem anderen schief: Medaillon, Doppelring,
Raster und Eckband rechnen ihre Kreise und Kanten in PROZENT DER
FLAECHE. Wird aussen ein Fünftel weggeschnitten, sitzt der Ring
nicht mehr da, wo er hingehoert -- und das Logo schwimmt verloren
in der Mitte.
Richtig ist, das FERTIGE Symbol als Ganzes auf den sicheren Bereich
zu verkleinern und den Rest mit dem dunkelsten Ton der App zu
fuellen. Dann bleibt jedes Verhaeltnis erhalten: Ring zu Flaeche,
Logo zu Ring, Verlauf zu Kante. Was das System wegschneidet, ist
nur ruhige Randfarbe.
78 % ist der Anteil, der bei jeder gaengigen Maske heil bleibt
(Kreis, Quadrat mit runden Ecken, Tropfen). */
const radius = maskable ? 0 : 22.4; // 22,4 % ist die Apple-Rundung
const k = `s-${stilName}-${f.schluessel}${maskable ? "-m" : ""}`;
/* Das eigentliche Symbol ist bei maskable kleiner als die Datei. */
const innen = maskable ? Math.round(n * 0.78) : n;
const logoBreite = 68; // immer gleich -- siehe oben
const css = `
${maskable ? `
.${k}-huelle {
width: ${n}px; height: ${n}px; flex: none;
display: flex; align-items: center; justify-content: center;
background: ${f.dunkel};
}` : ""}
.${k} {
position: relative; width: ${innen}px; height: ${innen}px; overflow: hidden;
border-radius: ${maskable ? 18 : radius}%; flex: none;
--r2: ${innen * 0.006}px; --r3: ${innen * 0.012}px; --r4: ${innen * 0.016}px;
--r5: ${innen * 0.022}px; --r6: ${innen * 0.03}px; --r8: ${innen * 0.05}px;
--r10: ${innen * 0.07}px;
background: ${stil.grund(f)};
}
.${k} > .rand, .${k} > .glanz, .${k} > .unterlage {
position: absolute; inset: 0; border-radius: ${radius}%; pointer-events: none;
}
.${k} > .logo {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: ${logoBreite}%; ${logoFilter}
}
${stil.zusatz(f)
.replace(/\.rand/g, `.${k} > .rand`)
.replace(/\.glanz/g, `.${k} > .glanz`)
.replace(/\.unterlage/g, `.${k} > .unterlage`)}`;
/* DREI EBENEN, und die Reihenfolge ist wichtig:
unterlage liegt HINTER dem Logo -- zum Abdunkeln oder Aufhellen
des Grundes genau dort, wo der Kopf steht
logo der Kopf
glanz Lichtstimmung ÜBER dem Kopf
rand Kante und Ring, ganz oben
Der erste Entwurf hatte keine `unterlage`. Beim Raster-Stil sollte
der Grund hinter dem Kopf abgedunkelt werden, damit der helle Kopf
lesbar bleibt -- die Abdunklung lag mangels eigener Ebene in
`glanz` und damit ÜBER dem Kopf. Ergebnis: Das Logo war fast
unsichtbar. Genau so verschwindet ein Fehler in einem Bild, das
"irgendwie dunkel" aussieht. */
const kern = `<div class="${k}">
<div class="unterlage"></div>
<img class="logo" src="${logoDaten}" alt="">
<div class="glanz"></div>
<div class="rand"></div>
</div>`;
/* Bei maskable liegt das Symbol in einer Huelle aus der Grundfarbe --
die faengt ab, was das System wegschneidet. */
const markup = maskable ? `<div class="${k}-huelle">${kern}</div>` : kern;
return { css, markup, klasse: maskable ? `${k}-huelle` : k };
}
/** Ein vollständiges Dokument für genau ein Symbol -- für den Bau. */
export function symbolHtml(f, stilName, n, opt = {}) {
const t = symbolTeil(f, stilName, n, opt);
return `<!doctype html><html><head><meta charset="utf-8"><style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: ${n}px; height: ${n}px; background: transparent; }
${t.css}
</style></head><body>${t.markup}</body></html>`;
}
/* Ein durchsichtiger Punkt -- damit lässt sich dasselbe Symbol ohne
Logo zeichnen, für die Vergleichsmessung beim Bauen. */
export const LEER = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
export const logoAlsDaten = () =>
"data:image/png;base64," + readFileSync(LOGO).toString("base64");
/* ---------------------------------------------------------------------
ENTWURF: alle Stile nebeneinander, zum Aussuchen.
------------------------------------------------------------------ */
async function entwerfen() {
const { chromium } = await import(
"file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
const browser = await chromium.launch();
const logoDaten = logoAlsDaten();
const K = 116; // Kantenlänge je Musterbild
let reihen = "";
let allesCss = "";
/* ---- Zuerst: die ECHTE Zuordnung, so wie sie am Ende aussieht ----
Das ist die eigentliche Auskunft. Die Stilreihen darunter dienen
nur noch dem Vergleich. */
{
let zellen = "";
for (const f of FARBEN) {
const stilName = STIL_JE_APP[f.schluessel];
const gross = symbolTeil(f, stilName, 132, { logoDaten });
allesCss += gross.css;
zellen += `<div class="zelle gross">${gross.markup}
<span class="bez"><b>${f.kurz}</b><br>${STILE[stilName].name}</span></div>`;
}
reihen += `<section class="reihe">
<h2>SO WIRD ES — jede App ihr eigener Stil, ihre eigene Farbe</h2>
<p>Zehn Apps, zehn Stile, zehn gerechnete Farben. Zusammengehalten wird das
durch dasselbe Logo, dieselbe Eckenrundung und eine gemeinsame Farbreihe.</p>
<div class="zeile">${zellen}</div></section>
<hr class="trenn">`;
}
for (const [schluessel, stil] of Object.entries(STILE)) {
let zellen = "";
for (const f of FARBEN) {
const t = symbolTeil(f, schluessel, K, { logoDaten });
allesCss += t.css;
const eigner = Object.entries(STIL_JE_APP)
.find(([app, s]) => s === schluessel && app === f.schluessel);
zellen += `<div class="zelle${eigner ? " markiert" : ""}">${t.markup}`
+ `<span class="bez">${f.kurz}</span></div>`;
}
reihen += `<section class="reihe">
<h2>${stil.name}</h2><p>${stil.beschreibung}</p>
<div class="zeile">${zellen}</div></section>`;
}
const seite = await (await browser.newContext({
viewport: { width: 1560, height: 1200 }, deviceScaleFactor: 2 })).newPage();
await seite.setContent(`<!doctype html><html><head><meta charset="utf-8"><style>
* { box-sizing: border-box; }
body { margin: 0; padding: 30px 34px; background: #0a0d13;
font-family: "Segoe UI", system-ui, sans-serif; color: #dbe4ef; }
h1 { font-size: 21px; margin: 0 0 4px; letter-spacing: .01em; }
.unter { color: #94a5bb; font-size: 13px; margin: 0 0 22px; }
.reihe { margin-bottom: 26px; }
.reihe h2 { font-size: 15px; margin: 0 0 3px; color: #3fbdf5; letter-spacing: .04em; }
.reihe p { font-size: 12.5px; color: #94a5bb; margin: 0 0 12px; max-width: 900px; line-height: 1.5; }
.zeile { display: flex; gap: 14px; flex-wrap: nowrap; }
.zelle { text-align: center; width: ${K}px; flex: none; }
.bez { display: block; margin-top: 6px; font-size: 10.5px; color: #75859a; line-height: 1.4; }
.zelle.gross { width: 132px; }
.zelle.gross .bez { font-size: 11px; color: #94a5bb; }
.zelle.gross .bez b { color: #dbe4ef; }
.zelle.markiert { position: relative; }
.zelle.markiert::after {
content: "gewählt"; position: absolute; left: 50%; transform: translateX(-50%);
bottom: -15px; font-size: 9px; color: #3fbdf5; letter-spacing: .05em; }
.zelle.markiert .bez { color: #3fbdf5; }
.trenn { border: 0; border-top: 1px solid #1e2836; margin: 4px 0 24px; }
.reihe h2 { text-transform: none; }
${allesCss}
</style></head><body>
<h1>App-Symbole — jede App eigener Stil, eigene Farbe</h1>
<p class="unter">Oben die endgültige Zuordnung. Darunter jeder Stil einmal in allen
zehn Farben, damit der Vergleich möglich bleibt.</p>
${reihen}
</body></html>`, { waitUntil: "networkidle" });
await seite.waitForTimeout(600);
const ziel = join(WURZEL, "entwurf-app-symbole.png");
await seite.screenshot({ path: ziel, fullPage: true });
await browser.close();
console.log("Farben (gerechnet, nicht gewählt):");
for (const f of FARBEN) {
console.log(` ${f.kurz.padEnd(12)} ${String(f.winkel).padStart(3)}° ${f.mittel} ${f.wo}`);
}
console.log(`\nEntwurf gespeichert: ${ziel.replace(WURZEL, ".")}`);
}
/* ---------------------------------------------------------------------
BAUEN: die echten Dateien, in allen Größen, für alle Apps.
------------------------------------------------------------------ */
/* Welche Größen jede App braucht.
192/512 any die zwei Pflichtgrößen eines Manifests
192/512 maskable Android schneidet bis zu 20 % ringsum weg; dafür
sitzt das Logo kleiner und die Ecken bleiben eckig
180 apple-touch-icon (iPhone-Startbildschirm)
32 das Lesezeichen-Symbol im Browserreiter */
const GROESSEN = [
{ n: 192, maskable: false, endung: "192" },
{ n: 512, maskable: false, endung: "512" },
{ n: 192, maskable: true, endung: "192-maskable" },
{ n: 512, maskable: true, endung: "512-maskable" },
{ n: 180, maskable: false, endung: "180" },
{ n: 32, maskable: false, endung: "32" },
];
async function bauen() {
const { chromium } = await import(
"file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
const browser = await chromium.launch();
const logoDaten = logoAlsDaten();
const ziel = join(WURZEL, "assets", "img", "app-symbole");
if (!existsSync(ziel)) mkdirSync(ziel, { recursive: true });
const seite = await (await browser.newContext({ deviceScaleFactor: 1 })).newPage();
let gebaut = 0;
const schwach = [];
for (const f of FARBEN) {
const stilName = STIL_JE_APP[f.schluessel];
if (!stilName || !STILE[stilName]) {
console.error(`Kein Stil für ${f.schluessel} — abgebrochen.`);
process.exit(1);
}
for (const g of GROESSEN) {
await seite.setViewportSize({ width: g.n, height: g.n });
await seite.setContent(symbolHtml(f, stilName, g.n, { maskable: g.maskable, logoDaten }),
{ waitUntil: "networkidle" });
await seite.waitForTimeout(60);
const datei = join(ziel, `${f.schluessel}-${g.endung}.png`);
await seite.screenshot({ path: datei, omitBackground: true });
gebaut++;
}
/* ---- KONTROLLE: hebt sich das Logo wirklich ab? --------------------
ERSTER VERSUCH WAR FALSCH und ist an sich selbst aufgeflogen: Er
verglich die MITTLERE Helligkeit in der Bildmitte mit der am
Rand. Beim Streifen-Stil ergab das "1 Stufe Unterschied" und
damit eine Warnung -- obwohl der Kopf dort bestens zu sehen ist.
Der Grund ist offensichtlich, sobald man ihn kennt: Ein
gleichmäßig gestreifter Grund hat überall denselben Mittelwert,
und ein Logo aus Schwarz UND Weiß hebt ihn kaum an. Gemessen
wurde also etwas, das mit Sichtbarkeit nichts zu tun hat.
Richtig ist die direkte Frage: *Wie stark verändert das Logo das
Bild?* Dafür wird dasselbe Symbol zweimal gezeichnet -- einmal
mit Kopf, einmal ohne -- und Punkt für Punkt verglichen. Was sich
nicht ändert, ist unsichtbar; je größer der mittlere Unterschied
in der Fläche des Kopfes, desto deutlicher steht er da. Das gilt
für jeden Stil gleichermaßen, für gestreifte wie für glatte. */
const messe = async (mitLogo) => {
await seite.setViewportSize({ width: 512, height: 512 });
await seite.setContent(
symbolHtml(f, stilName, 512, { logoDaten: mitLogo ? logoDaten : LEER }),
{ waitUntil: "networkidle" });
await seite.waitForTimeout(60);
const puffer = await seite.screenshot({ omitBackground: true });
return "data:image/png;base64," + puffer.toString("base64");
};
const [mitBild, ohneBild] = [await messe(true), await messe(false)];
const unterschied = await seite.evaluate(async ([a, b]) => {
const lade = async (q) => { const i = new Image(); i.src = q; await i.decode(); return i; };
const [ia, ib] = [await lade(a), await lade(b)];
const mach = (bild) => {
const l = document.createElement("canvas");
l.width = 512; l.height = 512;
const s = l.getContext("2d", { willReadFrequently: true });
s.drawImage(bild, 0, 0);
return s.getImageData(120, 110, 272, 292).data; // die Fläche des Kopfes
};
const da = mach(ia), db = mach(ib);
let summe = 0, n = 0;
for (let i = 0; i < da.length; i += 4) {
const ha = 0.2126 * da[i] + 0.7152 * da[i + 1] + 0.0722 * da[i + 2];
const hb = 0.2126 * db[i] + 0.7152 * db[i + 1] + 0.0722 * db[i + 2];
summe += Math.abs(ha - hb);
n++;
}
return n ? summe / n : 0;
}, [mitBild, ohneBild]);
if (unterschied < 18) {
schwach.push(`${f.kurz} (${STILE[stilName].name}): das Logo ändert das Bild nur um `
+ `${unterschied.toFixed(0)} Helligkeitsstufen`);
}
console.log(` ${f.kurz.padEnd(12)} ${STILE[stilName].name.padEnd(18)} ${f.mittel} `
+ `Logo hebt sich um ${unterschied.toFixed(0)} Stufen ab`);
}
await browser.close();
console.log(`\n${gebaut} Dateien gebaut in ${ziel.replace(WURZEL, ".")}`);
if (gebaut !== FARBEN.length * GROESSEN.length) {
console.error(`FEHLER: erwartet waren ${FARBEN.length * GROESSEN.length}.`);
process.exit(1);
}
if (schwach.length) {
console.error(`\nWARNUNG — hier hebt sich das Logo kaum vom Grund ab:`);
for (const z of schwach) console.error(` ${z}`);
process.exit(1);
}
console.log("Auf jedem Symbol hebt sich das Logo deutlich vom Grund ab.");
}
/* NUR AUSFUEHREN, WENN DIESE DATEI SELBST AUFGERUFEN WIRD.
Ohne diese Abfrage lief der Entwurf auch dann, wenn ein anderes
Werkzeug hier nur die Farben und die Zuordnung IMPORTIERT --
app-symbole-einbinden.mjs tut genau das. Beim ersten Lauf hat es
deshalb ungefragt einen Browser gestartet und ein Uebersichtsbild neu
gezeichnet, bevor es mit seiner eigentlichen Arbeit begann. Ein
Import darf nichts tun. */
const direktAufgerufen = process.argv[1]
&& fileURLToPath(import.meta.url) === process.argv[1];
if (direktAufgerufen) {
const befehl = process.argv[2] || "entwurf";
if (befehl === "entwurf") await entwerfen();
else if (befehl === "bauen") await bauen();
else { console.error(`Unbekannt: ${befehl}. Bekannt sind: entwurf, bauen`); process.exit(1); }
}
Reference in New Issue View Git Blame Copy Permalink