2D-Szenen

2D-Canvas – Live-Overlays & Szenen

Die Logik hat den Node-Editor. Der Raum hat den 3D-Editor. Die flache, grafische Ebene einer Maschine – das Fadenkreuz auf einem Kamerastream, der antippbare Grundriss, die Beschriftung an einem bewegten Teil – hat das Canvas.

In einem Satz

Das 2D-Canvas ist ein hierarchischer Szenengraph aus Bildern, Live-Kameraebenen, Vektorformen und Text, in dem jede Eigenschaft – Position, Größe, Drehung, Farbe, Text, Sichtbarkeit – an einen Live-Wert oder eine Variable gebunden werden kann. Szenen werden im Browser als scharfe Vektorgrafik über Live-Kamerastreams gelegt, sodass Zoomen das Overlay nie unscharf macht und die Videolatenz nicht steigt. Szenen lassen sich in deine gebrandete HMI einbetten und auf jedes Display der Flotte schicken; erstellt werden sie in einem vollwertigen Editor mit direkter Manipulation, Ausrichtungswerkzeugen, einer Asset-Bibliothek und Undo pro Szene.

Fähigkeiten

Alles ist bindbar

Jede Eigenschaft jedes Elements – Position, Größe, Drehung, Farbe, Text, Sichtbarkeit – kann von einem Live-Port oder einer Variable gesteuert werden. Ein Overlay ist kein statisches Bild mit aufgestempeltem Wert.

Drei Koordinatenräume

Zeichne im Canvas-Raum, im Bildpixel-Raum oder in echten Maschinenmillimetern. Ein Fadenkreuz, das an ein Vision-Ergebnis in Millimetern gebunden ist, landet automatisch auf dem richtigen Pixel des Kamerastreams, bei jedem Zoom.

Ein echter Editor

Randlose Live-Bühne mit Pan und Zoom, Drag-and-drop im Baum, eine Eigenschaftsleiste mit Binding-Chips, Rahmenauswahl, ankerbewusstes Skalieren und Drehen, Ausrichten und Verteilen, pixelweises Verschieben, 9-Punkt-Ursprünge, Gruppierung, Vorlagen und Undo/Redo pro Szene.

Interaktiv

Tipp- und Drückaktionen auf jedem Element – umschalten, tasten, einen Wert setzen, navigieren – über denselben authentifizierten Schreibpfad wie der Rest der HMI, dazu Pan, Pinch-Zoom und Zurücksetzen per Doppeltipp für den Betrachter.

Importiere dein eigenes SVG

Bring einen Grundriss oder ein Platinenlayout mit und binde seine Unterelemente direkt: Das Element mit der ID #lamp wird zu einer antippbaren, zustandsgefärbten Leuchte. Hochgeladenes SVG wird serverseitig bereinigt.

Ein Element pro Dateneintrag

Ein Repeater instanziiert eine Vorlage einmal pro Eintrag der Live-Daten, über Schlüssel zugeordnet, sodass Elemente einblenden, an neue Positionen gleiten und ausblenden, wenn sich die Daten ändern – eine Spektrumanzeige, eine Detektionsliste, ein Zeitplan.

HUDs über Live-3D

Bette einen Live-3D-Viewport als Ebene ein und hefte 2D-Beschriftungen und Hinweislinien an Objekte darin. Die Beschriftungen folgen dem gerenderten 3D-Bild exakt, ohne zusätzlichen Netzwerkverkehr.

Geht überallhin

Eine Szene ist eine View-Quelle: Bette sie in deine /device-HMI ein oder schick sie aus der Logik auf jeden Bildschirm der Flotte.

Durchgespielte Beispiele

Ein Kamera-Overlay mit Aussagekraft

Ein Bediener muss sehen, was das Vision-System gefunden hat, nicht nur das Rohbild.

So geht's

Eine Szene legt ein Fadenkreuz, einen Rahmen für die Region of Interest und eine Ergebnisanzeige über den Live-Kamerastream. Das Fadenkreuz ist an die lokalisierte Position in Millimetern gebunden und sitzt damit exakt auf dem Merkmal; der Rahmen folgt der Live-Region-of-Interest; die Anzeige aktualisiert sich mit der Konfidenz. Vektorscharf bei jedem Zoom, ohne zusätzliche Videolatenz.

Ein Grundriss zum Anfassen

Ein Wandpanel soll das Haus zeigen und per Tipp auf einen Raum dessen Licht schalten lassen.

So geht's

Importiere den Grundriss als SVG. Binde die Farbe jedes Lampenelements an den Zustand seiner Leuchte und seine Tippaktion an den Schreibzugriff. Der Plan ist jetzt eine interaktive Live-HMI – und dieselbe Szene lässt sich auf ein zweites Panel anderswo im Haus schicken.

Warum Melanite

Overlays werden meist entweder auf dem Server in den Videostream eingebrannt – unscharf, verzögert und für alle gleich – oder pro Projekt von Hand programmiert. Melanite macht daraus eine erstellte Szene, die im Browser zusammengesetzt wird: vektorscharf bei jedem Zoom, an Live-Daten gebunden, interaktiv und wiederverwendbar über die HMI, den Kiosk und jeden Bildschirm der Flotte.

FAQ

Wird das Overlay ins Video eingebrannt?

Nein. Kamerastream und Grafik werden im Browser zusammengesetzt, sodass Overlays bei jedem Zoom vektorscharf bleiben, dem Video keine Latenz hinzufügen und interaktiv sein können.

Kann ich meine eigenen Grafiken verwenden?

Ja. Importiere SVG – einen Grundriss, einen Schaltplan, ein Platinenlayout – und binde seine einzelnen Elemente an Live-Werte. Uploads werden serverseitig bereinigt, bevor sie ausgeliefert werden.

Was ist der Unterschied zum 3D-Editor?

Die beiden ergänzen sich. Der 3D-Editor ist für Dinge mit einer Position im Raum; das Canvas ist für die flache Grafikebene – Overlays, Pläne, Diagramme und HUDs. Eine Canvas-Szene kann eine Live-3D-Ansicht als Ebene einbetten und 2D-Beschriftungen an Objekte darin heften.

Kostenlos, voller Funktionsumfang

Alle Funktionen, kostenlos für die private Nutzung.

Ein Binary läuft in jeder Stufe — die Lizenz schaltet nur Berechtigungen, nie den Funktionsumfang.

Kostenlos herunterladen Alle Funktionen