Making custom GUI widgets

Hi,

I think one of the key strengths and fun parts of Grasshopper is its rich user interface. This can be easily customized by the end-user, leading to bespoke setups. I am interested in starting to create GUI widgets, for example knobs/dials (similar to Max). Even though it may not be super pragmatic, i think it could be a fun task. Are there any suggestions in what directions to take in this regard? (should i look at sub-classing specific components?)

A further question: how can I do something like this:

I would like the group display of the toggle to switch to red when it is false and green when it is true. Also is there a way to 'bind' the toggles, so that the state of one toggle automatically triggers the 'partner' toggle to change?

thanks.

Replies to This Discussion

Permalink Reply by David Rutten on August 1, 2012 at 2:35am

Hi Jason,

it is possible to create your own objects like sliders and toggles. Basically, sliders are just Number parameters with custom attributes. Toggles are boolean parameters with custom attributes. There's quite a lot of work involved in making these as you have to perform layout and drawing all by yourself. Are you looking to do this in VB or C#?

It is also possible to draw pixels into the canvas at various layers. There are 13 events raised over the course of a Canvas redraw and you can draw additional shapes in 11 of them (the PaintBegin and PaintEnd are too early and too late respectively)

CanvasPaintBegin
CanvasPaintBackground
CanvasPrePaintGroups
CanvasPostPaintGroups
CanvasPrePaintWires
CanvasPostPaintWires
CanvasPrePaintObjects
CanvasPostPaintObjects
CanvasPrePaintOverlay
CanvasPostPaintOverlay
CanvasPrePaintWidgets
CanvasPostPaintWidgets
CanvasPaintEnd

Things like your Red and Green circles could be drawn in PrePaintGroups.

Ultimately, it is possible to synch objects, though probably quite difficult if you didn't write those objects. You may have to watch for GH_Document.SolutionStart events and perform your synching there, but I would hate to have to write this code if I couldn't add functionality to the objects to be synched.

David Rutten

david@mcneel.com

Poprad, Slovakia

Permalink Reply by Jason Lim on August 1, 2012 at 6:10am

Hi David, thanks for the swift reply. I will probably write in C# and will try and explore using the suggestions given. Another question I have - is it possible to create custom components in iron python and will the process be much different from the usual C#/vb.net route?

Permalink Reply by David Rutten on August 1, 2012 at 9:23am

I attached some C# source that defines a magic square object. It has code for custom layout, tooltips, display and mouse handling. It's a fairly typical yet minimal re-implementation of GH_Param<T>

David Rutten

david@mcneel.com

Poprad, Slovakia

Attachments:

TestFile.cs, 5 KB

Permalink Reply by Jason Lim on August 1, 2012 at 6:53pm

Hi David, very cool, thanks.

Permalink Reply by Bruno Galvao on January 2, 2016 at 5:28pm

Hi David,

First of all, congratulations on the great work, as always, and sorry for replying such an old post.

Seeing this widget you built (very cool btw), made me remind of an old wish of mine! I always suffered a little "debugging" my definitions with more complex data trees with the "panel" component.

Because i'm used to work a lot with spreadsheet, whenever possible i make grasshopper data go/come from a spreadsheet, so i can have good visualization on my inputs/outputs. On the hand this is never very smooth, so for quicker needs is kind of painful.

I've attached an image of something i think might be worth developing, something like a 2D Panel component, which you could scroll up and down, left and right. Do you think this is doable? Could be either for inputs or outputs.

(Forget about the "NameA", "NameB", etc...)

As always, thanks,

Bruno

Permalink Reply by Aris Kafantaris on April 12, 2020 at 10:38am

Hi David and apologies for reviving a long dead post!

I was looking to create a multi-value input (like a keyboard, with 26 keys where I could turn them on or off) and using toggles creates a huge mess (I need several of these "input keyboards"). The magic square that you are showing above looks amazing!

If I could click several of the buttons at once and have the numbers as a list output, it is exactly what I need.

Unfortunately, I downloaded the .cs file but have absolutely no idea what to do with it (I work with Python and can tinker a bit with C# that someone else has written, but that is just about it)

Thank you as always!

RSS