Gauge display#
Many displays just need to visualize the current value (at the cursor) of one or more display parameters.
As it is such a common use case, ParameterSampleDisplayViewModelBase has been provided to make creating such a display quick and simple.
Note
The code for this tutorial can be reviewed at Tutorials/SimpleGaugePlugin
Start the tutorial by creating a new display from scratch named SimpleGaugePlugin
.
Add a reference to CircularGauge
#
Add a NuGet reference to CircularGauge
Update the View class#
Configure the user interface as follows
- Wrap an
ItemsControl
to display a collection of display parameter values within aScrollViewer
withHorizontalScrollBarVisibility=Auto
andVerticalScrollBarVisibility=Auto
- Bind
ItemsSource
attribute to the View ModelParameters
property
- Bind
- Set the
ItemsPanel
element to aUniformGrid
- Set the
ItemTemplate
element to aDataTemplate
containing aCircularGaugeControl
- Bind the
MinValue
attribute to the Parameter View ModelDisplayMinimum
property - Bind the
MaxValue
attribute to the Parameter View ModelDisplayMaximum
property - Bind the
CurrentValue
attribute to the Parameter View ModelValue
property - Bind the
DialText
attribute to the Parameter View ModelDescription
property
- Bind the
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding Parameters}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<circularGauge:CircularGaugeControl
Radius="150"
BorderThickness="0"
ScaleRadius="110"
ScaleStartAngle="120"
ResetPointerOnStartUp="True"
ScaleSweepAngle="300"
PointerLength="85"
PointerCapRadius="35"
MinValue="{Binding DisplayMinimum}"
MaxValue="{Binding DisplayMaximum}"
MajorDivisionsCount="10"
MinorDivisionsCount="5"
CurrentValue="{Binding Value}"
RangeIndicatorThickness="0"
RangeIndicatorRadius="0"
ScaleLabelRadius="90"
ScaleLabelSize="40,20"
ScaleLabelFontSize="11"
ScaleLabelForeground="Black"
MajorTickSize="10,3"
MinorTickSize="3,1"
MajorTickColor="DarkGray"
MinorTickColor="DarkGray"
ImageOffset="-50"
GaugeBackgroundColor="DarkSlateGray"
PointerThickness ="12"
OptimalRangeStartValue="300"
OptimalRangeEndValue="700"
DialTextOffset="40"
DialText="{Binding Description}"
DialTextColor="WhiteSmoke"
DialBorderThickness="16" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
Add Parameter View Model class#
Add a simple View Model class to represent a display parameter value (derived from ParameterSampleViewModelBase
).
Add the following backers, properties and method overrides
string
field nameddescription
as backer for theDescription
propertydouble
field nameddisplayMaximum
as backer for theDisplayMaximum
propertydouble
field nameddisplayMinimum
as backer for theDisplayMinimum
propertystring
property namedDescription
to display within the gaugedouble
property namedDisplayMaximum
to define the scale of the gaugedouble
property namedDisplayMinimum
to define the scale of the gauge- override
OnUpdate()
to set theDisplayMinimum
andDisplayMaximum
properties - override
OnValueChanged()
to update theDescription
property
public sealed class ParameterViewModel : ParameterSampleViewModelBase
{
private string description;
private double displayMaximum;
private double displayMinimum;
public string Description
{
get => this.description;
set => this.SetProperty(ref description, value);
}
public double DisplayMaximum
{
get => this.displayMaximum;
set => this.SetProperty(ref displayMaximum, value);
}
public double DisplayMinimum
{
get => this.displayMinimum;
set => this.SetProperty(ref displayMinimum, value);
}
protected override void OnUpdate()
{
this.DisplayMinimum = this.DisplayParameter.SessionParameter.Minimum;
this.DisplayMaximum = this.DisplayParameter.SessionParameter.Maximum;
}
protected override bool OnValueChanged(double? oldValue, double newValue)
{
this.OnUpdate();
if (newValue < this.DisplayMinimum || newValue > this.DisplayMaximum)
{
return false;
}
this.Description = $"{this.Name}\r{this.Value}";
return true;
}
}
Update the View Model class#
Derive from ParameterSampleDisplayViewModelBase and allow parameters by specifying the DisplayPluginSettings
attribute
[DisplayPluginSettings(ParametersMaxCount = 100)]
public sealed class SampleDisplayViewModel : ParameterSampleDisplayViewModelBase<ParameterViewModel>
Inject the ISignalBus
, IDataRequestSignalFactory
and ILogger
services into the View Model constructor and pass to the base constructor
public SampleDisplayViewModel(
ISignalBus signalBus,
IDataRequestSignalFactory dataRequestSignalFactory,
ILogger logger) :
base(signalBus, dataRequestSignalFactory, logger)
Override OnCreateParameterViewModel
and return an instance of Parameter View Model
protected override ParameterViewModel OnCreateParameterViewModel() => new ParameterViewModel();
Copy CircularGauge.dll to ATLAS program files#
Add a post build step via project settings
call "$(SolutionDir)scripts\deploy.bat" "$(TargetDir)CircularGauge.dll“
Testing the display#
To view a gauge for each display parameter
- Add a session via the Session Browser to the compare set associated with the display
- Add some display parameters to the display via the Parameter Browser
- Use a Waveform display to change the cursor