Fixed the floorplan template and accompanying javascript to make the arrows which point out room location work. This needed some modification to support separate per-floor images, and a fix to make the arrow position setting code work in html5 ('px' must be specified). Also added handling of responsive resizing of the floor-plan images, to make the arrow point right independent of the image scaling.

 - Legacy-Id: 11578

Author: levkowetz

ietf/static/ietf/js/room_params.js

@@ -52,18 +52,15 @@ function roomcoords(nm)
 	    if (nmi[2] > nm0[2]) nm0[2] = nmi[2];
 	    if (nmi[3] > nm0[3]) nm0[3] = nmi[3];
 	}
-	return [nm0[0], nm0[1], nm0[2], nm0[3]];
+	return [nm0[0], nm0[1], nm0[2], nm0[3], nm0[4], nm0[5]];
     } else {
 	return findroom(nm);
     }
 }
 
-function setarrow(nm, fl)
+function setarrow(nm)
 // Place an arrow at the center of a given room name (or list of room names separated by "/").
 {
-    for (var i = 0; i < arrowsuffixlist.length; i++) {
-       removearrow(arrowsuffixlist[i], fl);
-    }
     for (var i = 0; i < arguments.length; i+=2) {
        nm = roommap(arguments[i]);
        if (verbose) alert("nm=" + nm);
@@ -74,17 +71,26 @@ function setarrow(nm, fl)
 	  if (verbose) alert("roomcoords returned: " + ret);
 	  if (!ret) continue;
 
-	  var left = ret[0], top = ret[1], right = ret[2], bottom = ret[3], offsetleft = -25, offsettop = -25;
-	  if (verbose) alert("left=" + left + ", top=" + top + ", right=" + right + ", bottom=" + bottom);
+	  var left = ret[0], top = ret[1], right = ret[2], bottom = ret[3], floor=ret[4], width=ret[5], offsetleft = -25, offsettop = -25;
+	  if (verbose) alert("left=" + left + ", top=" + top + ", right=" + right + ", bottom=" + bottom + ", floor=" + floor + ", width=" + width);
 	  //alert("left=" + left + ", top=" + top + ", right=" + right + ", bottom=" + bottom);
-	  var arrowdiv = fl+'-arrowdiv' + (j > 0 ? j : "");
+	  // calculate arrow position
+	  for (var i = 0; i < arrowsuffixlist.length; i++) {
+	      removearrow(arrowsuffixlist[i], floor);
+	  }
+	  arrow_left = (left + (right - left) / 2 );
+	  arrow_top  = (top + (bottom - top) / 2 );
+	  // scale the coordinates to match image scaling
+	  var img = document.getElementById(floor+"-image");
+	  scale = img.width / width;
+	  arrow_left = arrow_left * scale;
+	  arrow_top  = arrow_top  * scale;
+	  var arrowdiv = floor+'-arrowdiv'+j;
 	  //if (verbose) alert("arrowdiv: " + arrowdiv);
 	  var adiv = document.getElementById(arrowdiv);
-	  // if (verbose) alert("looking for 'arrowdiv'+" + j);
 	  if (adiv) {
-	      //if (verbose) alert("adiv found");
-	      adiv.style.left = left + (right - left) / 2 + offsetleft;
-	      adiv.style.top = top + (bottom - top) / 2 + offsettop;
+	      adiv.style.left = arrow_left + offsetleft + "px";
+	      adiv.style.top  = arrow_top + offsettop + "px";
 	      adiv.style.visibility = "visible";
 	  }
       }

ietf/templates/meeting/floor-plan.html

@@ -18,12 +18,15 @@
     top: 0;
     left: 0;
 }
+.floor-plan img {
+    padding: 0;
+}
 .rooms a {
     text-decoration: underline;
 }
 {% endblock %}
 
-{% block bodyAttrs %}data-spy="scroll" data-target="#affix"{% endblock %}
+{% block bodyAttrs %}onload="automaticarrow(); checkParams();" data-spy="scroll" data-target="#affix"{% endblock %}
 
 {% block content %}
   {% origin %}
@@ -43,17 +46,16 @@
 	  <div class="anchor-target" id="{{floor.name|slugify}}"></div>
 	  <h3>{{ floor.name }}</h3>
 	  <div class="floor-plan">
-	    <img class="col-md-12 col-sm-12 col-xs-12" src="{{ floor.image.url }}" >
+	    <img id="{{floor.name|slugify}}-image" class="col-md-12 col-sm-12 col-xs-12" src="{{ floor.image.url }}" >
 	    <!-- We need as many of these as we can have individual rooms combining into one -->
-	    <div id="{{floor.name|slugify}}-arrowdiv"  style="position: absolute; left: 0; top: 67.5px; visibility: hidden;"><img id="arrow" src="{% static 'ietf/images/arrow-ani.gif' %}"></div>
+	    <div id="{{floor.name|slugify}}-arrowdiv0" style="position: absolute; left: 0; top: 67.5px; visibility: hidden;"><img id="arrow" src="{% static 'ietf/images/arrow-ani.gif' %}"></div>
 	    <div id="{{floor.name|slugify}}-arrowdiv1" style="position: absolute; left: 0; top: 67.5px; visibility: hidden;"><img id="arrow" src="{% static 'ietf/images/arrow-ani.gif' %}"></div>
 	    <div id="{{floor.name|slugify}}-arrowdiv2" style="position: absolute; left: 0; top: 67.5px; visibility: hidden;"><img id="arrow" src="{% static 'ietf/images/arrow-ani.gif' %}"></div>
 	    <div id="{{floor.name|slugify}}-arrowdiv3" style="position: absolute; left: 0; top: 67.5px; visibility: hidden;"><img id="arrow" src="{% static 'ietf/images/arrow-ani.gif' %}"></div>
 	  </div>
 	  <div class="rooms">
 	    {% for room in floor.room_set.all %}
-	      {#<a href="javascript: setarrow('{{room.name|slugify}}','{{floor.name|slugify}}')">{{ room.name|nbsp }}</a>#}
-	      {{ room.name|nbsp }}
+	      <a href="javascript: setarrow('{{room.name|slugify}}')">{{ room.name|nbsp }}</a>
 	    {% endfor %}
 	  </div>
 	  <div class="row"></div>
@@ -87,19 +89,19 @@ <h3>{{ floor.name }}</h3>
 
     function findroom(nm)
     {
-	var left = 0, top = 0, right = 0, bottom = 0;
+	var left = 0, top = 0, right = 0, bottom = 0, floor="", width=0;
 
 	if (0) { }
 	{% for room in meeting.room_set.all %}
-	else if (nm == '{{room.name|slugify}}') { left = {{room.left}}; top = {{room.top}}; right = {{room.right}}; bottom = {{room.bottom}}; }{% endfor %}
+	else if (nm == '{{room.name|slugify}}') { left = {{room.left}}; top = {{room.top}}; right = {{room.right}}; bottom = {{room.bottom}}; floor='{{room.floorplan.name|slugify}}'; width={{room.floorplan.image.width}}; }{% endfor %}
 
 	{% for room in meeting.room_set.all %}{% if room.functional_display_name %}
-	else if (nm == '{{room.functional_name|slugify}}') { left = {{room.left}}; top = {{room.top}}; right = {{room.right}}; bottom = {{room.bottom}}; }{% endif %}{% endfor %}
+	else if (nm == '{{room.functional_name|slugify}}') { left = {{room.left}}; top = {{room.top}}; right = {{room.right}}; bottom = {{room.bottom}}; floor='{{room.floorplan.name|slugify}}'; width={{room.floorplan.image.width}}; }{% endif %}{% endfor %}
 
 	else return null;
 
 	// alert("nm=" + nm + ",left=" + left + ",top=" + top + ",r=" + right + ",b=" + bottom);
-	return [left, top, right, bottom];
+	return [left, top, right, bottom, floor, width];
     }
   </script>
 {% endwith %}