Visio and F# interop: a more complex example

In July 2007, I provided a very simple example showing how F# could be used to automate Visio. As my VisioAutoExt project on CodePlex slowly evolves, I learned enough about Visio that I wanted to revisit the F# interop scenario and do something more substantial.

Using the F# version F# (available here). Underneath is the output of the sample code.


The source

The full source code is attached.

open visioautoext

let visapp = IVisio.ApplicationClass()
let doc = visapp.Documents.CreateNewDoc()
let page = doc.GetFirstPage()
let r1 = page.GetRect()
//do printf "%O" r1
let s1= page.DrawRectangle( r1 )
do s1.SetFillGradient( 36, System.Drawing.Color.Tomato , System.Drawing.Color.AliceBlue, 50, 20);;
do s1.SetLineRounding(0.0)

let s2= page.DrawRectangle( (0.0, 0.0) , (r1.Right , 1.0) )
do s2.SetLineWidth( 10.0 )
do s2.SetLinePattern( 3 )
do s2.SetLineColor( System.Drawing.Color.Tomato )
do s2.SetFillGradient( 36, System.Drawing.Color.Tomato , System.Drawing.Color.BurlyWood )
//do s1.SetFillForegroundColor( System.Drawing.Color.AntiqueWhite )
//do s1.SetFillBackgroundColor( System.Drawing.Color.AliceBlue )
//do s1.SetFillGradient(36)
//do s1.SetFillGradient( 36, System.Drawing.Color.Tomato , System.Drawing.Color.BurlyWood )

let s3 = page.DrawLine( r1.LowerLeft , r1.CenterPoint)
let s4 = page.DrawLine( r1.CenterPoint, r1.LowerRight )
do s4.SetLineColor( System.Drawing.Color.Azure )
do s3.SetLineWidth( 30.0 )
do s4.SetLineWidth( 20.0 )
let s5 =page.DrawPolyline( drawing.create_random_points_in_rect( 10 , r1 ) )

The sample doesn't reuse VisioAutoExt

The F# code does NOT re-use the VisioAutoExt .NET Library. Instead, it re-implements  key pieces from VisioAutoExt and my Isotope.Drawing library.

Why re-implement?

1 - I didn't want to mask any interop difficulties by re-using my a library. Instead, the point was to expose and solve them directly in the F# code.

2 - Where possible I wanted to take advantage of features found in F#.

With regard to #2, I'm not fully exploiting what F# offers. As my knowledge and comfort with F# grow, this sample may look very different.


Impressive Bitmap Vectorization with VectorMagic

I found this on Reddit last week: http://vectormagic.stanford.edu/ ... "VectorMagic - the Online Tool for Precision Visualization". Essentially it creates vector shapes from bitmaps.

The site has some great comparisons between it and other vectorization techniques. But I had to test it for myself.


I started with the python logo  because it's relatively simple and because it is already available in both bitmap and vector formats it allows us to compare the true, original vectors with the output from VectorMagic.

The specific bitmap I chose from from here: http://www.python.org/community/logos/python-powered-w-200x80.png


image  (original bitmap; cropped, but not resized)


To provide a better sense of how little data there is, I scaled up the image.


I fed the original bitmap into the VectorMagic site and it produced an SVG file that I loaded into Visio 2007.



Already I'm impressed, I can make out that things aren't perfect, but it did well at capturing the "necks" of the snakes, the eyes, and the line that separates the two bodies.

How does it stack up against the original SVG?



(Ignore discrepancies between the colors, I manually edited the colors in the original SVG to remove the gradients and replaced them with solid color fills without matching the original color exactly.)

Then I converted the VectorMagic output to semi-transparent red and the original SVG to semi-transparent blue, and overlaid the two shapes...


Nice! Given the limited pixel data available, this is a a pleasing result.

What about the competition?

Of course, VectorMagic is free, so let's try a tool I paid for: Adobe Illustrator CS3 and its Live Trace feature. I loaded the original bitmap and here's the best I could come up with...


Example 1 - Output from Adobe Illustrator 3 Live Trace

Mode = Custom ( Max color=6 ; Min area=0pix )


Example 2 - Output from Adobe Illustrator 3 Live Trace

Mode = Custom ( Max color=3 ; Min area=0pix )




Final Thoughts

  • VectorMagic produced the best vectorization output I've ever seen.
  • Although I didn't describe it in any detail,  the VectorMagic flash-based UI very easy-to-use.
  • The VectorMagic process isn't completely automated but it is very easy. Generally you'll just have to answer several questions about your bitmap and it will take care of the rest.
  • Related reading: Image Vectorization using Optimized Gradient Meshes ... could these techniques be combined in some way?

For those who love color: ColourLovers

ColourLovers ("fight for love in the colour revolution") is more than another "color picking" site, it's got original content and good sense of community. It's been around since 2004 though I only just now discovered it after the Adobe Kuler site (started in 2006).



To help show you how nice this site is, below I've highlighted some key features.

Clean stats Infographic


Color Trends




A Blog (http://www.colourlovers.com/blog/)

RSS: http://feeds.feedburner.com/Colourlovers



Advanced Gradients with Visio 2007 and Visual Studio 2008

Summary: You can make surprisingly rich multi-color gradients with Visio 2007 and some code.


The Visio 2007 User Interface Allows multi-color gradient fills (i.e. 2 gradient stops, one at the start and one at the end), but only supports a single transparency for both stops. If we had the ability to specify different transparencies for the stops, we'd be able to create some nice effects.

Here's what we can create:


Visio's graphics engine supports this feature, it's just not exposed in the User Interface.

Using this technique we can combine multiple shapes with different colors and transparencies into a single beautiful gradient.

To get the image above, just draw 5 different shapes and then stacks them on top of each other:



The Code

The code to generate these can be found in the VisioAutoExt project on codeplex.

Another Example

If you get creative with the gradients you can create an image like this.



Simple F# interop with Visio example

A example that launches visio, creates a document, and then draws a rectangle. Nothing surprising, but useful as a starting point for automation.


Source Code

#r @"C:\Windows\assembly\gac\microsoft.office.interop.visio\\Microsoft.Office.Interop.Visio.dll";;

let visio_app = new Microsoft.Office.Interop.Visio.ApplicationClass() ;;

let doc = visio_app.Documents.Add( "" );;

let page = doc.Pages.Item(1);;

let shape = page.DrawRectangle( 1.0, 1.0, 5.0, 4.0);;
do shape.Text <- "Hello World";;






  • Nice to get Intellisense with F# when running in Visual Studio 2005
  • Next step is to use my "AutoVisio" assembly to make some nice drawings