Dynamic images loaded to an image widget from a choice/CSV selection

Thanks to @Xiphware for listening to me talk about this and setting off a lightbulb in my head with a way to make it work. It's still not a true workable dynamic default image (no Enketo, and currently no repeats), but it's closer. Here's the example form for your similar use case @chrissyhroberts.


Dynamic_image_test.zip (476.7 KB)


I have been stuck on this previously, wanting to serve up one/many images to the user based on a previous selection.

Eg: Pick an item, then show a list of drawings associated with it, then select one and load it to an image widget for annotation. Or, pick an item, then lookup the associated particular reference image, then load that to the image widget.

What doesn't work:

  • Putting ${the_filename} in the calculation field of an image widget
  • Putting ${the_filename} in the default field of an image widget - this will not even upload

What does work but is messy:

  • Putting a static filename.ext in the default column of an image widget and then using relevance to make it visible (With the filename here, Central will ask for the image.)
    • This works in Collect & Enketo.
    • With many images this means equally many fields. You may want to then concat(${image1}, ${image2}, ... ${imagen}) into a field to return the filename in a single known field.

What does work, but only in Collect:

  • prepend filename.ext with 'jr://images/ and place this string in the calculation column
    • The filename must be mentioned elsewhere that Central can see and then ask for it as an attachment, eg an image column in a choice list or non-relevant note in the survey
  • You can get the filename in an number of ways, the easiest is to make the name value for a simple choice the filename but this is not practical for most cases. Better to store the filename in another column and use an instance lookup to get it and then build the string.

What might work in Collect but I haven't figured it out

  • Using a select-multiple, pick many items,
  • Create a repeat with count equal to count-selected
  • In the repeat, pull the item filename using selected-at, remember to subtract one from position to zero-index
  • build the jr://images/filename.ext string and place in the image calculation field
    • This partially works - the repeat count is correct, the selected item is identified for each element of the repeat and the filename path is constructed correctly. The annotation constraint can see image content but the image is not there. The string is the same as in the non repeat example, so :man_shrugging:t2:

Here be dragons :dragon:

  • The calculated dynamic default only works in Collect, not in Enketo. If you only use Enketo to view/edit that's ok, but it can't be the data entry path. If you need Enketo to enter, the messy relevance approach works.
  • If you do not put a constraint to force markup of the image, then the image will not be uploaded to Central ( {"message":"Could not find the resource you were looking for.","code":404.1}"
    • This will force annotation: not(contains(${default_image_field}, 'jr://'))
  • If you do put a constraint to force markup, but do not also put a trigger on the calculated image field to prevent it recalculating, then it will replace the markup with the default and the form will also not be able to be completed
5 Likes

Hi @ahblake
could you attach that whole form here too?

It's there again. I made an error in the zip before.

Dynamic images for notes

After selecting an item with an associated image filename, is it possible to show a dynamic image under a note, to provide visual reference information? I tried using the image, calculation & default columns with and without jr://images/ and triggers, not expecting most to work.

:white_check_mark: The safe option is a row for every image and use relevance to make it/them show, as it works in Enketo & Collect.
:dragon::white_check_mark: The workable option if only using Collect for submissions is to put the variable with the filename in the image column for the note.

  • Image column
    • :white_check_mark: Static filename.ext in the image column, one entry for each option, use relevance to show
      • Works in Collect & Enketo, image shown between label and hint
      • Side benefit: Can display >1 images if select_multiple used
      • Downside, need a row for every image
    • Static jr://images/filename.ext in the image column, one entry for each option, use relevance to show
      • Works in Enketo, image shown between label and hint
      • Doesn't work in Collect, no image shown, instead the text of the path is shown under the hint *eg jr://images/prettyphoto.jpg
    • Put variable in image column, eg ${selected_image}
      • :dragon::white_check_mark: Works in Collect
      • Doesn't work in Enketo, broken image icon plus 'image'
    • Calculate prepended variable in image column, eg concat('jr://images/',${selected_image})
      • wasn't expected to work with a calc in an image column
      • Doesn't work in Collect File: /storage/emulated/.../media/concat('jr://images/',filename.ext) is missing. shown between label and hint.
      • Doesn't work in Enketo, broken image icon plus 'image'
    • Calculate jr://images/filename.ext in a calculate and place result in image field as calculate variable field
      • Doesn't work in Collect (File is missing error) or Enketo (broken image)
  • Default column
    • Put variable in default column, eg ${selected_image}
      • Doesn't work in Collect or Enketo (no image or error in both)
    • Put prepended variable in default column, eg jr://images/${selected_image}
      • Doesn't work in Collect or Enketo (jr://images/ shown in both if no trigger, blank if trigger, filename not included from calculation in both cases)
    • Put static filename in default column
      • Doesn't work in Collect or Enketo, filename shown as text under hint
    • Put prepended static path in default column
      • Doesn't work in Collect or Enketo, prepended filename shown as text under hint
  • Calculation column
    • Put static filename in calculation column
      • Doesn't work in either. filename shown as text under hint
    • Put prepended static filename in calculation column
      • Doesn't work in either. prepended filename shown as text under hint
    • Put variable in calculation column, eg concat('${selected_image}')
      • Doesn't work in either, shows filename under hint
    • Put prepended variable in calculation column, eg concat('jr://images/',${selected_image})
      • Doesn't work in either, shows nothing under hint. (If trigger used, shows prepended path under hint)

Select_one image appearance differences in Collect / Enketo:

Unrelated, just testing differences;

  • Using the columns-pack appearance with choices that have an image, in Collect the images are suppressed, however in Enketo the images appear larger and actually less packed than with simply a columns appearance (this shows as 3 columns in Enketo with columns-pack)
    • Using columns-5 (so n > 3) does shrink the images under the selections in Enketo (and Collect, making it unusable in portrait on a handset for obvious reasons)
  • Using autocomplete or minimal creates essentially a default (one column) appearance in Collect with large images under the text entry filter, but a drop-down/autocomplete appearance in Enketo with no images

Another chapter in the increasingly inaccurately named Dynamic images loaded to an image widget thread... (Apologies to Douglas Adams). Perhaps this thread should be renamed 'Dynamic Images in image/select/note widgets' or something...

Dynamic SVGs for a select-one with image-map appearance

It's not currently possible to use an SVG as an image in a question or a note that will let you zoom/pan it like image-map will. big-image also can't be used easily as the default image viewer usually can't handle SVGs, and the SVG viewers that I have tried aren't great (see previous post)

Image column solution (Collect)

However it is possible to create a select-one question that has no valid choices and isn't mandatory nor read only (see another previous post) and use the image-map appearance to render the SVG in a form that can be zoomed and panned for reference.

Extending this, it is possible to dynamically change the displayed SVG using form selections by using a field in the image column for the select-one.

Again, this is like a dynamic image for a note (or a dynamic image against a question that puts the variable in the image column) in the prior post;

  • :white_check_mark: A static SVG eg filename.svg in the image column works in Collect and Enketo.
    • Not actually dynamic, this would require a select for every SVG and relevance to display the correct one.
  • :dragon::white_check_mark: A dynamic SVG filename like ${my_selected_SVG} in the image column works in Collect but in Enketo returns SVG image could not be found.
    • So this is only usable if not creating submissions in Enketo
    • SVG Filenames also must be detailed somewhere else (eg choice list) so that Central will require their upload.