Time2Grid - Dokumentation

📖 Überblick

Time2Grid ist ein interaktives Tool zur Erstellung und Bearbeitung von geometrischen Gittern. Das Programm ermöglicht es, verschiedene Grid-Typen zu erstellen, mit Farben zu füllen, Farbverläufe anzuwenden und die Ergebnisse in verschiedenen Formaten zu speichern.

🚀 NEU: Windows Desktop-Anwendung verfügbar!
Time2Grid gibt es jetzt als eigenständige Windows .exe-Datei - keine Installation oder Browser erforderlich!
✨ BEHOBEN: PNG/JPG-Speicherung funktioniert jetzt vollständig in der Desktop-App!

🎯 NEU: Bild-Overlay & Farbextraktion!
Laden Sie Bilder als transparente Overlays über Ihr Grid und extrahieren Sie automatisch die Farben in die darunter liegenden Grid-Zellen. Perfekt für die Nachbildung von Kunstwerken oder als kreative Ausgangsbasis!

🖥️ Verfügbare Versionen

💻 Windows Desktop-App

Time2Grid_Rel1_06.exe - Eigenständige Windows-Anwendung:

✅ Keine Python-Installation erforderlich
✅ Keine Browser-Abhängigkeit
✅ Native Windows-Benutzeroberfläche
✅ Nur ~16 MB - einfach zu verteilen
✅ Funktioniert auf jedem Windows-Computer
✅ NEU: Native PNG/JPG/HTML-Speicherung

Time2Grid Hauptoberfläche - Übersicht aller Bedienelemente

🔧 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!

Rechteck-Grid mit abgerundeten Ecken zu Kreisen

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

◆ Quadrat-basiert

Dreiecksmuster basierend auf quadratischen Zellen, perfekt für geometrische Designs.

⬡ Hexagon-basiert

Sechseckige Struktur mit dreieckigen Unterteilungen für komplexe Muster.

🎲 Kubus-Grid

NEU: Speziell optimiert für würfelartige 3D-Strukturen und isometrische Designs. Perfekt für Architektur-Visualisierungen und räumliche Kunstwerke.

🎯 Kreis-Grid (Radial)

Ringförmige Struktur mit Sektoren - ideal für radiale Designs und Mandalas.

🖼️ Neue Features in Version 1.06

🎯 Bild-Overlay & Farbextraktion

Eine der wichtigsten Neuerungen ist die Möglichkeit, Bilder als Overlay über das Grid zu laden und automatisch die Farben in das darunter liegende Grid zu extrahieren.

So funktioniert's:

Bild laden: Wählen Sie ein Bild über "Bild laden" aus
Overlay-Modus: Das Bild wird transparent über dem Grid angezeigt
Farbextraktion: Klicken Sie auf "Farben extrahieren", um die Bildfarben automatisch in die entsprechenden Grid-Zellen zu übertragen
Feinabstimmung: Passen Sie Transparenz und Position nach Bedarf an

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

⚙️ Erweiterte Grid-Konfiguration

Die Einstellungen wurden erheblich erweitert, um das initiale Aussehen des Grids bis ins Detail zu bestimmen.

Neue Konfigurationsoptionen:

Präzise Größenangaben: Exakte Pixel-Werte für Grid-Dimensionen
Erweiterte Farboptionen: Separate Einstellungen für Hintergrund, Rahmen und Füllung
Form-Parameter: Detaillierte Kontrolle über Eckenradius, Liniendicke und Grid-Abstände
Vorschau-Modus: Sofortige Darstellung aller Änderungen
Template-System: Speichern und Laden von Grid-Konfigurationen

🎯 Vorteil: Sie können jetzt exakt das Grid erstellen, das Sie sich vorstellen - von minimalistischen Rastern bis hin zu komplexen, farbigen Strukturen.

🔄 Verbesserte Workflow-Integration

Die neuen Features arbeiten nahtlos zusammen:

Bild → Grid → Export: Kompletter Workflow von der Bildanalyse bis zum fertigen Design
Konfiguration → Anpassung → Speichern: Wiederverwendbare Grid-Templates
Overlay → Extraktion → Weiterbearbeitung: Flexibler Umgang mit Bildvorlagen

🎨 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)

💡 Neu: Verwenden Sie die Checkboxen neben den Palettennamen, um Paletten für die Zufallsfarben-Funktion auszuwählen. Nur Farben aus aktivierten Paletten werden dann für zufällige Füllungen verwendet.

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.

Beispiel für Bild-Overlay und Farbextraktion

🎨 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

Beispiel für das Färben einzelner Zellen

📐 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

Weiteres Beispiel für Bereichsauswahl im Grid

🎲 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.

Beispiel für zufällige Füllung mit Palettenfarben

Beispiel für zufällige Füllung mit Palettenfarben im Kreisgrid

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)

Beispiel für lineare und radiale Farbverläufe

🔗 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)

1. Farbverlauf-Button 🎛️ klicken
2. Startfarbe aus Palette wählen
3. Endfarbe aus Palette wählen
4. Bereich auswählen (falls gewünscht)
5. "Anwenden" klicken

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

Hinweis: Die JSON-Dateien enthalten nur die essentiellen Zelldaten (Position, Form-ID, Farbe) und sind mit allen Grid-Typen kompatibel.

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
📄 HTML-Export: Speichert das Grid als vollständige HTML-Datei

🔧 Erweiterte Funktionen

🔍 Initiale Felder auswählen

Wählt automatisch alle Zellen aus, die noch die ursprüngliche Initialisierungsfarbe haben.

🔗 Gleiche Nachbarn verschmelzen

Fasst benachbarte Zellen mit derselben Farbe visuell zusammen (orangener Rahmen).

🗑️ Grid leeren

Führt ein vollständiges Grid-Refresh durch - zeichnet das gesamte Grid neu mit aktuellen Einstellungen.

🔄 Grid initialisieren

Setzt alle Zellen auf die aktuell ausgewählte Farbe.

⚙️ 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!
✓ 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

Einstellungsbereich mit allen Kontrollelementen

💡 Tipps und Tricks

Tipp 1: Nutzen Sie die Hilfslinien (rote Kreuzlinien) zur besseren Orientierung beim Erstellen symmetrischer Designs.

Tipp 2: Experimentieren Sie mit verschiedenen Grid-Typen für denselben Entwurf - jeder Typ bietet einzigartige Gestaltungsmöglichkeiten.

Tipp 3: Bei Kreis-Grids eignet sich der radiale Verlauf besonders für Mandala-artige Designs, während der lineare 2-Punkt-Verlauf für dynamische, richtungsbasierte Effekte sorgt.

Tipp 4: Speichern Sie regelmäßig als JSON, um verschiedene Versionen Ihres Designs zu behalten und bei Bedarf zurückkehren zu können.

Tipp 5: Die RGB-Eingabe unterstützt sowohl Komma- als auch Leerzeichen-getrennte Werte (z.B. "255,128,0" oder "255 128 0").

🆕 Tipp 6: Die Windows Desktop-App startet schnell und läuft stabil - ideal für längere Arbeitssitzungen!

🖥️ Windows Desktop-App im Detail

🚀 Installation und Start

Schritt 1: Time2Grid_Rel1_06.exe herunterladen (16 MB)
Schritt 2: Datei auf gewünschten Ordner kopieren
Schritt 3: Doppelklick auf Time2Grid.exe - das war's!

🛡️ Sicherheitshinweis: Windows Defender könnte beim ersten Start eine Warnung zeigen. Das ist normal bei selbst-kompilierten Programmen. Klicken Sie auf "Weitere Informationen" → "Trotzdem ausführen".

✨ 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 für skalierbare Vektorgrafiken
Grid-Mathematik: Präzise Koordinatenberechnungen
Farb-System: RGB mit automatischer Farbinterpolation
Export: Canvas-basierte PNG/JPG-Generierung

🆕 Changelog & Updates

Version 1.5 (Aktuell) - Juli 2025

🚀 NEU: Windows Desktop-Anwendung (Time2Grid.exe)
🔄 NEU: Hexagon-Grid um 90° gedreht
🔧 VERBESSERT: Stroke-Width = 0 entfernt jetzt alle Linien korrekt

🚀 Workflow-Beispiel

Typischer Arbeitsablauf für ein neues Design:

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

🎯 Anwendungsbereiche

Time2Grid eignet sich perfekt für:

🎨 Digitale Kunst

Geometrische Muster, abstrakte Designs, Pixel-Art

🧘 Mandala-Designs

Besonders mit dem Kreis-Grid und radialen Verläufen

🏗️ Prototyping

Schnelle Visualisierung von Layout-Ideen

📚 Bildung

Geometrie-Unterricht, Farblehre, Mustertheorie

🖼️ Beispiele aus Time2Grid

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