dejanandClaude Opus 5
3832f82a65
Der Export staucht nicht mehr auf 1080 x 1350. Die Slide entstand bei Renderqualitaet k longst in 1080k x 1350k und wurde unmittelbar vor dem Speichern wieder heruntergerechnet -- eine Vorlage mit 2390 px kam so mit 916 px an, obwohl sie bereits in 2748 px gerendert vorlag. Gespeichert wird jetzt, was gerendert wurde; bei 3x sind das 3240 x 4050. Die Statuszeile nennt die Groesse, und wer exakt 1080 will, stellt die Stufe auf 1x. Die Kontrolle vor dem Speichern hat ihren Zweck verfehlt. Sie prueft, ob jede Bildflaeche im Ergebnis Pixel traegt, sah dafuer aber das achsenparallele Umrechteck an. Die Szenen-Displays stehen per matrix3d schraeg im Raum, in ihrem Umrechteck liegen Rasterlinien, Hintergrund und das Nachbargeraet -- deren Kontrast reichte immer, um durchzukommen. Eine Slide mit voellig leerem Display wurde deshalb stumm gespeichert. Jetzt werden die echten vier Ecken ausgemessen (ueber 1-px-Marken, Chrome kennt getBoxQuads nicht) und nur die Ueberlappung von Bild und Rahmen abgetastet. Beides einzeln fuehrt in die Irre: das Szenen-Display ist groesser als der sichtbare Ausschnitt, das Feature-Mockup umgekehrt. Die Geraeterahmen stehen neu mit auf der Liste, geprueft ueber den aus der Vorlage geeichten Dunkelanteil. Nachgestellt mit opacity 0: vorher still gespeichert, jetzt Abbruch mit Nennung der Flaeche. 11 von 11 echten Ausfuhren laufen ohne Fehlalarm und ohne Wiederholung durch. Die Szenen-Screenshots fuellen ihr Display randlos. Sie lagen als kleinere Rechtecke an handgemessenen Prozentwerten darin, die nicht aus der Glasflaeche des Mockups stammten: 656 px blieben rechts frei, 470 px unten, und die Werkzeugleiste des Boards verschwand oben trotzdem unter der Blende. Weil Prozentwerte in translate() an der Bildkante haengen, loesten Vorschau und Export sie unterschiedlich auf -- die Luecke war im Export groesser als im Canvas. object-fit uebernimmt das jetzt, es bleibt kein Versatz, der auseinanderlaufen koennte. Dazu behoben: post1-alt.html konnte vier Laptop-Layouts und Slide 2 ueberhaupt nicht exportieren. workflow.png haengt an keiner Slide mehr und fehlte in der Ladeliste, im Bild stand src="undefined". Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
HiveGrid Social — Design-Library & Post-Generator
Eigenständige Werkbank für HiveGrid-Social-Grafiken. Slides werden im Browser als HTML gebaut, im Canvas bearbeitet und pixelgenau als Instagram-taugliche PNGs exportiert.
Das Repo ist bewusst autark. Keine CDN-Verweise, keine Google-Fonts zur Laufzeit, keine Pfade in andere Repos. Alles, was ein Post braucht — Schrift, Logos, Mockups, Screenshots, Bibliotheken — liegt hier.
Starten
./serve.sh # http://127.0.0.1:4321
Downloads landen direkt in ~/Downloads, ohne Browser-Dialog.
Projekte
| Projekt | Datei | Inhalt |
|---|---|---|
| Post 1 · Lösung | post1.html |
Carousel, 5 Slides |
| Post 2 · Statement | index.html |
Einzelbild |
Oben im Bedienfeld wechselt man zwischen ihnen. Jedes Projekt speichert seinen Stand — Einstellungen, Layouts, Muster und alle Verschiebungen aus dem Canvas überleben einen Reload. „Projekt zurücksetzen" wirft ihn weg.
Der Stand liegt im Repo
Nicht nur im Browser: jede Änderung landet auch in state/<projekt>.json.
Diese Dateien gehören mit in den Commit. Nur so hat die andere Maschine
nach git pull denselben Stand.
state/post1.json Post 1 · Lösung
state/post1-alt.json Post 1 · Alt
state/post2.json Post 2 · Statement
Beim Laden gewinnt die Datei, der localStorage ist nur der Rückfall, wenn der Server nicht läuft. Wer den Stand ändert, muss also committen und pushen — sonst sieht ihn niemand sonst. Gibt es die Datei noch nicht, wird der Stand aus dem Browser einmalig hineingeschrieben.
Bedienung
| Taste | Wirkung |
|---|---|
← → |
Slide wechseln (im Bearbeiten-Modus: Element verschieben) |
E |
Bearbeiten an/aus |
W |
Streifen ⇄ Einzelansicht |
V |
Variante hell/dunkel |
L M I |
Layout · Muster · Intensität |
C G T |
Durchgehend · Tag-Ausrückung · Perspektive |
D A |
Slide laden · alle als ZIP |
Im Bearbeiten-Modus lassen sich Elemente ziehen, mit den Pfeiltasten
pixelweise schieben (⇧ = 10 px) und über A−/A+ in der Größe ändern.
Auf der Fläche bewegen
| Maus | Wirkung |
|---|---|
| Ziehen | Ausschnitt schieben |
| Rad | Zoomen, auf den Zeiger zu |
⇧ + Rad |
Waagerecht schieben |
| Leertaste-Ziehen, mittlere Taste | Schieben, auch im Bearbeiten-Modus |
Ein gewöhnliches Mausrad genügt, ohne Zusatztaste. Im Bearbeiten-Modus zieht
die linke Taste das Element unter dem Zeiger — die Fläche schiebt man dort mit
gedrückter Leertaste oder der mittleren Taste. Fit unten rechts setzt den
Maßstab zurück.
Aufbau
assets/
├── brand/ Wortmarke hell/dunkel, G-Marke (SVG + PNG), Wabe, Geerkens
├── partner/ DATEV, KWP, Google Calendar, Google Drive, MS Outlook, MS Teams
├── mockups/ Geräte-Mockups (Displays ausgeknockt, Screenshot liegt dahinter)
├── screens/ Software-Screenshots
└── fonts/ Manrope 400–800, lokal
vendor/ html-to-image, JSZip
state/ Projektstände, gehören ins Repo
serve.py Statischer Server + /save- und /state-Endpunkt
rules.md Gestaltungsregeln, Farbwerte, Export-Wissen
Regeln
rules.md ist die Arbeitsgrundlage. Farbwerte, Geometrie, Typografie,
Layout-Template, Instagram-Export und die Liste der Fallen, in die wir schon
getappt sind. Vor jeder Änderung an der Gestaltung dort nachsehen.
Marken-Werte stammen aus der Website (HiveGrid-Website) und sind hier
gespiegelt, nicht verlinkt. Ändert sich dort etwas, muss es hier
nachgezogen werden.