Eto.Forms Styling

Grasshopper
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:

16 Likes