Select one/multiple, with images for choices & big-image & choice filtering - labels/images not shown (Enketo), images repeated (Collect)

Support
1

1. What is the issue? Please be detailed.

Main issues

  1. Enketo cannot display images against choices in a select_multiple or select_one if a big-image column exists and a choice filter is applied. Additionally the labels do not appear if the choice filter uses an instance lookup
  2. Collect displays the wrong image every 9th option in a select if the correct images haven't been uploaded to Central

I have a list of items and each item has a 'drawing' column that lists the drawing ID or IDs that the items appear on (1/2/3 drawings in this case, space delimited). I have also split these values to 3 separate columns.

When selecting an item, and then showing the relevant drawing IDs in a select multiple to allow the enumerator to pick which to later annotate, the appearance varies with different ways of choice filtering and is also different in Enketo and Collect.

If I have no choice filter on the select_multiple, which is impractical with so many drawings;

  • In Enketo all possible options appear and the images are present, big-image zooms but scales to browser and distorts image if canvas is not the same aspect as the image (distortion previously reported)
  • In Collect, strangely, while testing I only uploaded one image, (so the rest are broken links in Enketo,) however in Collect, that single image appears under the correct select option but also under 7 other options, but the other 54 options show file /path/to/image.png is missing as expected. I counted and it's every 9th row that is repeating the incorrect image. If I then upload the 18th image after the first one that is uploaded, then 1 is right, 9th is the 1st (wrong), 18th is correct, then all multiples of 9 after this show the 18th image (wrong).

Removing the big-image column has no effect on the above behaviour

If I create a standard choice filter eg location=${location}, which is not workable for my dataset, but only for testing

  • in Enketo the filter applies, labels are visible, images are not shown
  • In Collect the filter applies, labels are visible, images are shown, big-image works

Removing the big-image column restores the images to the select in Enketo

If I store the drawing IDs in three columns DWG1/2/3 on the choices sheet and then choice filter as below with an instance lookup then

  • Enketo does filter correctly but the labels are blank and there is no image.
  • Collect filters correctly and labels and images are shown, big-image works

name=instance('item')/root/item[name=${item}]/DWG1 or name=instance('item')/root/item[name=${item}]/DWG2 or name=instance('item')/root/item[name=${item}]/DWG3

Removing the big-image column has no effect on the above behaviour

If I calculate the drawing IDs as separate fields and then use those in the choice filter as below then

  • Enketo filters correctly, labels are visible, but there is no image
  • Collect filters correctly, labels and images are visible, big-image works

${D1} calculate as instance('item')/root/item[name=${item}]/DWG1
${D2} calculate as instance('item')/root/item[name=${item}]/DWG2
${D3} calculate as instance('item')/root/item[name=${item}]/DWG3
choice_filter as
name=${D1} or name=${D2} or name=${D3}

Removing the big-image column restores the images to the select in Enketo

All the above scenarios are the same when modified to select_one.

2. What steps can we take to reproduce this issue?
Try 1) choice filtering and 2) not uploading media as above

3. What have you tried to fix the issue?
various methods of choice filtering, select one and multiple

4. Upload any forms or screenshots you can share publicly below.
I will need to create a generic version of this form to share. Can do this if unable to reproduce.

2

Adding some more notes, mostly SVG & Collect specific.

In Collect/Enketo: (testing in Collect 2022.4.4)

  • If you use an SVG as image in a select or a note you cannot zoom the image like you can in image-map appearance questions (known issue)
  • If you use an SVG as an image in a select with big-image, on a Samsung device when opening the image in default 'Gallery' it doesn't render. In Enketo, it renders and zooms, same canvas aspect issues as rasters, much slower to load than a PNG though.
    • This viewer is selectable as a default Android app for SVGs and works well for SVG apart from having to change the transparency each time, however if you default to this app, then JPG and PNG will also default to it, and these are distorted to fit the screen regardless of image aspect. Any better app options, preferably not ad supported? A browser isn't a selectable option
    • Having to know which are SVGs and which aren't and remember to select the app to use once every time is not practical for the user. Additionally resetting the default isn't overly obvious (Settings, Apps, Select default app, Set as default, Clear defaults)
  • If you use an SVG as a default in an image with annotation, you cannot annotate in Collect, app crashes, but the SVG does display as the default image. In Enketo the default appears and can be annotated.
    • There was a crash last time the app was running! (actually this time)
    • android.graphics.drawable.PictureDrawable cannot be cast to android.graphics.drawable.BitmapDrawable
  • Using an SVG for is dramatically slower than PNG in Collect. Scrolling past the PNG in a select or in notes was smooth, it stuttered heavily on the SVG (Galaxy Tab S8+, 685kb SVG, 366kb PNG, same PDF source). In Enketo it is slightly slower but not dramatically (Macbook Pro M1)
  • SVGs are rendered in a square canvas in Collect regardless of aspect, landscape images are letterboxed - both as select choices and note images. In Enketo they are not forced into a square canvas but match the image aspect in notes, can't confirm in selects as they don't render with a choice filter.

My current takeaway is, don't use SVGs, create high resolution PNGs instead as they're smaller (in this case, CAD layout drawings), faster and don't have viewing issues. If a note could display a zoomable SVG with no big-image needed and no square canvas this would be slightly better.

1 Like
3

Acknowledging the Enketo issues.

This I'm not too surprised by. We reuse the image canvases for fast scrolling performance. If there's nothing to paint in them, they'll have a stale value.

4

Thanks @LN, the wrong image is not a huge issue, I would never publish with missing media, just reporting for reporting's sake.

From some more testing - the default system viewer on Samsung is not particularly good it seems.
I loaded a ~3700px wide PNG as the big-image, and when zoomed in Preview (macos) it has far more detail than when viewed on device, upping it to ~9000px barely improved it. Opening in SVG Viewer, it's slightly distorted, much sharper, but has limited zoom available.

Does anyone know of a good Android image viewer (no ads etc. purchase is ok if it's really good) that is able to render JPG, PNG (and ideally SVG) properly, that can also be set as the default app for images?

5

This has moved from a theoretical issue to a real issue.

I have a form that collects item features as geopoint / photo / other information, and I query this in to build choices for a second form to go and measure specific values about these locations.

In order to guide the enumerator I first have a couple of select-one questions to get the area and the item, then creates a repeat with the repeat count = count of all the features created for that item, with a select-one to pick the particular feature that shows a label item-feature# and has the image & big-image against the choices so they see a thumbnail for all the features, and can enlarge to confirm it's correct.

All works fine in Collect but in Enketo, there are no choices visible so the question cannot be answered. Which results in no possibility for web entry (can't select the feature), and also no way to edit submissions in Enketo post upload (throws a form logic error on edit).