Der Canvas Editor
Im Canvas passiert die Magie in Armox. Es ist ein visueller, node-basierter Editor, in dem Sie verschiedene Komponenten verbinden, um leistungsstarke Content-Generierungs-Workflows zu erstellen.
Was ist der Canvas?
Der Canvas Editor mit einem vollständigen Workflow: mehrere verbundene Nodes, die eine Content-Generierungs-Pipeline bilden.
Der Canvas ist Armox’ visueller Workflow-Editor. Statt Code zu schreiben oder komplexe Interfaces zu bedienen, können Sie:
- 🎨 Nodes per Drag & Drop auf einen visuellen Canvas ziehen
- 🔗 Nodes mit einfachen Linien verbinden
- ▶️ Workflows mit einem Klick ausführen
- 👀 Ergebnisse direkt im Canvas sehen
Denken Sie an ein Flowchart, das wirklich läuft: Jede Box macht etwas, und die Linien zeigen, wie Daten zwischen den Nodes fließen.
Überblick: Canvas-Interface
Wenn Sie einen Canvas öffnen, sehen Sie:
| Bereich | Zweck |
|---|---|
| Main Canvas | Ihr Workspace mit Raster-Hintergrund |
| Left Sidebar | Node-Typen zum Hinzufügen |
| Top Toolbar | Canvas-Name, Save, Run All, Settings |
| Minimap | Überblick über den gesamten Canvas (unten rechts) |
| Right Panel | Node-Settings, wenn ein Node ausgewählt ist |
Navigation
Zoom
- Scroll wheel — Rein-/Rauszoomen
- Pinch gesture — Auf dem Trackpad
- Zoom controls — In der Toolbar
Panning
- Klicken und ziehen — Auf leerer Canvas-Fläche
- Mittlere Maustaste — Klicken und ziehen
- Spacebar + drag — Alternative Methode
Minimap
Die Minimap unten rechts zeigt Ihren gesamten Canvas:
- Klicken Sie in die Minimap, um dorthin zu springen
- Ziehen Sie das Viewport-Rechteck zur Navigation
- Toggle Minimap an/aus in den Settings
Einen neuen Canvas erstellen
- Klicken Sie auf Canvas in der Sidebar
- Klicken Sie auf + New Canvas
- Geben Sie einen Namen ein
- Fügen Sie Nodes hinzu!
Ein frischer, leerer Canvas — bereit für Ihren Workflow.
Ihr Canvas speichert automatisch, während Sie arbeiten.
Nodes hinzufügen
Aus der Sidebar
- Öffnen Sie die left sidebar (Menu-Icon, falls verborgen)
- Durchsuchen Sie Node-Kategorien:
- Text — Für Prompts und Textgenerierung
- Image — Für KI-Bildgenerierung
- Video — Für KI-Videogenerierung
- Audio — Für Musik und Sprache
- Upload — Für eigene Dateien
- Tools — Für Verarbeitung und Enhancement
- Ziehen Sie einen Node auf den Canvas oder klicken Sie zum Hinzufügen
Das Add Node Panel zeigt alle verfügbaren Node-Typen nach Kategorie.
Quick Add
- Rechtsklick auf den Canvas öffnet ein Kontextmenü
- Wählen Sie einen Node-Typ, um ihn an dieser Stelle hinzuzufügen
Nodes auswählen
Single Selection
- Klicken Sie auf einen Node, um ihn auszuwählen
- Ausgewählte Nodes haben einen Highlight-Border
- Das Right Panel zeigt die Node-Settings
Multiple Selection
- Shift + Click — Zur Auswahl hinzufügen
- Box ziehen — Mehrere Nodes gleichzeitig auswählen
- Ctrl/Cmd + A — Alle Nodes auswählen
Nodes verschieben
- Ausgewählte Nodes per Drag repositionieren
- Arrow keys — Ausgewählte Nodes „nudgen“
- Mehrfachauswahl bewegt sich gemeinsam
Nodes verbinden
Verbindungen erstellen
- Finden Sie den output handle (kleiner Kreis rechts am Node)
- Klicken und ziehen Sie vom Output-Handle
- Ziehen Sie auf einen input handle (links am Ziel-Node)
- Loslassen, um die Verbindung zu erstellen
Connection Colors
Verbindungen sind nach Datentyp farbcodiert:
| Farbe | Typ | Beispiel |
|---|---|---|
| Gelb | Text | Prompts, Beschreibungen |
| Blau | Bild | Fotos, Grafiken |
| Grün | Video | Clips, Animationen |
| Orange | Audio | Musik, Sprache |
Connections löschen
- Klicken Sie auf eine Verbindungslinie, um sie auszuwählen
- Drücken Sie Delete oder Backspace
- Oder Rechtsklick → „Delete“
Node-Settings
Wenn Sie einen Node auswählen, zeigt das Right Panel die Settings:
Häufige Settings
| Setting | Beschreibung |
|---|---|
| Model | Welches KI-Modell verwendet wird |
| Prompt | Text-Input (für AI-Nodes) |
| Aspect Ratio | Ausgabe-Dimensionen |
| Quality | Output-Qualität |
Collapsible Sections
Settings sind in einklappbaren Bereichen organisiert:
- Basic — Essenzielle Settings
- Advanced — Fine-Tuning-Optionen
- Output — Preview und Download
Workflows ausführen
Einen einzelnen Node ausführen
- Wählen Sie den Node aus, den Sie ausführen möchten
- Klicken Sie auf den ▶ Play-Button am Node
- Beobachten Sie den Fortschritt
- Sehen Sie das Ergebnis in der Node-Preview
Den gesamten Workflow ausführen
- Klicken Sie in der Toolbar auf Run All
- Nodes laufen abhängig von ihren Verbindungen in der richtigen Reihenfolge
- Jeder Node zeigt seinen Fortschritt
- Ergebnisse erscheinen, sobald Nodes fertig sind
Execution Order
Nodes laufen in Abhängigkeitsreihenfolge:
- Nodes ohne Inputs laufen zuerst
- Dann Nodes, die von diesen Outputs abhängen
- Weiter, bis alles abgeschlossen ist
Ergebnisse ansehen
In-Node Preview
Generierter Content erscheint direkt im Node:
- Images — Thumbnail-Preview
- Videos — Video-Player
- Audio — Audio-Player
- Text — Textanzeige
Full Preview
- Klicken Sie auf die Preview, um sie größer zu sehen
- Download zum Speichern auf dem Computer
- Content wird außerdem in Ihrer Gallery gespeichert
Speichern & Organisieren
Auto-Save
Canvases speichern automatisch. In der Toolbar sehen Sie einen „Saved“-Indikator.
Manual Save
- Ctrl/Cmd + S zum erzwungenen Speichern
- Oder Save in der Toolbar
Umbenennen
- Klicken Sie den Canvas-Namen in der Toolbar
- Neuen Namen tippen
- Enter drücken
Canvases organisieren
- Aussagekräftige Namen verwenden
- Naming Conventions nutzen (z.B. „Client - Project - Version“)
- Alte Canvases löschen, die Sie nicht mehr brauchen
Keyboard Shortcuts
| Aktion | Shortcut |
|---|---|
| Save | Ctrl/Cmd + S |
| Undo | Ctrl/Cmd + Z |
| Redo | Ctrl/Cmd + Shift + Z |
| Select All | Ctrl/Cmd + A |
| Delete Selected | Delete / Backspace |
| Zoom In | Ctrl/Cmd + Plus |
| Zoom Out | Ctrl/Cmd + Minus |
| Fit View | Ctrl/Cmd + 0 |
| Pan | Spacebar + Drag |
Canvas Best Practices
Layout-Tipps
- Links nach rechts — Inputs links, Outputs rechts
- Platz lassen — Nodes nicht zu eng setzen
- Related Nodes gruppieren — Ähnliche Funktionen nah beieinander
- Minimap nutzen — Für große Workflows
Workflow-Tipps
- Einfach starten — Mit 2–3 Nodes beginnen, dann erweitern
- Inkrementell testen — Nodes einzeln ausführen, um Schritte zu verifizieren
- Oft speichern — Auto-Save hilft, manuelles Speichern ist trotzdem gut
- Klar benennen — Deskriptive Canvas-Namen verwenden
Performance-Tipps
- Nicht überladen — Sehr große Canvases können langsamer werden
- Selektiv ausführen — Nur Nodes ausführen, die Sie brauchen
- Aufräumen — Unbenutzte Nodes/Connections löschen
Troubleshooting
Canvas lädt nicht
- Seite refreshen
- Internetverbindung prüfen
- Anderen Browser versuchen
Nodes lassen sich nicht verbinden
- Typ-Kompatibilität prüfen (Farben matchen oder Text zu „fast allem“)
- Sicherstellen, dass Sie von Output zu Input ziehen
- Verbindung löschen und neu erstellen
Ergebnisse erscheinen nicht
- Prüfen, ob der Node fertig ist (kein Spinner)
- Nach Error-Messages am Node schauen
- Credit-Balance prüfen
Nächste Schritte
Jetzt, da Sie den Canvas kennen, gehen Sie tiefer:
- Nodes verbinden — Komplexe Workflows bauen
- Workflows ausführen — Ausführen und Ergebnisse managen
- Apps erstellen — Workflows in wiederverwendbare Apps verwandeln