Rhino Web Browser as UI for GH - proof of concept

Hi Guys,

I’ve been looking at various ways of making an alternative for HumanUI for Grasshopper - something easy to create and cross platform.

Today I managed to get an http server to host a page in the built in Rhino Web Browser and extract the form data to control GH:

Pretty cool concept, could let me leverage HTML/CSS/JS tool chains for a UI that can be run anywhere, even remotely.

This uses the GH HTTP server in the BENGESHT components:

For sure just a proof of concept for now - many problems to resolve.

Cheers

DK

(Run Rhino as Admin for this to work)

230723_Rhino browser as UI.gh (15.0 KB)

4 Likes

Looks impressive! Thank you for sharing this with us @kiteboardshaper .
Out of curiosity, how would you run it remotely?
The user would access a webpage, for example: www.kiteboard.com/configurator.html
Once the user sets up all the inputs, he will submit them. Kiteboard_configurator.gh file on your local PC would automatically pick up the submitted inputs, and generate all the needed 3D and production files.
Or did I misunderstand the idea?

Hi Djordje,

That sort of work flow is actually VERY well taken care of with Shapediver, I even have a very useful tool working on there service:

The issue I’m trying to solve here is a little different. I have a Rhino Plugin version of the code running on the above site that uses a HumanUI GUI:

HumanUI is AMAZING for this job, making putting together a GUI no harder than a typical GH script.

HOWEVER - it is Windows ONLY solution and I have bigger market for my tools if they can run native on Rhino for MacOS.

As far as I have looked into ETO (Native Rhino cross platform UI builder) it has a huge learning curve and lacks any real online instruction.

What I’m hoping to do here is leverage the honestly MASSIVE amount of HTML/CSS/JS tools and training available to build a cross platform UI for my project.

Cheers

DK

1 Like

Hi @kiteboardshaper ,
Thank you for the clarification.
Karorocad.online looks quite good! I was not aware of the website.

So the Rhino Plugin version would be an offline alternative, to Karorocad.online?
Would this offline alternative have some advantages that Karorocad.online does not have?

Hi @djordje

Thanks mate - I’m pretty stoked on where these tools are getting too.

Shapediver is great but has some server side restrictions on length of computation and some GH plugins are just not available.

Because of this Rhino Plugin version of KaroroCAD has quite a number of features that are just not possible to run online.

Cheers

DK

1 Like

I understand. The Rhino Plugin version would be the one with more features.
Thank you for sharing all the information. I will keep tracking the KaroroCAD project. Looks like a good example of automation for production product.

1 Like

So, had some fun today and looked further into this concept.

Have got an ETO modeless form launching into Webview from a python script so the control window stays over Rhino.

Have written Slider, Text Box and Button components - which as far as I can recall should be enough to replace all the controls in my current 160+ input parameter Human UI controlled plugin.

What I like with the number input components is they self label with the min/max values which makes upkeep of the UI easy.

On that same thing - with HumanUI I had to write my own validation scripts for the user inputs - HTML gives this for free on the user side - again much easier to maintain.

Cheers

DK

3 Likes

Thanks for sharing! I see a lot of interesting use cases for this.

And since this is web based, the UI could be “beautified” by building it out in Figma or a similar method.

Am I understanding that correctly?

1 Like

mitevpi/gh-web-ui: Package for building web-based User Interfaces (UI) in Rhino Grasshopper. (github.com)

2 Likes

Hi @richard.aubin

I have got WebUI installed on my machine, but it’s best described as unstable. Not really production ready.

What I’m looking at here is producing my own min set of components using Webview and as much as I can pure html.

I believe all I need is to completely replace my HumanUI is:

Text box
Number input
Button
Toggle
Selection

File save and open dialogues can be done with buttons to trigger the Rhino Script UI elements.

My only worry right now is the 3000 character limit on HTML GET requests, as all of the parameters get passed on form submit.

I’ll need to build my own POST capable webserver if I hit that limit.

Cheers

DK

Hi @michaelvollrath

At this stage I don’t believe you could use web frame work for the development, as I end up doing some strange things to keep state between form submits.

But, css styling would be possible as long as it is placed inline with the HTML.

Cheers

DK

Progress!

I now have working toggle buttons (this needed a few attempts to get to work)

Finding path to file to open sorted too.

Two problems to that need work:

1/ Rhino crashes if I try and launch Eto.forms.webview when grasshopper is open - both from GH Python and Rhino Python. No issues to launch from Rhino python before GH is open or to relaunch once it has run once, even if GH open. Weird.

2/ Need a hook to know if/when the Eto.forms.webview has been closed to give option to re-open or close Rhino completely.

From there I need to test if this will actually open and run on MacOS


230727_Web base UI working.gh (33.0 KB)

4 Likes

230730_Web based UI working.gh (29.1 KB)
SO,

Thanks to some help Discourse I’ve solved both of the above issues.

Turns out having the WebUI plugin installed was causing Rhino to try and use the wrong version of ETO.Webview if GH was open - deleting that plugin solved the launching issue.

Subscribing to the onClose event of the ETO.Form now allows me to offer an option to reopen the control window or shut down Rhino (tho this version just gives a warning rather than shutdown)

Some limits:

As the Bengesht Webserver is only outputs HTTP_GET requests to GH and that has a ~2000 character limit on the form return URL. This page is about 350 characters so there will be a limit on the number of controls on a single page. Currently my plugin has 160+ controls and growing - I will run into this limit.

Two ways to get around this:

1/ Create a ‘tabbed’ UI that has different pages for groups of controls - sort of best for a UI that has lots of controls. I’m going to work on this next.

2/ Replace the Bengesht webserver with one that can do POST requests - I’ve had a quick look at this but launching a server from Python locks both GH and Rhino. Launching background processes in Python are currently beyond my skill levels.

I have also today complied this GH script into a .YAK plugin package - with everything working SWEET.

My big question now - will this actually run correctly in Rhino 7 on MacOS??? I need to find a machine to test on…

The attached GH has two dependencies, Bengesht and Metahopper (tho EVERY GH user should have Metahopper installed…)

Cheers

DK

1 Like

OK - some research seems to show that Bengsht and Metahopper are both MacOS OK:

Right - I’ve spent way to much time on this already this week BUT:

I have replicated the controls and tab layout of the HumanUI user interface in my project:

This is looking SO CLOSE to flying as HumanUI replacement for me that is cross-platform.

Cheers

DK

1 Like

@richard.aubin

Here is where my current project is sitting.

Cheers

DK

Eto UI is also cross-platform. you can test this plugin. Synapse | Food4Rhino I wrote my own plugin that Eto UI uses for Grasshopper with customisation for my plugin Grasshopper Gold plugin.New PRONG_HEAD_BUILDER Update Grasshopper Gold V5.0.1 - YouTube :grin:

3 Likes

@Takahiro_Ito thank you, yes, I have had a look/play with Synapse, it’s a great piece of work.

The lack of file opening components was the reason looked past it for my project.

Synapse being ETO based is super powerful but not so simple to setup.

What this project is becoming for ME is something between the Rhino Script Syntax UI elements and HumanUI/Synapse.

Cheers

DK

There is no such thing as a perfect plugin. it is better to write all the necessary Eto UI tools yourself in C#.

1 Like

Further update,

I ran into an issue with the inbuilt web browser for ETO not being compatible with html color picker components. See here for details:

Tho not a must have for my plugin it is nice to be able to preview the kite/wing in its production colors.

With some hacking around in HTML I now a solution that meets my needs:

A drop down menu of a dozen or so pre-defined colours plus the ability to choose a custom colour input from RGB values in a text box - plenty usable for my application.

Next on the plan is to fork my main application, rip the humanUI head off it and graft on this new Frankenstein.

Oh - I should really borrow a Mac and test it on Rhino 7 for MacOS before I do that.

It should work, but…

Cheers

DK

1 Like