-
Notifications
You must be signed in to change notification settings - Fork 3
Home
Welcome to the Linkdraw wiki!
Linkdraw is draw tool by json configuration.
Sample and
Demo(5 mins interval)
- Get linkdraw.
git clone git://github.com/mtoshi/linkdraw.git
- Setup linkdraw.
cd ./linkdraw
bash utils/setup.sh ./dirname
- See linkdraw.
http://example.org/dirname/sample.html
- Install jQuery.
sudo apt-get install libjs-jquery -y
- Install D3 and Linkdraw.
Get D3
wget http://code.linkdraw.org/deb/libjs-d3_3.1.10-1_all.deb
Get Linkdraw
wget http://code.linkdraw.org/deb/libjs-linkdraw_0.2.4-1_all.deb
Install
sudo dpkg -i libjs-d3_3.1.10-1_all.deb libjs-linkdraw_0.2.4-1_all.deb
- execute utils/setup.sh:
sudo bash /usr/share/linkdraw/utils/setup.sh dirname
After setup, you can see some samples.
http://example.org/dirname/sample.html
Also, you can see linkdraw demo.
This demo changes status of map automatically in seconds.
Please execute "demo.py".
python utils/demo.py dirname/configs/demo_config.json
And access your web server.
http://example.org/dirname/demo.html
Linkdraw supports modern browsers, FireFox, Chrome, Safari and IE9.
Linkdraw is dependent on jQuery and d3.
Please get these javascripts.
wget http://code.jquery.com/jquery-1.10.1.min.js
wget http://code.linkdraw.org/d3/d3-3.1.10.min.js
wget http://code.linkdraw.org/linkdraw.js
After that, please add them in your HTML header.
<script src="jquery-1.10.1.min.js"></script>
<script src="d3-3.1.10.min.js"></script>
<script src="linkdraw.js"></script>
Also, you can direct import those Javascripts as follows.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.linkdraw.org/d3/d3-3.1.10.min.js"></script>
<script src="http://code.linkdraw.org/linkdraw.js"></script>
And add follows(set up some values).
<script type="text/javascript">
$(function(){
$("#linkdraw").linkDraw({
"configPath": "config.json", // configuration json file.
"positionPath": "position.json", // position json file.
"positionWriter": "write.cgi", // position writer for save.
//"positionSave": false, // position save button.(default enable)
//"zoom": false, // zoom. (default enable)
//"drag": false, // drag. (default enable)
"width": 1200, // svg width
"height": 600, // svg height
"interval": 300 // get configuration interval(seconds)
});
});
</script>
HTML body side is as follows.
<body>
<div id="linkdraw"></div>
</body>
In the above-mentioned setup, it becomes the file name ”config.json”.
vi config.json
And minimum configuration is as follows.
{
"lines": [
{ "source": "A", "target": "B","color": "blue", "width": "1", "descr": "blue line", "link": "http://..." }
]
}
Not available characters as link source, target and node name.
@#!~$%^*=[]+|“‘.,><:;/{}`¥?
You can see configuration samples.
In the above-mentioned setup, it becomes the file name ”position.json”. A command required for a position file is "touch" only.
touch position.json
Because position is determined at random when the position data is empty. After random drawing, you can move each node with dragging and dropping. And you can keep your preferred arrangement with "SAVE" button. Position file will be written in at the time of this save action.
But, it will be difficult to determine arrangement, when many nodes exist.
If you would like to specify arrangement, please edit a position file as follows.
{
"position": {
"DC1-R1": {"y": 100, "x": 100},
"DC1-R2": {"y": 100, "x": 150},
"DC1-SW1": {"y": 150, "x": 100},
"DC1-SW2": {"y": 150, "x": 150},
"DC2-R1": {"y": 200, "x": 200},
"DC2-R2": {"y": 200, "x": 250},
"DC2-SW1": {"y": 250, "x": 200},
"DC2-SW2": {"y": 250, "x": 250},
"DC3-R1": {"y": 300, "x": 300},
"DC3-R2": {"y": 300, "x": 350},
"DC3-SW1": {"y": 350, "x": 300},
"DC3-SW2": {"y": 350, "x": 350}
},
"scale": 1,
"translate": [0, 0]
}