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 Intro.

Related samples

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 Intro.

Related samples