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. |