Image Choice

Prompt the operator to select one option from visual image cards during test execution for defect classification in TofuPilot.

Usage

You can create an image choice component with image_choice:

ui:
  components:
    - key: cable_type
      type: image_choice
      label: "Select Cable Type"
      required: true
      options: 
        - label: "Ribbon"
          value: "ribbon"
          image: ./images/cable-ribbon.jpg
        - label: "Flat Flex (FFC)"
          value: "ffc"
          image: ./images/cable-ffc.jpg
        - label: "Wire Harness"
          value: "harness"
          image: ./images/cable-harness.jpg

The operator sees a grid of image cards and selects one. The selected card is highlighted with a border.

Properties

Display

You can configure how the image choice component appears to the operator.

Property	Type	Required	Description
`key`	`string`	Yes	Unique identifier for accessing the value
`type`	`string`	Yes	Must be `"image_choice"`
`label`	`string`	No	Display label above the grid
`description`	`string`	No	Helper text displayed below the label
`placeholder`	`string`	No	Text shown while images are loading or missing
`columns`	`number`	No	Number of grid columns. Auto: 2 (≤4 options), 3 (5-9), 4 (10+)
`width`	`string`	No	Grid container width (e.g., `"80%"`, `"100%"`)
`aspect`	`string`	No	Aspect ratio per card: `"16/9"`, `"4/3"`, `"3/4"`, `"2/3"`, `"9/16"`, `"square"` (default), `"auto"`
`fit`	`string`	No	How image fills each card: `"contain"` (default), `"cover"`, `"fill"`

Value

You can set default values and bind to measurements or unit properties.

Property	Type	Required	Description
`default_value`	`string`	No	Default selected option value
`bind`	`string`	No	Bind to unit property or measurement. See Collect Input for details.

Options

You can define the list of image cards to choose from (max 12).

Property	Type	Required	Description
`options`	`array`	Yes	Array of option objects

Each option object has:

Property	Type	Required	Description
`label`	`string`	No	Text displayed below the image
`value`	`string`	Yes	Value submitted when selected
`image`	`string`	No	Relative path to image file (relative to procedure directory)

Validation

You can validate selection before the value is submitted.

Property	Type	Required	Description
`required`	`boolean`	No	If true, operator must select an option

Examples

Connector Identification

We'll let the operator identify the connector type with reference images:

phases:
  - name: Connector Inspection
    ui:
      components:
        - key: connector_type
          type: image_choice
          label: "Which connector is installed?"
          description: "Compare the physical connector to the reference images"
          required: true
          columns: 4
          aspect: square
          fit: contain
          options: 
            - label: "USB-A"
              value: "usb_a"
              image: ./images/connectors/usb-a.png
            - label: "USB-C"
              value: "usb_c"
              image: ./images/connectors/usb-c.png
            - label: "Lightning"
              value: "lightning"
              image: ./images/connectors/lightning.png
            - label: "Micro-USB"
              value: "micro_usb"
              image: ./images/connectors/micro-usb.png

Color Selection Without Labels

We'll let the operator pick a color using images only:

phases:
  - name: Color Selection
    ui:
      components:
        - key: color
          type: image_choice
          label: "Pick a color"
          required: true
          aspect: square
          fit: cover
          options: 
            - value: "red"
              image: ./images/colors/red.png
            - value: "blue"
              image: ./images/colors/blue.png
            - value: "green"
              image: ./images/colors/green.png

How is this guide?

Image Choice

On this page