New gauge designer for Perfect Widgets was developed to make designers’ life easier and transfer their work from writing complicated scripts to a more habitual flow of drawing objects and drag-and-drop of controls points with a mouse.
In this article, I will describe key features of the new gauge designer and specify the main difference from the previous version.
New ribbon interface
Probably, the main thing that catches an eye when upgrading to a new product versions is a ribbon interface.
Tank context tab
We completely redesigned interface structure and tried to group the most important and frequently used elements on the corresponding tabs.
The Home tab includes clipboard commands, main object properties: fill, border color, fonts, gauge edit and test tools, as well as buttons managing elements order in the gauge.
The Insert tab contains all available objects. All these objects are also available in the left-screen toolbox, you can just drag and drop them on the work area.
The Properties tab offers the ability to set pixel-accurate element’s size and position, change its name, style and visibility.
The View tab sets panels visibility and gauge zoom mode.
Probably, the most useful and frequently used tabs are context tabs containing unique settings for every object. You configure element appearance and bind one element to another with a single click. I will talk about this new feature a bit later. Context tabs appear upon double click on the element. Use them to see how powerful and useful they are.
Simplified creation of the gauge structure
Most likely those of you who have already worked with the previous editor version noticed that there are some difficulties related to the correct addition and grouping of the structure elements: Joint, Guide, Scale and Slider.
Selecting Scale while adding the Slider element
Though we didn’t have the heart to refuse using them in the new version, we significantly improved the process of designing gauge structure.
The main innovation is the dialogues appearing when Scale, Slider and any of the scale elements are added. They make the user select a parent control and create the correct elements hierarchy.
When a slider and a scale element is added, it is being bound to a Scale; the Scale in its turn is being bound to a Joint or Guide. A user certainly needs to get minimum knowledge on what Joint, Guide, Scale and Slider is, but there is less possibility to do something wrong.
Besides, a slider is also shown on the gauge as a small dashed circle. You can click it and edit its properties or drag it along a Joint or Guide with a mouse and change its Value property in this way.
«Smart bindings»
Binding Pie’s form and size to a Joint
The most irritating thing about the previous version is the need to deal with the script language used in bindings to create even the simplest gauge.
For example, in order to bind needle position to a slider developers had to write two scripts: to bind start point and end point of the needle.
New version adds a great amount of preset “smart bindings” that can be used by a user without the need to learn scripts. For example, it’s possible to bind a polygon, circle, sector to a Joint element. And the figure size and position will be bound to the Joint size and position.
In the picture below, you can see a Pie element that duplicates size and shape of the Joint. To smart-bind an element, a user just needs add a Pie to a Joint (by drag and drop in the gauge tree), then open the context tab and select the appropriate binding from the list.
As a result, the necessary scripts will be generated automatically. Unlike manual bindings, “smart binding” scripts are marked with the lock symbol.
Sample of the scripts generated by the “smart binding” for the pie element
In addition, “smart binding” allow the immediate binding of the object position to the current
slider value.
Sample of the “smart binding” to the slider position
It’s worth mentioning that “smart bindings” work only when the object is nested into the corresponding Joint, Guide or Slider.
Changes in the Needle object
Of course, we couldn’t set aside the most frequently used gauge elements. One of the most noticeable improvements is a collection of various arrows for the Needle element. Now a user can just select a preset needle shape from the list instead of editing needle points manually.
Nevertheless, it is possible to configure Needle points in the manual mode.
Selecting preset Neddle shape
We also added new Needle properties: CenterPoint and CenterPart.
These properties add center point to the needle. This point can be bound, for example to the Joint center. CenterPart property sets ratio of the StartPoint – CenterPoint distance to the full needle length.
StartPoint and CenterPoint are tightly connected. When the StartPoint property is changed, CenterPoint changes as well and vice versa.
Changes in the Scale Elements
The greatest change is that the elements such as Ticks, Scale Labels, Scale Marks, Ranks, Tank can now be added exclusively in the Scale type objects, etc. After you drag and drop the element onto the work area you will see a window that will offer you to select a scale to which the added element should bind.
Adding a new scale in the Scale Element dialog
If no scale is available in the gauge it’s possible to add it in the Scale element dialog.
Now it’s also possible to visually select how ticks will be positioned relatively to a Joint or Guide, and select symbol type for Scale Marks.
 |
 |
Instead of summary
I like developing good products. It’s hard to express the feeling when the functionality we were thinking over finally comes into being, when new features that were growing in collaborative( and sometimes very heated) discussions and disputes can be finally “touched” and used.
And the main thing is the complete confidence that we did everything right. And we are confident. Download a new version of Perfect Widgets and you will understand it!
