Frank Hileman's WebLog

Vector Graphics with and Visual Studio Integration designer in Visual Studio 2012

We have released version 7.4 of the vector graphics system. Changes include:

  • Support for Visual Studio 2012, the SHOUTING MENU edition.
  • Redesigned Picture Designer dialog windows: we reduced their size and made them more usable with all environment font sizes.
  • A redesign of the CustomElement class API. This includes breaking changes necessary to fix the underlying design problems. CustomElement based sample code has changed accordingly.
  • Bug fixes. designer in Visual Studio 2010

Today we released Version 6.2 of the vector graphics system. Changes include:

  • Visual Studio 2010 support.
  • The new Center Selection button, in the Drawing Toobar, pans the designer surface to center the selected Elements.
  • Double-clicking on a Group makes it the Active Group. When a Group is active, double clicking on the background deactivates the Active Group.
  • You can now make a nested Group the Active Group. The Group can be nested to any depth. Formerly, you could only make a top-level Group the Active Group.
  • Keyboard shortcuts for zooming and panning.
  • Use the new PixelSnapMode property, in the RenderAppearance class, to increase the clarity of thin lines, or the edges of rectangles, by snapping points to pixel coordinates. PixelSnapMode values:
    • None
    • Absolute: points are snapped to pixels by rounding absolute coordinates.
    • VectorCenter: a new, unique type of snapping. The Element's Center is snapped to a pixel point. Vectors from the Center to each point are then snapped to a pixel boundary. By snapping vectors rather than points, a small Shape improves its clarity and symmetry.
    • BoundsAbsolute: the upper left and lower right corner of the Element's Bounds are snapped by rounding their absolute coordinates. Interior points in a Polyline or Path are not snapped.
  • Visual Basic versions of some samples.
  • The ThemedRobot and ThemedRobotVB samples, in the Extras package, demonstrate how to use Groups, Rotation transformations, and TransformationReference settings to create a segmented robot arm.
  • Bug fixes.

Below are screenshots illustrating PixelSnapMode for small Shapes. First we created Shapes, all the same dimensions, then we zoomed out so the Shapes were no longer naturally aligned on pixel coordinates. From the left to the right, the following PixelSnapMode values were used: None, Absolute, Vector Center. Blown-up versions of the same images are on the second row.

PixelSnapMode None PixelSnapMode Absolute PixelSnapMode VectorCenter

PixelSnapMode None Zoomed PixelSnapMode Absolute Zoomed PixelSnapMode VectorCenter Zoomed

Notice how the VectorCenter PixelSnapMode keeps all small shapes at a consistent size, even though they are positioned at fractional pixel distances from one another. PixelSnapMode has no real benefit for Ellipses or Arcs; it is best for Shapes containing some straight lines. It is useful for larger Shapes as well. Below we show the effect of PixelSnapMode on larger Shapes. On the left is None, on the right is VectorCenter:

PixelSnapMode None PixelSnapMode VectorCenter Robot Arm

Version 5.1 of the vector graphics system is released. Click the image above to run the robot arm sample. The buttons at the top change the overall color of the application. This color change uses a new feature in called Themes.

A Theme is similar to a style sheet in html. A Theme collects common Style and ImageData objects in a single place, for reuse across multiple Pictures, or to swap a set of Styles as a batch. The robot arm sample contains three Themes that are dynamically swapped to change several Styles at the same time. When used across multiple Pictures, a Theme eliminates time wasted duplicating and synchronizing Styles. You can edit and preview Styles in a Theme as you would in any Picture.

Other changes in version 5.1 include:

  • Fast Scrolling: by default, Canvas scrolling is hardware accelerated, as demonstrated in an earlier blog post.
  • Serialization: save and restore objects to and from compact binary files or streams. You can serialize objects or your own classes and structures. This is useful for custom editors, storing objects in a database, or transferring objects across a network. You will find serialization related classes in the Prodige.Serialization namespace. Unlike the serialization support built into the .NET framework, the classes in Prodige.Serialization are designed to: minimize file size, maximize speed, operate without reflection or boxing of value types, and provide infinite upward compatiblity for serialized files.
  • TranslucentForm Improvements: the TranslucentForm class, a window providing a complete vector graphics UI with per-pixel alpha transparency, is extensively reworked and many problems are eliminated.
  • Source Code Samples: new samples in the standard and Extras package include a strip chart library, a SCADA simulation, a particle system, a Theme demonstration, a basic button library, and bitmap effects. Two of the these samples are described below.
  • The Users Guide contains new sections describing Themes and Serialization.
  • Bug fixes and smaller enhancements: please see the 5.1 Readme for more information. Strip Chart

A new strip chart component is provided in the strip chart sample in the Extras package. Click on the image above to run the sample. The strip chart is designed to minimize CPU usage, so you can use several on the same screen. You can pause the automatic chart scrolling. When paused, you can manually scroll the chart to any data sample. The chart saves data samples in a circular buffer, which you can set to any size needed. The chart also supports zooming in integer increments. Particle System

Click the image above or below to run the new particle system sample provided in the Extras package. The particle system creates and animates 10,000 particles. Originally written to illustrate the operation of an egg smashing machine, you may wish to use the particle system component to illustrate a mixing or painting operation. The particle system performs all rendering with managed code. Particle System

A Monforts textile machine monitoring application won an iF Communications Design Award. The application was designed by :i/d/d using the fast vector graphics system for the user interface. vector graphics scrolling sample

We have released a beta of the vector graphics system containing fast scrolling enhancments. Click on the image above to run the Scrolling Scalability sample, to see the difference in performance. This demo is built with the 2.0 .net framework.

The new ScrollingMode property on Picture allows you to control the behavior. Using Accurate in the demo will show you the old performance. If you are a current 4.0/3.0 customer (full version), and your application should scroll faster, please email us for the beta download information, as well as the source code for the sample above. The source code contains a useful optimization technique for Pictures containing thousands of Elements, such as mapping applications. State Machine Development Tool is a new way of doing .net development in Visual Studio. You can create state machines in Visual Studio using a graphical designer. The graphical designer uses vector graphics. A list of features:

  • Visual Studio integration
  • Graphically create flow charts and state machines
  • Your workflow (state machines) determine visualization and creation of controls
  • Monitor and log object lifetimes in running applications
  • Automatically generates documentation
  • Maintains a strict separation between architecture and application code
  • Simplifies debugging and error finding

Read more on the State Method web site.

Vector Graphics Calendar Control

Versions 4.0 and 3.0 of the vector graphics system are released. Version 4.0 supports Visual Studio 2005, and version 3.0 supports Visual Studio 2003. Read more in the Readme file.

Some new features:

  • Use the new Style Precedence property to override a Style in a sub Picture with a Style in a parent Picture.
  • Trigger code when the mouse wheel is rotated using the new MouseWheel event on every Element.
  • Copy and paste Styles in the Style collection editor.
  • Font caching increases the performance of displays using many different TextAppearance objects.

If you downloaded version 4.0.2702, and you ran into a file path error during installation, please re-download the latest build 4.0.2705, which fixes this installer error.

The screenshot above is a calendar pop-up window created with scalable vector graphics. The shadow around the window has per-pixel translucency, thanks to the TranslucentForm class.

Vector Graphics Vehicle Tracking Simulation

If you write transportation management applications, or applications which track trucks, railroad cars, or other vehicles, you may be interested in this vehicle tracking simulation using vector graphics. It is a combination of the PanZoom and PathMove samples, demonstrating:

  • Real-time tracking of vehicles using scalable vector graphics
  • Implementation of a Vehicle class with custom properties
  • Movement of an object along a path
  • Control over velocity of movement
  • Zooming and panning
  • Throttling CPU usage of animation of specific objects
  • Layers using Groups

The Vehicle class custom properties:

  • Velocity
  • MovementPath: the path along which the vehicle moves
  • Position: distance along the movement path
  • Direction: forward or backward
  • State: normal, or alarm state, indicated visually by a change in the color (red vehicles are in the alarm state)

Download the executable by clicking on the image above. Download the source code, which compiles with Visual Studio 2003. You will need installed, full or Lite version.

Centralized Styles with Vector Graphics

Click on the image above to run the Centralized Styles sample for vector graphics. Grab the lower right corner of the window to scale the UI larger and smaller.

Download the source code to learn how to centralize all your Styles into a single template Picture that overrides Styles recursively, starting at a top-level Picture and moving to sub Pictures.

In the future we will have a special class in you can derive from, a type of Picture, that you can drag and drop onto any Picture in order to reuse a central set of Styles. This sample code allows you to centralize Styles with released versions of, 2.7 or 2.8.

This sample also demonstrates how to create a vector graphics LED radio button, and how to use the TranslucentForm class.

If you are using a Lite version, change DisplayInTranslucentForm to DisplayInForm, and you can run the code. Vector Graphics in Visual Studio 2005

A beta version of the vector graphics Designer integrated in Visual Studio 2005 is released. If you are an existing customer, you will receive an email with download instructions.

Regarding version numbers: from now on, versions 3.x will be built for VS 2003, and versions 4.x will be built for VS 2005. These versions can be installed side-by-side. There is one problem in the beta version: if you uninstall the 4.0 beta, the documentation for both versions is uninstalled. This can be fixed by going to Add/Remove Programs and selecting "Repair" for

A big thanks to the Microsoft people who helped us around the breaking changes in Visual Studio 2005.

Posted by Frank Hileman | with no comments
More Posts Next page »