Viewer API: UI parameters. Checklist

Grasshopper ShapeDiver
1

Following youtube excellent tutorial: ShapeDiver Viewer API | Ep. 2 - Parameters
we were able to render a UI for parameters type boolean, number, color, string, stringlist and fleparameter.
Now we can translate a ValueList (type dropdown list) of the model into a dropdown menu in the UI.
We want to do the same with a ValueList (type checklist) of the model that in grasshopper allows multiple choice. Can you help us finding some example and/or documentation?
Thank you for your time.

2

Hello shapediver team.
We need some help to develop what you teach on youtuve tutorial about ValueList type dropdown but for type checklist.

3

The checklist value list Grasshopper components comes in a similar way to the ShapeDiver API as other value list. The only differences are the visualization property (set to checklist) and that its value is not a single integer index but a string containing a comma-separated list of integer indexes:

image
image1497Ɨ598 43.7 KB

Since the checklists type for value lists is exotic, it was not included in the tutorial and associated code example. I added it to the code example here.

In the code example above, I mapped a checklist to the HTML select element with the multiple property. Note that you can instead use a series of checkboxes but this would complicate the code a little in terms of sending and retrieving values from the ShapeDiver API. I will leave this as homework :slight_smile: .

Pay attention in particular to lines 89-105 for creating the select element and setting its default values:

parameterInputElement = document.createElement("select");
parameterInputElement.setAttribute("id", parameterObject.id);
parameterInputElement.setAttribute("multiple", "");
var vals = parameterObject.value.split(",").map(Number);
for (let j = 0; j < parameterObject.choices!.length; j++) {
  let option = document.createElement("option");
  option.setAttribute("value", j + "");
  option.setAttribute("name", parameterObject.choices![j]);
  option.innerHTML = parameterObject.choices![j];
  if (vals.includes(j)) option.setAttribute("selected", "");
  parameterInputElement.appendChild(option);
}

And check on lines 111-125 how to build and send the string with comma-separated values to update the parameter in the model:

if (parameterObject.visualization == "checklist") {
  let val = "";
  for (
    var i = 0, iLen = parameterObject.choices.length;
    i < iLen;
    i++
  ) {
    let choice = parameterObject.choices[i];
    if (parameterInputElement.options[i].selected) {
      if (val == "") val = i.toString();
      else val = val + "," + i.toString();
    }
  }
  parameterObject.value = val;
}

Let me know if you have further questions.

1 Like