2D scenes
Logic has the node editor. Space has the 3D editor. The flat, graphic layer of a machine — the crosshair on a camera stream, the tappable floor plan, the callout pinned to a moving part — has the canvas.
Status Shipped
The 2D canvas is a hierarchical scene graph of images, live camera layers, vector shapes and text, where every property — position, size, rotation, colour, text, visibility — can be bound to a live value or variable. Scenes render as crisp vector graphics composited over live camera streams in the browser, so zooming never blurs the overlay and nothing is added to video latency. Scenes embed in your branded HMI, can be pushed to any display in the fleet, and are authored in a full editor with direct manipulation, alignment tools, an asset library and per-scene undo.
Any property of any item — position, size, rotation, colour, text, visibility — can be driven by a live port or variable. An overlay is not a static picture with a value stamped on it.
Draw in canvas space, image-pixel space, or real machine millimetres. A crosshair bound to a vision result in millimetres lands on the correct pixel of the camera stream automatically, at any zoom.
Live full-bleed stage with pan and zoom, tree drag-and-drop, a property drawer with binding chips, marquee select, anchor-aware resize and rotate, align and distribute, nudge, 9-point origins, grouping, templates and per-scene undo/redo.
Tap and press actions on any item — toggle, momentary, set a value, navigate — riding the same authenticated write path as the rest of the HMI, plus viewer pan, pinch-zoom and double-tap reset.
Bring a floor plan or a board layout and bind its sub-elements directly: the element with id #lamp becomes a tappable, state-coloured light. Uploaded SVG is sanitized server-side.
A repeater instances a template once per entry of live data, keyed so items fade in, glide to new positions and fade out as the data changes — a spectrum display, a detection list, a schedule.
Embed a live 3D viewport as a layer, then pin 2D labels and leader callouts to objects inside it. The labels track the rendered 3D frame exactly, with no extra network traffic.
A scene is a view source: embed it in your /device HMI, or push it to any screen in the fleet from the logic.
An operator needs to see what the vision system found, not just the raw picture.
How
A scene layers a crosshair, a region-of-interest box and a result readout over the live camera stream. The crosshair is bound to the located position in millimetres, so it sits exactly on the feature; the box follows the live region of interest; the readout updates with confidence. Vector-crisp at any zoom, with nothing added to video latency.
A wall panel should show the house and let someone tap a room to switch its light.
How
Import the floor plan as SVG. Bind each lamp element's colour to its light's state and its tap action to the write. The plan is now a live, interactive HMI — and the same scene can be pushed to a second panel elsewhere in the house.
Overlays are usually either burned into a video stream on the server — blurry, laggy, and one size for everyone — or hand-coded per project. Melanite makes them an authored scene composited in the browser: vector-crisp at any zoom, bound to live data, interactive, and reusable across the HMI, the kiosk and every screen in the fleet.
No. The camera stream and the graphics are composited in the browser, so overlays stay vector-crisp at any zoom, add no latency to the video, and can be interactive.
Yes. Import SVG — a floor plan, a schematic, a board layout — and bind its individual elements to live values. Uploads are sanitized server-side before they are served.
They complement each other. The 3D editor is for things with a position in space; the canvas is for the flat graphic layer — overlays, plans, diagrams and HUDs. A canvas scene can embed a live 3D view as a layer and pin 2D callouts to objects inside it.
One binary runs every tier — the licence only toggles entitlements, never the feature set.