This app implements a client side image processor using HTML canvas for the various filters and transformations.
How to use the demo?
You need one or more `Source` nodes to start. Either drag a source node onto the canvas, then use the uploader on it, or drag an image into it, or just drag an image onto the canvas
Drag on filters/transformations as you need, and drag edges to connect them. Only matching datatypes can be connected (you cannot, for instance, connect an `amount` from a number output to an `image` on a display node).
Filters and transformations can have values injected into them, which may be the result of some other computation or of the properties of some image, but you can also set values directly on filters and transformations. Where you have values set but also injected, the injected values take precedence.
Drag on a `Display` node to view the output of some chain.
You can download images directly from a `Display` node.
How does the demo work?
We'll be posting a detailed description of how this demo works at some stage soon.
Fully featured flowchart builder for you to use as a base for your own apps. Includes support for custom shapes, edge routing, node resizing, and SVG/PNG/JPG export. Angular, Vue 2, Vue 3, React and Svelte versions available.
Includes support for tables, views, multiple columns types, and column relationships. Easily extensible. Angular, Vue 2, Vue 3 and React versions available.
Use the Toolkit to build a chatbot flow, with actions, messages, input and choices. Angular, Vue 2, Vue 3, React and Svelte versions available.
The Toolkit makes it simple to build interactive org charts. This starter app uses the classic org chart layout and provides an inspector from which the user can navigate around. Angular, Vue 2, Vue 3 and React versions available.
Simple mindmap builder, highlighting several advanced features the Toolkit offers, such as custom layouts, parsers and exporters
Learn about how the Toolkit lets you work with groups nested to an arbitrary level, with full drag and drop support.
Leverage the Toolkit's underlying Directed Graph to visualize paths between elements.
This app is designed to give you a basic starter app from which you can build your own, without any of the bells and whistles included in our other starter apps.
Fully featured image processor using HTML canvas for you to use as a base for your own apps. Angular, Vue 2, Vue 3, React and Svelte versions available.
Use popups and the Toolkit's ability to dynamically render selections to provide neighbourhood contextual information for some selected element
Filter drag targets as your users start to drag new connections using the ActiveFiltering plugin.
An adaptable connector that consists of a series of segments, with the option to smooth to a set of Bezier splines
The classic organization chart layout, with support for horizontal/vertical axis and a number of different alignment options
A playground for testing the various layouts that the Toolkit offers - Hierarchy, Force Directed, Circular, Balloon and more.
Use the Toolkit's ability to render a dynamically collapsible and expandable hierarchy.