Friday, October 2, 2015
Sunday, September 27, 2015
Saturday, September 26, 2015
Saturday, September 19, 2015
Tuesday, September 1, 2015
Dataflow editor pure HTML5 + Javascript.
1. Hopefully will run anywhere (Android, IOS with help of Intel XDK which wraps HTML5+Javascript development into appropriate packages). Raspberry PI, Windows.
2. JointJs+Webix HTML UI framework.
3. Tried OpenUI5, Jquery UI, EasyUI. With Webix got quick results (few hours).
4. Their site contains a lot of samples with code editor. you can modify samples and see live changes.
5. Appropriate sources attached. https://www.dropbox.com/s/f1pzbfvpacl2384/DataflowAnywhere.zip?dl=0
nothing works meanwhile, simply UI layout with panels that can be collapsed/expanded.blocks drawn can be moved, connected, disconnected.
6. Actually it's JointJS graph in few lines of JavaScript is embedded into Webix view.
2. JointJs+Webix HTML UI framework.
3. Tried OpenUI5, Jquery UI, EasyUI. With Webix got quick results (few hours).
4. Their site contains a lot of samples with code editor. you can modify samples and see live changes.
5. Appropriate sources attached. https://www.dropbox.com/s/f1pzbfvpacl2384/DataflowAnywhere.zip?dl=0
nothing works meanwhile, simply UI layout with panels that can be collapsed/expanded.blocks drawn can be moved, connected, disconnected.
6. Actually it's JointJS graph in few lines of JavaScript is embedded into Webix view.
Saturday, August 29, 2015
JointJS model linking tutorial
1. creates two similar blocks with three ports
2. afterwards you can connect them by links
3. note: at paper constructor we set default link style as smooth
4. at sample run strangely I had to put manually some library files from JointJS library into scripts directory. without this it fails.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="scripts/joint.css" />
<script src="scripts/joint.js"></script>
<script src="scripts/joint.shapes.devs.js"></script>
<title>Hello World</title>
</head>
<script type="text/javascript">
function models() {
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper(
{
el: $('#myHolder'),
width: 650,
height: 200,
gridSize: 1,
model: graph,
defaultLink: new joint.dia.Link({
attrs: { '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' } },
smooth: true
})
});
var m1 = new joint.shapes.devs.Model({
position: { x: 50, y: 50 },
size: { width: 90, height: 90 },
inPorts: ['in1', 'in2'],
outPorts: ['out'],
attrs: {
'.label': { text: 'Model', 'ref-x': .4, 'ref-y': .2 },
rect: { fill: '#2ECC71' },
'.inPorts circle': { fill: '#16A085' },
'.outPorts circle': { fill: '#E74C3C' }
}
});
var m2 = new joint.shapes.devs.Model({
position: { x: 250, y: 50 },
size: { width: 90, height: 90 },
inPorts: ['in1', 'in2'],
outPorts: ['out'],
attrs: {
'.label': { text: 'Model', 'ref-x': .4, 'ref-y': .2 },
rect: { fill: '#2ECC71' },
'.inPorts circle': { fill: '#16A085' },
'.outPorts circle': { fill: '#E74C3C' }
}
});
graph.addCell(m1);
graph.addCell(m2);
}
}
</script>
<body onload="models()">
<div id="myHolder"></div>
</body>
</html>
2. afterwards you can connect them by links
3. note: at paper constructor we set default link style as smooth
4. at sample run strangely I had to put manually some library files from JointJS library into scripts directory. without this it fails.
- JointJS uses jquery. I had to use JointJS.js from their downloads page. it contains jquery
- JointJS uses backbone. I had to take it from their source control site distribution and put into scripts directory.
- In order to use models it's not enough standard JointJS.js file. models implementation is at joint.shapes.devs.js. I had to take it from their source control site distribution and put into scripts directory.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="scripts/joint.css" />
<script src="scripts/joint.js"></script>
<script src="scripts/joint.shapes.devs.js"></script>
<title>Hello World</title>
</head>
<script type="text/javascript">
function models() {
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper(
{
el: $('#myHolder'),
width: 650,
height: 200,
gridSize: 1,
model: graph,
defaultLink: new joint.dia.Link({
attrs: { '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' } },
smooth: true
})
});
var m1 = new joint.shapes.devs.Model({
position: { x: 50, y: 50 },
size: { width: 90, height: 90 },
inPorts: ['in1', 'in2'],
outPorts: ['out'],
attrs: {
'.label': { text: 'Model', 'ref-x': .4, 'ref-y': .2 },
rect: { fill: '#2ECC71' },
'.inPorts circle': { fill: '#16A085' },
'.outPorts circle': { fill: '#E74C3C' }
}
});
var m2 = new joint.shapes.devs.Model({
position: { x: 250, y: 50 },
size: { width: 90, height: 90 },
inPorts: ['in1', 'in2'],
outPorts: ['out'],
attrs: {
'.label': { text: 'Model', 'ref-x': .4, 'ref-y': .2 },
rect: { fill: '#2ECC71' },
'.inPorts circle': { fill: '#16A085' },
'.outPorts circle': { fill: '#E74C3C' }
}
});
graph.addCell(m1);
graph.addCell(m2);
}
}
</script>
<body onload="models()">
<div id="myHolder"></div>
</body>
</html>
Subscribe to:
Posts (Atom)