Camera Component

Introduction

The Camera Component in CargoXplorer allows users to capture images directly within the application. This component is essential for functionalities that require image capturing, such as documenting shipments, verifying packages, or any scenario where visual confirmation is necessary. Leveraging the Camera Component ensures seamless integration with other system actions like file uploads and data storage.

YAML Structure

The Camera Component is configured using YAML within the CargoXplorer framework. Below is the general structure of the Camera Component configuration:

component: camera
props:
  width: <number>
  height: <number>
  onCapture:
    - <action_sequence>
  onClose:
    - <action_sequence>

Structure Breakdown

Element	Type	Description
component	String	Specifies the component type (camera).
props	Object	Contains properties and event handlers for the component.
width	Number	The width of the camera viewport in pixels.
height	Number	The height of the camera viewport in pixels.
onCapture	Array of Actions	Actions to execute upon capturing an image.
onClose	Array of Actions	Actions to execute when the camera is closed.

Attribute Description

component

• Type: string
• Description: Identifies the component type. For the Camera Component, this should always be set to camera.

props

• Type: object
• Description: Contains all configurable properties and event handlers for the Camera Component.

width

• Type: number
• Default: 800
• Description: Defines the width of the camera viewport in pixels.

height

• Type: number
• Default: 600
• Description: Defines the height of the camera viewport in pixels.

onCapture

• Type: array

• Description: Specifies a sequence of actions to execute when an image is successfully captured. Typically includes actions like uploading the file and updating the application state.

  • Example Actions:
    • fileUpload: Uploads the captured image to storage.
    • setStore: Updates the application store with the image URL.

onClose

• Type: array

• Description: Specifies a sequence of actions to execute when the camera interface is closed without capturing an image.

  • Example Actions:
    • setStore: Resets or updates the store based on the closure event.
    • navigateBackOrClose: Navigates back to the previous screen or closes the dialog.

Examples

Basic Configuration

component: camera
props:
  width: 1024
  height: 768
  onCapture:
    - fileUpload:
        file: "{{ result.data }}"
        name: "image"
        onSuccess:
          - setStore:
              image: "{{ result.url }}"
  onClose:
    - navigateBackOrClose:
        result: "camera_closed"

Advanced Configuration with Conditional Actions

component: camera
props:
  width: 1280
  height: 720
  onCapture:
    - fileUpload:
        accept: ".jpg,.png"
        maxSize: 10
        multiple: false
        onSuccess:
          - if: "{{ result.size > 5 }}"
            then:
              - notification:
                  message: "Image uploaded successfully!"
                  variant: success
            else:
              - notification:
                  message: "Image size is too small."
                  variant: warning
          - setStore:
              capturedImage: "{{ result.url }}"
        onError:
          - notification:
              message: "Failed to upload image."
              variant: error
  onClose:
    - dialog:
        name: "closeConfirmation"
        props:
          title: "Confirm Close"
          message: "Are you sure you want to close the camera?"
        onConfirm:
          - navigateBackOrClose:
              result: "closed_by_user"
        onCancel:
          - notification:
              message: "Closure canceled."