Creating custom display graphs for grasshopper canvas

Replies to This Discussion

Permalink Reply by Andrew Heumann on December 21, 2014 at 6:06pm

This is not an easy task, and I would think it would be next to impossible with ghpython - you'll need to compile a custom .NET component to customize its appearance. Here's my (rough and probably incomplete) short list of the things you would need to do to make this work:

• create your own param class deriving from GH_Param. the bar graph and other graph types probably derive from GH_Param<GH_Number>. 
• within your param class, maintain the internal structures representing your graph data. Any processing of that data should probably happen in a method that overrides OnVolatileDataCollected.
• You will need to override the CreateAttributes method with your custom attributes class - see the next step.
• Create your own attributes class deriving from GH_Attributes. It's likely you'll want to extend GH_ResizableAttributes so that the graph can resize. 
• Within this attributes class, you'll need to override a handful of methods:
  • Layout() (handling position and window size, if I understand correctly)
  • Render(GH_Canvas canvas, System.Drawing.Graphics graphics, GH_CanvasChannel channel). This is where all the drawing of the component happens. You'll need to draw the wires to the component, draw the component "Capsule" as well as all of the graphics within it, using calls to methods on canvas.Graphics.

If I were you, I'd get yourself a disassembler like ILSpy to see how the native graph components handle all this stuff (though full disclosure, this is a violation of the Grasshopper license agreement). 

The class GH_BarGraph inside Grasshopper.dll is probably a good place to start. 

Permalink Reply by Anton Szilasi on December 22, 2014 at 2:02am

Hi Andrew 

Thanks for your reply given that its not going to be easy and I only know how to code with python I think I'll just had to bake graphs in Rhino viewports and leave this one for later

Cheers

Anton

Permalink Reply by Mostapha Sadeghipour Roudsari on December 23, 2014 at 11:16pm

Hi Anton and Andrew,

Anton, You touched one of my favorites in general and one of my main complains about Grasshopper (http://www.grasshopper3d.com/forum/topics/advanced-charts-and-graphs). I think you can use Dhour plugin to generate the graph that you want in number 3. I don't know how much control you will have for customization but it should be a good point to start. The project is OpenSource so you can check the source code and see what is happening behind the scene.

Andrew, I wonder if it is possible to overwrite the layout for the components to have a javascript enabled interface. Right now Embryo-viz has a component that let you visualize an image in Grasshopper, if we can have a similar component that can render html pages then we can use D3 library and generate pretty nice, interactive graphs. I recently found dimple (http://dimplejs.org/examples_index.html) and can't wait to do something with it.

Mostapha