Skip to main content
Version: Upcoming 🦄

DrawingControl

The DrawingControl is a control element that allows the user to draw on a given image. This can be used to mark damages on a picture.

<div
    id="mark_damage"
    data-hf-control="DrawingControl"
    data-hf-options="{
        label: 'Mark damage with pen',
        width: 226,
        height: 270,
        image: '{{HFFormPath}}/watermeter.png',
        required: true 
    }"
></div>

FormControl Options​

image - required​

Write down the path to connect the field with your picture. The first part of the path represents a placeholder and will be changed at runtime.
How to use:
image: '{{HFFormPath}}/watermeter.png'
Type: string

disabled​

Set "true" whenever the DrawingControl should be disabled.
How to use:
disabled: true
Type: boolean

doNotCopy​

Set "true" whenever the field should get deleted if the Form is copied.
How to use:
doNotCopy: true
Type: boolean

height​

Needs to be set for this control to define the height of the field. The value is defined in pixels.
How to use:
height: 280
Type: number

hidden​

Hide FormControl in Form.
How to use:
hidden: true
Type: boolean

label​

Define a label for your control element.
How to use:
label: 'Mark damage with pen'
Type: string

onChanged​

Call a pre-defined JS-method to do something when the status of the control changes.
How to use:
onChanged: HFFormdefinition.Namespace.Method
Type: function
Signature: function(value: boolean) => void

required​

Set "true" if the control has to be filled in.
How to use:
required: true
Type: boolean

responsive​

Set "true" whenever the DrawingControl should be responsive. It overwrites given width and height values.
How to use:
responsive: true
Type: boolean

tooltip​

Write a comment to provide further information about the field. A question mark will then be shown within the label and with a click/tap on it, the information will occur.
How to use:
tooltip: 'Please indicate at least one cause of damage.'
Type: string

tooltipTemplate​

Write an ID of an HTML container to provide further information about the field. A question mark will then be shown within the label and with a click/tap on it, the content of the container will occur.
How to use:
tooltipTemplate: 'example_control_tooltip'
Type: string

width​

Needs to be set for this control to define the width of the field. The value is in pixels. The maximum is always 460 px.
How to use:
width: 226
Type: number

Stored data

​

<div
    id="mark_damage"
    data-hf-control="DrawingControl"
    data-hf-options="{
        width: 226,
        height: 270,
        image: '{{HFFormPath}}/watermeter.png',
        required: true 
    }"
></div>

For each DrawingControl inside your Forms there are several value pairs of stored data:

The first two value pairs are the default data to be stored – the first pair indicates the DrawingControl has been used …

{
    "id": "mark_damage",
    "value": true
}

… and the second pair stores the information on the created image:

{
    "id": "mark_damage_HFDrawingImageMerged",
    "value": "mark_damage_merged.png"
}

Finally, the third pair stores the information of the strokes:

{
    "id": "mark_damage_HFDrawingStrokes",
    "value": "fabric.Objects"
}