Building Shapes that Look Great

In a previous post, we showed you some of the rich shape effects that are now possible in the new Visio. These effects are great not only for adding visual impact and vibrancy to shapes, but also for presenting shape data in new and interesting ways.

For developers, the new Visio fully supports the new shape effects in the ShapeSheet. In this blog post, we will show you an example of how to utilize some of these new effects in shape development. This is not meant to be a complete reference of all effects and their respective parameters; you can view a full list of the new ShapeSheet cells in the What’s new for ShapeSheet developers in Visio 2013 article on MSDN.

What We’re Building

For this example, we will add shape effects to spice up a clothing rack shape that’s already been built:

This shape is used in a diagram that tracks clothing inventory on the floor of a busy store. It uses shape data to dynamically illustrate the number of products remaining on the rack, and changes its fill color to yellow and then red as the stock gets progressively depleted.

In the following sections, we will spruce up this shape by adding a variety of shape effects, which will not only give this shape new visuals but will also visually represent its shape data.

Gradients

The new Visio’s gradients are formed by smoothing and blending the colors found in their individual gradient stops. Unlike past versions of Visio which only supported a fixed set of gradient presets where the positions of the gradient stops were locked down, the new Visio offers freeform gradients where up to 10 different gradient stops can be uniquely defined.

To add some more visual interest to the shape, we’re giving the center circle of this shape a radial gradient fill in place of its previous solid fill:

In the ShapeSheet, the Fill Gradient Stops section delineates the three gradient stops composing this fill:

Each gradient stop specifies a color, a transparency, and a position using cells of the same name. The gradient flows from one gradient stop to the next in sequence from lower to higher Position percentage values. Furthermore, the Gradient Properties section delineates additional information about the gradient fill, including its type and direction:

The direction that the gradient flows is determined by the FillGradientAngle cell’s angular value only if the gradient is a “linear” type (denoted by the FillGradientDir cell’s enum value being equal to 0), otherwise, it is determined solely by the FillGradientDir cell. Since we are specifying a “radial” type gradient, the FillGradientDir cell’s enum value controls the direction of the gradient. In this case, the gradient radiates outward from the center of the shape.

Please note that the FillGradientEnabled cell’s Boolean value must be equal to TRUE in order to render a gradient. Otherwise, the fill is determined by the Fill Format section, which specify the other fill types (solid fill, pattern fill, or no fill).

Shadows

The new Visio introduces several new shadow effect concepts.

Shadows can now take on blurs, which soften the edges of the shadow effect to produce a more natural look.

Furthermore, shadows can now be turned inwards to produce inner shadows, emulating a cutout obscuring the light source. This effect produces a burnished, three-dimensional look.

To give the clothing rack shape some visual depth, we’re adding an inner shadow that is blurred:

In the ShapeSheet, the shadow effect is controlled by cells in the Fill Format section:

The ShapeShdwType cell’s enum value controls the type of the shadow (outer – 1, perspective – 2, or inner – 3). The ShapeShdwBlur cell’s point or inch value determines the heaviness of the blur, with a value of 0 meaning a shadow with no blurring consistent with past versions of Visio. The shadow’s color, transparency, and offset from the shape are determined by the ShdwForegnd, ShdwForegndTrans, and the ShapeShdwOffsetX and ShapeShdwOffsetY cells, respectively. Finally, the ShdwPattern cell’s value determines whether the shadow effect is rendered on the shape, where a value of 1 means that shadows are rendered and a value of 0 means that shadows are not.

Glows

The new Visio supports an entirely new shape effect called glow. Glows render a colored, blurred outline around shapes:

Since both a glow’s color and size are tunable parameters in the ShapeSheet, they are an excellent way to visually connote shape data in a similar fashion to Visio’s Color by Value feature.

While the clothing rack shape does already change its fill color to yellow or red when it is low on inventory, we can additionally add formulas that produce glows to further highlight this fact.

In the ShapeSheet, the glow effect is controlled by cells in the Additional Effect Properties section:

The GlowColor and GlowColorTrans cells control the color and color transparency of the glow. The GlowSize cell’s point or inch value determines the size of the blur as it radiates outward from the outline of the shape.

3D Format and Rotation

The new Visio supports a variety of three-dimensional effects. The primary effect is the ability to rotate shapes in all three axes, and a variety of supporting effects augment this visual:

The full set of 3D effects are too broad to cover in the scope of this blog post. For this post, I will discuss only the 3D rotation and depth effects.

In the ShapeSheet, the 3D rotation effect is controlled by the 3-D Rotation Properties section:

The RotationXAngle, RotationYAngle, and RotationZAngle cell values control the degree of rotation in each of the respective axes. The RotationType’s enum value controls the rotation type:

1: Parallel rotation, where the shape is rotated without accounting for linear perspective.

2: Perspective rotation, where the shape is rotated with linear perspective.

3 to 6: Oblique rotation presets, where the shape is rotated with oblique projection.

To complete the clothing rack’s transformation from 2D to 3D, we will add the depth effect. This effect gives the shape “thickness” by providing additional geometry in the z-axis, normal to the bottom face of the shape:

In the ShapeSheet, the depth effect is controlled by the Bevel Properties section:

The BevelDepthColor cell controls the color of the thickness granted by the depth. The BevelDepthSize cell’s point or inch value controls the amount of thickness.

In Conclusion

The rich shape effects found in the new Visio allow for a wide range of possibilities in shape development.

Perhaps the best way to learn more about the new effects from a developer standpoint is to experiment with the different options in the Format Shape task pane – simply try out a new visual and see how the values update in the ShapeSheet. We’re interested to hear what developers think. Please use the Send a Smile feedback tool or leave a comment below.