mitevpi / gh-web-ui Goto Github PK

View Code? Open in Web Editor NEW

122.0 12.0 24.0 5 MB

Package for building web-based User Interfaces (UI) in Rhino Grasshopper.

License: GNU General Public License v3.0

C# 80.11% HTML 16.40% JavaScript 3.49%

grasshopper rhino 3d html ui interface visual-programming ui-ux dotnet csharp

gh-web-ui's Introduction

Grasshopper Web UI

Prototype for building a Grasshopper interface using native web components.

Development

Clone locally
Re-link and restore dependencies
Build (everything shoudl copy to the Grasshopper/Libraries location)
Open the ServeInterface.gh

Usage

Build/Use

If you need/want to make modifications/contributions to this package, please refer to the Development section above.

If you just want to use the package, please refer to the Releases section of GitHub. From there, download the latest release, unzip the file, and paste the contents into %appdata%\Grasshopper\Libraries.

Hard-Coded UI

The simplest way to use this package is as a dedicated input-receiver by supplying a hard-coded HTML file. This would allow you to read user inputs, but not add any information to the interface. It would require that you or someone else on your team has basic web-coding skills, as they're needed to write the interface. Samples of these kinds of interfaces can be found in the Web UI folder.

After building the .gha from source, you can open the Grasshopper File ServeInterface.gh for testing of this workflow.

Links	Image
Vue.js UI - ServeInterface.gh
Bootstrap HTML UI - ServeInterface.gh
Vanilla HTML UI - SampleScriptHardcoded.gh

Grasshopper-Created UI

This method of using the package is closer to the familiar Grasshopper UI paradigm, as established by Andrew Heumann in Human UI. The goal is that the user can use Grasshopper to build a fully-functional HTML-based interface without needing to write any kind of textual code. This is still a Work-In-Progress and will remain that way for quite some time as there are very many elements that must be supported.

Grasshopper Definition	Image
Custom GH UI
Advanced Custom GH UI

Support Map

Currently, the following UI (HTML) input components are supported in the specified contexts:

Component	Read Value from HTML	Create in GH	Set Value from GH Output	Set Label/Props from GH Output
Slider	Yes	Yes	Yes	No
Button	Yes	Yes	No (Simulate Click)	No
Text Input	Yes	Yes	Yes	No
Radio Button	Yes	Yes	Yes	No
Check Box	Yes	Yes	Yes	No
Color	Yes	Yes	Yes	No
Date	Yes	Yes	Yes	No
Time	Yes	Yes	Yes	No
Week	Yes	No	TBD	No
File	Maybe	No	Maybe	No
Text Label	N/A	Yes	Yes	N/A

Tentative Roadmap

Abstract

Human UI from Andrew Heumann has been a powerful force in the industry over the last X years - it helps us share and democratize computational know-how and deliver it to our colleagues who may not be as techincally inclined. I think it's time for the next step in this journey. With the web becoming the standard for app development, interaction design, and so much more - I think it makes sense to use it as the backbone for the project.

Roadmap

Ensure a Chromium-based execution environment.
Read values from the DOM.
Account for most common input-type items that may be in the DOM/needed by users.
Add elements/outputs to the DOM.
Create components to build an interface/DOM using Grasshopper only (no web dev knowledge).

Known Issues

GitHub Issues

Credits

Enormous thanks to everyone who has contributed in any way! I've tried to include everyone here, but I may have missed someone. If that's the case, I apologize :) - please reach out anytime.

Deyan Nenov
Christopher Connock
Ehsan Iran-Nejad
Andrew Heumann (Obviously)
Andrea Botti
Everyone Who's Contributed to the GitHub Issues
You (Thank you for browsing this project and getting this far in the readme!)

gh-web-ui's People

Contributors

Stargazers

Watchers

gh-web-ui's Issues

Dependencies not working?

Hi!

I compiled the code and when I show my first window I got this:

I tried installing WebView2 from here: https://developer.microsoft.com/en-us/microsoft-edge/webview2/ and it works now. But this seems to be a problem because it could mean that the dependencies are not being referenced correctly or that something is missing, I don't know, but I guess you don't want users to have to download this to make it work. You had installed this? maybe if you try uninstalling it you can reproduce the error on your machine.

Since your ServerInterface.gh file references a path on your local machine and the button value is set to true I got another error that crashed Rhino. I had to open the definition with the solver locked to change it to my local path and it works now. I think you should set the buttons that launch windows to false before saving and a few notes explaining that they reference the path on their computer.

I had started playing with web interfaces for my Peacock plugin a while ago and coming across this made my day 😄. I'm going to keep exploring and give you more feedback, it would be awesome to use it as the face of my plugin. 🔥 🔥 🔥

When I open each file I got "Input parameter chunk is missing. Archive is corrupt." gh messages.
SampleScriptVanilla.gh doesn't contain any of your components, it is this intentional?
Openning SampleScriptHardCoded.gh I got an OutOfRange exception (SettersDefineComponent class, line 50), since the merge component only receive 2 values instead of 3. IMO you should include a component error if ids.Count != vals.Count instead of let GH (or VS while debugging) handle this error, because normal users won't know what's going on. I am adding these validators myself in case you want to do a merge later.
The file CreateInterfaceComplex.gh contains what it seams other version of text component called "Create Label", which its last input is "css" but the data type is number so it throws a conversion error. It is fixed in CreateInterfaceMoreComplex.gh file.
Closing windows doesn't work until I set to false the show input.
It is compiled for RH7, there is some reason or it can be compiled for RH6 as well?
Components with Id input, should not be empty as default and optional? It is confusing having id="slider".
Components with name input, should not be its component name rather than "slider"?
As a suggestion that I bet you already thought, components to have css preset styles.