Tutorial 2

Input list

Form elements that use a set of options like radio buttons and dropdowns can be created using Input lists. In this tutorial, we create a tool that includes a radio button with two options.

Step 1: Main script

Like in , a python function defines the tool. In this case we take the variables shape, r and h and calculate the surface area of either a cone or a cylinder.

import math

def main_function(input_dict):

    shape = input_dict['shape']
    r = input_dict['r']
    h = input_dict['h']

    if shape == 'cone':
        a = math.pi * r * (r + math.sqrt(r ** 2 + h ** 2))
    if shape == 'cylinder':
        a = 2 * math.pi * r * (r + h)

    print(f"The surface area of a {shape} = {a:.1f}")

    return

Step 2: Info tab

An info tab containing a HTML table shows the user the difference between a cone and a cylinder with their attributes and formula to calculate the surface area.

<table class="table">
	<thead>
		<tr>
			<th>Shape</th>
			<th>Formula</th>
			<th>Variables</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cylinder<br>(incl. bottom and top)</td>
			<td><i>A = 2&pi;r(r+h)</i></td>
			<td>
				<a title="Ag2gaeh, CC BY-SA 4.0 <https://creativecommons.org/licenses/by-sa/4.0>, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Zylinder-1-tab.svg"><img width="128" alt="Zylinder-1-tab" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Zylinder-1-tab.svg/128px-Zylinder-1-tab.svg.png"></a>
			</td>
		</tr>
		<tr>
			<td>Cone<br>(incl. bottom)</td>
			<td><i>A = &pi;r(r+&radic;(r<sup>2</sup>+h<sup>2</sup>))</i></td>
			<td>
				<a title="Ag2gaeh, CC BY-SA 4.0 <https://creativecommons.org/licenses/by-sa/4.0>, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Kegel-1-tab.svg"><img width="128" alt="Kegel-1-tab" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Kegel-1-tab.svg/128px-Kegel-1-tab.svg.png"></a>
			</td>
		</tr>
	</tbody>
</table>

Step 3: Input parameters and graphical user interface

The arguments r, h and shape that are used in the python function need to be defined as input variables. For shape, well select input type radio.

Step 4: Input list

At this point, the form element for shape only shows the label ‘Shape’. We want to provide the user two radiobuttons which will set the value of shape either to ‘cone’ or ‘cylinder’. This can be achieved by adding an input list.

In this case we limit the input list to one level which basically means it’s a list of options. These options can be provided in a JSON script as shown below. The JSON object should include a list with the name ‘choices’. The list itself contains objects with at least the names ‘id’ and ‘name’. ‘id’ is the actual value provided in the input dictionary. Name is the name used in the form element.

{
  "choices": [
    {
      "id": "cylinder",
      "name": "Cylinder"
    },
    {
      "id": "cone",
      "name": "Cone"
    }
  ]
}

Result

Fill the form and click ‘Calculate’ in the embedded tool below or click here .