diff --git a/src/.vitepress/sidebar/en.js b/src/.vitepress/sidebar/en.js index 5ffaedf7..9c291032 100644 --- a/src/.vitepress/sidebar/en.js +++ b/src/.vitepress/sidebar/en.js @@ -96,6 +96,7 @@ export default { { text: 'How to Use a Phone Call Link', link: '/layer/phone-call-link/' }, { text: 'How to Link Multiple Records to One Feature (1-N Relations)', link: '/layer/one-to-n-relations/' }, { text: 'How to Embed an Image', link: '/layer/embed-image/' }, + { text: 'How to Use Image Guides in the Form', link: '/layer/image-guide/' }, ] }, ] }, { diff --git a/src/index.md b/src/index.md index ae4f0388..4db1a859 100644 --- a/src/index.md +++ b/src/index.md @@ -94,6 +94,7 @@ The ecosystem consist of various components: - [How to Use a Phone Call Link ](./layer/phone-call-link/) - [How to Link Multiple Records to One Feature](./layer/one-to-n-relations/) - [How to Embed an Image](./layer/embed-image/) + - [How to Use Image Guides in Form](./layer/embed-image/) ## Fieldwork Tips - [ Interface](./field/mobile-app-ui/) diff --git a/src/layer/image-guide/index.md b/src/layer/image-guide/index.md new file mode 100644 index 00000000..26300ba8 --- /dev/null +++ b/src/layer/image-guide/index.md @@ -0,0 +1,64 @@ +--- +description: See how to set up an image guide in the attributes form to display reference pictures while collecting data in the field. +outline: deep +--- + +# How to Use Image Guides in the Form + +When collecting data in the field, it may be useful to have a visual guide as a reference to ensure that correct information is entered in the form. For example, when collecting information about trees, it may help to see a reference photo of the tree trunk to identify the type of tree correctly. + +:::tip Example project available +Clone to explore this setup. +::: + +![Mergin Maps mobile app form with image guide](./mobile-image-guide.gif "Mergin Maps mobile app form with image guide") + +## Data, layers, and attributes +In this scenario, we want to include a photo guide in the form so that users can compare the type of a tree trunk to a reference picture while collecting data in the field. + +The project contains: +- a survey layer (here: `trunk_type.gpkg`) with the form configured to display or hide the image guide +- a table (here: `list.gpkg`) that is used as a [value relation](../value-select/#value-relation) in the survey layer's attributes form, so that users can choose a tree type from a drop-down menu +- a reference photo for each type of tree, stored in the project folder and packaged with the project + +![Mergin Maps project folder](./project-folder.webp "Mergin Maps project folder") + +The survey layer (here: `trunk_type`) has following fields: +- `type` to store a the tree type +- `photos` to store a photo of the surveyed tree +- `display` used to display or hide the image guide +- `date` to store the survey date +- `image_guide_xy` to display the reference image of the specific tree trunk type. There is a separate field for each type. + +![Survey layer fields](./qgis-layer-fields.webp "Survey layer fields") + +## Attributes form configuration in QGIS + +We use the **Drag and Drop Designer** option in the **Attributes Form** tab of **Layer Properties** to configure the form. + +The image guide is set up as follows: +- The `display` field uses the [checkbox](../checkbox/) widget with *true* and *false* values. + + The alias of the field is set to *Show me photo guide*. + + ![Checkbox widget used to display image guide](./qgis-form-checkbox.webp "Checkbox widget used to display image guide") + +- The [tab](../tabs-and-groups/) named `Photo guide` is used to group all `image_guide_xy` fields. + + The tab uses [conditional visibility](../conditional-visibility/) so that the image guide is displayed only when `display = 'true'` + + ![Attributes form conditional visibility](./qgis-form-conditional-visibility.webp "Attributes form conditional visibility") + +- The photo guide fields `image_guide_xy` use the [Attachment](../photos/#photo-attachment-widget-in-qgis) widget with *Relative* paths. + + The [Integrated Document Viewer](../photos/#displaying-photos-in-qgis) is set to *Image* to display the picture in the form. + + The [default values](../default-values/) contain the name of the reference picture (such as `scots_pine.png`). This ensures that the image guide is present when a new feature is created. + + ![Image guide items setup - Attachment widget](./qgis-form-image-guide-items.webp "Image guide items setup - Attachment widget") + +## Image guide in the mobile app + +When the form is opened in the , the image guide can be easily displayed and hidden by toggling the **Show me photo guide** checkbox. + +![Mergin Maps mobile app form image guide](./mobile-form-image-guide.webp "Mergin Maps mobile app form image guide") diff --git a/src/layer/image-guide/mobile-form-image-guide.webp b/src/layer/image-guide/mobile-form-image-guide.webp new file mode 100644 index 00000000..556d68cc Binary files /dev/null and b/src/layer/image-guide/mobile-form-image-guide.webp differ diff --git a/src/layer/image-guide/mobile-form-image-guide.xcf b/src/layer/image-guide/mobile-form-image-guide.xcf new file mode 100644 index 00000000..23a168af Binary files /dev/null and b/src/layer/image-guide/mobile-form-image-guide.xcf differ diff --git a/src/layer/image-guide/mobile-image-guide.gif b/src/layer/image-guide/mobile-image-guide.gif new file mode 100644 index 00000000..d62c54b2 Binary files /dev/null and b/src/layer/image-guide/mobile-image-guide.gif differ diff --git a/src/layer/image-guide/project-folder.webp b/src/layer/image-guide/project-folder.webp new file mode 100644 index 00000000..25ceccb3 Binary files /dev/null and b/src/layer/image-guide/project-folder.webp differ diff --git a/src/layer/image-guide/project-folder.xcf b/src/layer/image-guide/project-folder.xcf new file mode 100644 index 00000000..ed73fe5e Binary files /dev/null and b/src/layer/image-guide/project-folder.xcf differ diff --git a/src/layer/image-guide/qgis-form-checkbox.webp b/src/layer/image-guide/qgis-form-checkbox.webp new file mode 100644 index 00000000..b8868dee Binary files /dev/null and b/src/layer/image-guide/qgis-form-checkbox.webp differ diff --git a/src/layer/image-guide/qgis-form-checkbox.xcf b/src/layer/image-guide/qgis-form-checkbox.xcf new file mode 100644 index 00000000..8b0e6561 Binary files /dev/null and b/src/layer/image-guide/qgis-form-checkbox.xcf differ diff --git a/src/layer/image-guide/qgis-form-conditional-visibility.webp b/src/layer/image-guide/qgis-form-conditional-visibility.webp new file mode 100644 index 00000000..911d6deb Binary files /dev/null and b/src/layer/image-guide/qgis-form-conditional-visibility.webp differ diff --git a/src/layer/image-guide/qgis-form-conditional-visibility.xcf b/src/layer/image-guide/qgis-form-conditional-visibility.xcf new file mode 100644 index 00000000..ba13880c Binary files /dev/null and b/src/layer/image-guide/qgis-form-conditional-visibility.xcf differ diff --git a/src/layer/image-guide/qgis-form-image-guide-items.webp b/src/layer/image-guide/qgis-form-image-guide-items.webp new file mode 100644 index 00000000..52480d8f Binary files /dev/null and b/src/layer/image-guide/qgis-form-image-guide-items.webp differ diff --git a/src/layer/image-guide/qgis-form-image-guide-items.xcf b/src/layer/image-guide/qgis-form-image-guide-items.xcf new file mode 100644 index 00000000..1991fa71 Binary files /dev/null and b/src/layer/image-guide/qgis-form-image-guide-items.xcf differ diff --git a/src/layer/image-guide/qgis-layer-fields.webp b/src/layer/image-guide/qgis-layer-fields.webp new file mode 100644 index 00000000..3820aa01 Binary files /dev/null and b/src/layer/image-guide/qgis-layer-fields.webp differ diff --git a/src/layer/image-guide/qgis-layer-fields.xcf b/src/layer/image-guide/qgis-layer-fields.xcf new file mode 100644 index 00000000..606e82ab Binary files /dev/null and b/src/layer/image-guide/qgis-layer-fields.xcf differ diff --git a/src/layer/use-cases/index.md b/src/layer/use-cases/index.md index 09f2492c..08374428 100644 --- a/src/layer/use-cases/index.md +++ b/src/layer/use-cases/index.md @@ -10,5 +10,7 @@ Our step-by-step guides provide detailed descriptions accompanied by public