Skip to content

ImageAnnotation

image-annotation

Description

Create a image annotation

Attributes

  • $capture.mode: free | defined
  • $capture.attachment: Provide a attachment id to display the image it should valid attachment id else won't show the image.Get attachement id from files from admin panel.
  • $capture.maxWidth: defined a maxWidth for image
  • $capture.maxHeight: defined a maxHeight for image
  • $capture.polygons: defined a polygons list
    • name: name defined mode
    • coordinates: coordinates of polygons
    • color: color of each poly
  • $capture.styles: [Objects]
    • imageContainer: style for the image container.
    • image: style for the image.
  • $capture.isRemoveTitle: true | false
  • $capture.isRemoveBody: true | false
  • $data: [Array Of object] Allow user to select predefined options

Example

{
  "type": "string",
  "$capture": {
    "as": "image-annotation",
    "mode": "defined",
    "attachment": "3a9485db-d989-43f0-ab33-617fcdcaa2e8",
    "maxWidth": "",
    "maxHeight": "",
    "polygons": [
      {
        "coordinate": "344,270,331,349,221,349,233,275",
        "name": "head",
        "color": "#E0600B"
      },
      {
        "coordinate": "417,241,365,293,327,243,365,198",
        "name": "head",
        "color": "#653294"
      },
      {
        "coordinate": "351,78,277,142",
        "name": "head",
        "color": "#AB149E"
      }
    ]
  },
  "title": "image-annotation"
}

Example 1

{
  "type": "string",
  "$capture": {
    "as": "image-annotation",
    "mode": "free",
    "attachment": "42ffa6d9-e28e-4f8f-b028-4015dd887808",
    "maxWidth": "",
    "maxHeight": "",
    "height": "100%",
    "styles": {
      "imageContainer": {
        "height": "calc(100vh - 461px)"
      },
      "image": {
        "objectFit": "contain"
      }
    },
    "rule": {
      "setting": "rule",
      "text": "values.gender is '男'"
    },
    "isRemoveTitle": true
  },
  "$display": {
    "as": "image-annotation"
  },
  "title": "Male-annotate",
  "$data": {
    "source": [
      {
        "display": "cut",
        "value": "cut",
        "tableData": {
          "id": 0
        }
      },
      {
        "display": "puncture",
        "value": "puncture",
        "tableData": {
          "id": 1
        }
      },
      {
        "display": "burn",
        "value": "burn",
        "tableData": {
          "id": 2
        }
      },
      {
        "display": "bruise",
        "value": "bruise",
        "tableData": {
          "id": 3
        }
      }
    ]
  }
}