1
Raster festlegen
Im linken Bereich zuerst Felder horizontal und Felder vertikal setzen und danach Raster anwenden klicken. Werte ausserhalb des erlaubten Bereichs werden intern auf 1 bis 50 begrenzt.
Schnellstart in 5 Schritten
2
Vorlage auswaehlen
Im Treeview links die passende Gruppe oeffnen. Jede Vorlage zeigt mindestens Bestellnummer und Vorschaubild. Der Eintrag kann direkt auf ein Feld gezogen werden.
3
Feld belegen
Die Vorlage mit Drag-and-drop auf ein Rasterfeld ablegen. Das Feld speichert dabei Name, Bildquelle, LEDs, Taster, Freitextanzahl, Preis und technische IDs.
4
Details anpassen
Bei SVG-Vorlagen oeffnet ein Klick auf das Feld den Layer-Dialog. Dort lassen sich Layer ein- und ausschalten, Varianten waehlen und Freitexte fuellen. Mit dem Drehknopf wird das Feld um 180 Grad gedreht.
5
Speichern und PDF
Die aktuelle Belegung kann als spurplan-ansicht.json gespeichert, spaeter wieder geladen und bei Bedarf per Button als PDF bestellt werden.
Bedienung im Editor
Rasteraenderung
Wenn das Raster verkleinert wird, prueft der Editor belegte Felder ausserhalb des neuen Bereichs. Vor dem Anwenden erscheint eine Rueckfrage, weil diese Inhalte sonst verworfen werden.
SVG-Layer
Bei SVG-Dateien werden Gruppen aus dem SVG gelesen. Einzelne Layer koennen per Checkbox geschaltet werden, Varianten innerhalb einer Gruppe per Radiobutton. Die Sichtbarkeit fliesst in die Statussummen ein.
Freitext
Pro Feld sind bis zu drei Freitexte vorgesehen. Diese werden aus freitextAnzahl oder aus vorhandenen Freitext-Layern abgeleitet und direkt im Feld gespeichert.
Rotation
PNG und SVG koennen pro Feld um 180 Grad gedreht werden. Die Rotation wird zusammen mit der Anzeige gespeichert und beim Laden wiederhergestellt.
Status und Summen
Oben zeigt der Editor eine Preisvorschau. Mit Klick auf die Preisvorschau werden die Summen fuer blaue, schwarze und rote Taster sowie aktive LEDs eingeblendet.
Bildquellen
Vorlagen akzeptieren externe URLs, eingebettete Data-URIs sowie lokale relative Pfade. SVG-Dateien werden interaktiv behandelt, PNG-Dateien als normales Bild gerendert.
Wichtig
Ein Klick auf ein SVG-Feld oeffnet den Layer-Dialog. Der Drehknopf selbst ist davon ausgenommen, damit Rotation und Layerwahl sich nicht in die Quere kommen.
Speichern und Laden
Mit Speichern exportiert der Editor die aktuelle Rastergroesse und alle Feldinhalte als JSON-Datei. Standardname ist spurplan-ansicht.json. Mit Laden werden sowohl aktuelle Dateien mit formatVersion als auch aeltere Legacy-Dateien akzeptiert.
| Bereich | Wird gespeichert | Hinweis |
|---|---|---|
| Raster | Zeilen und Spalten | Beim Laden wird das Raster zuerst neu aufgebaut. |
| Feldposition | Slot, Zeile und Spalte | Zuordnung erfolgt bevorzugt ueber Spalte und Zeile. |
| Vorlage | Bild, Name, Bestellnummer, Produkt-ID, LEDs, Taster, Preis | Leere Felder bleiben erlaubt. |
| Interaktion | Freitexte, Layer-Zustaende, Rotation | Nur so lassen sich SVG-Varianten spaeter exakt wiederherstellen. |
Dateien und wichtige Felder
vorlagen.json
Die Vorlagenliste fuer den Treeview. Wichtige Felder sind group, name, bestellnummer, png, productId oder product_id, leds, taster, freitextAnzahl und optional preis.
PNG oder SVG
Beide Formate sind zulaessig. SVG lohnt sich, wenn unterschiedliche Layer oder Beschriftungen pro Feld geschaltet werden sollen. PNG eignet sich fuer statische Vorlagen ohne Variantenlogik.
spurplan-ansicht.json
Die exportierte Anzeige-Datei. Sie speichert den Zustand eines fertigen Entwurfs und ist das richtige Austauschformat fuer einen bereits zusammengestellten Spurplan.
Fallback im Editor
Wenn vorlagen.json nicht geladen werden kann, nutzt der Editor interne Demo-Eintraege. Das ist nur ein Notbehelf und ersetzt keine echte Vorlagendatei.
Preise und Vorschau
Die Preisanzeige ist als Vorschau zu verstehen. Sie wird dynamisch aus den belegten Feldern und sichtbaren Layern berechnet und dient zur schnellen Orientierung waehrend der Bearbeitung.
Preisvorschau oben
In der oberen Leiste steht die aktuelle Preisvorschau. Der Wert wird bei jeder Aenderung am Raster automatisch aktualisiert.
Details per Klick
Mit Klick auf die Preisvorschau werden die Detailzaehler eingeblendet. So bleibt die Kopfzeile uebersichtlich und die Summen sind bei Bedarf sofort sichtbar.
Einfluss der Layer
Bei SVG-Vorlagen beeinflussen sichtbare Layer die Summen fuer Taster und LEDs. Diese Werte sind die Grundlage der Detailanzeige.
Preis als Orientierung
Die Vorschau ist eine Orientierung im Editor. Fuer verbindliche Preise sollten immer die endgueltigen Produktdaten und Konditionen geprueft werden.
Praxis-Tipp
Vor groesseren Aenderungen erst speichern, dann Layer variieren. So lassen sich Preisvorschau und Summen nachvollziehbar vergleichen.
Hinweise fuer den Betrieb
Relative Pfade
Lokale Bildpfade sollten konsistent zum Projekt aufgebaut sein. Das vereinfacht den Betrieb auf demselben Webspace wie der Editor.
Saubere SVGs
SVG-Layer sollten sauber benannt sein. Vor allem Inkscape-Labels helfen, damit der Layer-Dialog verstaendliche Bezeichnungen anzeigt.
Rasterwechsel bewusst nutzen
Vor grossen Rasteraenderungen empfiehlt sich ein Export der aktuellen Anzeige. Dann kann ein Entwurf spaeter verlustfrei wieder geladen werden.
Browserumgebung
Fetch-Aufrufe fuer JSON und SVG funktionieren am zuverlaessigsten ueber einen Webserver. Reine Datei-URLs koennen Browser-Sicherheitsgrenzen ausloesen.
Hinweis: Die Hilfeseite beschreibt den Stand des aktuellen Editors. Wenn Buttons, JSON-Felder oder Ablaeufe spaeter erweitert werden, sollte diese Seite mitgezogen werden.