This project is a work in progress and is likely to be worked on very sporadically. Currently the CSS is setup for very basic forms of components and tooltips — it does not handle connections or custom component interfaces. That said the installation instructions below should work, and any pull requests are welcome.
A CSS library and HTML implementation reference for representing Grasshopper 3D UI elements in a browser.
Simply reference the dist/webhopper.css file into your app or import the sass/webhopper module.
Proper support for the hover tooltips requires some simple javascript — see library/app/webhopper.js
Proper support for drawing node connections is on the TODO list.
This uses Astrum to document and display the components. To build a copy of this site locally, first install project dependencies:
npm install
Then build the templates using Astrum:
npm run astrum init library
Then run the gulp task to start the local server:
npm run gulp
This uses Metahopper and a Grasshopper definition to extract an XML file of all installed components. A script then translates it into the styles and markup needed for Astrum.
- Ensure the metahopper plugin is installed
- Open grasshopper and
extractor.gh - Run, save output XML as
extraction.xml - Open terminal, run
translator.py
All design elements adapted from the user interface of Grasshopper 3D. Grasshopper 3D was developed by David Rutten at Robert McNeel & Associates.
Major thanks to Andrew Heumann and Harsh Gupta for their work on rhino.github.io which has been used here directly in many cases.
This code is available under the MIT license.