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>
Friday, August 28, 2015
Thursday, August 27, 2015
Trying JointJs
http://www.jointjs.com/tutorial#hello-world
1. the intention is to create something like directshow graph editor, for modeling system which will run anywhere.
2. library looks promising but blocks can't have multiple properties.
3. Though it's open source and can be extended
sample work from first effort.
1. your html must have "myHolder" div
<body onload="onLoad()">
<div id="myHolder"></div>
</body>
<script src="scripts/joint.js"></script>
1. the intention is to create something like directshow graph editor, for modeling system which will run anywhere.
2. library looks promising but blocks can't have multiple properties.
3. Though it's open source and can be extended
sample work from first effort.
1. your html must have "myHolder" div
<body onload="onLoad()">
<div id="myHolder"></div>
</body>
2. script command should have closing tag. without it at least Internet Explorer doesn't find functions defined.
Monday, August 10, 2015
Subscribe to:
Posts (Atom)