A template for generating JavaScript in a Jenkins Active Choices Reactive Reference

imageGallery.jst

/* 
Template text made into javascript after Groovy Processing

functions supporting loading, layout, Colorization and 
adjustments/filtering of image sets into Openseadragon iiif viewer
Supports channel overlay with opacity controls
@author: Ioannis K. Moutsatsos
@lastUpdate: FEB-27-2018
*/

var positionEl = document.querySelectorAll('.info .position')[0];
var zoomEl = document.querySelectorAll('.info .zoom')[0];
Caman.Store.put = function() {};

jQuery(document).ready(function() {
  var viewer = OpenSeadragon({
    id: "openseadragon1",
    prefixUrl: "/userContent/js/$osdJs/images/",
    preserveViewport: true,
    debugMode: true,
    crossOriginPolicy: "Anonymous",
    viewportMargins: {
      bottom: 120
    },
    tileSources: []
  });

  viewer.addHandler('open', function() {
    var count = viewer.world.getItemCount();
    var labelArray = document.getElementById('i2vlabels').value.split(",");
    var pos = new OpenSeadragon.Point(0, 0);
    var i;

    var overlayDisplacement = 1
    var imgPerComposite = 1
    var noAnno = document.getElementById("noAnno").checked

    //determine layout strategy
    var rn = ''
    var fillStrategy = ''
    
   if (isJenkinsForm()) {
      document.getElementById('fillStrategy').value = document.getElementById('gridRows').value + ',' + jQuery("input[type='radio'][name='fillBy']:checked").val();
      rn = document.getElementById('fillStrategy').value.split(',')[0];
      fillStrategy = jQuery("input[type='radio'][name='fillBy']:checked").val();
    }else {
      rn = document.getElementById('gridRows').value
      fillStrategy = jQuery("input[type='radio'][name='fillBy']:checked").val()
      }
    
    //Clean up image labels if they will be overlayed
    if (jQuery('#getOverlay').is(":checked")) {
      labelArray = getNoNameLabels(labelArray);
    }
    for (i = 0; i < count; i++) {

      image = viewer.world.getItemAt(i)
        //X-Y displacement of an image in the world depends on whether we will overlay it to others
      if (jQuery('#getOverlay').is(":checked")) {
        imgPerComposite = document.getElementById('imgPerComposite').value
        if (i % imgPerComposite == 0) {
          console.log('Move Placement on:' + i)
          image.setOpacity(1);
          overlayDisplacement = 1
        } else {
          console.log('Decreasing Opacity:' + 1 / ((i % imgPerComposite) * 2))
          image.setOpacity(1 / ((i % imgPerComposite) * 2));
          overlayDisplacement = 0
          console.log('Overlay Placement on:' + i)
        }
      }

      if (!noAnno) {
        jQuery(".imgInfo").append("<div id=Meta" + i + "><p style=color:red >" + labelArray[i] + "</p> </div>");
      }

      if (i % rn == 0 && i % imgPerComposite == 0) {


        if (i > 0) {
          if (fillStrategy == 'rowsFirst') {
            pos.y = 0;
            pos.x += image.getBounds().width * overlayDisplacement;
            image.setPosition(pos, true);
          } else {
            //columnFirst
            pos.x = 0;
            pos.y += image.getBounds().height * overlayDisplacement;
            image.setPosition(pos, true);
          }

          if (!noAnno) {
            viewer.addOverlay("Meta" + i, image.getBounds(), OpenSeadragon.Placement.BOTTOM);
          }
        } else {
          if (fillStrategy == 'rowsFirst') {
            pos.y = 0 //+= image.getBounds().height;
          } else {
            //column first
            pos.x = 0
          }
          image.setPosition(pos, true);
          if (!noAnno) {
            viewer.addOverlay("Meta" + i, image.getBounds(), OpenSeadragon.Placement.BOTTOM);
          }
        }

      } else {
        if (fillStrategy == 'rowsFirst') {
          pos.y += image.getBounds().height * overlayDisplacement;
        } else {
          pos.x += image.getBounds().width * overlayDisplacement;
        }
        image.setPosition(pos, true);
        if (!noAnno) {
          viewer.addOverlay("Meta" + i, image.getBounds(), OpenSeadragon.Placement.BOTTOM);
        }
      }
    }
    imageObjectsList = getImageObjectColors();
    theFilters = assignImageColors(viewer, imageObjectsList)
      //apply the Color filters
    viewer.setFilterOptions({
      filters: theFilters
    });
    viewer.viewport.goHome(true);
  }); //end addHandler-open

  //viewer.initializeAnnotations();
  jQuery.exposed = {
    viewer: viewer
  }

});

// we set the layout to the last unchecked value
function freezeGalleryLayout(elemId) {
  if (document.getElementById('gridRows')) {
    namedCheckboxToggle(elemId);
    if (document.getElementById(elemId).value == document.getElementById(elemId).value) {
      console.log('OldLastLayout:' + document.getElementById('lastLayout').value)
      document.getElementById('lastLayout').value = 'lastLayout:' + document.getElementById('gridRows').value + ';' + jQuery("input[type='radio'][name='fillBy']:checked").val();
      console.log('NewLastLayout:' + document.getElementById('lastLayout').value)
      document.getElementById('fillStrategy').value = document.getElementById('gridRows').value + ',' + jQuery("input[type='radio'][name='fillBy']:checked").val();
    }
  } //end gridRows
}

// a function for providing an identifiable checkbox value in composite input 
function namedCheckboxToggle(elemId) {
  if (document.getElementById(elemId).value == 'false') {
    document.getElementById(elemId).value = document.getElementById(elemId).id
  } else {
    document.getElementById(elemId).value = 'false'
  }
}

//we open the OSD viewer with a new set of images
function viewImage(viewer, imageCsv) {
  imgName = document.getElementById(imageCsv).value;
  //OSD viewer API method
  viewer.open(tileSources);
  //viewer.viewport.goHome(true);
} //end of function

function viewImageTiles(viewer) {
  imgName = document.getElementById("i2v").value;
  tileSources = imgName.split(",")
    //OSD viewer API method
  viewer.world.resetItems()
  console.log('Reset-viewer world')
  viewer.open(tileSources);
} //end of function

/*
A Hack to check whether HTML page is a Jenkins build form or a Build report
Useful since same javascript is used for both, but not all UI elements are present in report
The logic checks for Active Choice parameters
*/
function isJenkinsForm(){
if (jQuery("[id*='choice-parameter']").size()>0 ){
	return true
	}else{
	return false
	}
}
function setConvertFlag() {
  document.getElementById("rgbFlag").value = 'ON'
  parentId = document.getElementById("rgbFlag").parentNode.id
  jQuery('#i2conv').trigger('change')
  jQuery('#' + parentId).trigger('change')

  /*trick to wait for update of i2conv element before proceeding*/
  if (document.getElementById("i2conv").value == 'Not Set') {
    window.requestAnimationFrame(setConvertFlag);
  } else {
    viewImage(jQuery.exposed.viewer, "i2conv");
    var thePage = jQuery.exposed.viewer.currentPage()
      //we split the image Url to get a clean image name for display
    var theTile = jQuery.exposed.viewer.referenceStrip.tileSources[thePage].split('%2F').slice(-1)[0].split('/').slice(0)[0]
    jQuery("#currentImage").html("<h3 style='color:blue'>" + theTile + "</h3>");
  }
} //end of function

/*assign image colors from UI properties*/
function assignImageColors(viewer, imageObjectsList) {
  //add corresponding images to imageObjectsList
  imageIdArray = document.getElementById('i2vlabels').value.split(",");
  imageObjectsList.forEach(function(imo) {
    imObjName = imo.imageObject
      // a bit convoluted js to find indices of specific object types in viewer.world
      // 	matchedImageIndex=jQuery.grep(viewer.currentOverlays.map(function(it,index){return {'fi':index, 'o':it.element.innerText.split('@')[0]}}),
    matchedImageIndex = jQuery.grep(imageIdArray.map(function(it, index) {
        return {
          'fi': index,
          'o': it.split('@')[0]
        }
      }),
      function(n, i) {
        return n.o == imObjName
      }).map(function(item, ind) {
      return item.fi
    });
    objImages = []
    matchedImageIndex.forEach(function(mi) {
      objImages.push(viewer.world.getItemAt(mi))
    }); //end for each matchedImageIndex
    imo['images'] = objImages

  });
  //console.log(imageObjectsList);

  theFilters = []
  imageObjectsList.forEach(function(imo) {
    theFilters.push({
        'items': imo.images,
        'processors': [
          function(context, callback) {
            Caman(context.canvas, imo.color, function() {
              //			this.newLayer(function(){
              //			this.setBlendingMode("normal");
              //			this.opacity(imo.color.a);
              //			this.copyParent();
              this.channels({
                red: imo.color.red,
                green: imo.color.green,
                blue: imo.color.blue
              })
              this.render(callback);
              //			   }); //new layer
            });
          },
          OpenSeadragon.Filters.BRIGHTNESS(Number(imo.brightness)),

        ]
      }) //end push
  });
  return theFilters
} //end assignImageColors

/* function creates a list of color properties for each of the checked image objects 
   color is returned both as a hex string, as well as a map of rgba color values and transparency
   note that opacity is a color property
 */
function getImageObjectColors() {
  objPropsList = [];
  checkedImageObjects = []
  if (jQuery("[id*='choice-parameter']").size() == 0) {
    checkedImageObjects = jQuery("[id*='show']")
  } else {
    checkedImageObjects = jQuery("[id*='choice-parameter']").has("input[value='IMAGE_OBJECTS']").find("input[type='checkbox'][name='value']:checked")
  }
  checkedImageObjects.each(function() {
    objectName = this.getAttribute('value')
    objectColor = document.getElementById("colpick_" + objectName).value;
    colorOpacity = document.getElementById("opacity_" + objectName).value;
    colorBrightness = document.getElementById("set_brightness").value;
    objProps = {
      'imageObject': objectName,
      'brightness': colorBrightness,
      'colorHex': objectColor,
      'color': convertHex(objectColor, colorOpacity)
    }
    objPropsList.push(objProps)
  }); //end for each
  console.log(objPropsList)
  return objPropsList
}

/*function to convert a hex color to rgb */
function convertHex(hex, opacity) {
  hex = hex.replace('#', '');
  rgbColor = {
    'red': parseInt(hex.substring(0, 2), 16) - 255,
    'green': parseInt(hex.substring(2, 4), 16) - 255,
    'blue': parseInt(hex.substring(4, 6), 16) - 255,
    'a': opacity / 100
  }
  return rgbColor;
}

/*function for filter*/
function changeFilter(viewer, filterType, currentValue, spanItem) {
  brightValue = jQuery('#set_brightness').val();
  contrastValue = jQuery('#set_contrast').val();
  console.log('currentBrightness=' + brightValue);
  console.log('currentContrast=' + contrastValue);
  if (viewer.world.getItemCount() > 0) {
    imageObjectsList = getImageObjectColors();
    theFilters = assignImageColors(viewer, imageObjectsList)
    theFilters.forEach(function(filt) {
      filt.processors.push(OpenSeadragon.Filters.BRIGHTNESS(Number(brightValue)))
      filt.processors.push(OpenSeadragon.Filters.CONTRAST(contrastValue))
    });

    //       if (jQuery('#getOverlay').is(":checked")){
    //       imgPerComposite=document.getElementById('imgPerComposite').value
    //       setChannelOpacity(viewer, imgPerComposite) 
    //       };   

    //apply the filter set (color and adjustments)
    viewer.setFilterOptions({
      filters: theFilters
    });
  } //end item count >0
  jQuery(spanItem).html(currentValue);
} //end function changeFilter

/*returns label array without the object name prefix*/
function getNoNameLabels(labelsWithNames) {
  return labelsWithNames.map(function(lbl) {
    return lbl.split('@')[1]
  })

} //end changeFilter function

/*function for adjusting channel image opacity */
function setChannelOpacity(viewer, channelIndx, currentValue, spanItem) {
  if (jQuery('#getOverlay').is(":checked")) {
    imgPerComposite = document.getElementById('imgPerComposite').value
    count = viewer.world.getItemCount();
    imageObjectsList = getImageObjectColors();
    //with known channel index   
    console.log('ImgAtIndx:' + channelIndx)
    opacityVal = imageObjectsList[channelIndx].color.a * 100
    for (i = 0; i < count; i++) {
      if (i % imgPerComposite == channelIndx) {
        viewer.world.getItemAt(i).setOpacity(opacityVal)
        console.log('ImgAtIndx:' + i + ' Opacity:' + opacityVal)
      }
    }

  };
  jQuery(spanItem).html(currentValue);


} //end setChannelOpacity function

/* 
Toggles visibility of a channel layer by modifying its transparency
Note the dependency on the 'lastOpacity' and 'next' HTML controls
*/

function showOnCheck(viewer, channelIndx, opaControlId) {
  console.log('Toggle Visibility:' + opaControlId)

  if (jQuery("#show_" + channelIndx).is(":checked")) {
    //restore to last  opacity value
    lastOpacVal = jQuery("#lastOpacity_" + channelIndx).val();
    jQuery("#" + opaControlId).val(lastOpacVal);
    jQuery("#" + opaControlId).next().html(lastOpacVal);
    setChannelOpacity(viewer, channelIndx, lastOpacVal, jQuery('#' + opaControlId).next());
  } else {
    //store last opacity value -we restore to that  
    jQuery("#lastOpacity_" + channelIndx).val(jQuery("#" + opaControlId).val());
    console.log('Last value was:' + jQuery("#lastOpacity_" + channelIndx).val(jQuery("#" + opaControlId).val()))
    jQuery("#" + opaControlId).val(0);
    jQuery("#" + opaControlId).next().html(0);
    setChannelOpacity(viewer, channelIndx, 0, jQuery('#' + opaControlId).next());
  }
}