Product and Development Musings

Persisting Annotations: Saving and Branding

19. February 2010 11:43

We recently learned how the Viewer control manages annotation marks during runtime.  Now let's continue our discussion in our series of articles on annotation support in ImageMan.Net Document Edition by highlighting how to persist annotated images after you are done working with them. 

Saving Annotations

The annotation information on an image can be saved in TIFF, JPG or PNG formats. This will happen automatically when an image in the Viewer control has associated annotation information. The annotation information is stored as a separate layer of the image.

So, if you want to share or continue working with an annotated image save it as a TIFF, JPG or PNG file.  If you want to load an image with the annotation information in the proprietary ImageMan.Net format in another TIFF viewer the annotation information will not be displayed.  (In an upcoming post, we will learn how to create annotated images with a common set of annotations that can be shared with other TIFF viewers.)

We'll now add the ability to save our annotations in the sample application we built in the last few posts (Visual Studio 2008 source code: C# source, VB.Net source).

  • Open IMAnnotate1.sln for C# (or IMAnnotate1VB.sln fo VB.Net) in Visual Studio 2005 or 2008 (which ever you used last time)
  • Open Form1 class in design view
  • Drag and drop a SaveFileDialog control onto the form:

Anno2

  • Add a new menu item under the File menu item and call it Save.:

Anno1

  • Automatically add events to this submenu item by double-clicking to let Visual Studio autogenerate the event method.
  • Now, add this code to open the Save File dialog:

[C#]

private void saveToolStripMenuItem_Click(object sender, EventArgs e)
{
    saveFileDialog1.Filter = RegisteredEncoders.GetFilterString();
 
    if (saveFileDialog1.ShowDialog() == DialogResult.OK)
    {
        annotation1.SaveInWangFormat = false;
        viewer1.Save(saveFileDialog1.FileName);
    }
}

[VB.Net]

Private Sub SaveToolStripMenuItem_Click( _
    ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles SaveToolStripMenuItem.Click
 
    SaveFileDialog1.Filter = RegisteredEncoders.GetFilterString()
 
    If SaveFileDialog1.ShowDialog() = Windows.Forms.DialogResult.OK Then
        Annotation1.SaveInWangFormat = False
        Viewer1.Save(SaveFileDialog1.FileName.Trim())
    End If
End Sub

First we generate a list of available file types to allow the user to use and set that as the filter for the SaveFileDialog control.  Then, if the user selected a valid filename and location, we save the image using the given filename.  Notice the SaveInWangFormat property of the Annotation object? Let's hold off on that until the next topic.

  • So now run the application (by clicking F5, for instance)
  • Add a few annotation marks onto the default (white) image
  • Save that image to a known location as either a TIFF, JPG or PNG file type
  • Close the application
  • Run it again
  • Open the previously saved image
  • You should now still be able to move, edit and otherwise manipulate the previous marks

Note: If you open the file in the Windows Picture and Fax Viewer, for instance, you will not see the annotated marks.

Branding Annotations

If you need to permanently add the annotation information to the image you can use the annotation objects Brand() method to burn the annotations onto the image. Once you do this, however, you can no longer manipulate the annotations as before.

Branding is done at the image's color depth. So if you have color marks and a black and white image. Either increase the color depth of the underlying image, or understand that the color branded marks will appear differently.

  • Add another menu item on the toolstrip (under the File menu item) and call it Brand

Anno4

  • Create the code behind and add the following code:

[C#]

private void brandToolStripMenuItem_Click(object sender, EventArgs e)
{
    // Brand the current image
    annotation1.Brand(viewer1.Images.CurrentImage);
 
    // Clear all existing marks
    annotation1.Marks.Clear();
 
    // Refresh the viewer
    viewer1.Refresh();
}

[VB.Net] 

Private Sub BrandToolStripMenuItem_Click( _
    ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles BrandToolStripMenuItem.Click
 
    ' Brand the current image
    Annotation1.Brand(Viewer1.Images.CurrentImage)
 
    ' Clear all existing marks
    Annotation1.Marks.Clear()
 
    ' Refresh the viewer
    Viewer1.Refresh()
End Sub
  • Run the application
  • Add a few annotation marks onto the default (white) image
  • Brand the image using the Brand menu option
  • Now try to manipulate the current marks and notice that you can't (they aren't marks now; they are part of the image)
  • Add some new marks
  • Save that image to a known location as either a TIFF, JPG or PNG file type
  • Close the application
  • Run it again
  • Open the previously saved image
  • You should now still be able to move, edit and otherwise manipulate the new marks but the branded marks are not editable any longer

Save this project since we will continue to build on it next time for a discussion on persisting common annotations that are compatible with other TIFF viewer and (many) annotation editors.

Persisting Annotations: The Viewer Control

14. January 2010 10:50

In the last series, we learned how to work with Annotations in ImageMan.Net Document Edition. Now, we will learn more about one of the ways to persist your annotated images.

The ImageMan.Net Viewer control automatically manages the annotations for each image in it's associated Images collection.  So, when you load an image in the Viewer and add annotations to it, then add a second image to the Viewer, you can still go back to the first image and manipulate the annotation marks. 

Let's try this out by adding some file and paging features to the example application that we started in the previous article.  (If you didn't create this solution, then I suggest you quickly follow the steps as indicated in the previous blog post so we can be in synch.)

  1. Open IMAnnotate1.sln in Visual Studio 2005 or 2008 (which ever you used last time)
  2. Open the Form1 class in design view
  3. Drag and drop a ImageMan.Net OpenImageDialog control onto the design surface
  4. Add the following menu items:
    - File
    - Image

A2-1

  1. Under the File men item, add the following menu items:
    - Add...  A2-2
  2. Under the Image menu item, add the following menu items:
    - First
    - Next
    - Previous
    - Last A2-3
  3. Automatically add events to each submenu item by double-clicking each one.  Let Visual Studio autogenerate the event method.
  4. Now, in code view, let's add some code that will handle adding images to the Viewer control's Images collection:

[C#]

private void addToolStripMenuItem_Click(object sender, EventArgs e)
{
    if (openImageDialog1.ShowDialog() == DialogResult.OK)
    {
        viewer1.Images.Add(ImImage.Load(openImageDialog1.FileName));
        viewer1.Images.MoveLast();
    }
}

[Visual Basic]

Private Sub AddToolStripMenuItem_Click( _
    ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles AddToolStripMenuItem.Click
    If OpenImageDialog1.ShowDialog = Windows.Forms.DialogResult.OK Then
        Viewer1.Images.Add(ImImage.Load(OpenImageDialog1.FileName))
        Viewer1.Images.MoveLast()
    End If
End Sub
  1. Add this code that will handle navigating the image collection:

[C#]

private void firstToolStripMenuItem_Click(object sender, EventArgs e)
{
    viewer1.Images.MoveFirst();
    viewer1.Refresh();
}
 
private void nextToolStripMenuItem_Click(object sender, EventArgs e)
{
    viewer1.Images.MoveNext();
    viewer1.Refresh();
}
 
private void previousToolStripMenuItem_Click(object sender, EventArgs e)
{
    viewer1.Images.MovePrevious();
    viewer1.Refresh();
}
 
private void lastToolStripMenuItem_Click(object sender, EventArgs e)
{
    viewer1.Images.MoveLast();
    viewer1.Refresh();
}

[Visual Basic]

Private Sub FirstToolStripMenuItem_Click( _
    ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles FirstToolStripMenuItem.Click
    Viewer1.Images.MoveFirst()
    Viewer1.Refresh()
End Sub
 
Private Sub NextToolStripMenuItem_Click( _
    ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles NextToolStripMenuItem.Click
    Viewer1.Images.MoveNext()
    Viewer1.Refresh()
End Sub
 
Private Sub PreviousToolStripMenuItem_Click( _
    ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles PreviousToolStripMenuItem.Click
    Viewer1.Images.MovePrevious()
    Viewer1.Refresh()
End Sub
 
Private Sub LastToolStripMenuItem_Click( _
    ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles LastToolStripMenuItem.Click
    Viewer1.Images.MoveLast()
    Viewer1.Refresh()
End Sub
  1. Run the application and add a few images
  2. Add some annotations
  3. Navigate between the various images

You'll notice the annotations you added will remain intact while navigating between the images.  The annotated marks are able to moved, resized, modified, etc.

Next week, we'll continue on this persistence topic and learn how to save and brand the annotated image.

Annotations in ImageMan.NET Document Edition

5. January 2010 12:08

Today we are going to kick off a series of blog posts highlighting some of the great new features in our latest version of ImageMan: ImageMan.Net Document Edition.  This first post will introduce you to the annotation features you can use to add text and drawings to images or documents. 

The Document Edition includes a rich set of annotation objects including:

    • Rectangle
    • Ellipse
    • Line
    • Polygon
    • Highlight
    • String
    • Freehand Line
    • Bezier Curve
    • Pie Shape
    • Arc
    • Sticky Note
    • Image
    • Redaction
    • Overlay
    • Text Stamp
    • Custom Mark

You can add multiple annotation objects to an image.  Once added, you can modify, move, resize and remove them easily.  We'll discuss persisting, protecting and encrypting annotated images in upcoming blog posts.  We'll also cover implementing annotation support programmatically soon, but for starters, we'll go over the Annotation control, which is the core of annotation support in ImageMan.Net, as well as the Annotation ToolStrip.

Test Driving the Annotation Features

Let's build a simple image viewer with annotation support.  I'm assuming you've already installed at least the trial version of the ImageMan.Net Document Edition.

  1. Start Visual Studio.Net (2005/2008)
  2. Create a new Windows Forms Application project (in C# or VB.Net)
  3. Name it IMAnnotate1
  4. Add the following controls to the design surface of Form1:
    - MenuStrip
  5. Add the following ImageMan.Net controls to the design surface of Form1:
    - Viewer, Annotation, Annotation ToolStrip
  6. In the Properties window, set the following properties for viewer1:
    - Dock: Fill
  7. Set the following properties for annotation1:
    - Viewer: viewer1
    - ToolStrip: annotationToolstrip1
  8. Save your work

Adding the Design Surface

If you run the application we've just created, you'll notice that the Annotation ToolStrip is pre-populated with buttons you can use to easily work with the full set of annotation objects:

Anno1

Our next step is to add a design surface.  We have two options here: we can add code to go out and retrieve an existing image and load it into the Viewer or we can create a new image.  For ease of use, let's go with the latter approach.

  1. Open Form1 in code view
  2. Add a reference to DTI.ImageMan:

[C#]

using DTI.ImageMan;

[Visual Basic]

Imports DTI.ImageMan
  1. In the Form1 Constructor (after the InitializeComponent() method), add this code to create the default design surface:

[C#]

viewer1.Images.Add(
    new ImImage(800, 1100, PixelFormat.Format24bppRgb, Color.White));

[Visual Basic]

viewer1.Images.Add(
    New ImImage(800, 1100, PixelFormat.Format24bppRgb, Color.White))

Working with the Annotation ToolStrip

Now we've got a design surface where we can add and manipulate annotation marks.  Let's add a few marks from the Annotation ToolStrip.

  1. Select the Rectangle button
  2. Left click and drag on the design surface to create a rectangle annotation mark

Notice that when you select an annotation tool on the Annotation ToolStrip, additional formatting tool buttons are dynamically added:

Anno2

The visible formatting options will change depending on the annotation tool selected. For the Rectangle annotation tool, you can modify the following properties:

  • Fore Color
  • Back Color
  • Translucent
  • Brush
  • Pen Width
  • Corner Radius
  • Filled

Working with the Annotation Marks

Once a mark has been added to an image, you can perform various actions on it.  Marks can be:

  • selected
  • dragged
  • dropped
  • reordered
  • formatted
  • moved
  • resized (for most annotation marks)
  • deleted
  • copied
  • cut
  1. Click on the Select tool on the Annotation ToolStrip:

Anno3

  1. Select the rectangle mark on the design surface by clicking anywhere inside it
  2. On the ToolStrip, select the Back Color button
  3. Select a color in the Color Dialog and click OK button
  4. On the ToolStrip, select the Pen Width button
  5. Enter a pen width of 3 and click the OK button

Anno4

Working with the Context Menu

An alternative way to create and format annotation objects is to use the right click context menu. 

  1. Right click on the design surface
  2. Select the Tools menu option
  3. Select the Note annotation tool
  4. Drag a note mark onto the design surface
  5. Type some text in the note mark

Anno5

If you want to hide the context menu, you just have to set the ShowContextMenu property on the Annotation object to false:

[C#]

annotation1.ShowContextMenu = false;

[Visual Basic]

annotation1.ShowContextMenu = False

The next article on this topic will cover saving and branding your annotated images.

Log in