NBBJ releases Human UI -- now available for download

NBBJ Digital Practice is excited to announce the open source release of Human UI, a new plug-in that allows you to build custom User Interfaces for Grasshopper without writing a single line of code.

Today we have gone live, and the plugin is available on Food4Rhino. You will find an installer package, sample files, and a demo video on getting started:

http://www.food4rhino.com/project/human-ui

Visit the Bitbucket Repo and poke around in the code:

https://bitbucket.org/andheum/humanui

Check out today's coverage in Architect Magazine:

http://www.architectmagazine.com/technology/nbbj-releases-human-ui-...

Finally join our group and ask any questions or post any comments here:

http://www.grasshopper3d.com/group/human-ui

See below for detailed description!

----------------------------------

Human UI

Primary Development by:

Lead Developer: Andrew Heumann / andheum / @andrewheumann

Product Manager: Marc Syp / marcsyp / @mpsyp

Contributing Developer: Nate Holland / nateholland / @_NateHolland

Gone are the days of faking a user interface by laying out sliders and text panels and hiding wires on the Grasshopper canvas. Human UI interfaces are entirely separate from the Grasshopper canvas and leverage the power of Windows Presentation Foundation (WPF), a graphical subsystem for rendering user interfaces in the Windows environment.

OLD NEW

In other words: Human UI makes your GH definition feel like a Windows app. Create tabbed views, dynamic sliders, pulldown menus, checkboxes, and even 3D viewports and web browsers that look great and make sense to anyone--including designers and clients with no understanding of Grasshopper.

Human UI has been in development at NBBJ for over a year, as part of a larger NBBJ Design Computation initiative to deliver our tools internally as Products -- with fully automated installation, managed dependencies, analytics, documentation, and “magical” user experience. Human UI has been a huge component of the user experience part of this puzzle, and we are excited to share it with the larger Grasshopper community so that others can benefit from it and contribute to its development.

The initial release of Human UI is accompanied by a few simple examples to get you started, but we have developed sophisticated user interfaces with these tools at NBBJ and will slowly be rolling out more advanced examples. We also look forward to opening up the development to the community and seeing what new features and paradigms we can add.

Download the plugin at Food4Rhino and get started building Custom UIs for Grasshopper right away! We are happy to answer any questions or field discussion in the dedicated Grasshopper Group. Please join us!

Join the Grasshopper Group

http://www.grasshopper3d.com/group/human-ui

Download the plugin + sample files

http://www.food4rhino.com/project/human-ui

Visit the Bitbucket Repo

https://bitbucket.org/andheum/humanui

We look forward to seeing where this project takes you, please share your projects made with Human UI!

Sincerely,

Design Computation Leadership Team, NBBJ

Replies to This Discussion

Permalink Reply by djordje on February 2, 2016 at 11:37am

Great work guys!!

Permalink Reply by ng5 Alex on February 2, 2016 at 12:05pm

this takes things to another level!! great stuff.

Permalink Reply by Rafat Ahmed on February 2, 2016 at 12:11pm

Great work

Permalink Reply by Sean McGuire on February 3, 2016 at 6:06pm

looks fantastic!

Permalink Reply by Nik Willmore on February 3, 2016 at 9:17pm

Exciting. May be very useful for building tools for clients, for normal Rhino users to enjoy.

Is there any relation to the other Human plug-in?

http://www.grasshopper3d.com/group/human/forum/topics/new-version-o...

Permalink Reply by Marc Syp on February 5, 2016 at 6:35pm

The relation is that Andrew Heumann is the code wzrd behind both plugins.

I made a few contributions to the Human plug-in (namely component requests here and there, and the name suggestion -- "Human") but was much more involved with the development of Human UI, largely from a product roadmap, feature set, testing, and usability standpoint. Shout out to our colleague Nate Holland for doing some heavy lifting on the code for charts and graphs as well.

But all in all, Andrew is the C# genius that made it all come to life and so both plugins bear his Grasshopper Zoo name!

Cheers,

Marc

Permalink Reply by 3dcon on February 4, 2016 at 2:42am

This is fantastic!

I started a test with an old gh file and fall over one point right at the beginning.

I used a expression in my sliders to get n.5 or n.n5 values. And the "Create Slider" component

is ignoring the expression. So I get the "wrong" values displayed in the control window.Is there a way to get the values from the expression in the slider?

Thank you for your great work!

Permalink Reply by Marc Syp on February 4, 2016 at 3:38pm

Hi there, glad to see you trying it out.

I believe that your goal is to create custom snapping values, and itt is true that we do not inherit expressions from the slider. Instead, we have implemented our own "Snap Value" mechanism that we think is more intuitive and friendly to use.

Simply set the extents of your slider (here I have used 0.0 to 20.0) and the increment that you would like it to snap to (0.5 in this case). No need to fool the component with reverse math acrobatics.

Let us know if this does or doesn't solve your problem!

Thanks,

Marc

Permalink Reply by 3dcon on February 5, 2016 at 11:06am

Hi Marc,

thank you for your reply. You are right, that math acrobatic is to get the snapping.

I tried it exactly the way you are showing. But it doesn´t work the first time, don´t

know why, maybe I had to recompute or open/close the HUI window.

But now it is all working as expected.

Thank you, I´m still testing. btw. there is no way to show lines/curves in the 3D Window?

Permalink Reply by Marc Syp on February 5, 2016 at 6:45pm

Hey, glad you got it working and it does what you need.

As for lines and curves, unfortunately the ecosystem for displaying geometry in a 3D viewport inside the HUI is still pretty crude. Currently the viewport only accepts meshes, so depending on your visual tolerance, you could simulate lines and curves with very narrow meshes, but this is understandably questionable.

There are some other pretty hacky workarounds that use a combination of Make2D processes and the Create Shape HUI components, but layer order control is difficult and performance is questionable.

Anyway, we're happy to entertain thoughts on how to improve this.

Cheers,

Marc

Permalink Reply by 3dcon on February 6, 2016 at 5:24am

Hey, I don´t know if I understand something wrong here, but why is the slider that short? Shouldn´t that Stack component, with Horizontal=True, put the elements with max. width for every element? I like to have an "icon" on the right of every slider.

The Create Grid looks a bit to much for that simple thing.

Best

Christoph

Permalink Reply by Marc Syp on February 22, 2016 at 6:15pm

Don't know if you ever got an answer to this question -- but the Horizontal=True does not relate to the width of the component but the relationship between the elements.

Horizontal=True will stack elements side by side, and False will stack them vertically. You can nest Stacks within Stacks to get a variety of grid effects (without using an official grid).

Slider width can be controlled with the "Adjust Element Appearance" component, but there are some limitations in that we don't have a clean workflow for setting widths dynamically based on window width, for instance. Still, you can accomplish most of what you need with AEA and Stacks.

Cheers,

Marc