Added plug-in for custom node shapes and images #106

rpeleg1970 · 2013-06-05T08:50:01Z

Hi,

I added a plug-in called sigma.nodeShapes - demo / intro code sample here: https://dl.dropboxusercontent.com/u/45136256/sigma.js/nodeshapes.html

the plug-in itself adds more node drawing functions for:

square
triangle
diamond
star (configurable number of points and inner radius)

In addition, the plug-in exposes an API to add additional custom shapes - also shown in demo with a 'Pacman' node.

All node drawing functions keep the shape bounded in the node size radius. This is important for keeping the rest working - mouse click and hover, force atlas, arrow edges, etc.

Last - the plug-in adds the ability to draw images on nodes, demonstrated as well. This addresses issue #83

This plugin is based on minimal changes to plotter - needed to expose the functionality that currently draws circle for regular, active, and hover nodes (as well as borders). no changes to node attribute were made - the attributes for shape and image drawing are piggybacked on the node.attr bag.

_NOTE_: post-mortem I noticed the file changes for plotter.js shows a lot of false diffs, due to auto-indent in my vi editor. I believe these are good indentations but can provide a non-indented version if you prefer. To help you review the code - I added a note next to each REAL code change (see under Files Changed tab)

drawNodeShape (used by drawNode) drawHoverNodeBorder/Shape (used by drawHoverNode) drawActiveNodeBorder/Shape (use by drawActiveNode) The drawing functions gets color, x, y and size as parameters, and draw to a ctx parameter. Optionally the drawing functions can use the node.attr data to do additional stuff (may be used by plug-ins later on). The drawing functions adhere to keeping the drawn shape in the radius of 'size' - so that other graph calculations work well. In the default case - all functions draw a filled circle according to the passed parameters. This is identical to the current behavior.

- skeleton - on init store original plotter methods and replace with plug-in drawShapedNode function - on finalize restore original plotter functions - currently drawShapedNode focuses on adding images on top of the regular circle shapes. Image attributes taken from node.attr.image. Function not yet complete

… (instance override instead of class override) - image on nodes work well in nodeShapes plugin

currently the circle drawing from the original Plotter class are plugged as shape 'circle'

…n next commits

- extending sigma.tools with shape drawing functions - 'shape' attribute is now a hash, with shape name in 'name' inside it. Allows adding more options - see impl. of star allows configuring number of points and inner radius

… reached also addede custom node shape to public API

rpeleg1970 · 2013-06-05T13:12:34Z

src/core/plotter.js

@@ -215,10 +215,10 @@ function Plotter(nodesCtx, edgesCtx, labelsCtx, hoverCtx, graph, w, h) {
          s['hidden'] ||


Looks like the diff reflects a lot of indentation corrections, likely caused by my vim's auto-indent
I added a comment below ONLY FOR real (non-indent) code changes to make the review easier

hansifer · 2013-06-06T13:20:03Z

That's really awesome. I can definitely use that. Thanks!

rpeleg1970 · 2013-06-06T14:08:43Z

Thanks! I'll start writing the classic-video-games-node-shape-expansion pack ;)

rpeleg1970 · 2013-06-06T15:10:18Z

rpeleg1970 · 2013-06-06T15:11:26Z

oops.. closed by mistake, reopened.

- set number of pointes - set rotation (degrees) clockwise - 'iso-poly' with numPoint=3 equals 'triangle'. add 'rotate': 60 to turn it on its head - 'iso-poly' with numPoint=4 equals 'diamond'. add 'rotate': 45 to make it a 'square'

also updated online sample on https://dl.dropboxusercontent.com/u/45136256/sigma.js/nodeshapes.html

sheymann · 2013-07-20T16:37:48Z

awesome work!

ParkHanbum · 2013-08-25T15:02:41Z

awesome work!! 👍
is it work with parseGexf library?

I put node-shape like this [viz:node-shape value="image" uri="/img/switch.png" /] = ( ] to > )
but doesn't load image.

rpeleg1970 · 2013-08-26T08:01:17Z

Thanks. Currently it does not work with parseGexf - the problem is that since the node shapes/images are plug-in functionality, it would not be the best behavior to put dependent code in another plug-in. However, this would be easy to add to a custom version of the GEXF plug-in:

In the parseGexf.js code (https://github.com/jacomyal/sigma.js/blob/master/plugins/sigma.parseGexf.js), add a vis:node-shape section (similar to the viz:size, vis:color, and viz:position), and extract image url if node-shape is image.
When the node is created (lines 109-121) add image: {url: } to the attributes as demonstrated in https://dl.dropboxusercontent.com/u/45136256/sigma.js/nodeshapes.html

Let me know if you need help with this

ParkHanbum · 2013-08-27T02:12:38Z

nice~ I make very very rough code . anyway it seems work.

  //add node shape
  nodeShape = "";
  imgUri = "";
  var shapeNodes = nodeNode.getElementsByTagName('node-shape');
  shapeNodes = shapeNodes.length || poorBrowserXmlNsSupport ?
               shapeNodes :
               nodeNode.getElementsByTagNameNS('*','node-shape');
  if(shapeNodes.length>0){
    var shapeNode = shapeNodes[0];
    nodeShape = shapeNode.getAttribute('value');
    imgUri  = shapeNode.getAttribute('uri');
  }

  // Create Node
  var node = {label:label, size:size, x:x, y:y, attributes:[], color:color, shape:{name: nodeShape}, image:{url:imgUri, scale:1}};  // The graph node

don't blame me :)
just test code

Nibbels · 2013-11-19T22:28:27Z

Thanks :)

I love it!!

blt909 · 2013-12-05T10:58:11Z

Great plug-in there ! 👍

@Bhb2011 @rpeleg1970
I tried to implement it with parseGexf.js.
My nodes attr Object seems to be well populated with shapes and images but the shapes and images won't show on the graph...

In graph loading script :

    sigInst.parseGexf('{{ asset("assets/json/linternaute.gexf")}}');
    sigInst.startNodeShapes();

In parseGexf.js :

//add node shape

    var shapeNodes = nodeNode.getElementsByTagName('nodeshape');
    shapeNodes = shapeNodes.length ?
                 shapeNodes :
                 nodeNode.getElementsByTagName('viz:nodeshape');
    if(shapeNodes.length>0){
      shapeNode = shapeNodes[0];
      nodeShape = shapeNode.getAttribute('value');
      imgUri  = shapeNode.getAttribute('uri');
    }

      // Create Node
      var node = {label:label, size:size, x:x, y:y, attributes:[], color:color,  shape:{name: nodeShape}, image:{url:imgUri, scale:1}};  // The graph node

In my gexf file :

<viz:nodeshape value="square" uri="/assets/img_wd/Post.png"></viz:nodeshape>

Thanx for your advice

rpeleg1970 · 2013-12-11T13:03:14Z

Hello @blt909

I understand you took the code that worked for @Bhb2011 . One thing that comes to mind - I see you call sigInst.startNodeShapes() AFTER you call sigInst.parseGexf('...'). This means that when you run the parse- the node-shape plug-in is not yet initialized. Can you try reverse the order and try again?

Thanks
R

blt909 · 2013-12-11T13:20:07Z

Hello @rpeleg1970

I reversed the instructions sequence and tried again with no improval .
In console, I have the excepted output for my attributes, but no image on the concerned node :

image: Object
    scale: 1
    url: "/assets/img_wd/Post.png"

Thanks

rpeleg1970 · 2013-12-11T13:46:42Z

Hmm... Is the asset URI correct? I see when you load the GEXF file you load it from 'assets/...' (relative path) while for the image you use an absolute path ('/assets/...')
If this does not help - can you post me the simplest GEXF file I can try with your code?

Also - before you try the GEXF - can try to use an example similar to https://dl.dropboxusercontent.com/u/45136256/sigma.js/nodeshapes.html - just to see the plug-in is working well as is?

blt909 · 2013-12-11T14:52:00Z

I verified my assets URIs, they are both ok (relative one comes from a templating engine, absolute one is a copy/paste from the output of the templating engine for testing the plugin).

Here's the simpliest example possible for a gexf file (2 nodes , 1 edge) :

<?xml version='1.0' encoding='UTF-8'?>
<gexf xmlns="http://www.gexf.net/1.2draft" version="1.2" xmlns:viz="http://www.gexf.net/1.2draft/viz" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.gexf.net/1.2draft http://www.gexf.net/1.2draft/gexf.xsd">
  <meta lastmodifieddate="2013-12-11">
    <creator>Gephi 0.8.1</creator>
    <description></description>
  </meta>
  <graph defaultedgetype="undirected" mode="static">
    <attributes class="node" mode="static">
      <attribute id="onto_class" title="onto_class" type="string"/>
      <attribute id="note" title="note" type="integer"/>
    </attributes>
    <nodes>
      <node id="Agent35" label="Agent35">
        <attvalues>
          <attvalue for="onto_class" value="Agent"/>
          <attvalue for="note" value="0"/>
        </attvalues>
        <viz:size value="1.0"/>
        <viz:nodeshape value="square" uri="/assets/img_wd/Agent.png"></viz:nodeshape>
        <viz:position x="40.94513" y="-36.955757" z="0.0"/>
        <viz:color r="153" g="153" b="153"/>
      </node>
      <node id="Post36" label="Post36">
        <attvalues>
          <attvalue for="onto_class" value="Post"/>
          <attvalue for="note" value="0"/>
        </attvalues>
        <viz:size value="1.0"/>
        <viz:nodeshape value="diamond" uri="/assets/img_wd/Post.png"></viz:nodeshape>
        <viz:position x="-40.94513" y="36.955757" z="0.0"/>
        <viz:color r="153" g="153" b="153"/>
      </node>
    </nodes>
    <edges>
      <edge source="Agent35" target="Post36" label="webdrone:postedBy">
        <attvalues/>
      </edge>
    </edges>
  </graph>
</gexf>

I'm looking forward to test that the plugin is working well without the GEXF loader

Thanks

rpeleg1970 · 2013-12-12T06:34:17Z

Hi

I used your exact code with the obvious modification of images and locations, to fit my setup. It worked well, sorry..
A few points for you to check:

Does the plug-in work for you without the Gexf parsing?
What browser are you using? Does this browser display the https://dl.dropboxusercontent.com/u/45136256/sigma.js/nodeshapes.html example well?
After I loaded the GEXF file, I inspected the sigInst (see below screen grab from chrome developer console). Note that the image and shapes fall under node.attr

Hope any of this helps
Ron

blt909 · 2013-12-12T07:55:29Z

Hi

I checked the few points :

No, I've implemented your exact example on my setup and it doesn't worked.
I discovered that the plug-in send a log but it doesn't appear on my setup

redraw on image load

So I think there's something disturbing the access to the methods.

I use Chrome or Firefox when I do tests, both worked well on your webpage
I did the same check and had the same result, sigma.parseGexf.js seems to perfectly handle the datas.

rpeleg1970 · 2013-12-12T14:09:05Z

Hmmm... kind of ran out of ideas, wish I could recreate it here. I would try to break inside the draw.*NodeShape, in the sigma.nodeShapes.js, and see where its going, and where it's blocked.

one last idea as I write:
Did you take the entire sigmajs branch from my repo - or did you take from jacomyal and just copied my plugin file?
If you just took my file - it will not work. The plug-in relies on small changes that I did to src/core/plotter.js - these changes were not integrated into the main sigmajs branch.

Cheers
R

blt909 · 2013-12-12T15:01:44Z

Hi,

that awkward you realize it was so simple after all ^^.
I missed that you've mentionned you have a custom sigma.min.js... and all work perfectly well now.

Sorry for the waste of your time Ron and thanks for your attention.

rpeleg1970 · 2013-12-13T09:15:22Z

Great, glad I helped

jacomyal · 2014-01-12T16:13:15Z

Here is how custom node renderers work in the new version of sigma:

Everyone wants different ways to render nodes, but I cannot merge everything in the core. So, from now, it is easy for you to develop custom node renderers on the fly or as plugins for your specific needs. I just added an example with a renderer that draws images instead of discs, to show how it works.

Anyway, the plugin still sounds relevant, to make it easier to display nodes as images + shapes. It might be interested to port it to the new sigma.

rpeleg1970 · 2014-01-12T16:57:38Z

Hi Alexis,

I will take the porting on me, thanks for the feedback !

Cheers
R

‫ב-12 בינו 2014, בשעה 18:13, ‏"Alexis Jacomy" notifications@github.com כתב/ה:‬

Here is how custom node renderers work in the new version of sigma:

Everyone wants different ways to render nodes, but I cannot merge everything in the core. So, from now, it is easy for you to develop custom node renderers on the fly or as plugins for your specific needs. I just added an example with a renderer that draws images instead of discs, to show how it works.

Anyway, the plugin still sounds relevant, to make it easier to display nodes as images + shapes. It might be interested to port it to the new sigma.

—
Reply to this email directly or view it on GitHub.

jacomyal · 2014-01-12T16:58:37Z

That's good news, thanks for this :)

Dragging an unselected node while another node is selected drags both

rpeleg1970 and others added 8 commits June 1, 2013 17:55

cleaned out a few bugs, the core stuff is now working normally

cd0b68f

- modified functionality override in Plotter from .prototype to .this…

eb1b9f6

… (instance override instead of class override) - image on nodes work well in nodeShapes plugin

added pluggable shape drawing to the nodeShape plug-in.

13069b3

currently the circle drawing from the original Plotter class are plugged as shape 'circle'

added square node shapes, just to test the water. will now organize i…

29122e4

…n next commits

added more node shapes: triangle, square, diamond, and star:

672e36a

- extending sigma.tools with shape drawing functions - 'shape' attribute is now a hash, with shape name in 'name' inside it. Allows adding more options - see impl. of star allows configuring number of points and inner radius

fixed image drawing - first time requires redraw when image.onload is…

f5b39cd

… reached also addede custom node shape to public API

rpeleg1970 reviewed Jun 5, 2013
View reviewed changes

rpeleg1970 closed this Jun 6, 2013

rpeleg1970 reopened this Jun 6, 2013

ronp@winter added 2 commits June 10, 2013 15:09

added isosceles polygon shape:

0d545a0

- set number of pointes - set rotation (degrees) clockwise - 'iso-poly' with numPoint=3 equals 'triangle'. add 'rotate': 60 to turn it on its head - 'iso-poly' with numPoint=4 equals 'diamond'. add 'rotate': 45 to make it a 'square'

renamed isosceles to equilateral, of course..

2e2e96b

also updated online sample on https://dl.dropboxusercontent.com/u/45136256/sigma.js/nodeshapes.html

hansifer mentioned this pull request Jun 12, 2013

Added edge arrow rendering #101

Merged

jacomyal closed this Jan 12, 2014

A---- pushed a commit to A----/sigma.js that referenced this pull request Sep 16, 2015

Fix jacomyal#106

d415df4

Dragging an unselected node while another node is selected drags both

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added plug-in for custom node shapes and images #106

Added plug-in for custom node shapes and images #106

rpeleg1970 commented Jun 5, 2013

rpeleg1970 Jun 5, 2013

hansifer commented Jun 6, 2013

rpeleg1970 commented Jun 6, 2013

rpeleg1970 commented Jun 6, 2013

rpeleg1970 commented Jun 6, 2013

sheymann commented Jul 20, 2013

ParkHanbum commented Aug 25, 2013

rpeleg1970 commented Aug 26, 2013

ParkHanbum commented Aug 27, 2013

Nibbels commented Nov 19, 2013

blt909 commented Dec 5, 2013

rpeleg1970 commented Dec 11, 2013

blt909 commented Dec 11, 2013

rpeleg1970 commented Dec 11, 2013

blt909 commented Dec 11, 2013

rpeleg1970 commented Dec 12, 2013

blt909 commented Dec 12, 2013

rpeleg1970 commented Dec 12, 2013

blt909 commented Dec 12, 2013

rpeleg1970 commented Dec 13, 2013

jacomyal commented Jan 12, 2014

rpeleg1970 commented Jan 12, 2014

jacomyal commented Jan 12, 2014

		@@ -215,10 +215,10 @@ function Plotter(nodesCtx, edgesCtx, labelsCtx, hoverCtx, graph, w, h) {
		s['hidden'] \|\|

Added plug-in for custom node shapes and images #106

Added plug-in for custom node shapes and images #106

Conversation

rpeleg1970 commented Jun 5, 2013

rpeleg1970 Jun 5, 2013

Choose a reason for hiding this comment

hansifer commented Jun 6, 2013

rpeleg1970 commented Jun 6, 2013

rpeleg1970 commented Jun 6, 2013

rpeleg1970 commented Jun 6, 2013

sheymann commented Jul 20, 2013

ParkHanbum commented Aug 25, 2013

rpeleg1970 commented Aug 26, 2013

ParkHanbum commented Aug 27, 2013

Nibbels commented Nov 19, 2013

blt909 commented Dec 5, 2013

rpeleg1970 commented Dec 11, 2013

blt909 commented Dec 11, 2013

rpeleg1970 commented Dec 11, 2013

blt909 commented Dec 11, 2013

rpeleg1970 commented Dec 12, 2013

blt909 commented Dec 12, 2013

rpeleg1970 commented Dec 12, 2013

blt909 commented Dec 12, 2013

rpeleg1970 commented Dec 13, 2013

jacomyal commented Jan 12, 2014

rpeleg1970 commented Jan 12, 2014

jacomyal commented Jan 12, 2014