PicturePicker

The PicturePicker provides image thumbnails directly within the form data. Insert an image, sketch or map quickly with just a few steps by clicking the particular plus icon.

An annotation written directly to the taken image can be shown or hidden within the form by setting the appropriate property in the data-win-options. Control the thumbnail size by the data-win-option size and enable additional features i.e "sketches" or "maps" or disable the default feature "pictures" by the data-win-option "features".

<div id="picture_no1" 
    data-win-control="HFWinJSCtrl.PicturePicker" 
    data-win-options="{
        label: 'Pic #1',
        features: ['picture', 'sketch','map','audio','document'],
        size: 1,
        showComment: true 
    }"></div>

FormControl Options

dataCallback

Call a JS-method for data changes in feature items. E.g. when the location in a map is changed.

How to use: dataCallback: HFFormdefinition.Namespace.Method

Type: function

Signature: function(event: IDataCallbackEvent) => void

---

disabled

Set "true" whenever the PicturePicker should be disabled.

How to use: disabled: true

Type: boolean

---

doNotCopy

Set "true" whenever the field should get deleted if form is copied.

How to use: doNotCopy: true

Type: boolean

---

features

Set "features" whenever the PicturePicker should reference to one or all of the features "picture","sketch", "map", "audio", "model", "documents" or "camera" for directly taking a picture by listing those in the array. Default link is set to the picture gallery.

How to use: ['picture', 'camera', 'sketch', 'map', 'audio', 'document']

Type: ('picture' | 'camera' | 'sketch' | 'map' | 'audio' | 'document' | 'model')[]

---

hidden

Hide FormControl in Form.

How to use: hidden: true

Type: boolean

---

label

Define a label for your control element.

How to use: label: 'Pic #1'

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: string) => void

---

referenceAddition

Add a custom string to reference section of the attachment.

How to use: referenceAddition: 'Example addition'

Type: string

---

showComment

Set "true" to show annotations beyond the taken picture, sketch or map within the form.

How to use: showComment: true

Type: boolean

---

size

Set "size" to change the display size in your form. You can choose between the values 1 to 4.

How to use: size: 1

Type: boolean

Default: 2

Note

The data-win-option size: 1 offers the smallest size, use this value to place four PicturePicker Controls inside a row (grid column4 e.g.)
The data-win-option size: 2 is equivalent to the former size of the PicturePicker Control, three controls can be implemented in one row without layout problems.
Use size: 3 to place two controls in one row and finally size: 4 to offer the largest PickerPicture Control, it uses the whole available space inside a block i.e. 460px width.

dataCallback Types

export enum DataCallbackType {
    FeatureAdded = 'featureAdded',
    RemarkChanged = 'remarkChanged',
    ObjectLinkChanged = 'objectLinkChanged',
    FilenameChanged = 'filenameChanged',
    MapLocationChanged = 'map:locationChanged',
    MapRouteChanged = 'map:routeChanged',
    ModelObjectSelecetd = 'model:objectSelected',
}

export interface IDataCallbackEvent {
    type: DataCallbackType;
    data: any;
}

Picture Picker - "size: 1"

Picture Picker - "size: 1"

Picture Picker - "size: 2"

Picture Picker - "size: 2"

Picture Picker - "size: 3"

Picture Picker - "size: 3"

Picture Picker - "size: 4"

Picture Picker - "size: 4"

Hint

Labels for this element can be set extra Labels.