Image Checklist

Prompt the operator to select multiple options from visual image cards during test execution for multi-point inspection in TofuPilot.

Usage

You can create an image checklist component with image_checklist:

ui:
  components:
    - key: detected_defects
      type: image_checklist
      label: "Select all defects found"
      options: 
        - label: "Scratch"
          value: "scratch"
          image: ./images/defects/scratch.svg
        - label: "Dent"
          value: "dent"
          image: ./images/defects/dent.svg
        - label: "No defect"
          value: "none"
          image: ./images/defects/ok.svg

The operator sees a grid of image cards and can select multiple. Selected cards are highlighted with a border. The value is an array of selected option values.

Properties

Display

You can configure how the image checklist appears to the operator.

Property	Type	Required	Description
`key`	`string`	Yes	Unique identifier for accessing the value
`type`	`string`	Yes	Must be `"image_checklist"`
`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`	`array`	No	Array of default selected option values
`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 at least one option

Examples

Defect Detection

We'll let the operator flag all visible defects:

phases:
  - name: Defect Detection
    ui:
      components:
        - key: detected_defects
          type: image_checklist
          label: "Select all defects found"
          description: "Tap every defect type that matches what you see"
          required: false
          columns: 3
          aspect: "4/3"
          fit: cover
          options: 
            - label: "Surface scratch"
              value: "scratch"
              image: ./images/defects/scratch.jpg
            - label: "Dent"
              value: "dent"
              image: ./images/defects/dent.jpg
            - label: "Discoloration"
              value: "discoloration"
              image: ./images/defects/discoloration.jpg
            - label: "Missing label"
              value: "missing_label"
              image: ./images/defects/missing-label.jpg
            - label: "No defect"
              value: "none"
              image: ./images/defects/ok.jpg

Component Verification

We'll let the operator confirm which components are present:

phases:
  - name: Component Check
    ui:
      components:
        - key: components_present
          type: image_checklist
          label: "Confirm all components present"
          required: true
          aspect: square
          fit: contain
          options: 
            - label: "Main board"
              value: "main_board"
              image: ./images/components/main-board.png
            - label: "Power supply"
              value: "power_supply"
              image: ./images/components/power-supply.png
            - label: "Ribbon cable"
              value: "ribbon_cable"
              image: ./images/components/ribbon-cable.png

How is this guide?

Image Checklist

On this page