Image

You can create an image display with image:

ui:
  components:
    - key: reference_image
      type: image
      label: "Reference PCB Image"
      description: "Compare your unit to this reference image"
      value: "./reference.png"
      width: 80%
      aspect: 16/9

Properties

Display

You can configure how the image appears to the operator.

Property	Type	Required	Description
`key`	`string`	Yes	Unique identifier for updating the image
`type`	`string`	Yes	Must be `"image"`
`label`	`string`	No	Display label above the image
`description`	`string`	No	Helper text displayed below the label
`placeholder`	`string`	No	Text shown while image is loading
`width`	`string`	No	Container width (e.g., `50%`, `100%`, default: `100%`)
`height`	`string`	No	Container height (e.g., `400px`, `800px`)
`aspect`	`string`	No	Aspect ratio (e.g., `"16/9"`, `"4/3"`, `"square"`, `"auto"`)
`fit`	`string`	No	Fit mode: `"contain"`, `"cover"` (default), `"fill"`

Value

You can set default values and update them dynamically from Python.

Property	Type	Required	Description
`value`	`string`	No	Image source (file path or data URI)

TofuPilot supports PNG, JPEG, SVG, and GIF formats.

Examples

Static Reference Image

We'll display a static image from a file:

phases:
  - name: Visual Inspection
    ui:
      components:
        - key: reference_image
          type: image
          label: "Reference PCB Image"
          description: "Compare your unit to this reference image"
          value: "./reference_pcb.png"
          width: 100%
          height: 600px
          fit: contain

        - key: inspection_result
          type: radio
          label: "Does unit match reference?"
          required: true
          options:
            - label: "Match"
              value: "pass"
            - label: "No Match"
              value: "fail"

Camera Capture

We'll capture and display images from a camera:

phases:
  - name: Camera Capture
    python:
      module: capture_image
    ui:
      components:
        - key: captured_image
          type: image
          label: "Captured Unit Image"
          description: "Live image from inspection camera"
          width: 100%
          height: 480px
          fit: contain
          placeholder: "Capturing image..."

import base64
import io

def capture_image(run, camera):
    log.info("Capturing image from camera")

    img = camera.capture()

    buffer = io.BytesIO()
    img.save(buffer, format='PNG')
    img_base64 = base64.b64encode(buffer.getvalue()).decode('utf-8')

    run.ui.captured_image = f'data:image/png;base64,{img_base64}'

How is this guide?