Meter and Gauge Controls Drawn in Nodes Connected by Flows
Instruments are Panels that include:
- a scale which is a "Graduated" Panel showing a possible range of values
- one or more indicators that show the instrument's value
Optionally there are other TextBlocks or Shapes that show additional information. Indicators can be Shapes or TextBlocks or more complicated Panels. For more about scales, please read Graduated Panels. For simplicity, all of these instruments only show one value. But you could define instruments that show multiple values on the same scale, or that have multiple scales.
When an instrument is also a control, the user can modify the instrument's value. When the instrument is editable, there may be a handle that the user can drag. This might be the same as the indicator or might be a different object.
This sample defines five different types of instruments.
- Horizontal, a horizontal scale with a bar indicator and a slider handle
- Vertical, a vertical scale with a bar indicator and a slider handle
- NeedleMeter, a curved scale with a straight needle indicator
- CircularMeter, a circular scale with a polygonal needle indicator
- BarMeter, a circular scale with an annular bar indicator
The value to be shown by the instrument is assumed to be the data.value property.
The value is shown both textually in a TextBlock and graphically using an indicator on the
scale. If the value of data.editable is true,
- the user can drag something to change the instrument's value -- the value is limited by the Panel.graduatedMin and Panel.graduatedMax values
- the user can in-place edit the TextBlock showing the value (if the node is selected, hit the F2 key)
Of course you can change the details of anything you want to use. You might want to add more TextBlocks to show more information. A few properties already have data Bindings, such as:
- TextBlock.text from
data.text, for the name of the instrument - Panel.graduatedMin from
data.min, to control the range of the scale - Panel.graduatedMax from
data.max, to control the range of the scale - (various) from
data.color, to control some colors used by the instrument
GoJS Features in this sample
Geometry Path Strings
The GoJS Geometry class controls the "shape" of a Shape, whereas the Shape.fill and Shape.stroke and other shape properties control the colors and appearance of the shape. For common shape figures, there are predefined geometries that can be used by setting Shape.figure. However one can also define custom geometries.
One can construct any Geometry by allocating and initializing a Geometry of at least one PathFigure holding some PathSegments. But you may find that using the string representation of a Geometry is easier to write and save in a database. Use the static method Geometry.parse or the Shape.geometryString property to transform a geometry path string into a Geometry object.
More information can be found in the GoJS learn pages.
Tools
Tools handle all input events, such as mouse and keyboard interactions, in a Diagram. There are many kinds of predefined Tool classes that implement all of the common operations that users do.
For flexibility and simplicity, all input events are canonicalized as InputEvents and redirected by the diagram to go to the Diagram.currentTool. By default the Diagram.currentTool is an instance of ToolManager held as the Diagram.toolManager. The ToolManager implements support for all mode-less tools. The ToolManager is responsible for finding another tool that is ready to run and then making it the new current tool. This causes the new tool to process all of the input events (mouse, keyboard, and touch) until the tool decides that it is finished, at which time the diagram's current tool reverts back to the Diagram.defaultTool, which is normally the ToolManager, again.
More information can be found in the GoJS learn pages.