Implement hot zone editing

Defining a hot spot in the picture to display text messages or add links is a common and useful feature for graphic display.

This chapter is introduced by OpenSeadragonSelection Plug-in unit, JQuery ballon Plug-in that utilizes OpenSeadragon's event mechanism for hot zone editing.

The final results are as follows:

 

Target function

• Click the hot zone Edit button to switch to the hot zone edit state, and then click the button to exit the edit state
• Click on the graphical area to create a new heat zone or click on the selected heat zone
• Drag-and-drop edits can be made to the selected heat zone, including position and size adjustments
• Edit the properties of the selected heat zone, including id, title, content, and so on
• Select id from the drop-down box, switch to the frame and local view where the hot area is located, and select the hot area for editing

Improve OpenSeadragonSelection to support multi-frame hotspots

Basic ideas:

Add the hotspot you are editing to overlays when you click the check to finish editing

 

viewer.addHandler('selection',function(opt) {
       	  var viewer = opt.eventSource;
       	  var sel = viewer.selectionInstance;
       	  sel.getOpt();
       	  var rect = sel.rect;
       	  sel.ballon.hideBalloon();
      	  var page = viewer.currentPage();
      	  var ol = viewer.tileSources[page];
      	  if(!ol.overlays){
      		  ol.overlays=[];
      	  }
      	 
      	  var opt_ol = rect.opt;
      	  opt_ol.x=opt.x;
      	  opt_ol.y=opt.y;
      	  opt_ol.width=opt.width;
      	  opt_ol.height=opt.height;
      	  opt_ol.className= 'highlight';
      	  opt_ol.rotation= opt.rotation;
      	  opt_ol.page=page;
      	  opt_ol.bounds=viewer.viewport.getBounds( true );
       	  viewer.addOverlay(opt_ol);
        });

Remove hot spots from overlays when clicking Cancel Edit

 

 

viewer.addHandler('selection_cancel',function(opt) {
  	 	var viewer = opt.eventSource;
  	   	var sel = viewer.selectionInstance;
  	 	var rect = sel.rect;
  	 	sel.ballon.hideBalloon();
		jQuery("select#ipt_id option").filter("[value='"+rect.opt.id+"']").remove();
  	 	 //Remove the Fang from overlay
  	 	 if(rect.opt){
  	 		 var page = viewer.currentPage();
  	 		  var ol = viewer.tileSources[page].overlays;
  	 		  for(var x in ol){
  	 			  if(rect.opt==ol[x]){
  	 				  ol.splice(x,1);
  	 			  }
  	 		  }
  	 	 }
    });

When drawing overlays, add support for click-selected edits:

 

 

viewer.addHandler('add-overlay',function(opt){
	   var viewer = opt.eventSource;
	   var sel = viewer.selectionInstance;
	   var el = opt.element;
	   //click an overlay
	   el.onclick=function(event){
		   if(!event.originalEvent)
			   return;
			var sel = viewer.selectionInstance;
		   if(sel){			   
			   sel.selOpt(this);
		   }
		   event.preventDefaultAction=true;
		   event.stopBubbling = true;
	   };
	   el.opt = opt.options;
		var pid = el.opt.id;
		var exists = 0 != jQuery('#ipt_id option[value='+pid+']').length;
		if(!exists){
			jQuery("#ipt_id").append("<option value='"+pid+"'>"+pid+"</option>");
		}
		if(sel.toPid == pid){
			sel.selOpt(el);
			sel.toPid =null;
		}

	   jQuery(el).css('display','block');
	});	
        
     return this.selectionInstance;
   };

 

 

Introducing ballon for attribute editing and drop-down selection of hot spots

 

$.extend( $.Selection.prototype, $.ControlDock.prototype, /** @lends OpenSeadragon.Selection.prototype */{

    	//Unique id of c4w generated heat zone 
    id:function(){
		return this.idPrefix+new Date().getTime().toString(16);
	},    	
    //Create a drop-down selection box
    createOpt:function(){
		var pid = this.id();
		jQuery("#ipt_id").append("<option value='"+pid+"'>"+pid+"</option>");
		var opt= {
			id: pid,
			name:'',
			tip:''
		};    		
 	  var viewer = this.viewer;
	  var page = viewer.currentPage();
	  var ol = viewer.tileSources[page];
	  if(!ol.overlays){
	  	ol.overlays = [];
	  }
	  ol.overlays.push(opt);
	  return opt;
    },
    //Set properties when options are selected
	setOpt:function(){
		var opt = this.rect.opt;
		jQuery("#ipt_id").val(opt.id);
		jQuery("#ipt_name").val(opt.name);
		jQuery("#ipt_tip").val(opt.tip);
		jQuery("#ipt_content").val(opt.content);
	},
    //Hot Area Edit Gets Attribute Values to Update Attributes
	getOpt:function(){
		var opt = this.rect.opt;
		opt.tip=jQuery("#ipt_tip").val();
		opt.name=jQuery("#ipt_name").val();
		opt.content=jQuery("#ipt_content").val();
	},
    //When the drop-down options change, switch to the frame and view where the selected hot zone is located and select it.
	selOpt:function(ol){
	   var sel = this;
	   var opt = ol.opt;
	   var rect = sel.selectRect(opt.x, opt.y, opt.width, opt.height,opt.rotation);
	   rect.opt = opt;
	   sel.viewer.removeOverlay(ol);
	   sel.draw();
	},

 

 

Functional implementation of selected heat zone:

//c4w
        selectRect: function ( x, y, width, height, rotation){
        	this.endRect();
        	this.rect = new $.SelectionRect(x, y, width, height, rotation);
        	this.draw();
        	this.rectDone = true;
        	return this.rect;
        },

 

See the attachment for the modified selection s and download the ballon code yourself.(