Time2Grid - Dokumentation

📖 Überblick

Time2Grid ist ein interaktives HTML5-Tool zur Erstellung und Bearbeitung von grafischen Gittern verschiedener geometrischer Formen. Die Anwendung ermöglicht künstlerische und technische Rastereffekte mit umfangreichen Bearbeitungs- und Export-Optionen.

🖥️ Verfügbare Versionen

🔧 Grid-Typen

Time2Grid unterstützt verschiedene geometrische Grid-Strukturen:

🔷 Rechteck-Grid

Einfaches rechteckiges Raster mit konfigurierbaren Zeilen und Spalten. Unterstützt abgerundete Ecken bis hin zu Kreisen.

💡 Besonderheit: Bei Liniendicke = 0 werden die Grid-Linien vollständig unsichtbar. Bei anderen Grid-Typen bleiben feine Linien erkennbar.

🎯 Kreative Gestaltung: Mit dem Eckenradius können die rechteckigen Grid-Elemente abgerundet werden. Bei einem hohen Radius-Wert (z.B. 50-100px) entstehen kleine Kreise anstelle von Rechtecken - perfekt für Punktraster und organische Designs!

Oben: Standard-Rechteck-Grid | Unten: Mit hohem Eckenradius entstehen Kreise

◆ Quadrat-basiert

Gleichmäßiges Raster aus Quadraten für symmetrische Muster.

⬡ Hexagon-basiert

Sechseckige Zellen mit anpassbarer Verlaufsrichtung (H/V/Diagonal).

🎲 Kubus-Grid

Gedrehte Hexagon-Struktur für 3D-Kubus-Effekte und isometrische Designs.

🔷 Pentagon-basiert

Fünfeckiges Rastermuster mit komplexer Geometrie und charakteristischem Rhythmus.

🎯 Kreis-Grid (Radial)

Konzentrische Ringe mit 3 Farbverlauf-Modi: radial, linear (2-Punkt) und ring-basiert.

🌀 Archimedische Spirale

Kontinuierliche Spiral-Struktur für organische Muster und dynamische Verläufe.

📏 Farbige Linien

Horizontale/vertikale Linien mit variabler Stärke, 8 Verteilungsmodi und 3 Farbmodi.

• Farbige Punkte

Punktbasiertes Raster mit 7 Größen-Verteilungsmodi und Gradient-Unterstützung.

🔤 Alphabet-Raster

Text-basiertes Gitter mit orthochromatischer Darstellung und erweiterbarem Zeichensatz.

🖼️ Neue Features in Version 3.01

🎨 Farbsystem

Farbpaletten

Time2Grid bietet verschiedene vordefinierte Farbpaletten:

• RGB-Skala: Vollständiges RGB-Spektrum mit sanften Übergängen
• Halbtöne: Alle Permutationen von RGB-Werten (255, 128, 0) in Regenbogen-Reihenfolge
• Graustufen: Von Schwarz zu Weiß
• Farbverläufe: Verschiedene Zwei-Farben-Übergänge (z.B. Blau→Rot, Cyan→Gelb)
• Monochrome Skalen: Von Weiß zu einer Grundfarbe (Blues, Greens, Reds, Yellows)

Individuelle Farbeingabe

Zusätzlich zu den Paletten können Farben eingegeben werden über:

• RGB-Eingabefeld (z.B. "255,0,0" für Rot)
• Farbwähler für Hintergrund und Linien
• Direkte Hex-Eingabe

✨ Hauptfunktionen

🖼️ Bild-Overlay & Farbextraktion

Laden Sie Bilder als transparente Overlays über Ihr Grid und extrahieren Sie automatisch die Farben in die Grid-Zellen.

Schritt 1: "Bild laden" klicken und Bilddatei auswählen
Schritt 2: Bild als transparentes Overlay über Grid positionieren
Schritt 3: "Farben extrahieren" klicken für automatische Übertragung
Schritt 4: Transparenz und Position nach Bedarf anpassen

💡 Anwendung: Perfekt für die Nachbildung von Kunstwerken, Analyse bestehender Designs oder als kreativer Ausgangspunkt für eigene Werke.

🎨 Einzelne Zellen färben

Klicken Sie auf eine Farbe in der Palette und dann auf Grid-Elemente, um sie einzeln zu färben.

Schritt 1: Farbe aus Palette wählen
Schritt 2: Auf gewünschte Grid-Zellen klicken

📐 Bereich auswählen

Wählen Sie rechteckige Bereiche aus, um mehrere Zellen gleichzeitig zu bearbeiten.

Schritt 1: "Bereich auswählen" Button aktivieren
Schritt 2: Erste Ecke anklicken
Schritt 3: Zweite Ecke anklicken für Bereichsdefinition

🎲 Zufällige Füllung

Füllen Sie das gesamte Grid oder einen ausgewählten Bereich mit zufälligen Farben.

Intelligente Palette: Wenn Farbpaletten-Checkboxen aktiviert sind, werden nur Farben aus den ausgewählten Paletten verwendet.
Standard: Ohne Auswahl werden zufällige RGB-Farben generiert.

Oben: Rechteck-Grid | Unten: Kreis-Grid mit zufälligen Palettenfarben

🌈 Farbverläufe

Erstellen Sie sanfte Übergänge zwischen zwei Farben - linear oder radial (bei Kreis-Grid).

Linear: Präziser Verlauf zwischen zwei Punkten
Radial: Verlauf von innen nach außen (nur Kreis-Grid)

🔗 Verschmelzen benachbarter Felder

Time2Grid bietet zwei verschiedene Verschmelzungs-Modi für maximale kreative Flexibilität beim Zusammenfassen von Grid-Feldern zu größeren Flächen.

🎯 Intelligentes Verschmelzen (Gleiche Farben)

Schritt 1: Bereich mit Feldern gleicher Farbe auswählen
Schritt 2: "Verschmelzen (Gleiche Farbe)"-Button klicken
Schritt 3: Nur benachbarte Felder mit identischer Farbe werden verschmolzen

🎲 Zufälliges Verschmelzen

Schritt 1: Beliebigen Bereich auswählen
Schritt 2: "Zufälliges Verschmelzen"-Button klicken
Schritt 3: Felder werden unabhängig von ihrer Farbe zufällig zu Gruppen verschmolzen

💡 Anwendung: Das intelligente Verschmelzen eignet sich für saubere, strukturierte Designs, während das zufällige Verschmelzen interessante, organische Effekte erzeugt.

🌈 Farbverläufe im Detail

Für alle Grid-Typen (außer Kreis-Grid)

Spezial: Kreis-Grid Farbverläufe

Das Kreis-Grid bietet zwei besondere Verlaufsarten:

🎯 Radialer Verlauf

Der Farbverlauf geht ringförmig von innen nach außen.

1. "Radial" Radiobutton wählen
2. Start- und Endfarbe festlegen
3. Bereich auswählen
4. "Anwenden" klicken

📏 Linearer 2-Punkt-Verlauf

Der Verlauf wird durch zwei ausgewählte Punkte definiert und füllt das gesamte Grid.

1. "Linear (2-Punkt)" Radiobutton wählen
2. Start- und Endfarbe festlegen
3. Ersten Punkt (Sektor) anklicken
4. Zweiten Punkt anklicken
5. "Anwenden" klicken

💾 Speichern und Laden

Grid-Daten (JSON)

Speichern Sie Ihre Arbeit als JSON-Datei, um sie später weiterzubearbeiten:

• 💾 Grid speichern: Erstellt eine JSON-Datei mit allen Zelldaten
• 📁 Grid laden: Lädt eine zuvor gespeicherte JSON-Datei

Bild-Export

Exportieren Sie Ihre Kreationen als Bilddateien:

• 🖼️ PNG-Export: Verlustfreie Bildqualität, unterstützt Transparenz
• 📷 JPG-Export: Komprimierte Bildgröße, ideal für Fotos
• 🧩 ICO-Export: Mehrgrößen-Icons (16-256) mit Transparenz
• 📄 HTML-Export: Speichert das Grid als vollständige HTML-Datei

Projekt-Datei

Das Projektformat (JSON) speichert alle Einstellungen und Ebenen für eine vollständige Rekonstruktion.

🔧 Erweiterte Funktionen

⚙️ Anpassungsoptionen

Visuelle Einstellungen

• Hintergrundfarbe (Hgrd): Farbe des SVG-Hintergrunds
• Linienfarbe: Farbe der Grid-Linien
• Liniendicke: Breite der Grid-Linien (0 - 10px)
  Hinweis: Bei Rechteck-Grid werden Linien bei Dicke = 0 vollständig unsichtbar, bei anderen Grid-Typen bleiben sie minimal sichtbar.
• Radius: Abrundung der Ecken (für Rechteck-Grid: 0-100px)
  💡 Kreativ-Tipp: Bei hohen Werten (50-100px) entstehen aus Rechtecken kleine Kreise!
• Grid-Versatz: Horizontale/vertikale Verschiebung für dynamische Muster
• Seitenverhältnis: Rechteck-Grid mit flexiblem Verhältnis (0.2 - 5.0)
• ✓ Hilfslinien: Ein/Ausblenden der roten Mittellinien

Grid-Dimensionen

• Zeilen: Anzahl der horizontalen Reihen (1-172)
• Spalten: Anzahl der vertikalen Spalten (1-172)
• Bildname: Name für exportierte Dateien

💡 Tipps und Tricks

🖥️ Windows Desktop-App im Detail

🚀 Installation und Start

✨ Vorteile der Desktop-App

• ✅ Native Performance: Schnellere Bedienung ohne Browser-Overhead
• ✅ Eigenständig: Keine Internet-Verbindung erforderlich
• ✅ Portabel: Läuft von USB-Stick oder beliebigem Ordner
• ✅ Sauber: Keine Installation in Registry oder Programm-Ordner
• ✅ Kompatibel: Funktioniert auf Windows 7, 8, 10, und 11
• ✅ Vollständig: Alle professionellen Features enthalten

🔧 Technische Details

💻 Desktop-Version

• Framework: Native WebView-Technologie
• GUI-Backend: Native Windows WebView2
• Packaging: Kompakte Einzeldatei-Ausführung
• Größe: 14.8 MB (inkl. Runtime)
• Kompatibilität: Windows 7+ (x64)

🎨 Grafik-Engine

• Rendering: SVG + Canvas Hybrid
• Grid-Mathematik: Präzise Koordinatenberechnungen
• Farb-System: RGB mit automatischer Farbinterpolation
• Layers: Map-basiert, Auto-Flatten beim Export
• Export: 4x PNG-Qualität, Canvas-basierte PNG/JPG/ICO
• Speicherung: Base64 für interne Projekt-Daten

🆕 Changelog & Updates

Version 3.01 (Aktuell) - Februar 2026

• 🔧 Grid-Versatz und Persistenz für Zeilen/Spalten
• 🧩 ICO-Export und verbesserter Refresh-Workflow
• 🎯 Ausbau der Auswahl- und Ebenenfunktionen

Version 2.04

• 🧱 Layer-System und Farbmapping
• 💡 Helligkeit → Größenanpassung

Version 2.0

• 🔄 Layer-Redesign
• 🖼️ Bild-Overlay Integration

Version 1.0

• 🚀 Initial Release (8 Grid-Typen)

🚀 Schnelleinstieg

1. Öffnen: Time2Grid_Rel_3_01.html im Browser starten
2. Grid wählen: Grid-Typ und Dimensionen einstellen (Default 12x12)
3. Gestalten: Zellen färben, Bereiche auswählen, Verläufe anwenden
4. Speichern: Export als PNG/JPG/ICO/HTML oder Projekt-JSON

🚀 Workflow-Beispiel

Typischer Arbeitsablauf für ein neues Design:

1. Grid-Typ wählen: Entscheiden Sie sich für die gewünschte geometrische Struktur
2. Dimensionen festlegen: Stellen Sie Zeilen und Spalten nach Ihren Vorstellungen ein
3. Grundstruktur erstellen: Nutzen Sie Bereichsauswahl und Füllfunktionen für die Basis
4. Details hinzufügen: Verfeinern Sie mit Einzelzell-Bearbeitung
5. Farbverläufe anwenden: Fügen Sie sanfte Übergänge für mehr Tiefe hinzu
6. Speichern: Sichern Sie sowohl als JSON (für spätere Bearbeitung) als auch als Bild

🎯 Anwendungsbereiche

Time2Grid eignet sich perfekt für:

🖼️ Beispiele aus Time2Grid

Hier sehen Sie eine Auswahl von Beispielbildern, die mit Time2Grid erstellt wurden: