Opening attached images via html popups.

5998
2
02-17-2015 04:01 PM
PatrickAlexander2
New Contributor

Hello all,

 

I've created a file geodatabase in ArcMap 10.1, with a feature class to which I have attached images. I'm trying to figure out how to control how these images are displayed. All I have found so far are statements to the effect that the Windows default image viewer will be used, but this is not accurate. Instead, what is happening is: if I view the attachments via the Identify tool, they pop up in Windows Photo Viewer (which is in fact my default image viewer!); if I view the attachments via the HTML Popup tool, they open in a very basic window (some kind of internal Arc browser emulator, maybe? I don't know) within ArcMap; if I view the attachments via the Layer Properties: HTML Popup: Verify interface, they open in Internet Explorer (my default web browser).

 

I would like for attached images to open in Windows Photo Viewer no matter how I access them, or at least with some kind of image viewer that can zoom in and out. Internet Explorer would work just fine, too; so would ArcMap's built-in image viewer thing, if it could be told to behave in a more useful fashion. At present, the window in ArcMap in which attached images open has essentially no functionality. It's a window, the photo is in it, it has some scroll bars at the edges, that's it. This is inconvenient with images larger than the current screen resolution, since you can't view the whole image at once. Instead you're stuck zoomed in to 100% resolution and you've got to twiddle around with the scroll bars to look at different parts of the image. Making all the images smaller would solve that problem, but loses information; ideally you want to be able to view the whole image, or zoom in to details--this is why essentially every image viewer ever made *except* this thing in ArcMap can zoom in or out!

 

So my question boils down to: How (either by changing the program used to open images, changing behavior of these image windows in ArcMap, whatever) do I get HTML Popups to display large resolution images in a way that allows me to zoom in and out?

0 Kudos
2 Replies
MichaelMenzies
New Contributor

Same issue -  have not found a solution and you have not had an answer.  This is quite annoying.

0 Kudos
MarkBockenhauer
Esri Regular Contributor

I have a layer package example here:  http://www.arcgis.com/home/item.html?id=3ebe2a5107de48da89133c07acfb602f

It has layer properties HTML popup configures with and XSL that allows for panning and zooming image attachments in the popup window.

It is the default popup window configured to look like this:

squirrellorig.png

Using the mouse wheel or click you can zoom and pan on the picture.

squirrelzoomin.png

Additional image attachments are shown as buttons, so you can click on them and view them in the window.

Click "VIEW1.JPG"

vieworiginal.png

You can also click on the "Numbered buttons" to rotate the image... for situations where the attached picture does not have desired orientation.

button 90

view90.png

Button 180

view180.png

Same popup also works nicely in Explorer Desktop.

explorerdesktop.png

The XSL makes use of HTML5 and Javascript.   I did not specifically check, but I believe this will work on computers that have IE9 and higher.   I tested on a Windows 8.1 computer with IE11 .

For the HTML Popup properties you also need to have "download Attachment data" checked, for this XSL to work.

You can get the layer from ArcGIS online  to get the XSL or you can copy it from this post (I tried using syntax highlight, but geonet didn't "like" the number of lines)

I stayed pretty much with the default html popup xsl,  you will likely want to size the canvas (set to 300 x 300 in XSL) to meet your needs.  Make sure to make the matching change everywhere it has a value of 300 for canvas.width and height as well as ctx.drawimage  

Also, I freely admit that I hacked this together...  with some attention to detail and a flair for style it could be made much better!

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt">

<!-- when using this XSL in ArcGIS for HTML Popup make sure that "download attachment data" is checked on the HTML Layer Properties Dialog. This style is set up to show pictures-->

<!-- attachments that have been downloaded to the computer -->

  <xsl:variable name="ignoreFieldNames" select="'|OBJECTID|Shape|Shape_Length|Shape_Area|ATTACHMENTID|REL_OBJECTID|CONTENT_TYPE|ATT_NAME|DATA_SIZE|DATA|'"/>

  <xsl:variable name="headerRowColor" select="'#9CBCE2'"/>

  <xsl:variable name="alternateRowColor" select="'#D4E4F3'"/>

  <xsl:template match="/">

  <html>

  <head>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

  <!-- The Next line allows HTML5 to "work" on IE9 and higher.  Does the trick for ArcGIS provided you are running a modern version of Windows.  The button style can be experimented with to make it look great.  -->

  <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>

  </head>

        <style>

button

{

   // display: block;

      font-size: 1.1em;

   // font-weight: bold;

      text-transform: uppercase;

   // padding: 10px 15px;

   // margin: 20px auto;

      color: #233DA7;

      background-color: #C7D9E0;

   // background: -webkit-linear-gradient(#888, #9CBCE2);

   // background: linear-gradient(#888, #9CBCE2);

      border: 0 none;

   // border-radius: 3px;

   // text-shadow: 0 -1px 0 #000;

      box-shadow: 0 1px 0 #666, 0 1.7px 0 #444, 0 2px 2px rgba(0,0,0,0.6);

      cursor: pointer;

      -webkit-transition: all 150ms ease;

      transition: all 150ms ease;

}

button:hover, button:focus

{

//    -webkit-animation: pulsate 1.2s linear infinite;

//    animation: pulsate 200.2s linear infinite;

}

@-webkit-keyframes pulsate

{

  //    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }

  //  50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }

  //   100% { color: #ddd; text-shadow: 0 -1px 0 #000; }

}

        

@keyframes pulsate

{

//    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }

//   50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }

//   100% { color: #ddd; text-shadow: 0 -1px 0 #000; }

}

button:active

{

       color: #49A1FF;

    // text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;

       box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);

       -webkit-transform: translateY(3px);

       transform: translateY(3px);

       -webkit-animation: none;

       animation: none;

}

        </style>

  <body style="margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;">

  <table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-collapse:collapse;padding:3px 3px 3px 3px">

  <tr style="text-align:center;font-weight:bold;background:{$headerRowColor}">

  <td>

  <xsl:value-of select="FieldsDoc/Title" />

  </td>

  </tr>

  <xsl:apply-templates select="FieldsDoc/Attachments" />

  <tr>

  <td>

  <table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px">

  <xsl:choose>

  <xsl:when test="FieldsDoc/Fields/Field/FieldName">

  <xsl:apply-templates select="FieldsDoc/Fields/Field/FieldName[not(contains($ignoreFieldNames, concat(concat('|', text()), '|')))]/.." />

  </xsl:when>

  <xsl:otherwise>

  <xsl:apply-templates select="FieldsDoc/Fields/Field" />

  </xsl:otherwise>

  </xsl:choose>

  </table>

  </td>

  </tr>

  </table>

  </body>

  </html>

  </xsl:template>

  <xsl:template match="Attachments">

  <xsl:variable name="imageCount" select="count(Attachment/ContentType[contains(., 'image')])"/>

  <xsl:variable name="attachmentCount" select="count(Attachment)"/>

  <tr bgcolor="{$headerRowColor}">

  <td>

  <table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px">

  <xsl:variable name="imageSrc" select="Attachment/ContentType[contains(., 'image')]/../FilePath"/>

  <xsl:if test="$imageSrc">

  <tr align="center">

  <td>

  <!-- create variable to hold the path to the picture we want to display.. also correct the slashes in the path. -->

                        <xsl:variable name="newtext" select="translate($imageSrc,'\','/')"/>

  <!-- create HTML5 Canvas to display are pictures in. -->

  <canvas width="300" height="300" ></canvas>

<!-- escape out to do javascript stuff... make the magic happen -->

  <script type="text/javascript" charset="utf-8">

  <xsl:text disable-output-escaping="yes" >

            <![CDATA[

  var canvas = document.getElementsByTagName('canvas')[0];

  canvas.width = 300; canvas.height = 300;

  var imgAttach = new Image;

  var origAttach = new Image;

    var imgRotate = 0;

  redraw = function() {}

imgAttach.onload = function(){

//This section is for showing initial picture.  Origin positions were picked for Photo Attachments created by Collector for ArcGIS on an Iphone.  Modify to meet your desires.

                var ctx = canvas.getContext('2d');

                var imgh = imgAttach.height

                var imgw = imgAttach.width

                if (imgw > imgh && imgRotate == 0){

                  ctx.drawImage(imgAttach,0,35,300,300 * imgAttach.height / imgAttach.width);}

                else if (imgw > imgh && imgRotate == 90){

                  ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

                else if (imgw > imgh && imgRotate == 180){

                  ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

                else if (imgw > imgh && imgRotate == 270){

                  ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

             else if (imgw == imgh && imgRotate == 0) {

                  ctx.drawImage(imgAttach,0,0,300,300);} 

                else if (imgw == imgh && imgRotate == 90) {

                  ctx.drawImage(imgAttach,-150,-150,300,300);} 

                else if (imgw == imgh && imgRotate == 180) {

                  ctx.drawImage(imgAttach,-150,-150,300,300);} 

                else if (imgw == imgh && imgRotate == 270) {

                  ctx.drawImage(imgAttach,-150,-150,300,300);} 

                else if (imgw < imgh && imgRotate == 0) {

                  ctx.drawImage(imgAttach,35,0,300 * imgAttach.width / imgAttach.height,300);}

                else if (imgw < imgh && imgRotate == 90) {

                  ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);}

                else if (imgw < imgh && imgRotate == 180) {

                  ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);}

                else if (imgw < imgh && imgRotate == 270) {

                  ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);}

               

              

               redraw();

               }

  

  window.onload = function(){

    //This section if for mouse pan and zooming on the shown picture.

   

        TO_RADIANS = Math.PI/180;

  var ctx = canvas.getContext('2d');

  trackTransforms(ctx);

  function redraw(){

  // Clear the entire canvas

  var p1 = ctx.transformedPoint(0,0);

  var p2 = ctx.transformedPoint(canvas.width,canvas.height);

  ctx.clearRect(p1.x,p1.y,p2.x-p1.x,p2.y-p1.y);

                var imgh = imgAttach.height

                var imgw = imgAttach.width

                if (imgw > imgh && imgRotate == 0){

                ctx.drawImage(imgAttach,0,35,300,300 * imgAttach.height / imgAttach.width);}

  //Analyze and position all images according to width height.  Values used were for Collector for ArcGIS Iphone photo attachment size dimension.

                else if (imgw > imgh && imgRotate == 90){

                ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

                   else if (imgw > imgh && imgRotate == 180){

                ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

               else if (imgw > imgh && imgRotate == 270){

                ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

            else if (imgw == imgh && imgRotate == 0) {

                ctx.drawImage(imgAttach,0,0,300,300);} 

                else if (imgw == imgh && imgRotate == 90) {

                ctx.drawImage(imgAttach,-150,-150,300,300);} 

                else if (imgw == imgh && imgRotate == 180) {

                ctx.drawImage(imgAttach,-150,-150,300,300);} 

                else if (imgw == imgh && imgRotate == 270) {

                ctx.drawImage(imgAttach,-150,-150,300,300);} 

                else if (imgw < imgh && imgRotate == 0) {

                ctx.drawImage(imgAttach,35,0,300 * imgAttach.width / imgAttach.height,300);}

                else if (imgw < imgh && imgRotate == 90) {

                ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);}

                else if (imgw < imgh && imgRotate == 180) {

                ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);}

                else if (imgw < imgh && imgRotate == 270) {

                ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);

                }

              

               

}

                

  redraw();

  var lastX=canvas.width/2, lastY=canvas.height/2;

  var dragStart,dragged;

  canvas.addEventListener('mousedown',function(evt){

  document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';

  lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);

  lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);

  dragStart = ctx.transformedPoint(lastX,lastY);

  dragged = false;

  },false);

  canvas.addEventListener('mousemove',function(evt){

  lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);

  lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);

  dragged = true;

  if (dragStart){

  var pt = ctx.transformedPoint(lastX,lastY);

  ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y);

  redraw();

  }

  },false);

  canvas.addEventListener('mouseup',function(evt){

  dragStart = null;

  if (!dragged) zoom(evt.shiftKey ? -1 : 1 );

  },false);

  var scaleFactor = 1.1;

  var zoom = function(clicks){

  var pt = ctx.transformedPoint(lastX,lastY);

  ctx.translate(pt.x,pt.y);

  var factor = Math.pow(scaleFactor,clicks);

  ctx.scale(factor,factor);

  ctx.translate(-pt.x,-pt.y);

  redraw();

  }

  var handleScroll = function(evt){

  var delta = evt.wheelDelta ? evt.wheelDelta/40 : evt.detail ? -evt.detail : 0;

  if (delta) zoom(delta);

  return evt.preventDefault() && false;

  };

  canvas.addEventListener('DOMMouseScroll',handleScroll,false);

  canvas.addEventListener('mousewheel',handleScroll,false);

  }; ]]></xsl:text>

  imgAttach.src = '<xsl:text disable-output-escaping="yes" >File:///</xsl:text><xsl:value-of select="$newtext"/>';

    origAttach.src = '<xsl:text disable-output-escaping="yes" >File:///</xsl:text><xsl:value-of select="$newtext"/>';

  <xsl:text disable-output-escaping="yes" >

            <![CDATA[

  // Adds ctx.getTransform() - returns an SVGMatrix

  // Adds ctx.transformedPoint(x,y) - returns an SVGPoint

   function trackTransforms(ctx){

  var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg');

  var xform = svg.createSVGMatrix();

  ctx.getTransform = function(){ return xform; };

  var savedTransforms = [];

  var save = ctx.save;

  ctx.save = function(){

  savedTransforms.push(xform.translate(0,0));

  return save.call(ctx);

  };

  var restore = ctx.restore;

  ctx.restore = function(){

  xform = savedTransforms.pop();

  return restore.call(ctx);

  };

  var scale = ctx.scale;

  ctx.scale = function(sx,sy){

  xform = xform.scaleNonUniform(sx,sy);

  return scale.call(ctx,sx,sy);

  };

  var rotate = ctx.rotate;

  ctx.rotate = function(radians){

  xform = xform.rotate(radians*180/Math.PI);

  return rotate.call(ctx,radians);

  };

  var translate = ctx.translate;

  ctx.translate = function(dx,dy){

  xform = xform.translate(dx,dy);

  return translate.call(ctx,dx,dy);

  };

  var transform = ctx.transform;

  ctx.transform = function(a,b,c,d,e,f){

  var m2 = svg.createSVGMatrix();

  m2.a=a; m2.b=b; m2.c=c; m2.d=d; m2.e=e; m2.f=f;

  xform = xform.multiply(m2);

  return transform.call(ctx,a,b,c,d,e,f);

  };

  var setTransform = ctx.setTransform;

  ctx.setTransform = function(a,b,c,d,e,f){

  xform.a = a;

  xform.b = b;

  xform.c = c;

  xform.d = d;

  xform.e = e;

  xform.f = f;

  return setTransform.call(ctx,a,b,c,d,e,f);

  };

  var pt  = svg.createSVGPoint();

  ctx.transformedPoint = function(x,y){

  pt.x=x; pt.y=y;

  return pt.matrixTransform(xform.inverse());

  }

  }

]]>

        </xsl:text>

</script>

<br></br>

<!-- Create buttons to allow user to rotate image to proper orientation. IE does not read EXIF correctly, at this time, for pictures taken by phone held in 'wrong orientation'.  There may be some java script HTML magic to fix this... I haven't tried to figure it out yet. I did see some potential for using style CSS to honor EXIF orientation, but only supported by Mozzilla at this time?? -->

<button onclick="myCanvas1()">0</button>

<script type="text/javascript" charset="utf-8">

  <xsl:text disable-output-escaping="yes" >

            <![CDATA[

  function myCanvas1() {

            TO_RADIANS = Math.PI/180;

            var canvas = document.getElementsByTagName('canvas')[0];

                canvas.width = canvas.width;

             canvas.width = 300; canvas.height = 300;

                imgRotate = 0;

                 var ctx = canvas.getContext('2d');

                 trackTransforms(ctx);

                

                 ctx.rotate(0 * TO_RADIANS);

                var imgh = imgAttach.height

                var imgw = imgAttach.width

                if (imgw > imgh){

                   ctx.drawImage(imgAttach,0,35,300,300 * imgAttach.height / imgAttach.width);}

             else if (imgw == imgh) {

                   ctx.drawImage(imgAttach,0,0,300,300);} 

                else {

                ctx.drawImage(imgAttach,35,0,300 * imgAttach.width / imgAttach.height,300);

               

}

    redraw();

}

]]>

        </xsl:text>

</script>

<button onclick="myCanvas2()">90</button>

<script type="text/javascript" charset="utf-8">

  <xsl:text disable-output-escaping="yes" >

            <![CDATA[

  function myCanvas2() {

            TO_RADIANS = Math.PI/180;

            var canvas = document.getElementsByTagName('canvas')[0];

                canvas.width = canvas.width;

             canvas.width = 300; canvas.height = 300;

                imgRotate = 90;

                 var ctx = canvas.getContext('2d');

                 trackTransforms(ctx);

                 ctx.translate(canvas.width / 2, canvas.height / 2);

                 ctx.rotate(90 * TO_RADIANS);

                 var imgh = imgAttach.height

                 var imgw = imgAttach.width

                 if (imgw > imgh){

                     ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

  else if (imgw == imgh) {

                     ctx.drawImage(imgAttach,-150,-150,300,300);} 

                 else {

      ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);

}

      redraw();

}

]]>

        </xsl:text>

</script>

<button onclick="myCanvas3()">180</button>

<script type="text/javascript" charset="utf-8">

  <xsl:text disable-output-escaping="yes" >

            <![CDATA[

  function myCanvas3() {

            TO_RADIANS = Math.PI/180;

            var canvas = document.getElementsByTagName('canvas')[0];

            canvas.width = canvas.width;

         canvas.width = 300; canvas.height = 300;

            imgRotate = 180;

                 var ctx = canvas.getContext('2d');

                 trackTransforms(ctx);

                 ctx.translate(canvas.width / 2, canvas.height / 2);

                 ctx.rotate(180 * TO_RADIANS);

                 var imgh = imgAttach.height

                 var imgw = imgAttach.width

                 if (imgw > imgh){

                   ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

  else if (imgw == imgh) {

                   ctx.drawImage(imgAttach,-150,-150,300,300);} 

                 else {

    ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);

}

    redraw();

}

  ]]>

        </xsl:text>

</script>

  <button onclick="myCanvas4()">270</button>

   <script type="text/javascript" charset="utf-8">

  <xsl:text disable-output-escaping="yes" >

            <![CDATA[

            function myCanvas4() {

            TO_RADIANS = Math.PI/180;

            var canvas = document.getElementsByTagName('canvas')[0];

                canvas.width = canvas.width;

             canvas.width = 300; canvas.height = 300;

                imgRotate = 270;

                 var ctx = canvas.getContext('2d');

                 trackTransforms(ctx);

                 ctx.translate(canvas.width / 2, canvas.height / 2);

                 ctx.rotate(270 * TO_RADIANS);

                 var imgh = imgAttach.height

                 var imgw = imgAttach.width

                 if (imgw > imgh){

                   ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

  else if (imgw == imgh) {

                   ctx.drawImage(imgAttach,-150,-150,300,300);} 

                 else {

    ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);

                      }

    redraw();

}

  ]]>

        </xsl:text>

</script>

  </td><tr></tr><td></td>

  </tr>

  <tr align="center">

  <td>

  <button onclick="myCanvasorig()"><xsl:value-of select="Attachment/ContentType[contains(., 'image')]/../Name" /></button>

   <script type="text/javascript" charset="utf-8">

  <xsl:text disable-output-escaping="yes" >

            <![CDATA[ 

            function myCanvasorig() { TO_RADIANS = Math.PI/180;

            var canvas = document.getElementsByTagName('canvas')[0];

                canvas.width = canvas.width;

             canvas.width = 300; canvas.height = 300;

                imgRotate = 0;

                var ctx = canvas.getContext('2d');

                trackTransforms(ctx);

                ctx.rotate(0 * TO_RADIANS);

  ]]></xsl:text>

                imgAttach.src = origAttach.src;

   

  <xsl:text disable-output-escaping="yes" >

            <![CDATA[var imgh = imgAttach.height

                var imgw = imgAttach.width

                if (imgw > imgh){

                  ctx.drawImage(imgAttach,0,35,300,300 * imgAttach.height / imgAttach.width);}

             else if (imgw == imgh) {

                  ctx.drawImage(imgAttach,0,0,300,300);} 

                else {

               ctx.drawImage(imgAttach,35,0,300 * imgAttach.width / imgAttach.height,300);

                     }

  redraw();

  }

  ]]>

        </xsl:text>

</script>

  </td><tr></tr><td></td>

  </tr>

  </xsl:if>

  <xsl:if test="($attachmentCount &gt; $imageCount) or not($imageCount = 1)">

  <tr align="center">

  <td>

  <table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px">

  <xsl:for-each select="Attachment[position() mod 2 = 1]">

  <!-- Set Variable to make uniquely named button and canvas function pairings -->

  <xsl:variable name="i" select="position()" />

  <tr align="left" bgcolor="white">

  <xsl:if test="(position() +1) mod 2">

  <xsl:attribute name="bgcolor">

  <xsl:value-of select="$alternateRowColor"/>

  </xsl:attribute>

  </xsl:if>

  <td><xsl:choose>

      <!-- Only create buttons to populate canvas with images. Note: for some reason this test also includes ContentType that starts with Video.-->

  <!-- Have not tried to figure outa solution for that yet.-->

        <xsl:when test="ContentType[starts-with(., 'image')]">

  <xsl:text disable-output-escaping="yes" >

   <!-- Make Buttons for additional image attachments -->

            <![CDATA[  <button onclick="myCanvasa]]></xsl:text>

<xsl:value-of select="$i" />  <xsl:text disable-output-escaping="yes" >

            <![CDATA[()">]]></xsl:text>  <xsl:value-of select="Name" /> <xsl:text disable-output-escaping="yes" >

            <![CDATA[</button>]]></xsl:text>

  <!-- Create variables to construct the necessary HTML5 path to the picture for display in the canvas -->

  <xsl:variable name="imageSrc2" select="FilePath"/>

  <xsl:variable name="newtext2" select="translate($imageSrc2,'\','/')"/>

   <script type="text/javascript" charset="utf-8">

  <xsl:text disable-output-escaping="yes" >

            <![CDATA[ 

            function myCanvasa]]></xsl:text>

  <xsl:value-of select="$i" />  <xsl:text disable-output-escaping="yes" >

            <![CDATA[() { TO_RADIANS = Math.PI/180;

                var canvas = document.getElementsByTagName('canvas')[0];

                canvas.width = canvas.width;

             canvas.width = 300; canvas.height = 300;

                imgRotate = 0;

                var ctx = canvas.getContext('2d');

                trackTransforms(ctx);

                

                ctx.rotate(0 * TO_RADIANS);

  ]]></xsl:text>

  //set the picture to display

         imgAttach.src = '<xsl:text disable-output-escaping="yes" >File:///</xsl:text><xsl:value-of select="$newtext2"/>';

  <xsl:text disable-output-escaping="yes" >

            <![CDATA[               

     var imgh = imgAttach.height

                var imgw = imgAttach.width

  //based on proportion set desired origin on canvas for display.

                if (imgw > imgh){

                   ctx.drawImage(imgAttach,0,35,300,300 * imgAttach.height / imgAttach.width);}

             else if (imgw == imgh) {

                   ctx.drawImage(imgAttach,0,0,300,300);} 

                else {

                ctx.drawImage(imgAttach,35,0,300 * imgAttach.width / imgAttach.height,300);

               

}

    redraw();

  }

  ]]>

        </xsl:text>

</script> </xsl:when>

<!-- display hyperlink in popup window for non-image attachments. -->

<xsl:otherwise>

  <a target="_blank">

  <xsl:attribute name="href">

  <xsl:value-of select="FilePath"/>

  </xsl:attribute>

  <xsl:value-of select="Name" />

  </a>

</xsl:otherwise>

</xsl:choose>

  </td>

  <!-- do same as preceding for alternate column -->

  <td><xsl:choose>

        <xsl:when test="ContentType[starts-with(., 'image')]">

  <xsl:text disable-output-escaping="yes" >

            <![CDATA[  <button onclick="myCanvasb]]></xsl:text>

<xsl:value-of select="$i" />  <xsl:text disable-output-escaping="yes" >

       

     <![CDATA[()">]]></xsl:text>  <xsl:value-of select="following-sibling::Attachment/Name" />

  <xsl:text disable-output-escaping="yes" >

            <![CDATA[</button>]]></xsl:text>

  <xsl:variable name="imageSrc3" select="following-sibling::Attachment/FilePath"/>

  <xsl:variable name="newtext3" select="translate($imageSrc3,'\','/')"/>

   <script type="text/javascript" charset="utf-8">

  <xsl:text disable-output-escaping="yes" >

            <![CDATA[ 

            function myCanvasb]]></xsl:text>

<xsl:value-of select="$i" />  <xsl:text disable-output-escaping="yes" >

            <![CDATA[() {

    TO_RADIANS = Math.PI/180;

               var canvas = document.getElementsByTagName('canvas')[0];

                canvas.width = canvas.width;

             canvas.width = 300; canvas.height = 300;

                imgRotate = 0;

                 var ctx = canvas.getContext('2d');

                 trackTransforms(ctx);

                

                 ctx.rotate(0 * TO_RADIANS);

  ]]></xsl:text>

  //set the image that displays when button is pressed.

          imgAttach.src = '<xsl:text disable-output-escaping="yes" >File:///</xsl:text><xsl:value-of select="$newtext3"/>';

          <xsl:text disable-output-escaping="yes" >

            <![CDATA[                var imgh = imgAttach.height

                var imgw = imgAttach.width

  //Set Canvas picture origin based on photo proportion.  origins used were for photos attached to feature with collector for ArcGIS on Iphone

                if (imgw > imgh){

                  ctx.drawImage(imgAttach,0,35,300,300 * imgAttach.height / imgAttach.width);}

             else if (imgw == imgh) {

                  ctx.drawImage(imgAttach,0,0,300,300);} 

                else {

               ctx.drawImage(imgAttach,35,0,300 * imgAttach.width / imgAttach.height,300);

               

}

    redraw();

  }

  ]]>

        </xsl:text>

                 </script>               

  </xsl:when>

                                           <xsl:otherwise>

  <a target="_blank">

  <xsl:attribute name="href">

  <xsl:value-of select="following-sibling::Attachment/FilePath"/>

  </xsl:attribute>

  <xsl:value-of select="following-sibling::Attachment/Name" />

  </a>

                                            </xsl:otherwise>

                                         </xsl:choose>

  </td>

  </tr>

  </xsl:for-each>

  </table>

  </td>

  </tr>

  </xsl:if>

  </table>

  </td>

  </tr>

  </xsl:template>

  <xsl:template match="Field">

  <tr>

  <xsl:if test="(position() +1) mod 2">

  <xsl:attribute name="bgcolor">

  <xsl:value-of select="$alternateRowColor"/>

  </xsl:attribute>

  </xsl:if>

  <xsl:if test="FieldName">

  <td>

  <xsl:value-of select="FieldName"/>

  </td>

  </xsl:if>

  <td>

  <xsl:choose>

  <xsl:when test="FieldValue[starts-with(., 'www.')]">

  <a target="_blank">

  <xsl:attribute name="href">http://<xsl:value-of select="FieldValue"/>

  </xsl:attribute>

  <xsl:value-of select="FieldValue"/>

  </a>

  </xsl:when>

  <xsl:when test="FieldValue[starts-with(., 'http:')]">

  <a target="_blank">

  <xsl:attribute name="href">

  <xsl:value-of select="FieldValue"/>

  </xsl:attribute>

  <xsl:value-of select="FieldValue"/>

  </a>

  </xsl:when>

  <xsl:when test="FieldValue[starts-with(., 'https:')]">

  <a target="_blank">

  <xsl:attribute name="href">

  <xsl:value-of select="FieldValue"/>

  </xsl:attribute>

  <xsl:value-of select="FieldValue"/>

  </a>

  </xsl:when>

  <xsl:when test="FieldValue[starts-with(., '\\')]">

  <a target="_blank">

  <xsl:attribute name="href">

  <xsl:value-of select="FieldValue"/>

  </xsl:attribute>

  <xsl:value-of select="FieldValue"/>

  </a>

  </xsl:when>

  <xsl:when test="FieldValue[starts-with(., '&lt;img ')]">

  <xsl:value-of select="FieldValue" disable-output-escaping="yes" />

  </xsl:when>

  <xsl:otherwise>

  <xsl:value-of select="FieldValue"/>

  </xsl:otherwise>

  </xsl:choose>

  </td>

  </tr>

  <!-- A thanks to the internet for whom which this hacked together XSL solution would have been quite difficult.. at least for me.  Much of the javascript and HTML5 -->

  <!-- used in this example can be found in repeated form from multiple sources by searching for HTML5 Canvas zoom pan rotate image -->

  </xsl:template>

</xsl:stylesheet>

0 Kudos