Imagemap widget for select_one and select_multiple

[MartijnR]

SVG image with id attributes that correspond to option values in the itemset. The radiobuttons/checkboxes will be replaced by making the SVG image regions clickable.

• propose feature (appearance="image-map") to ODK group => Proposal: image-map select question getodk/xforms-spec#108
• check for, or add, SVG image support
• figure out how to swap <img src> with <picture> <svg>...</svg></picture> or similar manipulatable syntax
• figure out the previous technique for resources loaded from indexedDb (currently converted to URL which won't work)
• unselect functionality
• readonly state
• translations (using a different label)
• loading default value
• changing value with calculation
• test repeats
• svg scaling, incl if width, height attributes are missing
• tooltips with label (in current active language)
• if no option match for path[id], do not show hover effect? Can be done by removing IDs that have no match.
• resolve img load flickering

Not considered part of requirements:

• translations using a different image
• fix IE11 SVG scaling
• keyboard accessibility
• intelligent color picking (but I think theme color is okay, users can switch themes if needed formhub/kobo)

[MartijnR]

test form (locally: http://localhost:8005/::YYp5)

[MartijnR]

We should probably not use color fills for selected status, as this will interfere with the image-customization widget. I think the :hover state could be the same a the [or-selected] state and just apply an opacity.

• to investigate after adding svg support to KoBoCAT. Does the browser cache HTTP GET requests for the same resource (ODK Aggregate doesn't).
• fix Safari issue with SVG height

[MartijnR]

Using the widgets form (Ona), the same SVG image is requested twice, but simultaneously (with slightly different turnaround times) in Chrome, Safari.

I don't think we need to concern ourselves with this until a problem is reported.

[plutext]

test form above https://docs.google.com/spreadsheets/d/1JS-3wUKKqPhYGaoxJiKoJZsUik-UVwS_-oQHB_g21uw/edit?usp=sharing gives an error in kobotoolbox preview: "sequence item 2: expected string or unicode"

[MartijnR]

Thanks for reporting this. It may have been resolved in later versions of Enketo. This is the same form (hosted on ODK Aggregate) on the latest version: https://enke.to/::YY1u. Previews (only previews) may show an 'SVG not found error' in the latest Enketo, if the backend (KoBo) doesn't use some trickery to resolve media URLs in the XForm).