-
Notifications
You must be signed in to change notification settings - Fork 1
/
howto.html
108 lines (104 loc) · 8.1 KB
/
howto.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<title>Imagemapchecks howto guide</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-1.9.1.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.liverregion {
background:orange;
}
.liverimage {
background:cyan;
}
.livermap {
background:lightgreen;
}
.datakey {
background:#a965c2;
}
</style>
</head>
<body>
<div class="container">
<h1><span class="glyphicon glyphicon-info-sign"></span>How to use the Custom Imagemap external module</h1>
<div class="panel panel-info">
<div class="panel-heading">
Prerequisites
</div>
<div class="panel-body">
<ul>
<li>To use this hook you need to know about <a href="https://www.w3schools.com/tags/tag_map.asp" target="_blank">images and imagemaps</a>.</li>
<li>You will need an imagemap.</li>
<li>The corresponding checkboxes must be on the same instrument.</li>
<li>The corresponding checkboxes should be hidden, but must not be disabled.</li>
<li>
You will need to host your image somewhere! Make sure your image is available to the world.
<br/>
For admins, checkout this post: <a href="https://community.projectredcap.org/questions/53447/how-would-you-add-inline-images-to-non-descriptive.html" target="_blank">https://community.projectredcap.org/questions/53447/how-would-you-add-inline-images-to-non-descriptive.html</a>
</li>
<li>This custom imagemap only works with checkboxes, i.e. multiple choice.<br/>
<img src="liver.png" alt="Liver"/>
</li>
<li>You can use the following tool to draw the "map" on the image: <a href="https://www.image-map.net" target="_blank">https://www.image-map.net</a></li>
</ul>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
Setup in REDCap
</div>
<div class="panel-body">
<ol>
<li>Create a field with the required checkboxes.<br/>
<img src="addNewField.png" alt="Add new field"/><br/><br/>
</li>
<li>
Create a descriptive text field.<br/>
<img src="editfield.png" alt="Edit field"/><br/>
In the field label, add the code.<br/>
<i>Example:</i><br/>
<pre>
<<span class="liverimage">img id="liverimage"</span> src="https://demoredcap.uzgent.be/plugins/imageupload/showimage.php?pid=139&file=Liver+image.png" usemap="#image-map">
<<span class="livermap">map id="livermap"</span> name="image-map">
<area alt="Region II" title="Region II" <span class="datakey">data-key="2"</span> coords="448,89,477,89,496,103,436,132,357,161,340,120,326,102" shape="poly">
<area alt="Region III" title="Region III" <span class="datakey">data-key="3"</span> coords="351,193,496,117,495,126,483,147,451,178,418,206,379,238,339,264" shape="poly">
<area alt="Region IVa" title="Region IVa" <span class="datakey">data-key="4a"</span> coords="252,93,267,94,289,105,318,133,330,165,332,185,254,227,259,171,259,129,257,116" shape="poly">
<area alt="Region IVb" title="Region IVb" <span class="datakey">data-key="4b"</span> coords="254,228,332,187,334,214,329,238,322,271,245,298" shape="poly">
<area alt="Region V" title="Region V" <span class="datakey">data-key="5"</span> coords="71,281,125,270,152,267,166,273,177,284,184,315,193,343,171,359,136,383,107,398,85,411,75,376,70,324" shape="poly">
<area alt="Region VI" title="Region VI" <span class="datakey">data-key="6"</span> coords="2,321,56,286,54,321,59,362,66,395,76,416,60,420,43,419,25,403,14,387,6,353" shape="poly">
<area alt="Region VII" title="Region VII" <span class="datakey">data-key="7"</span> coords="2,293,28,273,50,261,58,220,66,192,78,165,98,137,125,107,101,109,82,119,64,129,44,144,22,173,4,213,1,254" shape="poly">
<area alt="Region VIII" title="Region VIII" <span class="datakey">data-key="8"</span> coords="117,145,136,125,155,109,187,97,209,93,226,94,227,143,225,196,225,224,217,232,193,233,151,236,119,238,92,243,75,250,77,230,86,198,94,175,108,154" shape="poly">
</map></pre>
<b>Important!</b>
<ul>
<li>Make sure you have no href attributes. Keeping those will navigate the user to somewhere else. </li>
<li>Remove newlines from the HTML code. They are replaced by BR elements and ruin your syntax.</li>
</ul>
<br/>
</li>
<li>In the Action tags/Field Annotation<br/>
Add the action tag <code>@CUSTOM_IMAGEMAP=registerImageMap(imageId, mapId, originalCheckboxesName, color, codeAttribute);</code><br/>
<br/>
With the following parameters (between quotes):<br/>
<ul>
<li><b>imageId</b>: The id of the image as defined in the <img id=...> tag.</li>
<li><b>mapId</b>: The id of the map as defined in the <map id=...> tag.</li>
<li><b>originalCheckboxesName</b>: The name of the checkbox variable as defined in REDCap.</li>
<li><b>color</b>: The HTML color that is used to highlight sections using the <a href="https://www.w3schools.com/cssref/func_rgba.asp" target="_blank">rgba() function</a>. You can select an RGB color by using the <a href="https://www.w3schools.com/colors/colors_picker.asp" target="_blank">colorpicker</a>.</li>
<li><b>codeAttribute</b>: The attribute that can be used in the map to identify the code. This is used to couple imagemap areas in the code to the checkboxes in REDCap. If you have an area and define it as <area <b>data-key="2"</b> ...> then the external module will look for a checkbox that has “<b>2, ...</b>” option.</li>
</ul>
<i>Example:</i>
<pre>@CUSTOM_IMAGEMAP=registerImageMap(<span class="liverimage">"liverimage"</span>, <span class="livermap">"livermap"</span>, <span class="liverregion">"liver_regions"</span>, "rgba(255, 0, 0, 0.2)", <span class="datakey">"data-key"</span>);</pre>
<li>Still not working as you expected? For troubleshooting, check out the browser console.<br/>
<img src="consolemessage.png" alt="Console message"></li>
</ol>
</div>
</div>
</div>
</body>
</html>