Frank Hileman's WebLog

VG.net 5.1 Released

2008-05-07T18:30:00Z

Version 5.1 of the VG.net 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 VG.net 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 VG.net 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 VG.net Users Guide contains new sections describing Themes and Serialization.
Bug fixes and smaller enhancements: please see the 5.1 Readme for more information.

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.

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.

VG.net Powered Textile Application Wins Design Award

2006-08-07T18:56:00Z

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

Fast scrolling beta for VG.net

2006-07-12T17:42:00Z

We have released a beta of the VG.net 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 VG.net 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.

Steed.net: State Machine Editor for Visual Studio

2006-05-22T23:08:00Z

Steed.net 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 VG.net 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

VG.net 4.0 Released: Visual Studio 2005 Support

2006-03-06T17:25:00Z

Versions 4.0 and 3.0 of the VG.net 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 VG.net scalable vector graphics. The shadow around the window has per-pixel translucency, thanks to the TranslucentForm class.

Vehicle Tracking Simulation

2006-02-08T17:28:00Z

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 VG.net 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 VG.net installed, full or Lite version.

Centralized Styles Sample; LED Radio Button

2006-02-02T17:21:00Z

Click on the image above to run the Centralized Styles sample for VG.net 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 VG.net 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 VG.net, 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.

VG.net Designer in Visual Studio 2005, Beta

2006-01-10T00:58:00Z

A beta version of the VG.net 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 VG.net 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 VG.net.

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

Drag, Drop, and Move Vector Graphics Components

2005-10-28T00:44:00Z

Click on the image above to download and run the new drag-drop sample using VG.net vector graphics. This sample demonstrates two techniques for moving Elements or sub Pictures. If you mouse down and drag from the left column to the editing surface on the right, we use standard drag and drop events. If you mouse down and drag over an Element on the editing surface, we use mouse events to move the Element.

Mouse events are simpler, but the drag-drop events may be more appropriate when using multiple Canvas objects. See the sample source code for more information. You will need to install VG.net to build this sample.

If you are interested in 3D effects, examine the GlowButton class in this sample.

VG.net 2.7 Released

2005-09-15T14:51:00Z

Download the translucent calculator executable.

Version 2.7 of the VG.net vector graphics system is released. The Translucent Calculator article describes how to build a user interface completely defined with vector graphics, using the new TranslucentForm class.

The calculator has no window border, and the edges are anti-aliased with per-pixel translucency, as seen in the close-up below:

Grab any of the calculator corners to resize it using the mouse. Because this calculator is built with vector graphics, you can resize it without any of the pixel scaling problems inherent in bitmap graphics:

The techniques in the article are ideal for applications that use skinning and fancy user interface features, such as gel buttons. The article describes how to separate a user interface from application logic, so you can build a custom calculator skin.

Other new features in this release include:

Greatly improved performance, in memory and time, for path gradient fills, by sharing gradient cache data across similar Elements
Other performance improvements for non-shared path gradient fills
Use the new BaseStyle property in Style to collect common appearance properties from several Styles into a single location
All mouse events in the Picture class now bubble up to Canvas or TranslucentForm, which have a set of new events, including PictureMouseDown
You can now drag and drop a Picture from the Toolbox onto a Canvas or TranslucentForm to display in the recipient
Use new ElementPoint property in ElementMouseEventArgs to determine the mouse position in the coordinate space of the Element raising the event

For a complete list of changes see the version 2.7 Readme document.

VG.net 2.4b

2005-05-03T14:23:00Z

VG.net Version 2.4b was released yesterday. It contains a small set of changes.

Designer Enhancements

If you wish to make all invisible Elements visible at design-time, select the top-level Picture and set the InvisibleAreDisplayed property to true. This has no effect at run-time.
If you wish to select disabled Elements by clicking with the mouse, select the top-level Picture and set the property DisabledArePickable to true. A "disabled" Element is one with Enabled set to false.

Run-time Only Enhancements

The CustomElement copy constructor is now protected, to be used by derived classes. We added the InternalFill, InternalStroke, and InternalTextAppearance protected properties, as well as supporting members so that a CustomElement based class can expose a Fill, Stroke, or TextAppearance property.
In DrawContext, we made several members public to support CustomElement derived clases: Font, TextBrush, GetFullTextBounds, GetTextPixelBounds, DrawText, PushTransformation, and PopTransformation.
We created a preliminary CustomElement sample, which draws text along an arbitrary Shape path. If you need to build a CustomElement (an advanced topic) please request a copy of this sample. In the future the sample will be added to the Extras package.

Bug Fixes and Obsolete Members

In the VG.net Designer Lite version only, if you attempted to exceed the object count limit, the Rotation and Shearing adornments would disappear. This bug is fixed.
Setting the Enabled property from true to false on a Shape caused problems with mouse events and display updates, if the DrawAction was set to Fill. This bug is fixed.
We added an overload for the Element HitTest method: bool HitTest(Vector point, out Element hitElement). The existing HitTest method has an additional boolean parameter called skipDisabled. This parameter is no longer supported, and the HitTest(Vector, bool, out Element) overload is now obsolete.

VG.net 2.4 Released: More Vector Graphics

2005-04-26T15:15:00Z

Version 2.4 of the VG.net vector graphics system is released. Some notes:

Use the new PointText class to create text objects that are positioned relative to a point. Adjust the relative position using the TextAppearance HorizontalAlignment and VerticalAlignment properties.
You can now draw all text, including text in Shapes and PointText, with an outline Stroke. We added a Stroke property to the TextAppearance class. Control Stroke visibility using the new StrokeVisible property.
Use the new Active Group mode in the designer to work on Elements within a Group. Previously, you had to UnGroup, or select Elements by name, in order to work on child Elements in a Group. Now you can make the Group “active”, which allows you to select and work with the Group children as if they were not Grouped. This mode prevents you from inadvertently selecting Elements outside the Group, so you can focus all work on the Group. New Elements and Elements pasted from the clipboard all go into the Active Group.
Derive from the new CustomElement base class to create Elements with custom rendering code.
Use the new layout commands in the VG.net designer to adjust alignment, spacing, and centering of Elements. You can use all the commands on the Layout toolbar.
We added numerous other features and bug fixes. Read the installed Readme document for more information. The Users Guide documents all new designer features, including new keyboard control during selection operations.

In the following sections I discuss two new features, PointText and Active Group mode.

Positioning PointText

When you select a PointText, you will see a small blue diamond with a black edge:

This is the Location adornment, marking the point specified by the Location property.

Unlike other Element types, the Location of a PointText does not specify the position of the upper left corner. Instead, Location specifies a point around which the PointText is positioned. Change the TextAppearance HorizontalAlignment and VerticalAlignment properties to adjust the position of a PointText relative to its Location. In this illustration, HorizontalAlignment is set to Near:

Active Group Mode

You may need to select and modify child Elements within a Group using the mouse. The Group will be destroyed if you use UnGroup to access the Elements. Active Group mode allows you to access the child Elements while leaving the Group intact.

When the Picture Designer is in Active Group mode, you can select and manipulate Elements with the mouse the same way you would operate on any Element at the top level of the Picture.

Make a Group active using one of these methods:

Click on the Change Active Group combo box in the Drawing Toolbar and select the Name of the Group.
Select the Group and invoke the "Make Active Group" command on the right-click context menu<.

The current Active Group is indicated by a dashed red rectangle called the Active Group adornment:

Note If you wish to create a new, empty Group and immediately make it active, select the "New Group..." command from the Change Active Group combo box. You will be prompted for a name for the new Group (which can be left blank), the new Group will be created, and made active:

To Exit Active Group Mode

Use one of these methods to exit Active Group mode:

Choose "(none)" from the Change Active Group combo box on the Drawing Toolbar:
Choose the Exit Active Group command from the right-click context menu:

Working within an Active Group

By making a Group active, you can focus work on a sub-set of Picture Elements:

Only Elements within the Group can be selected with the mouse.
You can select Elements by clicking or by using a lasso.
If you create new Elements, they will go into the active Group. You can create new Elements created using the Toolbox, using Copy and Paste, or by performing a Control-drag on an Element. You can also Paste copies of Elements external to the Group, by copying them to the clipboard before making the Group active.
You can manipulate Elements in any way you would normally manipulate them.

3D Effect Vector Graphics Arrow

2005-03-18T23:59:00Z

This is a cool 3D effect arrow created with VG.net vector graphics. The construction of this arrow is described briefly on the forum. If you would like a Picture file containing the arrow, let us know on the forum.

Active Groups: Seeking Feedback

2005-03-12T00:49:00Z

We are seeking feedback on the new Active Group enhancement. Please respond on the forum. Making a Group Active is a way to restrict all work to a sub-set of Elements.

Real-Time Data Visualization Using VG.net Vector Graphics

2004-12-16T14:43:00Z

The Sockets code sample is explained, in English this time, in the following article: Visualization of Real-Time Data Using Vector Graphics. The sample uses TCP/IP to communicate simulated real-time data changes from a server to a client. The client uses VG.net vector graphics to visualize the incoming data.

The article explains how to create 3D-effect LED components, using techniques similar to those described in the Gel Ellipse post.