dejanandClaude Opus 5
92529a8c47
Die Auswahl eines Elements war nur eine Zeile im linken Bedienfeld, und die
Bedienung dazu lag zwischen Slide-Einstellungen verstreut. Jetzt ist die
Oberflaeche geteilt: links die Slide und alles Allgemeine, rechts genau das
angeklickte Element.
Im Element-Feld stehen Text, Groesse, X und Y, die Ebene, das Ausrichten an
der Slide (links, mittig, rechts sowie oben, mittig, unten mit 92 px Rand),
das Angleichen ueber alle Slides und das Loeschen. Der Text schreibt in
dieselbe Ueberschreibung, die auch das Inhalt-Feld links fuellt -- man
beschriftet also die Ueberschrift, indem man sie anklickt.
Ausgerichtet wird gemessen statt gerechnet: die Mockups stehen
perspektivisch im Raum und das Blatt ist gepolstert.
Zwei Fehler, die dabei aufgefallen sind:
Das Feld faehrt beim Anklicken ein und macht die Buehne schmaler -- damit
aendert sich der Massstab mitten im Klick. Der Zug rechnete aber mit einem
frisch gerechneten autoFit und verschob das Element deshalb um ein Drittel
zu weit. Genommen wird jetzt der Massstab, mit dem tatsaechlich gezeichnet
ist.
Und ein fehlendes Bild riss den ganzen Export mit ("1 Bild(er) nicht
geladen"), ohne zu sagen welches. Verweise auf Dateien, die es nicht mehr
gibt, werden beim Start aufgeloest und benannt; eine Slide baut sich auch
ohne sie auf.
Geprueft: 13 Faelle fuer das Element-Feld, dazu der volle Exportlauf und die
Maus-Bedienung.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
169 lines
6.5 KiB
Markdown
169 lines
6.5 KiB
Markdown
# 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
|
||
|
||
```sh
|
||
./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, Anzahl frei |
|
||
|
||
### Slides anlegen und wegnehmen
|
||
|
||
Wie viele Slides ein Post hat, steht nicht fest. Unter der Slide-Auswahl:
|
||
|
||
| Knopf | Wirkung |
|
||
|---|---|
|
||
| `+ Neu` | leere Slide dahinter einfügen |
|
||
| `Kopie` | die gewählte Slide samt Text, Bild und Verschiebungen verdoppeln |
|
||
| `Löschen` | die gewählte Slide wegnehmen (die letzte bleibt stehen) |
|
||
| `←` `→` | eine Position nach vorn oder hinten |
|
||
|
||
Bei einer einzigen Slide ist der Post ein **Einzelbild** — die Kopfzeile sagt
|
||
es, und der ZIP-Knopf verschwindet.
|
||
|
||
Unter **Inhalt (nur diese Slide)** stehen Tag, Überschrift, Fließtext und die
|
||
Auswahl des Screenshots. Getippt wird Text, keine Auszeichnung: `*Wort*` setzt
|
||
den Akzent, ein Zeilenumbruch bricht die Zeile um. Das Rahmenformat folgt beim
|
||
Wechsel automatisch dem Seitenverhältnis der gewählten Aufnahme.
|
||
|
||
> Die Tags sind gestalterisch ausgeblendet (`visibility: hidden` auf `.badge`).
|
||
> Der eingetippte Tag beschriftet deshalb vorerst nur den Slide-Knopf im
|
||
> Bedienfeld.
|
||
|
||
### Eigene Bilder importieren
|
||
|
||
Unter **Eigene Bilder** wählst du Dateien aus dem Finder, oder du ziehst sie
|
||
direkt auf eine Slide. Beim Ablegen wird das Bild dort zum **zweiten Bild** und
|
||
lässt sich im Bearbeiten-Modus frei schieben und in der Größe ändern; über den
|
||
Knopf importierst du nur und ordnest danach unter *Inhalt* zu.
|
||
|
||
Die Datei geht **byteweise unverändert** an den Server und liegt danach unter
|
||
`assets/eigene/`. Nichts wird neu kodiert, skaliert oder umbenannt — nur
|
||
Zeichen, die in einem Dateinamen nichts zu suchen haben, weichen einem
|
||
Bindestrich.
|
||
|
||
```
|
||
assets/eigene/ importierte Bilder, gehören mit in den Commit
|
||
```
|
||
|
||
> Der Umweg über den Server ist Absicht. Ein Foto als Base64 im Projektstand
|
||
> wäre größer als der gesamte übrige Stand und machte jeden Diff unlesbar. So
|
||
> steht dort nur der Pfad.
|
||
|
||
Die Auswahllisten unter *Inhalt* holt der Generator beim Start vom Server
|
||
(`/bilder`), importierte Bilder stehen deshalb sofort darin — mit `★`
|
||
gekennzeichnet.
|
||
|
||
**Mitgelieferte Slides bleiben Vorlagen.** Der Stand speichert für sie nur
|
||
einen Verweis und die Felder, die du überschrieben hast — eine Änderung an der
|
||
Vorlage im Code kommt dadurch weiterhin bei allen an, die sie nicht angefasst
|
||
haben. Selbst angelegte Slides stehen vollständig im Stand.
|
||
|
||
**Das 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-merk.json Rückfallpunkt
|
||
```
|
||
|
||
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 und mit den Pfeiltasten
|
||
pixelweise schieben (`⇧` = 10 px).
|
||
|
||
**Ein angeklicktes Element öffnet sein eigenes Feld rechts.** Damit ist die
|
||
Oberfläche geteilt: links die Slide und alles Allgemeine, rechts das eine
|
||
Element.
|
||
|
||
| Im Element-Feld | Wirkung |
|
||
|---|---|
|
||
| `Text` | Beschriftung des Elements, `*Wort*` setzt den Akzent |
|
||
| `Schrift` / `Breite`, `A−` `A+` | Größe |
|
||
| `X` `Y` | Stelle auf der Slide, gezählt ab der Mitte, bezogen auf die obere linke Ecke |
|
||
| `Ebene` | wie `z-index` — höher liegt weiter vorn. Leer heißt Standard |
|
||
| `Links` `Mitte` `Rechts`, `Oben` `Mitte` `Unten` | an der Slide ausrichten, 92 px Rand |
|
||
| `Position` / `Größe angleichen` | denselben Wert auf allen Slides |
|
||
| `Löschen` | nimmt es aus der Slide. Es taucht darunter als „… zurück" wieder auf |
|
||
|
||
**Der Streifen ist eine durchgehende Fläche.** Jede Slide trägt das gesamte
|
||
Blatt, ein Element lässt sich also über den ganzen Post schieben und nicht nur
|
||
in die Nachbar-Slide.
|
||
|
||
### 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
|
||
├── eigene/ selbst importierte Bilder
|
||
└── fonts/ Manrope 400–800, lokal
|
||
vendor/ html-to-image, JSZip
|
||
state/ Projektstände, gehören ins Repo
|
||
serve.py Statischer Server + /save, /state, /upload, /bilder
|
||
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.
|