Eto.Forms Styling

Grasshopper
#1

Hi All,

Is there documentation/tutorials somewhere that would show me how to go from the standard Eto.Forms to something like the attached image? Credits to @agi.andre

screen2
screen2920×716 492 KB

http://andreagi.se/work_etos_forms.html

2 Likes
#2

Hi Jordan
This is all done with the WebView Class: http://pages.picoe.ca/docs/api/html/T_Eto_Forms_WebView.htm
It allows you to style the form with HTML, CSS.

The you can invoke python functions through javascript

1 Like
#4

Very cool! Thanks for answering. I’ll look to it. This should be fun. I’m more familiar with JS, html and css than c# so that’s a relief.

Jordan

#5

Hi @agi.andre,

This is a beautiful styling for a custom interface: congratulations!
What would be the best approach to implement an interface based on WebView for Rhino and Grasshopper plugins?

Is there any tutorial that we can follow or a template available that we can study?

Thanks

#6

You would need to embed a WebView in your panel:

string html =  "<head><meta http-equiv='X-UA-Compatible' content='IE=edge' /><title>Rhino UI</title></head>
<body><p>Runoff limit<input type='range' min='0' max='100' value='50' class='slider' id='runoffLimit'></p></body>";

        WebView webView = new WebView { Height = 1000 };

        public GreenScenarioPanel()
        {

            var layout = new DynamicLayout { DefaultSpacing = new Size(5, 5), Padding = new Padding(0) };

            webView.LoadHtml(html);
            webView.DocumentLoading += (sender, e) =>
            {
                if (e.Uri.Scheme == "greenscenario") //search for markers in html
                {
                    e.Cancel = true; // prevent navigation
                    CommunicateWithWebView(e.Uri.PathAndQuery);
                }
            };

            layout.AddSeparateRow(webView);
            layout.Add(null);
            Content = layout;
        }

In your html add some javascript listeners to tell Rhino, that certain fields were updated by user input:

document.getElementById(‘runoffLimit’).onchange = function() {window.location = ‘greenscenario:runofflimit’;};

In the C# part create a method returning data from the html-based UI to Rhino. In my case:

    private void CommunicateWithWebView(string path)
        {
        switch (path)
        {
            case "runofflimit":
                string text = webView.ExecuteScript("return document.getElementById('runoffLimit').value;");
                Rhino.RhinoApp.WriteLine($"Runoff limit: {text}");
                break;
        }

Here is a quick demo of how it looks like in action:

6 Likes
Eto.WebView vs. "normal" Controls