meemoo / dataflow Goto Github PK
View Code? Open in Web Editor NEWArchive. Current work happening at https://github.com/the-grid/the-graph
License: GNU General Public License v2.0
Archive. Current work happening at https://github.com/the-grid/the-graph
License: GNU General Public License v2.0
Reference implementation for input/output communication with a webapp, embedded in an iframe, with a typed interface. --- _____ _ | |___ ___ _____ ___ ___ |_|___ | | | | -_| -_| | . | . |_ | |_ -| |_|_|_|___|___|_|_|_|___|___|_|_| |___| http://meemoo.org/ |___| Use it something like this: <script type="text/javascript" src="http://meemoo.org/meemoo/v1/meemoo-min.js"></script> <script type="text/javascript"> Meemoo .setInfo({ title: "example", author: "forresto", description: "example to show how to turn html into a Meemoo module" }) .addInputs({ square: { action: function (n) { Meemoo.send("squared", n*n); }, type: "number" }, reverse: { action: function (s) { var reversed = s.split("").reverse().join(""); Meemoo.send("reversed", reversed); }, type: "string" } }) .addOutputs({ squared: { type: "number" }, reversed: { type: "string" } }); </script>
for scrolling awesome
cards have weight to sort when multiple are shown
backbone model / view
In the NoFlo UI it will be possible for users to write new components. It would be important to have the nodes appear in the library when they're registered to the nodes
property of the dataflow instance
I have been working on the Meemoo graph editor for a year or so, and I'm pretty happy with it. I have been thinking that it would benefit my project if I abstracted out all of the graph editing code from the Meemoo-specific code. Then I was thinking that all of the dataflow js projects could potentially benefit from working on a common editor.
Things that I would keep:
Things to add:
Questions:
source.connect(destination)
is called from the GUI.
What do you think? Would this benefit your JS dataflow projects? Would you contribute to a common kickass graph editor?
@forresto - https://github.com/meemoo/iframework
@sebpiq - https://github.com/sebpiq/WebPd
@oampo - https://github.com/oampo/Audiolet
@brianchirls - https://github.com/brianchirls/Seriously.js
@dashersw - https://github.com/dashersw/pedalboard.js
@cwilso - https://github.com/cwilso/WebAudio
@bergie - https://github.com/bergie/noflo
@idflood - https://github.com/idflood/ThreeNodes.js
@daeken - https://github.com/daeken/Qtzweb
(Feel free to tag other related projects to this conversation.)
Port hole color.
Named routes.
Manually change edge color.
save zoom level, open cards, etc
google maps zooms on scroll, but i'll start with panning on scroll
also, preventDefault()
chrome's annoying history nav
We need a persistent search card on the graph. Each dataflow module should be able to be a search provider, but initially the results should come from:
and โ-A, X, C, V key bindings
When an edge is selected, we should show an inspector for it (this probably requires #27).
The card should show live the events passing through the port. At least connect, disconnect, begingroup, endgroup, and actual data payloads (normalized via toJSON
when needed).
The card should also allow filtering the data shown by a text search.
The dataflow UI should validate the graph it is handling for consistency. At least:
It might also be nice to show some sort of warning on unconnected nodes.
It might be useful for accessibility purposes (and maybe for the people living on keyboard) to be able to make quick changes to the graph via a command line.
This line could accept graph edits in the FBP syntax, allowing you to connect two nodes in the graph either by dragging the connection, or typing on the command line:
SomeNode OUT -> IN OtherNode
https://github.com/noflo/fbp can provide the necessary parser for this.
Things to design:
I'm using dataflow in http://funky.meteor.com/ and I had to change some things to make it work inside Meteor. I'm happy to adapt these changes and feed them back upstream so that dataflow will keep working for me (and others) inside Meteor.
see also guaka/funky-meteor#3
The graph should get simplified when zoomed out. Depending on level, here are some things we could be hiding/showing
Suggestions?
https://github.com/meemoo/dataflow/blob/master/grunt.js#L6
Shouldn't there be a "package.json" instead ?
API for cards...
Cards should be components?
At least in many NoFlo components there are ports that the component really has to have connected (or provided with an IIP), and there are ports that are entirely optional. It might be useful to visualize this somehow. And maybe warn on unconnected required ports with #49
Hi,
I am thinking of building a web app that would have a data flow component and I bumped into your library. I have to say I am quite impressed by the demos on your website.
So if I understand correctly, dataflow is a rewrite of your previous project (iframewor).
My question is : Is it already in a usable state (particularly by a third party) ? As the only think I can see now is a relatively small test page. If not, what still needs to be done ?
Keep up the good work,
GMouron
make macro/subgraph, define its ins/outs
if new nodes are loaded, update library.
panels will eventually be context-aware cards
It would be nice to be able to copy the JSON source of a graph effortlessly. Maybe something like Clippy could help here?
There is currently a regression in dataflow that causes newly inserted nodes to not be movable.
In the demo, I'm hooking into backbone events like:
Dataflow.graph.on("change", function(){
$("#code").val( JSON.stringify(Dataflow.graph.toJSON(), null, " ") );
});
Seem reasonable?
How to define?
@bergie had a good idea of doing color by route, like subway maps: http://bergie.iki.fi/blog/inspiration-for-fbp-ui/ ... a zoomed-out routing view like this would be great as well.
Currently DataFlow initializes itself and places itself to the DOM immediately when it is loaded, which prevents it from being used as a library in other applications.
Since I'm currently trying to integrate the tool into NoFlo UI, this is a big issue. I will look at fixing it and sending pull requests.
http://bergie.iki.fi/actionbar/ could be considered an example of a "Backbone widget".
Graph-editing functionality could be added as plugins, with UI loaded into panels. This will keep the core app clean.
Make a basic panel system that can be extended as needed
Suggestions?
meta + click to select multiple edges, then change the route of all, refs #41
zoom-tiny
zoom-small
zoom-normal
zoom-big
some ports should only accept one wire
Need to replace:
with touch-friendlier versions
Compatible ports should highlight when a connection is being dragged into them
Dataflow.module()
isn't offering much, and "importing" dependencies is weird. @sebpiq suggested a simpler pattern:
var Dataflow = {
moduleFunc1: function() {},
moduleVar1: "blabla",
views: {},
models: {},
collections: {}
}
and
(function(Dataflow) {
var Edge = Dataflow.models.Edge = Backbone.Model.extend({ /*blabla*/ });
})(Dataflow);
Currently the dataflow UI is hard to work with on touchscreen devices even when zoomed in. We should have a smarter way of dealing with the UI when users touch it.
Initial concept:
Doing custom handling of touch interaction would eventually help in #42 as well.
and listen for changes for highlighting and fading nodes and edges, multiple drag, etc
stop testing .hasClass("ui-selected")
and make build process to combine and min them
Currently graph editing can be a bit fiddly, as you need to play a lot with the positioning of nodes to make the graphs look nice.
A lot of this could be automated by the work done in the CS community on various autolayout algorithms, and especially the ones intended for solving metro map layouts, as mentioned in my post on NoFlo UI
dataflow needs to implement its own pinch zoom support. On touch screen devices, the ports are too small to hit on default zoom level, and if we allow browser to zoom, it zooms the rest of the chrome as well when we'd only want to zoom the canvas.
Quick solution:
.dataflow-graph
element accordinglyFor smoothness we should include a CSS transition for this as well.
Bonus points for detecting a zoom level that the whole graph fits into, and starting at that level.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.