marc
53ab62d220
Die Pixelraster stehen jetzt in web/glyphs.json — einmal. Der Schreibtisch laedt die Datei selbst, die HoneyBar bekommt sie mit der App-Liste mit; sie bleibt damit eine einzelne Datei ohne zweite Anfrage. Die abgetippten Wettersymbole in honeybar.js sind weg, und die Symbolauswahl im Programm-Editor kommt jetzt aus derselben Datei statt aus einer Liste im Quelltext. Neu: Symbole neben den App-Namen im Streifen beider Leisten, mit einem Schalter (Einstellungen -> HoneyBar) fuer beide zugleich. In den Aufklappmenues und auf den Kacheln stehen sie immer.
53 lines
1.9 KiB
JavaScript
53 lines
1.9 KiB
JavaScript
/* Die Pixelsymbole von HoneyOS.
|
||
*
|
||
* Die Raster selbst stehen in `web/glyphs.json` — **an genau einer Stelle**,
|
||
* absichtlich als Daten statt als Quelltext: Der Schreibtisch holt sie hier,
|
||
* die HoneyBar in fremden Apps bekommt sie vom Server mit der App-Liste
|
||
* mitgeliefert (siehe main.go). Vorher standen sie zweimal da, und die
|
||
* Wettersymbole waren schon einmal auseinandergelaufen.
|
||
*
|
||
* Das Laden geschieht mit `await` auf oberster Ebene: Wer dieses Modul
|
||
* einbindet, bekommt fertige Symbole und darf sie überall gerade heraus
|
||
* benutzen — sonst müsste jede Zeichenfunktion asynchron werden.
|
||
*/
|
||
|
||
/** 12×12-Raster als Zeichenketten, ein `#` ist ein Pixel. */
|
||
export const GLYPHS = await ladeGlyphen();
|
||
|
||
async function ladeGlyphen() {
|
||
try {
|
||
const res = await fetch(new URL("../glyphs.json", import.meta.url), { cache: "no-store" });
|
||
if (res.ok) return await res.json();
|
||
} catch {
|
||
/* fällt unten auf ein leeres Raster zurück */
|
||
}
|
||
// Ohne Symbole ist der Schreibtisch hässlich, aber benutzbar — ein leerer
|
||
// Bildschirm wäre schlimmer. Passieren kann es nur, wenn der eigene Server
|
||
// gerade nicht antwortet; dann ist ohnehin nichts zu holen.
|
||
console.warn("HoneyOS: glyphs.json nicht geladen — Symbole fehlen.");
|
||
return {};
|
||
}
|
||
|
||
export function glyphSvg(name) {
|
||
return rasterSvg(GLYPHS[name] || GLYPHS.box);
|
||
}
|
||
|
||
/** Baut aus einem 12×12-Raster ein SVG. Waagerechte Läufe werden
|
||
* zusammengefasst: weniger Rechtecke, gleiches Bild. */
|
||
export function rasterSvg(grid) {
|
||
if (!grid) return "";
|
||
const rects = [];
|
||
grid.forEach((row, y) => {
|
||
let run = 0;
|
||
for (let x = 0; x <= row.length; x++) {
|
||
if (row[x] === "#") {
|
||
run++;
|
||
} else if (run) {
|
||
rects.push(`<rect x="${x - run}" y="${y}" width="${run}" height="1"/>`);
|
||
run = 0;
|
||
}
|
||
}
|
||
});
|
||
return `<svg viewBox="0 0 12 12" fill="currentColor" shape-rendering="crispEdges" aria-hidden="true">${rects.join("")}</svg>`;
|
||
}
|