Custom Annotations in Vizit Pro

With Vizit 6.0 comes the ability to write and register custom annotations with Vizit Pro. This article walks you through the process of developing and registering a custom annotation as well as creating a button in the Vizit Pro toolbar where users can select that annotation for authoring.

Getting Started

If you haven't already, take a look at this article and follow the instructions in it to get started writing your custom code:

The rest of this article will explain the details of how to write the specific code for annotations.

The Basics

Vizit 6.0 contains a new assembly named Vizit.API.Interfaces. For custom annotations, you must implement the ICustomAnnotationPlugin interface which contains two methods and a property.

void SetData(Dictionary<string, string> data);

void DrawAnnotation(
SizeF size,
Graphics graphics,
DateTime created,
DateTime modified,
string userName,
Dictionary<string, string> data);

string Id { get; }

Implementing the ICustomAnnotationPlugin Interface

In the Vizit Pro loading process or during any callbacks to the server, each annotation type is processed. In the case of custom annotations, the SetData method is called with an empty string dictionary. It is at this time that you can add any additional data that you may want to be part of an annotation that's about to be created. Since DrawAnnotation is called with the date the annotation was created, the date it was last modified, and the login name of the user that created it, your implementation might not require any logic in the SetData method. An example of how to use the SetData method would be as follows: 

public void SetData(Dictionary<string, string> data) 
data.Add("WebName", SPContext.Current.Web.Name);

Any values set in the string dictionary are persisted with the annotation when it is created.

When an annotation has been created, whenever it needs to be rendered, the DrawAnnotation method is called. Passed to it is the size of the resulting annotation, a graphics object that is to be used for drawing the annotation, a DateTime representing when the annotation was created, a DateTime representing when the annotation was last modified, the loginName of the user who created it, as well as the string dictionary of values set in the SetData call prior to when this annotation was first created. Here is an example of a DrawAnnotation implementation:

public void DrawAnnotation(SizeF size, Graphics graphics, DateTime created, DateTime modified, string userName, Dictionary<string, string> data)
string familyName = "Arial"; float referenceFontSize = 100; int buffer = 10; Brush brush = new SolidBrush(Color.Green); string name = SPContext.Current.Web.Users[userName].Name; string date = created.ToString("HH:mm:ss MMMM d, yyyy"); string text = String.Format("By: {0} at {1}", name, date); float textWidth = graphics.MeasureString(text, new Font(familyName, referenceFontSize)).Width; float newFontSize = referenceFontSize * size.Width / textWidth; Font font = new Font(familyName, newFontSize); graphics.DrawImage(Resources.Graphic, 0, 0, size.Width, size.Height - font.Size - buffer); graphics.DrawString(text, font, brush, 0, size.Height - font.Size - buffer);

Here, we are using a sample font size to measure the size of the text relative to that sample size. This will allow us to calculate an appropriate font size that will take up the provided width of the annotation. After accounting for this font size as well as some additional space to account for the line's height, we can calculate the height that remains for the image and draw both the image and the string onto the graphics object.

Without properly accounting for the provided annotation size, anything drawn outside of those bounds will be cropped off in the resulting annotation.

Lastly, you must implement the getter of the Id property. The value of this may not change. It is the unique value identifying this annotation type and will be referenced later when adding a button the Vizit Pro toolbar.

public string Id { get { return "Contoso.LogoAnnotation"; } }

Placing a button in the Vizit Pro Toolbar

If you're not familiar with Configuration Profiles in Vizit Pro, take a look at this article prior to continuing:

Here is what the Toolbar section of your Configuration Profile should look like: 

Toolbars: [{
title: 'Actions',
items: [
'file.mail', {
action: 'annotate.custom',
text: 'Custom Annotation',
options: {
annotationId: 'Contoso.LogoAnnotation'
Have more questions? Submit a request


Article is closed for comments.
Powered by Zendesk