viziblr

In which a Visio shape will be harmed ...

The Microsoft Visio Conference 2008 concluded this afternoon. The Visio team presented some exciting things for the next version. One thing I observed is that people have yet to exploit the full power of Vision 2007 with regard to create compelling visuals.

I'm going to spend some time trying to change that.

Today's topic: Transparent Gradients

Before I explain how, here's an example of the desired output: a shape with a gradient fill where the transparency changes from the start of the gradient to the end of the gradient.

What we want will look like this:

The shape in the middle is opaque on the left and transparent on the right.

I drew this shape using Xara. By the time, I'm finished here, you'll know how to do it in Visio 2007.

No Cheating

People sometimes employ a technique where a series of tiny shapes each with an gradually increasing amount of transparency are used to create a transparent gradient. That technique may be appropriate in some cases. It's completely unnecessary here and doesn't yield great visual results. I will not be using this technique. Instead, I'll do it "the right way".

The Instructions

• Launch Visio 2007
• Create a new drawing via File / New / New Drawing
• Insert a picture using Insert / Picture / From File ... . The only reason a picture is being inserted is to make it obvious that the gradient changes transparency from the beginning to the end.
• Resize the picture to fit within the Page

• Draw a rectangle over the picture.

• Create a new drawing via File / New / New Drawing
• On the rectangle, right-click and select Format / Fill ...
• The Fill Dialog will launch

• Set the Pattern to 25
• Set Color to blue
• Set Pattern Color to red

• Click OK
• The Fill dialog closes
• The fill of the rectangle will now have changed

• Select Tools / Options

• The Options dialog will launch

• Navigate to the Advanced tab
• Check Run in developer mode
• Click OK
• The Options dialog will close
• Right click on the rectangle and select Show ShapeSheet
• The ShapeSheet will open
• Navigate to the Fill Format section
• NOTE: FillBkgndTrans maps to the transparency of the "Pattern Color" in the Fill dialog
• Set the FillBkgndTrans to 100%.

• At this point it should be clear that the gradient has a beginning and end transparency.
• NOTE: Do not close the ShapeSheet (nothing bad will happen if you do, it will just make the next step more obvious)
• Let's look at more closely...

• Withthe ShapeSheet still up, right-lick onthe shape and select Format / Fill...
• The Fill dialog will launch

• Set both Color and Pattern Color to the white
• Do NOT change the Transparency value. It will lose the gradient transparency if you do so.

• Click OK
• The Fill dialog closes

• Close the shapesheet

• Remove the edge for the rectangle

• Look what we have created

Homework

• In the Fill dialog, change the fill pattern to achieve these effects

Tomorrow

Stay tuned. It gets better.

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# 1.9.2.9 (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.

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

  (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?

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

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

Background

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.