InkControl

<div id="mark_damage" 
    data-win-control="HFWinJSCtrl.InkControl" 
    data-win-options="{
        label: 'Mark damage with pen',
        width: 226,
        height: 270,
        image: '{{HFFormPath}}/watermeter.png',
        required: true,
        clearButton: true,
        defaultColor: '255, 33, 203, 0' 
    }">
</div>

Property	Type	How to use	Description
clearButton	Boolean	clearButton: false	Defines a small button (x) on the bottom left of the picture with which the whole drawing can be deleted. Default is true
disabled	Boolean	disabled: true	Set "true" whenever the InkControl should be disabled. The default value is false.
doNotCopy	Boolean	doNotCopy: true	Set "true" whenever the field should get deleted if form is copied.
eraserButton	Boolean	eraserButton: false	Defines a small toggleable button (Eraser Icon) on the bottom left of the picture with which the latest drawing can be erased. Default is true
defaultColor	argb	defaultColor: '255, 33, 203, 0'	The app default color is red (except for Signatures!). To customize it, use RGB values for the last three entries (33, 203, 0). The first value (255) always remains the same (Alpha value).
height*	Integer	height: 280	Needs to be set for this control to define the height of the field. The value is defined in pixels.
image	Path	image: '{{HFFormPath}}/watermeter.png'	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.
label	String	label: 'Mark damage with pen'	Define a label for your control element.
mapping	Boolean	mapping: true	Set "true" whenever the form element should be visible / editable in the corresponding SharePoint list.
required	Boolean	required: true	Set "true" if the control has to be filled in.
tooltip	String	tooltip: 'Please indicate at least one cause of damage.'	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.
width*	Integer	width: 226	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
onChanged	Method	onChanged: HFFormdefinition.Namespace.Method	Call a pre-defined JS-method to do something when the status of the control changes
saveTimeout	Integer	saveTimeout: 10	Duration in seconds until the inkcontrol is locked and saved. Default is 5 seconds.

* These options are required.

Stored data

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

For each InkControl 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 InkControl has been used …

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

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

{
    "id": "mark_damage_HFInkImage",
    "value": "mark_damage.png"
}

Finally, the third pair stores the information on the image merged with a provided background image

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