Interactive Image

[ConradMc]

Hi,

Has anyone attempted having an interactive image in K2? For example, upon which area of the image which is clicked determines what action is performed? 

Detail below:

Background

Imagine you have created a SmartForm, and on that SmartForm you have a Picture control and a Drop Down List.

• The Picture control display an image of a map of the office (for example).
• The Drop Down List contains the list of areas that are visible on the map (for example: Garage, Office 1, Office 2, etc.)

Functionality

When the SmartForm is used in runtime, the User can click on the image to pinpoint where an incident has occurred.

• Clicking on the image automatically sets the drop down list
• For example: If the User clicks on the image where Office 1 is, the drop down list is automatically set to Office 1

Implementation

I have managed to partly achieve this by using JavaScript.

• I used an online tool to create the co-ordinates for the image
• I then (in script) created an ImageMap (manipulating the DOM within the HTML) and then used the co-ordinates in a JavaScript function to set a control on the SmartForm

Issue

• If the image or browser is resized, the click area is not accurate and gets skewed (for example, clicking on one area highlights a different one).
• Also, this does not work when accessing the Form on a mobile (not a big deal, kinda expected)

Thoughts

There is a WOW factor in being able to interact with an image to capture location based data. However from a development perspective there appears to be here is too much scripting and issues involved. 

Has anyone come across a request like this? I'd be intrigued to hear if you implemented anything like this before in K2 Five?

Workaround

As the app being developed is currently at version 1, the current workaround is to present the image and the user simply selects the location from the drop down.

Thanks!

[kentw1]

Hi ConradMc,

Thank you for sharing this information with the community!

You might also want to log this as an idea on https://ideas.k2.com/ideas and vote on it to have this feature possibly included OOB in a future version of the product.

Kent

[NigelStratton]

I like what you're doing! For image resizing you need to programmatically resize the image map. Put this minified version in a literal and it will handle the resize for you. I can send you the non-minifed if you need it.

I haven't used this in a K2 view but I wrote a html based help system for my K2 forms in which I used image maps. Being able to show a snip of a K2 view with links pointing to custom help for each control or part of the view is very useful.

!function(){"use strict";function a(){function a(){function a(a,c){function d(a){var c=1===(e=1-e)?"width":"height";return Math.floor(Number(a)*b)}var e=0;i.coords=a.split(",").map(d).join(",")}var b={width:k.width/k.naturalWidth,height:k.height/k.naturalHeight};j.forEach(a)}function b(a){return a.coords.replace(/ *, */g,",").replace(/ +/g,",")}function c(){clearTimeout(l),l=setTimeout(a,250)}function d(){(k.width!==k.naturalWidth||k.height!==k.naturalHeight)&&a()}function e(){k.addEventListener("load",a,!1),window.addEventListener("focus",a,!1),window.addEventListener("resize",c,!1),window.addEventListener("readystatechange",a,!1),document.addEventListener("fullscreenchange",a,!1)}function f(){return"function"==typeof h._resize}function g(){i=h.getElementsByTagName("area"),j=Array.prototype.map.call(i,b),k=document.querySelector('img[usemap="#'+h.name+'"]'),h._resize=a}var h=this,i=null,j=null,k=null,l=null;f()?h._resize():(g(),e(),d())}function b(){function b(a){if(!a.tagName)throw new TypeError("Object is not a valid DOM element");if("MAP"!==a.tagName.toUpperCase())throw new TypeError("Expected <MAP> tag, found <"+a.tagName+">.")}function c(c){c&&(b(c),a.call(c),d.push(c))}var d;return function(a){switch(d=[],typeof a){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(a||"map"),c);break;case"object":c(a);break;default:throw new TypeError("Unexpected data type ("+typeof a+").")}return d}}"function"==typeof define&&define.amd?define([],b):"object"==typeof module&&"object"==typeof module.exports?module.exports=b():window.imageMapResize=b(),"jQuery"in window&&(jQuery.fn.imageMapResize=function(){return this.filter("map").each(a).end()})}();