Creating and Using Annotations (JavaScript)

Note:

This topic is for Document/Medical only.

Note:

You’ll need to call the UnlockSupport method to unlock Document Imaging capability.

Take the following steps to add code that demonstrates the creation and deletion, saving and loading, and copying and pasting of annotation objects:

1.

Start with the project that you created in Loading and Displaying an Image.

2.

Add the following line between the <SCRIPT> and </SCRIPT> tags:

var NewTag;

3.

Add the following code between the <BODY> </BODY> tags to add the annotations COM object:

<OBJECT ID="RasterAnn" NAME="RasterAnn" 
   CLASSID="CLSID:00140723-B1BA-11CE-ABC6-F5B2E79D9E3F"
   CODEBASE="path to CAB file/Ltran14n.CAB"> 
   <P>This is not supported in web browser.</P>
</OBJECT><BR>

4.

Add the following code to the Window_OnLoad() function:

RasterAnn.AnnParentRasterView = LEADRasterView1; 
//Enable left button drawing of annotations
RasterAnn.AnnAutoDrawEnable = true; 
  
//Enable right-click to display annotation menus
RasterAnn.AnnAutoMenuEnable = true; 
NewTag = 0;

5.

Add the following code between the <FORM> </FORM> tags to create four buttons:

<INPUT TYPE="button" NAME="btnStart" VALUE="Start" LANGUAGE="JavaScript"
      OnClick="Start()">
      
<INPUT TYPE="button" NAME="btnSave" VALUE="Save" LANGUAGE="JavaScript"
      OnClick="Save()">
      
<INPUT TYPE="button" NAME="btnCopy" VALUE="Copy" LANGUAGE="JavaScript"
      OnClick="Copy()">
      
<INPUT TYPE="button" NAME="btnRealize" VALUE="Realize" LANGUAGE="JavaScript"
      OnClick="Realize()">

6.

Add the following code between the <SCRIPT> </SCRIPT> tags to for the btnStart button:

function Start()
{
   var ANN_USERMODE_DESIGN = 1; 
   var ANN_TOOL_BUTTON = 13; 
   var ANN_USERMODE_RUN = 2; 

   //Use the button to toggle between design mode and run mode
   if (LEADForm.btnStart.value == "Start")
   {
      RasterAnn.AnnUserMode = ANN_USERMODE_DESIGN; 
      RasterAnn.AnnTool = ANN_TOOL_BUTTON; 
      //Make run mode the next thing. 
      LEADForm.btnStart.value = "Run Mode";
      alert("In design mode now. Draw a button object."); 
   }
   else if (LEADForm.btnStart.value == "Design Mode")
   {
          RasterAnn.AnnUserMode = ANN_USERMODE_DESIGN; 
          RasterAnn.AnnTool = ANN_TOOL_BUTTON; 
          //Make run mode the next thing. 
          LEADForm.btnStart.value = "Run Mode";
   }
   else //The button takes us to run mode
   {
          RasterAnn.AnnUserMode = ANN_USERMODE_RUN; 
          alert("Click on your new button");
          LEADForm.btnStart.value = "Design Mode";
   }
}

7.

Add the following code between the <SCRIPT> </SCRIPT> tags to for the btnSave button:

function Save()
{
   var nRet;
   var ANN_USERMODE_DESIGN = 1; 
   var ANN_FMT_NATIVE = 0; 
   var SAVE_OVERWRITE = 0; 

   //Disable errors so that we can trap our own. 
   RasterAnn.EnableMethodErrors = false; 
   //Use the button to toggle between saving and loading annotations
   if (LEADForm.btnSave.value == "Save")
   {
      //Do nothing if there are no annotations. 
      if (RasterAnn.AnnContainer == 0) 
         return; 
      //Save the all annotations. 
      nRet = RasterAnn.AnnSave("c:\\tmp.ann", ANN_FMT_NATIVE, false, SAVE_OVERWRITE, 0); 
      if (nRet == 0) 
      {
         LEADForm.btnSave.value = "Load";
          alert("Use the right mouse button to delete any annotations, then click Load");
      }
      else
          alert("Error code: " & CStr(nRet));
   }
   else //We are loading annotations
   {
      //Make sure we are in design mode
      RasterAnn.AnnUserMode = ANN_USERMODE_DESIGN; 
      //Load the annotations. 
      nRet = RasterAnn.AnnLoad("c:\\tmp.ann", 1); 
      if (nRet == 0) 
                 LEADForm.btnSave.value = "Save";
      else
                 alert("No annotations to load");
   }
}

8.

Add the following code between the <SCRIPT> </SCRIPT> tags to for the btnCopy button:

function Copy()
{
   var nRet; 
   var ANN_USERMODE_DESIGN = 1; 
   var ANN_FMT_NATIVE = 0; 

   //Disable errors so that we can trap our own. 
   RasterAnn.EnableMethodErrors = false; 
   //Use the button to toggle between copying and pasting annotations
   if (LEADForm.btnCopy.value == "Copy")
   {
      //Do nothing if there are no annotations. 
      if (RasterAnn.AnnContainer == 0) 
         return; 
         
      //Copy all annotations to the clipboard. 
      nRet = RasterAnn.AnnCopy(ANN_FMT_NATIVE, false, true); 
      if (nRet == 0) 
      {
                 //Make pasting the next thing. 
                 LEADForm.btnCopy.value = "Paste";
                 alert("Use the right mouse button to delete any annotations, then click Paste");
          }
      else
                 alert("Error code: " & nRet); 
   }
   else //We are pasting annotations
   {
      //Make sure we are in design mode
      RasterAnn.AnnUserMode = ANN_USERMODE_DESIGN; 
      //Paste the annotations
      if (RasterAnn.AnnPasteReady) 
      {
                 nRet = RasterAnn.AnnPaste();
                 LEADForm.btnCopy.value = "Copy";
      }
      else
                 alert("No annotations to paste");
   }
}

9.

Add the following code between the <SCRIPT> </SCRIPT> tags to for the btnRealize button:

function Realize()
{
   RasterAnn.AnnRealize(false); 
   LEADRasterView1.ForceRepaint ();
   alert("Annotations are now rendered to the bitmap");
}

10.

Add the following code between the <HEAD> </HEAD> tags to for handling the AnnCreate, AnnDrawn, AnnClicked and AnnDestroy events respectively:

<SCRIPT LANGUAGE="JavaScript" FOR="RasterAnn" EVENT="OnAnnCreate(hAnnObject)">
<!--
   RasterAnn.AnnSetForeColor(hAnnObject, 65535, false);
   var ANN_OBJECT_BUTTON = 3; 
   var ANN_OBJECT_HOTSPOT = 7; 

   RasterAnn.AnnGetType(hAnnObject); 
   if (RasterAnn.AnnType == ANN_OBJECT_BUTTON || RasterAnn.AnnType == ANN_OBJECT_HOTSPOT)
   {
      NewTag = NewTag + 1; 
      RasterAnn.AnnSetTag(hAnnObject, NewTag); 
   }
//-->
</SCRIPT>


<SCRIPT LANGUAGE="JavaScript" FOR="RasterAnn" EVENT="OnAnnDrawn(hAnnObject)">
<!--
   var ANN_TOOL_SELECT = 0;

   RasterAnn.AnnTool = ANN_TOOL_SELECT;
   alert("Use the right mouse button to modify this object; then click on Run Mode to test it.");
//-->
</SCRIPT>


<SCRIPT LANGUAGE="JavaScript" FOR="RasterAnn" EVENT="OnAnnClicked(hAnnObject)">
<!--
   RasterAnn.AnnGetTag(hAnnObject);
   var lTag = RasterAnn.AnnTag;
   alert("This is what we do for the button tagged " + lTag);
//-->
</SCRIPT>


<SCRIPT LANGUAGE="JavaScript" FOR="RasterAnn" EVENT="OnAnnDestroy(hAnnObject)">
<!--
   RasterAnn.AnnGetTag(hAnnObject); 
   var lTag = RasterAnn.AnnTag;
   alert("The object tagged " + lTag + " is deleted.");
//-->
</SCRIPT>

11.

Run your page to test it.