diff --git a/src/layer/default-values/mobile-forms-open-file-default-value.jpg b/src/layer/default-values/mobile-forms-open-file-default-value.jpg deleted file mode 100644 index d4d7f568..00000000 Binary files a/src/layer/default-values/mobile-forms-open-file-default-value.jpg and /dev/null differ diff --git a/src/layer/default-values/mobile-forms-open-file-default-value.xcf b/src/layer/default-values/mobile-forms-open-file-default-value.xcf deleted file mode 100644 index 3cd7beb2..00000000 Binary files a/src/layer/default-values/mobile-forms-open-file-default-value.xcf and /dev/null differ diff --git a/src/layer/embed-image/index.md b/src/layer/embed-image/index.md index c9f657e3..85e587db 100644 --- a/src/layer/embed-image/index.md +++ b/src/layer/embed-image/index.md @@ -1,15 +1,47 @@ --- -description: HTML widget can be used to embed an online image in the attributes form of your survey layer. +description: Preview online images in the attributes form of your survey layer using the Attachment or HTML widgets. --- # How to Embed an Image +Online images can be displayed in the attributes form of a survey layer. There are two options: +- [Using the Attachment widget](#using-the-attachment-widget) is a straight-forward option to preview an online image in the form. Tapping the image in the form in the opens the image, so you can explore it in more detail directly in the app. +- [The HTML widget](#using-the-html-widget) uses a link stored in a field to display the image. Tapping the image in the form in the opens the image in a web browser (outside of the app). -The [**HTML widget**](../info-widgets/#html-widget) can be used to display online images in the . +![Mergin Maps mobile app online image preview](./mobile-embed-image.webp "Mergin Maps mobile app online image preview") ::: tip Example project available -Clone to how this works. +Both options are included in our example project . Clone it to see how they work. +::: + +## Using the attachment widget +The attachment widget can be configured to display online images in the form of a survey layer. + +The survey layer needs to have a text field for storing the full URL link (here: `photo`). + +1. Right-click on the survey layer, select **Properties** and go to the **Attributes form** tab. +2. In the list of **Available Widgets** select the text field you want to work with (here: `photo`). +3. In the **Widget Type** tab: + - From the drop-down menu, select the **Attachment** widget + - Store the path as **Absolute path** + - Set the **Integrated Document Viewer** to use the type **Web View** + +![QGIS Attachment widget setup for online images preview](./qgis-form-attachment-widget.webp "QGIS Attachment widget setup for online images preview") + +4. **Apply** the changes + +Online images can now be displayed in the form, both in QGIS (left) and in (right): +![Online image preview in QGIS and in Mergin Maps mobile app](./qgis-mobile-form-online-image-attachment.webp "Online image preview in QGIS and in Mergin Maps mobile app") + +When you click or tap on the image, it will open directly in the form and you can zoom in. + +::: details Image preview in QGIS +Some QGIS versions may not display the preview of the image correctly. This issue does not occur in . Therefore we recommend trying the setup by opening the form in the to make sure it works as intended. ::: +## Using the HTML widget + +The [**HTML widget**](../info-widgets/#html-widget) can be used to display online images in the . + Your layer should contain a text field for storing the full URL link (here: `link`). To show an online image in the form, [add the HTML widget to the form](../info-widgets/) and configure it with this expression (replace `link` with the name of the appropriate field in your layer): @@ -18,9 +50,11 @@ To show an online image in the form, [add the HTML widget to the form](../info-w ``` -Make sure that the HTML widget works before taking it to the field by testing it in the . It should look something like this: +Make sure that the HTML widget works before taking it to the field by testing it in the . It should display the online image both in QGIS (left) and in the (right): + +![HTML widget in QGIS and in Mergin Maps mobile app](./qgis-mobile-form-online-image-html.webp "HTML widget in QGIS and in Mergin Maps mobile app") -![HTML widget in QGIS and in Mergin Maps mobile app](./qgis-mobile-html-form.webp "HTML widget in QGIS and in Mergin Maps mobile app") +When you click or tap on the image, it will open in a web browser. ::: details Image preview in QGIS Some QGIS versions may not display the preview of the image correctly. This issue does not occur in . Therefore we recommend trying the setup by opening the form in the to make sure it works as intended. diff --git a/src/layer/embed-image/mobile-embed-image.webp b/src/layer/embed-image/mobile-embed-image.webp new file mode 100644 index 00000000..1034a694 Binary files /dev/null and b/src/layer/embed-image/mobile-embed-image.webp differ diff --git a/src/layer/embed-image/mobile-embed-image.xcf b/src/layer/embed-image/mobile-embed-image.xcf new file mode 100644 index 00000000..e6e518dc Binary files /dev/null and b/src/layer/embed-image/mobile-embed-image.xcf differ diff --git a/src/layer/embed-image/qgis-form-attachment-widget.webp b/src/layer/embed-image/qgis-form-attachment-widget.webp new file mode 100644 index 00000000..6607a4bc Binary files /dev/null and b/src/layer/embed-image/qgis-form-attachment-widget.webp differ diff --git a/src/layer/embed-image/qgis-form-attachment-widget.xcf b/src/layer/embed-image/qgis-form-attachment-widget.xcf new file mode 100644 index 00000000..55ec2791 Binary files /dev/null and b/src/layer/embed-image/qgis-form-attachment-widget.xcf differ diff --git a/src/layer/embed-image/qgis-mobile-form-online-image-attachment.webp b/src/layer/embed-image/qgis-mobile-form-online-image-attachment.webp new file mode 100644 index 00000000..83859551 Binary files /dev/null and b/src/layer/embed-image/qgis-mobile-form-online-image-attachment.webp differ diff --git a/src/layer/embed-image/qgis-mobile-form-online-image-attachment.xcf b/src/layer/embed-image/qgis-mobile-form-online-image-attachment.xcf new file mode 100644 index 00000000..90062446 Binary files /dev/null and b/src/layer/embed-image/qgis-mobile-form-online-image-attachment.xcf differ diff --git a/src/layer/embed-image/qgis-mobile-form-online-image-html.webp b/src/layer/embed-image/qgis-mobile-form-online-image-html.webp new file mode 100644 index 00000000..e8b0cee2 Binary files /dev/null and b/src/layer/embed-image/qgis-mobile-form-online-image-html.webp differ diff --git a/src/layer/embed-image/qgis-mobile-form-online-image-html.xcf b/src/layer/embed-image/qgis-mobile-form-online-image-html.xcf new file mode 100644 index 00000000..b648c90d Binary files /dev/null and b/src/layer/embed-image/qgis-mobile-form-online-image-html.xcf differ diff --git a/src/layer/embed-image/qgis-mobile-html-form.webp b/src/layer/embed-image/qgis-mobile-html-form.webp deleted file mode 100644 index b33e038f..00000000 Binary files a/src/layer/embed-image/qgis-mobile-html-form.webp and /dev/null differ diff --git a/src/layer/embed-image/qgis-mobile-html-form.xcf b/src/layer/embed-image/qgis-mobile-html-form.xcf deleted file mode 100644 index af9eda11..00000000 Binary files a/src/layer/embed-image/qgis-mobile-html-form.xcf and /dev/null differ diff --git a/src/layer/form-layout/index.md b/src/layer/form-layout/index.md index 85f1832b..73333bda 100644 --- a/src/layer/form-layout/index.md +++ b/src/layer/form-layout/index.md @@ -27,6 +27,10 @@ QGIS Drag and Drop designer is an easy tool for defining the form layouts: The Spacer widget can be useful if you want to have some space between the fields in your form or add a horizontal line. +::: tip Example project available +The spacer widget is used in . +::: + It can be found in *Available Widgets* in the *Other Widgets* section when using the [Drag and Drop Designer](#qgis-drag-and-drop-designer). ![QGIS forms Spacer Widget](./qgis-form-spacer-widget.jpg "QGIS Spacer Widget") @@ -34,4 +38,4 @@ When adding the spacer widget to the form, there is an option to check the **Dra ![QGIS Spacer Widget configuration](./qgis-configure-spacer-widget.jpg "QGIS Spacer Widget configuration") And this is how the spacer widget looks like in the form in QGIS (left) and in the mobile app (right). -![Spacer widget in QGIS and mobile app form](./spacer-widget-forms.jpg "Spacer widget in QGIS and mobile app form") +![Spacer widget in QGIS and mobile app form](./spacer-widget-forms.webp "Spacer widget in QGIS and mobile app form") diff --git a/src/layer/form-layout/spacer-widget-forms.jpg b/src/layer/form-layout/spacer-widget-forms.jpg deleted file mode 100644 index 545a9ebc..00000000 Binary files a/src/layer/form-layout/spacer-widget-forms.jpg and /dev/null differ diff --git a/src/layer/form-layout/spacer-widget-forms.webp b/src/layer/form-layout/spacer-widget-forms.webp new file mode 100644 index 00000000..2b211684 Binary files /dev/null and b/src/layer/form-layout/spacer-widget-forms.webp differ diff --git a/src/layer/form-layout/spacer-widget-forms.xcf b/src/layer/form-layout/spacer-widget-forms.xcf index 577fe798..8d1206b5 100644 Binary files a/src/layer/form-layout/spacer-widget-forms.xcf and b/src/layer/form-layout/spacer-widget-forms.xcf differ diff --git a/src/layer/open-file/index.md b/src/layer/open-file/index.md index a97080a9..1a1a229b 100644 --- a/src/layer/open-file/index.md +++ b/src/layer/open-file/index.md @@ -24,11 +24,11 @@ This setup is used in our public project Open File ``` -![QGIS attributes form open local file using HTML widget](./qgis-form-open-file-html-widget.jpg "QGIS attributes form open local file using HTML widget") +![QGIS attributes form open local file using HTML widget](./qgis-form-open-file-html-widget.webp "QGIS attributes form open local file using HTML widget") In the , you can tap the *Open File* link to open the PDF file using the default application of your device. -![Open a local PDF file in Mergin Maps mobile app](./mobile-forms-open-file-html-widget.jpg "Open a local PDF file in Mergin Maps mobile app") +![Open a local PDF file in Mergin Maps mobile app](./mobile-forms-open-file-html-widget.webp "Open a local PDF file in Mergin Maps mobile app") ## Open local files using default values @@ -47,9 +47,9 @@ This setup is used in our public project Open File' ``` -![QGIS attributes form open local file](./qgis-form-open-file-default-value.jpg "QGIS attributes form open local file") +![QGIS attributes form open local file](./qgis-form-open-file-default-value.webp "QGIS attributes form open local file") In the , you can tap the *Open File* link to open the PDF file using the default application of your device. -![Open a local PDF file in Mergin Maps mobile app](./mobile-forms-open-file-default-value.jpg "Open a local PDF file in Mergin Maps mobile app") +![Open a local PDF file in Mergin Maps mobile app](./mobile-forms-open-file-default-value.webp "Open a local PDF file in Mergin Maps mobile app") diff --git a/src/layer/open-file/mobile-forms-open-file-default-value.jpg b/src/layer/open-file/mobile-forms-open-file-default-value.jpg deleted file mode 100644 index d4d7f568..00000000 Binary files a/src/layer/open-file/mobile-forms-open-file-default-value.jpg and /dev/null differ diff --git a/src/layer/open-file/mobile-forms-open-file-default-value.webp b/src/layer/open-file/mobile-forms-open-file-default-value.webp new file mode 100644 index 00000000..acf41342 Binary files /dev/null and b/src/layer/open-file/mobile-forms-open-file-default-value.webp differ diff --git a/src/layer/open-file/mobile-forms-open-file-default-value.xcf b/src/layer/open-file/mobile-forms-open-file-default-value.xcf index 3cd7beb2..6d9dd5a8 100644 Binary files a/src/layer/open-file/mobile-forms-open-file-default-value.xcf and b/src/layer/open-file/mobile-forms-open-file-default-value.xcf differ diff --git a/src/layer/open-file/mobile-forms-open-file-html-widget.jpg b/src/layer/open-file/mobile-forms-open-file-html-widget.jpg deleted file mode 100644 index cfdb4307..00000000 Binary files a/src/layer/open-file/mobile-forms-open-file-html-widget.jpg and /dev/null differ diff --git a/src/layer/open-file/mobile-forms-open-file-html-widget.webp b/src/layer/open-file/mobile-forms-open-file-html-widget.webp new file mode 100644 index 00000000..ad628b9b Binary files /dev/null and b/src/layer/open-file/mobile-forms-open-file-html-widget.webp differ diff --git a/src/layer/open-file/mobile-forms-open-file-html-widget.xcf b/src/layer/open-file/mobile-forms-open-file-html-widget.xcf index 0fa41723..1e02e8d9 100644 Binary files a/src/layer/open-file/mobile-forms-open-file-html-widget.xcf and b/src/layer/open-file/mobile-forms-open-file-html-widget.xcf differ diff --git a/src/layer/open-file/qgis-form-open-file-default-value.jpg b/src/layer/open-file/qgis-form-open-file-default-value.jpg deleted file mode 100644 index 9e95c9a5..00000000 Binary files a/src/layer/open-file/qgis-form-open-file-default-value.jpg and /dev/null differ diff --git a/src/layer/open-file/qgis-form-open-file-default-value.webp b/src/layer/open-file/qgis-form-open-file-default-value.webp new file mode 100644 index 00000000..448aacbc Binary files /dev/null and b/src/layer/open-file/qgis-form-open-file-default-value.webp differ diff --git a/src/layer/open-file/qgis-form-open-file-default-value.xcf b/src/layer/open-file/qgis-form-open-file-default-value.xcf index 9303af2d..032d99d9 100644 Binary files a/src/layer/open-file/qgis-form-open-file-default-value.xcf and b/src/layer/open-file/qgis-form-open-file-default-value.xcf differ diff --git a/src/layer/open-file/qgis-form-open-file-html-widget.jpg b/src/layer/open-file/qgis-form-open-file-html-widget.jpg deleted file mode 100644 index 19b2c1ec..00000000 Binary files a/src/layer/open-file/qgis-form-open-file-html-widget.jpg and /dev/null differ diff --git a/src/layer/open-file/qgis-form-open-file-html-widget.webp b/src/layer/open-file/qgis-form-open-file-html-widget.webp new file mode 100644 index 00000000..726802d7 Binary files /dev/null and b/src/layer/open-file/qgis-form-open-file-html-widget.webp differ diff --git a/src/layer/open-file/qgis-form-open-file-html-widget.xcf b/src/layer/open-file/qgis-form-open-file-html-widget.xcf index 2ee53c46..25edd299 100644 Binary files a/src/layer/open-file/qgis-form-open-file-html-widget.xcf and b/src/layer/open-file/qgis-form-open-file-html-widget.xcf differ diff --git a/src/layer/photos/index.md b/src/layer/photos/index.md index 38df12e5..48fd82eb 100644 --- a/src/layer/photos/index.md +++ b/src/layer/photos/index.md @@ -37,7 +37,7 @@ To add photos to features using the , the attributes form To set up the attachment widget: 1. Right-click on a layer, select **Properties** and go to the **Attributes form** tab. 2. In the list of **Available Widgets** select the text field you want to work with. -3. In the **Widget Display** tab: +3. In the **Widget Type** tab: - From the drop-down menu, select **Attachment** - **Default path** defines where images will be saved. If it is not defined, the project home folder will be used. - Store the path as **Relative to project path** or **Relative to default path** depending on how you want to store the paths. @@ -115,6 +115,10 @@ Now when you click on a feature that contains a photo, it will be displayed in t ![Mergin Maps mobile app photo displayed in form](./qgis-form-view-photo.jpg "Mergin Maps mobile app photo displayed in form") +:::tip Preview online images +It is also possible to display online images in the form. See [How to Embed an Image](../embed-image/) for more details. +::: + ::: details Image preview in QGIS Some QGIS versions may not display the preview of the image correctly. This issue does not occur in . Therefore we recommend trying the setup by opening the form in the to make sure it works as intended. ::: diff --git a/src/misc/write-docs/index.md b/src/misc/write-docs/index.md index 5346373f..76784ca2 100644 --- a/src/misc/write-docs/index.md +++ b/src/misc/write-docs/index.md @@ -157,6 +157,10 @@ All projects referenced in the documentation use workspace For users that are referenced in the documentation (e.g. screenshots or in texts), it is best to use generic users `jack`, `jill`, `sarah`, etc. and generic workspaces. +To reference online images, we can use, e.g.: + +![Mergin Maps sample image](./sample-pic.jpg "Mergin Maps sample image") + ### Documentation folder structure Every section of the docs (e.g. Get Started, Install & Sign Up, Manage Account & Project, ...) has its folder. diff --git a/src/misc/write-docs/sample-pic.jpg b/src/misc/write-docs/sample-pic.jpg new file mode 100644 index 00000000..6ac2a5aa Binary files /dev/null and b/src/misc/write-docs/sample-pic.jpg differ