Skip to main content

Picture

What is the Form Picture?​

The Picture lets the user take a photo with the device camera. The captured photo is stored as an image and exported as the field value.

picture.png

Options​

Accent color​

  • Specifies the accent color used by the widget (for example the take-a-photo button styling and overlay accents).
  • Default: #00a5fe.

Allow recapture​

  • Specifies whether the user can retake or reset a photo after one has been saved.
  • Default: enabled.
  • When enabled, an overlay with a "Take a new photo" button and a "Reset" button appears over the saved photo.
  • When disabled, the saved photo is shown without any retake or reset controls.

Capture Flow​

  • Before a photo is saved, the widget shows a "Take a photo" button. Pressing it opens a "Camera View" modal and requests camera access (getUserMedia with video).
  • While loading the modal shows "Loading...". Once the stream starts, the live camera feed is shown with Take a photo and Cancel buttons.
  • Take a photo captures the current video frame onto a canvas at the camera's native resolution and switches to the captured view, offering Save, Retake, and Cancel buttons.
  • Save stores the captured frame as a base64-encoded PNG image, closes the modal, and exports the value.
  • Retake clears the captured frame and returns to the live feed. Cancel stops the camera and closes the modal without saving.
  • If the camera cannot be accessed (no permission, not connected, or unsupported browser), the modal shows an error: "Unable to access the camera. Please check if it is connected or supported." with a Close button.
  • After saving, if Allow recapture is enabled, the saved photo can be retaken (re-opens the camera) or reset (clears the photo).

Setting Mock Field and Own Value​

The Picture exports both the mock field and an own value. The mock value is the captured photo as a base64-encoded PNG image (data:image/png;base64,...), or an empty string when no photo is saved. The own value is a boolean indicating whether a photo is currently saved. The mock export only runs in the displayer; in the editor it is skipped. This happens:

  • When the Picture is rendered (a stored photo from the datasource, otherwise empty).
  • When a captured photo is saved.
  • When the photo is reset.
  • When an external message tells it to.

Validation​

The Picture doesn't validate itself.

Sensor Events​

The Picture doesn't validate, so it never emits a {FORM-NAME}-valid sensor event. Whenever the value is exported it triggers a value sensor event named after the field ({FORM-NAME}) carrying the image data URL (or an empty string), unless the export was requested silently (by a Reset or Clear command).

External Messages​

The Picture listens to the basic messages, but does not support Set Form.

  • Set Form: Not supported. The message is ignored and a warning is logged.
  • Clear / Reset Form: Both discard the saved photo, clear the value, and update the mock. When the framework requests the update silently, no value sensor event is fired.

Value from Datasource​

The Picture does not bind an external input datasource to generate its content. When the widget is connected to a form output datasource that already holds a photo for this field, that image is loaded and shown as the initial saved photo on render.

Last updated on