Hi Guys,

I'm struggling to get annotations to work with WebAnnotationsViewer.

In it's simplest form, I need to add an annotation at the server, which will appear in the WebAnnotationsViewer as an overlay (not burnt-in).

I have tried the following, in my Page_Load

wav.ImageUrl = "chloe.jpg";
RubberStampData myRubberStamp = new RubberStampData("Red Stamp!");
myRubberStamp.Name = "myStampRed";
myRubberStamp.FontBrush.Color = Color.Red;
wav.Annotations.DefaultAnnotations.Add(myRubberStamp);

But nothing is seen at the client.

Can anybody help?  The documentation seems heavily oriented towards WinForms implementation of Annotations, and any Web examples heavily loaded with JavaScript, loading from XML, or responding to mouseclicks... All I want for the moment is the simplest incarnation, at the Server-Side.

The eventual aim is to have a clickable image annotation, which can be handled by JavaScript as hotlinks.  For example, highlighting features of a drawing, which redirects to a description-of-that-feature page when clicked.  Getting an annotation similar to the above overlayed on the image would be the first stage in progress towards this.

(By the way: Our accounts team should [if they have not already] be in contact soon to purchase licences).

---

Moo!

The reason why the docs are thin on this subject is because the syntax is the same for adding annotations on server side WebForms, as it is in the WinForms environment.  The only difference, is that you will need to call UpdateAnnotations when you modify any of the layer or annotation objects.

The DefaultAnnotations collection is only used for creating default "templates" for annotations that are to be drawn with the mouse.  Adding any annotations to this collection will only set them up to be created with the mouse in JavaScript by name.

The syntax for adding an annotation on the server side looks something like this:

// Make sure we have a layer to add the annotation
if (this.WebAnnotationViewer1.Annotations.Layers.Count == 0)
   this.WebAnnotationViewer1.Annotations.Layers.Add(new LayerAnnotation());

// Make sure that CurrentLayer is set
if (this.WebAnnotationViewer1.Annotations.CurrentLayer == null)
   this.WebAnnotationViewer1.Annotations.CurrentLayer = this.WebAnnotationViewer1.Annotations.Layers[0];

// Create TextAnnotation
TextAnnotation textAnn = new TextAnnotation("This is an annotation created on the server side.");
textAnn.Size = new System.Drawing.SizeF(300,50);
textAnn.Visible = true;

this.WebAnnotationViewer1.Annotations.CurrentLayer.Items.Add(textAnn);
this.WebAnnotationViewer1.UpdateAnnotations();

---

David Cilley
My AJAX Imaging Blog
Atalasoft Development Team

Thanks, thats great for the basics :).

The problem I'm having now... I require some programmable reaction to an annotation's click event.  My first choice would be to specify the execution of a parametrised (to allow for identification of the clicked annotation) JavaScript function.

With the WinForms Annotations, I'm guessing you can do something like:- 

textAnn.Click += new EventHandler( textAnn_Click );
textAnn.MouseUp += new AnnotationMouseEventHandler( textAnn_MouseUp );

But, given the previous code (in the above post), how would I get a similar effect pushed out to the client-side / JavaScript?

I guess I could use the WebAnnotationsViewer.Attributes and add an onclick event, then check the coordinates against where my Annotations are... but this seems a bit of an ugly way... does anybody have a better suggestion?

Edit:

I've had a little success with the following JavaScript...

var anns = wav.getAnnotations();
var myAnn = anns[0];

myAnn.MouseUp = function(){ alert("inline funciton");}

But I'm now struggling to set+find an identification attribute in myAnn.

---

Moo!

How are you trying to "identify" these annotations?

Also, it is recommended that you use the WebAnnotationViewer's AnnotationClicked event if you are trying to execute a function when an annotation is clicked.  Here is a sample:

atalaInitClientScript('OnPageLoad();');

function OnPageLoad(){
   WebAnnotationViewer1.AnnotationClicked = OnAnnotationClicked;
}

function OnAnnotationClicked(e){
   var clickedAnno = e.annotation;
   // Do stuff
}

---

David Cilley
My AJAX Imaging Blog
Atalasoft Development Team

I've extended the JavaScript OnAnnotationClicked( ) function to allow a distinction of the annotation type clicked as such: 

function OnAnnotationClicked(e)
{
  var clickedAnno = e.annotation;
  switch( clickedAnno.getType() )
  {
    case "TextData":
      alert("TextData annotation clicked");
      break;
    default:
      alert("unknown annotation type");
      break;
    }
}

But other than checking the .Text of the TextAnnotation, I can't think how to distinguish between which has been clicked.  For example if 10 of them say "Click Here", how could I tell which is being clicked?  I would have e.annotation, but is there anything in there to distinguish between the 10?

My next issue is with image annotations (my end intention is to overlay image annotations as clickable markers on an image).  However, when I try (on the server-side) to use the same style as TextAnnotation and RubberStampAnnotation with ReferencedImageAnnotation, all annotations stop working.

For example, in the following code... if I remove anything to do with imgAnn, the code will display the stamp and text annotations.  But including the imgAnn code (or isolating it to just the imgAnn code), no annotations are displayed.

(Code is in Page_Load)

wav.ImageUrl = "chloe.jpg";

// Make sure we have a layer to add the annotation
if (wav.Annotations.Layers.Count == 0)
  wav.Annotations.Layers.Add(new LayerAnnotation());

// Make sure that CurrentLayer is set
if (wav.Annotations.CurrentLayer == null)
  wav.Annotations.CurrentLayer = wav.Annotations.Layers[0];

// Create TextAnnotation
TextAnnotation textAnn = new TextAnnotation("This is an annotation created on the server side.");
textAnn.Size = new System.Drawing.SizeF(300, 50);
textAnn.FontBrush.Color = Color.White;
textAnn.Visible = true;

// Create RubberStamp Annotation
RubberStampAnnotation stampAnn = new RubberStampAnnotation("This is an annotation created on the server side.");
stampAnn.Size = new System.Drawing.SizeF(300, 50);
stampAnn.FontBrush.Color = Color.White;
stampAnn.Visible = true;

// Create Image Annotation
ReferencedImageAnnotation imgAnn = new ReferencedImageAnnotation();
imgAnn.FileName = "prinny.jpg";
imgAnn.Visible = true;

wav.Annotations.CurrentLayer.Items.Add(stampAnn);
wav.Annotations.CurrentLayer.Items.Add(textAnn);
wav.Annotations.CurrentLayer.Items.Add(imgAnn);
wav.UpdateAnnotations();

---

Moo!

I've managed to get an image annotation onscreen now with server-side code similar to:- 

// Create Image Annotation
AnnotationImage img = new AnnotationImage("prinny.jpg");
RectangleAnnotation rAnn = new RectangleAnnotation();
rAnn.Size = new SizeF((float)64,(float)64);
rAnn.Fill.Image = img;
rAnn.Fill.FillType = FillType.Texture;

Now the only thing remaining will be the JavaScript identification from a server-side specification (ie a database ID that the JavaScript can pick up on and add to a link).

---

Moo!

Does anybody have an idea about this?

How to pass an identification parameter from the server-side to the Annotation, which can be picked up by the client-side JavaScript?

For example, in the ServerSide code I might have:-

AnnotationImage img = new AnnotationImage("sunglasses.png");
HotSpotData hsd = new HotSpotData();
hsd.Name = "Jimbob";
hsd.Size = new SizeF((float)469, (float)169);
hsd.Fill.Image = img;
hsd.Fill.FillType = FillType.Texture;
HotSpotAnnotation annHotSpot = new HotSpotAnnotation(hsd);

And then in the JavaScript :-

atalaInitClientScript("OnPageLoad()");

function OnAnnotationClicked(e)
{
  var clickedAnno = e.annotation;

  switch( clickedAnno.getType() )
  {
    case "HotSpotData":
      alert("clicked hotspot");
      break;
    default:
      alert("unknown annotation type");
      break;
  }
}
function OnPageLoad()
{ 
  wav.AnnotationClicked = OnAnnotationClicked;
}

The above would get me to the "clicked hotspot" alert box... but around that location, would there be a way of figuring out that the HotSpot Name was "Jimbob"?  Or any other form of identification added at the serverside (though not the image filename, as they'll all be the same, being markers)?

---

Moo!

I think the only string based property that you can set on the server side and access on the client side is the ToolTip.  You could use this property to identify which annotation was clicked on.

---

David Cilley
My AJAX Imaging Blog
Atalasoft Development Team