Siticone Spectrum Gauge
The SiticoneSpectrumGauge is a vibrant, high-fidelity radial gauge designed for performance metrics.
It features a radiant scale, fluid needle animation, segmented outer rings, and a glowing pulse effect, making it perfect for speedometers, RPM counters, or system load monitors.
Appearance & Theme
Properties to control the visual style, colors, and effects of the gauge.
| Property | Type | Description & Usage |
|---|---|---|
ColorTheme |
Enum |
gauge.ColorTheme = SpectrumColorTheme.Cyan; Sets a predefined color palette (e.g., Magenta, Cyan, NeonGreen, LavaOrange). Changing this automatically updates primary, secondary, and needle colors.
|
PrimarySpectrumColor |
Color | The main color used for the active scale sections and outer segments. |
SecondarySpectrumColor |
Color | The secondary color, often used for background tracks or inner rings. |
SpectrumBackgroundColor |
Color | The overall background color of the circular gauge face. |
NeedleType |
Enum |
gauge.NeedleType = SpectrumNeedleType.Blade; Defines the needle shape. Options: Classic, Modern, Sharp, Glow, Blade.
|
NeedleSpectrumColor |
Color | The color of the indicator needle. |
NeedleLength |
int | Percentage (50-95) determining how long the needle is relative to the radius. |
NeedleWidth |
int | Thickness of the needle in pixels. |
GlowIntensity |
float |
gauge.GlowIntensity = 1.5f; Controls the strength of the glow effect. Range 0.1 to 3.0. |
EnableGlowPulse |
bool |
gauge.EnableGlowPulse = true; If true, the gauge emits a rhythmic breathing glow animation. |
ShowCenterHub |
bool | Toggles the visibility of the central cap where the needle originates. |
CenterHubSize |
int | Diameter of the central hub in pixels. |
CenterHubColor |
Color | Color of the central hub. |
ShowOuterRing |
bool | Toggles the thin decorative ring around the gauge circumference. |
ShowOuterSegments |
bool | Displays the segmented blocks outside the main scale. |
OuterSegmentCount |
int | Number of segments in the outer ring. |
Scale & Ticks
Configure the layout of the measuring scale, ticks, and numbers.
| Property | Type | Description & Usage |
|---|---|---|
ScaleStartAngle |
int | The angle in degrees where the scale begins (default 135). |
ScaleSweepAngle |
int | The total arc length of the scale in degrees (default 270). |
MajorTickDivisions |
int | Number of major intervals on the scale. |
MinorTicksPerMajor |
int | Number of small ticks between major ticks. |
MajorTickLength |
float | Length of major tick marks. |
MinorTickLength |
float | Length of minor tick marks. |
TickStrokeWidth |
int | Thickness of tick marks. |
ShowScaleNumbers |
bool | Toggles the display of numeric values along the scale. |
ScaleNumberColor |
Color | Color of the numeric labels on the scale. |
TickMarkColor |
Color | Color of the tick marks. |
ScaleNumberFont |
Font | Font used for drawing the scale numbers. |
Data & Digital Display
Properties for setting speed/values and formatting the central digital readout.
| Property | Type | Description & Usage |
|---|---|---|
SpeedValue |
float |
gauge.SpeedValue = 120; The current value indicated by the needle. Changing this triggers animation if enabled. |
MinimumSpeed |
float | The lowest value on the scale (start point). |
MaximumSpeed |
float | The highest value on the scale (end point). |
EnableFluidMotion |
bool |
gauge.EnableFluidMotion = true; When true, the needle interpolates smoothly to the new value instead of jumping instantly. |
MotionSpeed |
int | The speed of the needle animation (1-100). Higher is faster. |
ShowDigitalValue |
bool | Displays the numeric value in the center of the gauge. |
SpeedValueFormat |
string | Standard .NET format string for the value (e.g., "0", "0.00"). |
DecimalPlaces |
int | Number of decimal digits to show in the digital readout. |
SpeedUnitText |
string |
gauge.SpeedUnitText = "KM/H"; Text suffix shown below the value. |
GaugeTitle |
string | Optional title text displayed at the top of the gauge. |
ShowDataDisplays |
bool | Enables the secondary data fields at the bottom. |
DataDisplay1 / 2 |
string | Secondary text fields shown at the bottom of the gauge (e.g., "01:249", "POWER"). |
Public Methods
Programmatic control over the gauge state.
// Updates the speed value.
// animate: If true, needle moves smoothly. If false, it jumps instantly.
public void SetSpeedValue(float speed, bool animate)
{
siticoneSpectrumGauge1.SetSpeedValue(80, true);
}
// Increments the current speed by a delta amount.
public void AddSpeedValue(float speed, bool animate = true)
{
// Accelerate by 5
siticoneSpectrumGauge1.AddSpeedValue(5);
}
// Resets the gauge needle to the MinimumSpeed.
public void Reset(bool animate = true)
{
siticoneSpectrumGauge1.Reset();
}
Events
// 1. SpeedValueChanged
// Fired immediately when the target property changes (before animation finishes).
gauge.SpeedValueChanged += (s, e) =>
{
Console.WriteLine($"Target changed from {e.OldSpeed} to {e.NewSpeed}");
};
// 2. AnimationCompleted
// Fired when the needle physically stops moving after reaching the target.
gauge.AnimationCompleted += (s, e) =>
{
Console.WriteLine("Needle has settled.");
};
Comprehensive Examples
1. EV Speedometer Configuration
Setup for a modern electric vehicle dashboard.
private void SetupDashboard()
{
// Configure for electric vehicle speedometer
spectrumGauge1.ColorTheme = SpectrumColorTheme.Cyan;
spectrumGauge1.NeedleType = SpectrumNeedleType.Glow;
// Data Range
spectrumGauge1.MinimumSpeed = 0;
spectrumGauge1.MaximumSpeed = 240;
spectrumGauge1.SpeedUnitText = "KM/H";
spectrumGauge1.GaugeTitle = "MAIN ENGINE";
// Smooth animation
spectrumGauge1.EnableFluidMotion = true;
spectrumGauge1.MotionSpeed = 20;
// Add dynamic glow
spectrumGauge1.EnableGlowPulse = true;
spectrumGauge1.GlowIntensity = 1.5f;
// Set initial data displays
spectrumGauge1.ShowDataDisplays = true;
spectrumGauge1.DataDisplay1 = "SPORT";
spectrumGauge1.DataDisplay2 = "98%";
}
private void UpdateSpeed(float currentSpeed)
{
// The gauge handles the smoothing automatically
spectrumGauge1.SpeedValue = currentSpeed;
}
2. RPM Gauge with Warning
Configuration for a tachometer with warning indicators.
public void SetupTachometer()
{
spectrumGauge1.ColorTheme = SpectrumColorTheme.Red;
spectrumGauge1.MaximumSpeed = 8000;
spectrumGauge1.GaugeTitle = "RPM x1000";
spectrumGauge1.SpeedUnitText = "";
spectrumGauge1.SpeedValueFormat = "0";
// Aggressive needle
spectrumGauge1.NeedleType = SpectrumNeedleType.Blade;
}
Designer Presets
Access these themes via the smart tag menu to instantly style the gauge.
- MagentaSpectrumTheme: Deep purple background with pink/magenta highlights.
- ElectricCyanTheme: High-contrast cyan on black, perfect for EV dashboards.
- RoyalPurpleTheme: Elegant royal purple theme.
- SkyBlueTheme: Professional aviation blue.
- NeonGreenTheme: Matrix-style neon green.
- LavaOrangeTheme: Intense orange/red gradient for thermal or engine monitoring.
- BloodRedTheme: Critical warning red theme.
- MinimalSpectrumTheme: Light background, subtle colors, no glow effects.