This week I’d like to highlight another example project one of our support agents developed in response to a customer request. Group annotations are a necessary feature in any application utilizing annotations and markup. In fact, the LEADTOOLS HTML5 SDK includes support for group annotations out of the box by simply clicking and dragging with the select tool. However, this customer had a requirement to create and edit group annotations programmatically.

Here is how you create the annotations and then place them in groups. After that you can use the mouse to select, move and resize each group as if they were a single entity.

// Get the container and create some annotations
var container = _automation.get_container();
var rectObj = new lt.Annotations.Core.AnnRectangleObject();
var rectObj2 = new lt.Annotations.Core.AnnRectangleObject();
var rectObj3 = new lt.Annotations.Core.AnnRectangleObject();
rectObj.set_rect(lt.LeadRectD.create(3 * inch, 3 * inch, 1 * inch, 1 * inch));
rectObj2.set_rect(lt.LeadRectD.create(4 * inch, 4 * inch, 3 * inch, 3 * inch));
rectObj3.set_rect(lt.LeadRectD.create(8 * inch, 8 * inch, 3 * inch, 3 * inch));

// Set some properties on the annotations
with(lt.Annotations.Core)
{
   rectObj.set_stroke(AnnStroke.create(AnnSolidColorBrush.create("blue"), lt.LeadLengthD.create(1)));
   rectObj2.set_stroke(AnnStroke.create(AnnSolidColorBrush.create("red"), lt.LeadLengthD.create(1)));
   rectObj3.set_stroke(AnnStroke.create(AnnSolidColorBrush.create("green"), lt.LeadLengthD.create(1)));
   rectObj.set_fill(AnnSolidColorBrush.create("yellow"));
   rectObj2.set_fill(AnnSolidColorBrush.create("blue"));
   rectObj3.set_fill(AnnSolidColorBrush.create("red"));
}

// Add annotations to container
container.get_children().add(rectObj);
container.get_children().add(rectObj2);
container.get_children().add(rectObj3);

// Assign annotations to groups
rectObj.set_groupName("Group1");
rectObj2.set_groupName("Group1");
rectObj3.set_groupName("Group2");

Furthermore, if you want to edit a group annotation programmatically, here’s how you go about that:

// Get the container and all its objects
var container = _automation.get_container();
var MyObjects = _automation.get_container().get_children();                        

// Loop through its objects and modify each object based on whether it is part of the group you are editing
for (var i = 0; i < MyObjects.get_count(); i++) 
{
   var child = MyObjects.get_item(i); 
   var groupName = child.get_groupName(); 

   // hide Group1 and show Group2
   if(groupName.localeCompare("Group1") == 0)
      child.set_isVisible(false);
   else
      child.set_isVisible(true);
}

To download the full example, check out the original forum post.

We also have many live online demos hosted on our servers for you to play with. If you would like to see all of our automated Annotations and Markup features in action, check out our HTML5 demos page for a list of all our HTML5 demos showcasing technologies such as PDF Thumbnails, DICOM & PACS, OCR, Barcode and more.

New Annotation Features Coming Soon: Layers

The example above shows how it can be currently done with the shipping version but our document imaging developers are putting the finishing touches on more features which will make this process even easier. The HTML5 Annotations soon receive support for Layers, which will greatly simplify the process of managing annotations visibility and z-order of multiple annotations at the same time. Backwards compatibility with your old group annotations code will remain intact, but there will also be improvements to the API that will make the programming interface easier to work with. Stay tuned for another post regarding this subject in the coming weeks!