{"id":21246903,"url":"https://github.com/mitevpi/gh-web-ui","last_synced_at":"2025-07-10T22:31:42.360Z","repository":{"id":37728491,"uuid":"260522761","full_name":"mitevpi/gh-web-ui","owner":"mitevpi","description":"Package for building web-based User Interfaces (UI) in Rhino Grasshopper.","archived":false,"fork":false,"pushed_at":"2022-12-08T12:16:51.000Z","size":5117,"stargazers_count":111,"open_issues_count":6,"forks_count":24,"subscribers_count":11,"default_branch":"master","last_synced_at":"2023-11-07T19:14:01.574Z","etag":null,"topics":["3d","aec","csharp","css","dom","dotnet","gh3d","grasshopper","html","html5","interface","javascript","no-code","rhino","rhino3d","ui","ui-ux","visual-programming","vue","web"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mitevpi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-01T17:51:34.000Z","updated_at":"2023-10-08T17:06:50.000Z","dependencies_parsed_at":"2023-01-25T13:31:49.744Z","dependency_job_id":null,"html_url":"https://github.com/mitevpi/gh-web-ui","commit_stats":null,"previous_names":[],"tags_count":2,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitevpi%2Fgh-web-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitevpi%2Fgh-web-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitevpi%2Fgh-web-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitevpi%2Fgh-web-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mitevpi","download_url":"https://codeload.github.com/mitevpi/gh-web-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225658533,"owners_count":17503666,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","aec","csharp","css","dom","dotnet","gh3d","grasshopper","html","html5","interface","javascript","no-code","rhino","rhino3d","ui","ui-ux","visual-programming","vue","web"],"created_at":"2024-11-21T02:09:22.057Z","updated_at":"2024-11-21T02:09:22.614Z","avatar_url":"https://github.com/mitevpi.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Grasshopper Web UI\n\n[![Generic badge](https://img.shields.io/badge/Demo-YouTube-Green.svg)](https://youtu.be/kwYKU9ssaLQ)\n[![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/mitevpi/gh-web-ui)](https://github.com/mitevpi/gh-web-ui/releases)\n[![GitHub](https://img.shields.io/github/license/mitevpi/gh-web-ui)](https://github.com/mitevpi/gh-web-ui/blob/master/LICENSE)\n\n\n[![GitHub last commit](https://img.shields.io/github/last-commit/mitevpi/gh-web-ui)](https://github.com/mitevpi/gh-web-ui/commits/master)\n[![GitHub issues](https://img.shields.io/github/issues/mitevpi/gh-web-ui)](https://github.com/mitevpi/gh-web-ui/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed-raw/mitevpi/gh-web-ui)](https://github.com/mitevpi/gh-web-ui/issues?q=is%3Aissue+is%3Aclosed)\n[![GitHub contributors](https://img.shields.io/github/contributors/mitevpi/gh-web-ui)](https://github.com/mitevpi/gh-web-ui/graphs/contributors)\n\n\nPrototype for building a Grasshopper interface using native web components.\n\n## Development\n\n1. Clone locally\n2. Re-link and restore dependencies\n3. Build (everything shoudl copy to the Grasshopper/Libraries location)\n4. Open the [`ServeInterface.gh`](./grasshopper/ServeInterface.gh)\n\n## Usage\n\n### Build/Use\n\nIf you need/want to make modifications/contributions to this package, please refer to the **Development** section above.\n\nIf you just want to *use* the package, please refer to the [Releases section of GitHub](https://github.com/mitevpi/gh-web-ui/releases).\nFrom there, download the latest release, unzip the file, and paste the contents into `%appdata%\\Grasshopper\\Libraries`.\n\n\n### Hard-Coded UI\n\nThe simplest way to use this package is as a dedicated input-receiver by supplying a hard-coded HTML file. This would allow you\nto read user inputs, but not add any information to the interface. It would require that you or someone else on your team\nhas basic web-coding skills, as they're needed to write the interface. Samples of these kinds of interfaces can be found in\nthe [`Web UI`](GHUI/Web%20UI) folder.\n\nAfter building the `.gha` from source, you can open the [Grasshopper File `ServeInterface.gh`](grasshopper/ServeInterface.gh) for testing of this workflow.\n\n\n|                                                          Links                                                          |                              Image                              |\n| :---------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------: |\n|             [Vue.js UI](GHUI/Web%20UI/InputVue.html) -  [ServeInterface.gh](grasshopper/ServeInterface.gh)              |             ![Vue.js UI](assets/images/vue-ui.png)              |\n|       [Bootstrap HTML UI](GHUI/Web%20UI/InputBootstrap.html) - [ServeInterface.gh](grasshopper/ServeInterface.gh)       |         ![Bootstrap UI](assets/images/bootstrap-ui.png)         |\n| [Vanilla HTML UI](GHUI/Web%20UI/InputBootstrap.html) - [SampleScriptHardcoded.gh](grasshopper/SampleScriptHardcoded.gh) | ![Vanilla HTML UI](assets/images/wall-calculator-hardcoded.png) |\n\n\n### Grasshopper-Created UI\n\nThis method of using the package is closer to the familiar Grasshopper UI paradigm, as established by Andrew Heumann in\n[Human UI](https://bitbucket.org/andheum/humanui/src/master/). The goal is that the user can use Grasshopper to build a fully-functional \nHTML-based interface without needing to write any kind of textual code. This is still a **Work-In-Progress** \nand will remain that way for quite some time as there are very many elements that must be supported.\n\n|                       Grasshopper Definition                       |                           Image                            |\n| :----------------------------------------------------------------: | :--------------------------------------------------------: |\n|       [Custom GH UI](grasshopper/CreateInterfaceComplex.gh)        |   ![Custom GH UI](assets/images/created-ui-complex.png)    |\n| [Advanced Custom GH UI](grasshopper/CreateInterfaceMoreComplex.gh) | ![Custom GH UI](assets/images/created-ui-more-complex.png) |\n\n\n## Support Map\n\nCurrently, the following UI (HTML) [input components](https://www.w3schools.com/html/html_form_input_types.asp) are supported in \nthe specified contexts:\n\n\n| Component    | Read Value from HTML | Create in GH | Set Value from GH Output | Set Label/Props from GH Output |\n| ------------ | -------------------- | ------------ | ------------------------ | ------------------------------ |\n| Slider       | Yes                  | Yes          | Yes                      | No                             |\n| Button       | Yes                  | Yes          | No (Simulate Click)      | No                             |\n| Text Input   | Yes                  | Yes          | Yes                      | No                             |\n| Radio Button | Yes                  | Yes          | Yes                      | No                             |\n| Check Box    | Yes                  | Yes          | Yes                      | No                             |\n| Color        | Yes                  | Yes          | Yes                      | No                             |\n| Date         | Yes                  | Yes          | Yes                      | No                             |\n| Time         | Yes                  | Yes          | Yes                      | No                             |\n| Week         | Yes                  | No           | TBD                      | No                             |\n| File         | Maybe                | No           | Maybe                    | No                             |\n| Text Label   | N/A                  | Yes          | Yes                      | N/A                            |\n\n\n\n## Tentative Roadmap\n\n### Abstract\n\nHuman UI from Andrew Heumann has been a powerful force in the industry over the last X years - it helps us share and democratize\ncomputational know-how and deliver it to our colleagues who may not be as techincally inclined. I think it's\ntime for the next step in this journey. With the web becoming the standard for app development, interaction design,\nand so much more - I think it makes sense to use it as the backbone for the project.\n\n### Roadmap\n\n- Ensure a Chromium-based execution environment.\n- Read values from the DOM.\n- Account for most common input-type items that may be in the DOM/needed by users.\n- Add elements/outputs to the DOM.\n- Create components to build an interface/DOM using Grasshopper only (no web dev knowledge).\n\n## Known Issues\n\n- [GitHub Issues](https://github.com/mitevpi/gh-web-ui/issues)\n\n### Credits\n\nEnormous thanks to everyone who has contributed in any way! I've tried to include everyone here, but I may have missed someone.\nIf that's the case, I apologize :) - please reach out anytime.\n\n- [Deyan Nenov](https://www.linkedin.com/posts/petr-mitev_chromium-rhino-grasshopper-activity-6779450476074205184-J6Ek)\n- [Christopher Connock](https://twitter.com/ChrisConnock/status/1374050893742669824)\n- [Ehsan Iran-Nejad](https://www.linkedin.com/in/eirannejad/)\n- [Andrew Heumann (Obviously)](https://twitter.com/andrewheumann)\n- Andrea Botti\n- [Everyone Who's Contributed to the GitHub Issues](https://github.com/mitevpi/gh-web-ui/issues)\n- You (Thank you for browsing this project and getting this far in the readme!)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitevpi%2Fgh-web-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmitevpi%2Fgh-web-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitevpi%2Fgh-web-ui/lists"}