GithubHelp home page GithubHelp logo

jquery-ui-nodeeditor's Introduction

jquery-ui-nodeEditor

Node Editor widget for jQuery-UI.

A node editor looks like a block diagram or flow chart editor, except the blocks can actually do things. It is not simply a diagram for documentation purposes, but a working machine.

Each node represents a certain function. It has a set of inputs, a set of outputs, and usually some user editable properties. The user can drag the nodes they need into the diagram space, and connect them. Data that is input to the graph will be modified by the nodes, and eventually produce some output.

This widget will be usable by a developer who wants to deploy a node editor to web page or web app. The developer will define all the types and functions of nodes. The user can then build node graphs to do what they want.

Note:

This widget is in very early stages, and is not even close to being ready for use.

The plan:

This project seeks to create a node editor similar to what you see in Blender, or Quartz Composer, as a jQuery UI widget.

The widget should allow the developer to:

  • Handle arbitrary types of data passing through the nodes
  • Define several different node types, their inputs/outputs, and the actual functions that are applied to the data.
  • Define custom properties that affect the functionality of each node
  • Allow custom views for the node (for example an image processing node that shows the resulting image at that point in the graph).
  • Allow code to verify the input data and properties and present error messages to the end-user if the node is being used incorrectly.

The widget allows the end-user to:

  • Drag nodes around in a 2D space.
  • Connect nodes by dragging lines between I/O ports on nodes.
  • Preview results at various points in the graph (assuming this makes sense for that data).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.