Eto.WebView vs. "normal" Controls

Hi,
I’m kind of new to the User Interface Design within Rhino. And I was wondering, how you guys approaching this.

To me, there are basically two apporaches, that I can make out from the discussion.

ETO Controls
In terms of design, I have trouble making Eto do what I want visually. For example, if I set up a button, I have no control on the “edge fillets” to determine how a button should be displayed.
Also the visual beaviour when resizing a window seems harder to control.

This is possible with Eto
image
This is not possible with “plain” Eto
image

ETO Webview Control
As I understand, If I want to go for more sophisticated designs I can realize this with WebView controls
though HTML, CSS and JS. I can pretty much create everything visually I can think of and link it to events in C# Code. I believe the Grasshopper Remote Control is realized with this technology. (Correct?)

So here are my questions:

  • When using the WebView, do you use for the “master” layout, or do you just use it “per component” and organize your controls in Eto Layouts?

  • Do you use any frameworks to generate HTML, or do you use a straight forward apporach with stringbuilders?

  • Is there any known issues with the WebView approach, when using it on MAC?

Thanks for your feedback.

Martin

The GH Remote control panel is not using a WebView.

As someone who’s made Rhino UIs with WebViews (and like doing so) if you are only targeting Rhino for Mac and Windows, I would strongly suggest using ETO. If you look at David’s videos on YouTube, GH2 is using ETO controls for everything. This isn’t to say there isn’t a lot of customization, but you can get your fillet corner buttons in there somehow.

You might get some hints from this thread: Eto Forms Styling - #7 by curtisw

1 Like

@MartinIC,
I’ve experimented with both approaches recently and here is a summary of my findings so far:

WebView works quite nicely, but the version of Eto embedded in Rhino by default relies on IE under the hood. This makes things a bit more cumbersome to set up and requires a few hacks to get things to display properly. Having said that, you have ultimate control over the UI with JS/CSS:

More details here:

While working with pure Eto, you can try the approach linked to by @fraguada. It allows for some basic style overrides. If you want more flexibility, you’ll need to derive from a Drawable and paint your own controls with custom functionality. I suspect, that this is how @DavidRutten created the entire GH2 UI Here is my take on a Slider/Stepper/Text Box combo:

2 Likes

Is there any examples in python on how to create and use custom GUI with ETO?
the standard looks like UI from windows 98 haha.

Hi @tsrchapman,

Try searching Discourse.

https://discourse.mcneel.com/search?q=eto%20python

– Dale